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, for example: 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## Known Problems 44 45The syntax of Mermaid and DokuWiki can clash in rare cases. If you encounter problems, feel free to report them and open an issue. 46 47### Usage of Brackets 48 49Mermaid and DokuWiki both use brackets. If you need to use them both at the same time, make your intensions clear by using quotation marks like ```["[[link]]"]```. 50 51### Binding Click Events 52 53Mermaid supports the [binding of click events](https://mermaid.js.org/syntax/flowchart.html#interaction). This can and will clash with DokuWikis own handling of links. Instead of: 54 55 <mermaid> 56 flowchart TD 57 A[Link] 58 click A "https://www.github.com" 59 </mermaid> 60 61please use 62 63 <mermaid> 64 flowchart TD 65 A["[[https://www.github.com|Link]]"] 66 </mermaid> 67 68## Further Information 69 70Mermaid supports multiple other diagrams besides the shown flowchart, for example: 71 - Sequence diagrams 72 - Gantt diagrams 73 - Class diagrams 74 - Git graphs 75 - User Journey diagrams 76 77For more information, see https://mermaid.js.org/intro/.
){kind=link}