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 Mermaid syntax, see https://mermaid.js.org/intro/. 34 35### Raw mode 36 37If needed, the Mermaid code can be passed on without any processing or rendering by DokuWiki. Insert a line containing only the word raw before the Mermaid code. 38 39 <mermaid> 40 raw 41 graph TD 42 A(**mermaid**)-->B((__plugin__)) 43 A-->C(((//for//))) 44 B-->D[["[[https://www.dokuwiki.org/dokuwiki|Dokuwiki]]"]] 45 C-->D 46 </mermaid> 47 48This allows to use the full feature set of Mermaid without interference from DokuWiki, albeit at the expanse of not being able to use any functionality provided by DokuWiki. 49 50## Configuration and Settings 51 52There is only one setting. You can choose which Mermaid version you want to use: 53 54 - the locally hosted version 55 - the remotely hosted, currently available, latest version 56 - a remotely hosted specific version 57 58## Known Problems 59 60The syntax of Mermaid and DokuWiki can clash in rare cases. If you encounter problems, feel free to report them and open an issue. 61 62You can sidestep these problems by using the [raw mode](#raw-mode) which disables the processing by DokuWiki, or adjust your Mermaid code as shown below. 63 64### Usage of Brackets 65 66Mermaid and DokuWiki both use brackets. If you need to use them both at the same time, make your intentions clear by using quotation marks like ```["[[link]]"]```. 67 68### Binding Click Events 69 70Mermaid 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: 71 72 <mermaid> 73 flowchart TD 74 A[Link] 75 click A "https://www.github.com" 76 </mermaid> 77 78please use 79 80 <mermaid> 81 flowchart TD 82 A["[[https://www.github.com|Link]]"] 83 </mermaid> 84 85## Further Information 86 87Mermaid supports multiple other diagrams besides the shown flowchart, for example: 88 - Sequence diagrams 89 - Gantt diagrams 90 - Class diagrams 91 - Git graphs 92 - User Journey diagrams 93 94For more information, see https://mermaid.js.org/intro/. 95 96## License 97 98This project is licensed under the GNU General Public License v2.0. See the [LICENSE](LICENSE) file for details. 99 100Mermaid is licensed under the MIT License. See the [LICENSE Mermaid](LICENSE%20Mermaid) file for details.
){kind=link}