xref: /plugin/mermaid/README.md (revision 6e5341c627f9f81fae7911a595b98c51a67840eb)
1# Mermaid Plugin for DokuWiki
2
3This is a plugin for [Dokuwiki](https://www.dokuwiki.org/dokuwiki). It provides support for the diagramming tool [Mermaid](https://mermaid.js.org/). Mermaid is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
4
5## Installation
6
7Install the plugin using the [Dokuwiki Plugin Manager](https://www.dokuwiki.org/plugin:plugin). Refer to [Plugins](https://www.dokuwiki.org/plugins|Plugins) on how to install plugins manually.
8
9## Usage
10
11    <mermaid>
12    graph TD;
13        A-->B;
14        A-->C;
15        B-->D;
16        C-->D;
17    </mermaid>
18
19```mermaid
20graph TD;
21    A-->B;
22    A-->C;
23    B-->D;
24    C-->D;
25```
26
27The width and height of the container of the diagram can be adjusted using
28
29    <mermaid #width #height>
30
31where #width and #height can take any value supported by CSS:
32
33    <mermaid 100% 1cm>
34
35For more examples and details on the syntax, see https://mermaid.js.org/intro/.
36
37## Configuration and Settings
38
39There is only one setting. You can choose which Mermaid version you want to use:
40
41 - the locally hosted version
42 - the remotely hosted, currently available, latest version
43 - a remotely hosted specific version
44
45## Further information
46
47Mermaid supports multiple other diagrams besides the shown flowchart, for example:
48 - Sequence diagrams
49 - Gantt diagrams
50 - Class diagrams
51 - Git graphs
52 - User Journey diagrams
53
54For more information, see https://mermaid.js.org/intro/.