plugin:flowcharts
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
plugin:flowcharts [2020-09-03 10:33] – solewniczak | plugin:flowcharts [2023-10-16 16:46] (current) – [Remarks] 2a00:c380:e000:4ba1:ab57:11af:3a22:2c00 | ||
---|---|---|---|
Line 7: | Line 7: | ||
type : syntax | type : syntax | ||
lastupdate : 2020-07-30 | lastupdate : 2020-07-30 | ||
- | compatible : Hogfather, frusterick manners, greebo | + | compatible : Igor, Hogfather, frusterick manners, greebo, |
depends | depends | ||
conflicts | conflicts | ||
Line 23: | Line 23: | ||
The diagrams and flowcharts are generated with [[https:// | The diagrams and flowcharts are generated with [[https:// | ||
- | **With the current version of the plugin it is crucial to remove | + | **With the current version of the plugin it is crucial to disable |
- | < | + | < |
- | < | + | <-> |
- | -> → | + | -> |
- | <- ← | + | <- |
- | --- — | + | --- |
- | -- – | + | -- |
</ | </ | ||
- | Otherwise, DokuWiki will render '' | + | Otherwise, DokuWiki will render '' |
Alternatively, | Alternatively, | ||
Line 75: | Line 75: | ||
Clicking on '' | Clicking on '' | ||
+ | |||
+ | 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. | ||
+ | |||
+ | < | ||
+ | < | ||
+ | flowchart TD; | ||
+ | a[" | ||
+ | me to help you?" | ||
+ | b[" | ||
+ | help you with?" | ||
+ | c["Ok, no problem. | ||
+ | Please do your homework." | ||
+ | a -- No --> c; | ||
+ | a -- Yes --> b; | ||
+ | click a " | ||
+ | click b " | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | It renders to this | ||
+ | {{ https:// | ||
+ | |||
+ | The next code shows a variation of the last diagram. | ||
+ | |||
+ | < | ||
+ | < | ||
+ | flowchart TD; | ||
+ | a[" | ||
+ | me to help you?" | ||
+ | b[" | ||
+ | help you with?" | ||
+ | c["Ok, no problem. | ||
+ | Please do your homework." | ||
+ | a --> No; | ||
+ | a --> Yes; | ||
+ | Yes --> b; | ||
+ | No --> c; | ||
+ | click a " | ||
+ | click b " | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Showing | ||
+ | {{ https:// | ||
+ | |||
===== Syntax ===== | ===== Syntax ===== | ||
Line 80: | Line 125: | ||
For further details on the syntax, see [[https:// | For further details on the syntax, see [[https:// | ||
+ | ===== Remarks ===== | ||
+ | |||
+ | For Igor the diagram rendered was very small. I changed the following to the plugin' | ||
+ | |||
+ | <code css> | ||
+ | .mermaid svg { | ||
+ | width: 100%; | ||
+ | height: 40vh; /* Causes schema to fill 40% of the viewable height. */ | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | 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 " | ||
+ | |||
+ | Better yet: Set '' |
plugin/flowcharts.1599122008.txt.gz · Last modified: 2020-09-03 10:33 by solewniczak