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.