plugin:flowcharts
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
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 ---- | ---- plugin ---- | ||
- | description: | + | description: |
author | author | ||
email : mail@jakobschwichtenberg.com | email : mail@jakobschwichtenberg.com | ||
type : syntax | type : syntax | ||
- | lastupdate : 2018-04-28 | + | lastupdate : 2020-07-30 |
- | compatible : frusterick manners, greebo | + | compatible : Igor, Hogfather, |
depends | depends | ||
conflicts | conflicts | ||
- | similar | + | similar |
tags : diagram, images, java, media, chart, svg | tags : diagram, images, java, media, chart, svg | ||
- | downloadurl: | + | downloadurl: |
- | bugtracker : http:// | + | bugtracker : https:// |
- | sourcerepo : http:// | + | sourcerepo : https:// |
donationurl: | donationurl: | ||
Line 21: | Line 21: | ||
---- | ---- | ||
- | 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, | + | Otherwise, |
Alternatively, | Alternatively, | ||
Line 44: | Line 43: | ||
- | Install | + | Search and install |
===== Examples/ | ===== Examples/ | ||
- | |||
- | |||
< | < | ||
Line 60: | Line 57: | ||
</ | </ | ||
- | will be rendered to | + | Will be rendered to |
{{https:// | {{https:// | ||
Line 77: | Line 74: | ||
</ | </ | ||
- | Clicking on `A` will take you to http:// | + | 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 ===== | ||
- | 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.1524937412.txt.gz · Last modified: 2018-04-28 19:43 by jakob1111