1# [Flowchart Plugin]((http://dokuwiki.org/plugin:flowchartjs)) for Dokuwiki 2 3[![2023-04-04a](https://github.com/ghbore/flowchartjs/actions/workflows/test-2023-04-04.yml/badge.svg)](https://github.com/ghbore/flowchartjs/actions/workflows/test-2023-04-04.yml) 4[![2022-07-31a](https://github.com/ghbore/flowchartjs/actions/workflows/test-2022-07-31.yml/badge.svg)](https://github.com/ghbore/flowchartjs/actions/workflows/test-2022-07-31.yml) 5 6**Draw flowchart (SVG) based on [flowchart.js](flowchart.js.org)** 7 8## Example 9The example copied from [flowchart.js](flowchart.js.org): 10 11``` 12<flowchartjs default> 13 st=>start: Start|past:>http://www.google.com[blank] 14 e=>end: End|future:>http://www.google.com 15 op1=>operation: My Operation|past 16 op2=>operation: Stuff|current 17 sub1=>subroutine: My Subroutine|invalid 18 cond=>condition: Yes 19 or No?|approved:>http://www.google.com 20 c2=>condition: Good idea|rejected 21 io=>inputoutput: catch something...|future 22 st->op1(right)->cond 23 cond(yes, right)->c2 24 cond(no)->sub1(left)->op1 25 c2(yes)->io->e 26 c2(no)->op2->e 27</flowchartjs> 28``` 29 30The output looks like: 31![](https://www.dokuwiki.org/lib/exe/fetch.php?tok=02f4a0&media=https%3A%2F%2Fimg-fotki.yandex.ru%2Fget%2F108168%2F85226599.d%2F0_c9c93_de8fec8e_orig.png) 32 33## Syntax 34The Basic syntax is: 35``` 36<flowchartjs style width height>...</flowchart> 37``` 38where, 39- *style*: This parameter refers to the chosen display style for the flowchart. At present, it offers the following options: 40 - (blank) — no style 41 - *default* — the default style 42 - Alternatively, you can select from other available styles (see below about how to manage the styles) 43- *width* and *height*: These parameters accept CSS-style values that allow for the adjustment of the width and height of the associated SVG element. Leaving these fields blank will maintain the default measurements. 44- *...*: This section encompasses the flowchart definition itself, which should adhere to the grammar outlined in [flowchart.js](flowchart.js.org) 45 46## Configuration and Settings 47Using the **Amin Plugin**, managers can upload new flowchart styles, or update existing ones through JSON files. These files must have the *.json* extension, and the filename serving as the designated style name. Manager also can remove any styles as needed. 48 49Within the textbox, toolbar **FC** icon will insert a pair of *flowchartjs* tags, and **F<sub>c</sub><sup>s</sup>** toggles the comprehensive list of available styles.