It's better when it's simple

User Tools

Site Tools


flowchartjs Plugin

Compatible with DokuWiki

  • 2024-02-06 "Kaos" unknown
  • 2023-04-04 "Jack Jackrum" yes
  • 2022-07-31 "Igor" yes
  • 2020-07-29 "Hogfather" yes

plugin Draw flowchart (SVG) based on flowchart.js

Last updated on

Similar to diagram, ditaa, flowcharts, graphviz

Tagged with diagram, flowchart


Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.


A complex example copied from flowchart.js

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

The output is as the above snapshot.


Basic syntax:

<flowchartjs style width height>...</flowchart>
  • style flowchart display style. Currently it can be one of this:
    • (blank) — no style
    • default — default style
    • or other available style (see below)
  • width and height CSS-style values to control the width/height of this SVG. blank leaves its default.
  • ... flowchart definition, which should follow grammar in flowchart.js.

Configuration and Settings

Through Amin Plugin (though ugly), managers can upload a new or update existing flowchart style (JSON file, must with .json extension, and the filename will be the style name), and delete any styles.

Toolbar FC inserts pair of flowchartjs tag, while Fcs toggles list of available style.

Change Log

  • 2023-08-09
    • fix the way to control the svg size
    • update the js library
    • update the contact info
  • 2021-01-15
    • fix the bug not loading style correctly
  • 2020-10-10
    • update Rapheal library to 2.3.0 and flowchart to 1.14.1
  • 2019-11-28
    • solving issue about style not correctly loading (by chaotic-bruno)
  • 2019-06-19
    • add extra parameters to control svg `width` and `height`
  • 2019-05-02
    • fix warning messages and update libraries
  • 2018-07-03
    • fix compatibility warnings
  • 2018-06-03
    • Merge pull request from apppies/library_update
      1. update flowchart to 1.11.0
      2. update Raphael to 2.2.1
  • 2018-01-13
    • many updates:
      1. fix bug from leading space by updating flowchart.js library,
      2. add admin plugin which allows management flowchart styles,
      3. add toolbar facilitating selection of flowchart style.
  • 2017-02-16
    • Initial release
plugin/flowchartjs.txt · Last modified: 2023-08-11 08:00 by 2603:3024:183b:b100:2dea:3f7c:8181:9c99

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki