Flowchart Plugin for Dokuwiki

Draw flowchart (SVG) based on flowchart.js

Example

The example copied from flowchart.js:

<flowchartjs default>
  st=>start: Start|past:>http://www.google.com[blank]
  e=>end: End|future:>http://www.google.com
  op1=>operation: My Operation|past
  op2=>operation: Stuff|current
  sub1=>subroutine: My Subroutine|invalid
  cond=>condition: Yes
  or No?|approved:>http://www.google.com
  c2=>condition: Good idea|rejected
  io=>inputoutput: catch something...|future
  st->op1(right)->cond
  cond(yes, right)->c2
  cond(no)->sub1(left)->op1
  c2(yes)->io->e
  c2(no)->op2->e
</flowchartjs>

The output looks like:

Syntax

The Basic syntax is:

<flowchartjs style width height>...</flowchart>

where,

• style: This parameter refers to the chosen display style for the flowchart. At present, it offers the following options:
  • (blank) — no style
  • default — the default style
  • Alternatively, you can select from other available styles (see below about how to manage the styles)
• 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.
• ...: This section encompasses the flowchart definition itself, which should adhere to the grammar outlined in flowchart.js

Configuration and Settings

Using 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.

Within the textbox, toolbar FC icon will insert a pair of flowchartjs tags, and F_c^s toggles the comprehensive list of available styles.