====== flowcharts Plugin ======

---- plugin ----
description: Add flowcharts and diagrams to your DokuWiki with an intuitive syntax — based on mermaidjs
author     : jakob1111 
email      : mail@jakobschwichtenberg.com 
type       : syntax
lastupdate : 2020-07-30
compatible : Igor, Hogfather, frusterick manners, greebo, 
depends    : 
conflicts  : 
similar    : diagram, a2s, flowchartjs, graphviz, ditaa, sequencediagram, plantuml
tags       : diagram, images, java, media, chart, svg

downloadurl: https://github.com/jakob1111/dokuwiki-plugin-flowcharts/zipball/master
bugtracker : https://github.com/jakob1111/dokuwiki-plugin-flowcharts/issues
sourcerepo : https://github.com/jakob1111/dokuwiki-plugin-flowcharts/
donationurl: 

screenshot_img : https://github.com/jakob1111/dokuwiki-plugin-flowcharts/raw/master/screnshotflowchart.png
----

The diagrams and flowcharts are generated with [[https://mermaidjs.github.io/|mermaidjs.github.io]]

**With the current version of the plugin it is crucial to disable the following entity replacements from the DokuWiki**. Therefore, add this local configuration file:

<code - conf/entities.local.conf>
<->
->
<-
---
--
</code>

Otherwise, DokuWiki will render ''%%->%%'' to -> and then the diagrams are not rendered correctly since, e.g. -> is the wrong syntax and we need ''%%->%%'' etc. (For more information, see [[:entities]] and also [[https://github.com/dokuwiki/dokuwiki/blob/master/conf/entities.conf|conf/entities.conf]])

Alternatively, you can add the arrows in the diagram using

<code>%%-->%%</code>


===== Installation =====


Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.

===== Examples/Usage =====

<code>
<flow>
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</flow>
</code>

Will be rendered to

{{https://github.com/jakob1111/dokuwiki-plugin-flowcharts/raw/master/examplediagram.png}}

A nice feature is that each element of a diagram can be made clickable by using

<code>
<flow>
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
click A "SOMEPAGE"
</flow>
</code>

Clicking on ''A'' will take you to %%http://yoururl.com/SOMEPAGE%%.

The next example shows how to get multiple words including new-lines in the boxes. Two of these boxes provide a clickable link to a local DokuWiki page.

<code>
<flow>
flowchart TD;
  a["Would you like 
  me to help you?"];
  b["What can I
  help you with?"];
  c["Ok, no problem.
  Please do your homework."];
  a -- No --> c;
  a -- Yes --> b;
  click a "../path/to/local_wiki_page_1"
  click b "../path/to/local_wiki_page_2"
</flow>
</code>

It renders to this
{{ https://osbit.nl/various/2023-05-10_09_30_50_test.png }}

The next code shows a variation of the last diagram.

<code>
<flow>
flowchart TD;
  a["Would you like 
  me to help you?"];
  b["What can I
  help you with?"];
  c["Ok, no problem.
  Please do your homework."];
  a --> No;
  a --> Yes;
  Yes --> b;
  No --> c;
  click a "../path/to/local_wiki_page_1"
  click b "../path/to/local_wiki_page_2"
</flow>
</code>

Showing
{{ https://osbit.nl/various/2023-05-10_08_58_18_test.png }}


===== Syntax =====

For further details on the syntax, see [[https://mermaidjs.github.io/|mermaidjs.github.io]]. Diagrams can be built in realtime using [[https://mermaidjs.github.io/mermaid-live-editor/|Mermaid Live Editor]].

===== Remarks =====

For Igor the diagram rendered was very small. I changed the following to the plugin's stylesheet called ''mermaid-override.css'' to extend the diagram vertically. //-- JohnG//

<code css>
.mermaid svg {
  width: 100%;
  height: 40vh; /* Causes schema to fill 40% of the viewable height. */
}
</code>

This is good for vertical diagrams, for horizontal diagrams you might want to set height to 100% which will avoid empty space above and below if your diagram does not fill "40vh". //-- thalueng//

Better yet: Set ''height: auto;'' in the above snippet (because it gets set to 1.2em by Dokuwiki for all svg)