Differences

This shows you the differences between two versions of the page.

--- plugin:flowcharts [2018-04-28 19:43] – jakob1111
+++ plugin:flowcharts [2023-10-16 16:46] (current) – [Remarks] 2a00:c380:e000:4ba1:ab57:11af:3a22:2c00
@@ Line 2: / Line 2: @@
 ---- plugin ----
-description: Add flowcharts and diagrams to your Dokuwiki with an intuitive syntax - based on mermaidjs
+description: Add flowcharts and diagrams to your DokuWiki with an intuitive syntax — based on mermaidjs
 author     : jakob1111
 email      : mail@jakobschwichtenberg.com
 type       : syntax
-lastupdate : 2018-04-28
+lastupdate : 2020-07-30
-compatible : frusterick manners, greebo
+compatible : Igor, Hogfather, frusterick manners, greebo,
 depends    :
 conflicts  :
-similar    : diagram, a2s, flowchartjs, graphviz, ditaa, sequencediagram
+similar    : diagram, a2s, flowchartjs, graphviz, ditaa, sequencediagram, plantuml
 tags       : diagram, images, java, media, chart, svg
-downloadurl: http://github.com/jakob1111/dokuwiki-plugin-flowcharts/zipball/master
+downloadurl: https://github.com/jakob1111/dokuwiki-plugin-flowcharts/zipball/master
-bugtracker : http://github.com/jakob1111/dokuwiki-plugin-flowcharts/issues
+bugtracker : https://github.com/jakob1111/dokuwiki-plugin-flowcharts/issues
-sourcerepo : http://github.com/jakob1111/dokuwiki-plugin-flowcharts/
+sourcerepo : https://github.com/jakob1111/dokuwiki-plugin-flowcharts/
 donationurl:
@@ Line 21: / Line 21: @@
 ----
-The diagrams and flowcharts are generated with https://mermaidjs.github.io/.
+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 remove the following lines from the Dokuwiki file conf/entities.conf**
+**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>
+<->
-<->     ↔
+->
-->      →
+<-
-<-      ←
+---
----     —
+--
---      –
 </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 https://www.dokuwiki.org/entities and also https://github.com/splitbrain/dokuwiki/blob/master/conf/entities.conf.)
+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
@@ Line 44: / Line 43: @@
-Install the plugin using the [[plugin:plugin|Plugin Manager]] and the download URL above, which points to latest version of the plugin. Refer to [[:Plugins]] on how to install plugins manually.
+Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.
 ===== Examples/Usage =====
 <code>
@@ Line 60: / Line 57: @@
 </code>
-will be rendered to
+Will be rendered to
 {{https://github.com/jakob1111/dokuwiki-plugin-flowcharts/raw/master/examplediagram.png}}
@@ Line 77: / Line 74: @@
 </code>
-Clicking on `A` will take you to http://yoururl.com/SOMEPAGE.
+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/. Diagrams can be built in realtime using https://mermaidjs.github.io/mermaid-live-editor/.
+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)