Differences

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

--- plugin:flowcharts [2018-05-26 23:50] – [Installation] Klap-in
+++ plugin:flowcharts [2023-10-16 16:46] (current) – [Remarks] 2a00:c380:e000:4ba1:ab57:11af:3a22:2c00
@@ Line 6: / Line 6: @@
 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
@@ Line 23: / Line 23: @@
 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>
+<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/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 43: / Line 43: @@
-Search and install the plugin using the [[plugin:extension|Extension Manager]]. 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 =====
@@ Line 74: / Line 75: @@
 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 =====
@@ Line 79: / Line 125: @@
 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)