Compatible with DokuWiki

frusterick manners, greebo

• Download
• Report bugs

Add flowcharts and diagrams to your DokuWiki with an intuitive syntax — based on mermaidjs

Last updated on

2018-04-28

Provides

Syntax

Repository

Source

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Similar to a2s, diagram, ditaa, flowchartjs, graphviz, plantuml, sequencediagram

Tagged with chart, diagram, images, java, media, svg

By jakob1111

The diagrams and flowcharts are generated with mermaidjs.github.io

With the current version of the plugin it is crucial to remove the following lines from the DokuWiki file conf/entities.conf

<->     ↔
->      →
<-      ←
---     —
--      –

Otherwise, DokuWiki will render -> to → and then the diagrams are not rendered correctly since, e.g. → is the wrong syntax and we need -> etc. (For more information, see entities and also https://github.com/splitbrain/dokuwiki/blob/master/conf/entities.conf)

Alternatively, you can add the arrows in the diagram using

%%-->%%

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

<flow>
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</flow>

Will be rendered to

A nice feature is that each element of a diagram can be made clickable by using

<flow>
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
click A "SOMEPAGE"
</flow>

Clicking on A will take you to http://yoururl.com/SOMEPAGE.

For further details on the syntax, see mermaidjs.github.io. Diagrams can be built in realtime using Mermaid Live Editor.