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 11Provide the Mermaid code enclosed by the ```<mermaid>``` tags: 12 13 <mermaid> 14 graph TD 15 A(**mermaid**)-->B((__plugin__)) 16 A-->C(((//for//))) 17 B-->D[["[[https://www.dokuwiki.org/dokuwiki|Dokuwiki]]"]] 18 C-->D 19 </mermaid> 20 21This will be rendered by the plugin and shown as: 22 23 24 25The width and height of the container of the diagram can be adjusted using 26 27 <mermaid #width #height> 28 29where #width and #height can take any value supported by CSS: 30 31 <mermaid 100% 1cm> 32 33For more examples and details on the syntax, see https://mermaid.js.org/intro/. 34 35## Configuration and Settings 36 37There is only one setting. You can choose which Mermaid version you want to use: 38 39 - the locally hosted version 40 - the remotely hosted, currently available, latest version 41 - a remotely hosted specific version 42 43## Potential problems 44 45The syntax of Mermaid and DokuWiki can clash in rare cases. If, for example, you want a link within a box, make your intensions clear by using quotation marks```["[[link]]"]```. If you encounter other problems, feel free to report them and open an issue. 46 47## Further information 48 49Mermaid supports multiple other diagrams besides the shown flowchart, for example: 50 - Sequence diagrams 51 - Gantt diagrams 52 - Class diagrams 53 - Git graphs 54 - User Journey diagrams 55 56For more information, see https://mermaid.js.org/intro/.
){kind=link}