README.md
1# [Flowchart Plugin]((http://dokuwiki.org/plugin:flowchartjs)) for Dokuwiki
2
3[](https://github.com/ghbore/flowchartjs/actions/workflows/test-2023-04-04.yml)
4[](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
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.
){kind=link}
){kind=link}
){kind=link}