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 51. [Installation](#installation) 62. [Usage](#usage) 73. [Configuration and Settings](#configuration-and-settings) 84. [Known Problems](#known-problems) 95. [Further Information](#further-information) 106. [License](#license) 11 12## Installation 13 14Install 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. 15 16## Usage 17 18Provide the Mermaid code enclosed by the ```<mermaid>``` tags: 19 20 <mermaid> 21 graph TD 22 A(**mermaid**)-->B((__plugin__)) 23 A-->C(((//for//))) 24 B-->D[["[[https://www.dokuwiki.org/dokuwiki|Dokuwiki]]"]] 25 C-->D 26 </mermaid> 27 28This will be rendered by the plugin and shown as: 29 30 31 32The width and height of the container of the diagram can be adjusted using 33 34 <mermaid #width #height> 35 36where #width and #height can take any value supported by CSS, for example: 37 38 <mermaid 100% 1cm> 39 40For more examples and details on the Mermaid syntax, see https://mermaid.js.org/intro/. 41 42### Raw mode 43 44If 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. 45 46 <mermaid> 47 raw 48 graph TD 49 A(**mermaid**)-->B((__plugin__)) 50 A-->C(((//for//))) 51 B-->D[["[[https://www.dokuwiki.org/dokuwiki|Dokuwiki]]"]] 52 C-->D 53 </mermaid> 54 55This 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. 56 57## Configuration and Settings 58 59No further configuration is required. 60 61### Version and Location 62 63You can choose which Mermaid version you want to use: 64 65 - the locally hosted version 66 - the remotely hosted, currently available, latest version 67 - a remotely hosted specific version 68 69### Default theme 70 71You can choose which Mermaid theme should be used as a default. The available themes are the five [integrated themes of Mermaid](https://mermaid.js.org/config/theming.html#available-themes). 72 73## Known Problems 74 75The syntax of Mermaid and DokuWiki can clash in rare cases. If you encounter problems, feel free to report them and open an issue. 76 77You 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. 78 79### Usage of Brackets 80 81Mermaid 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]]"]```. 82 83### Binding Click Events 84 85Mermaid 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: 86 87 <mermaid> 88 flowchart TD 89 A[Link] 90 click A "https://www.github.com" 91 </mermaid> 92 93please use 94 95 <mermaid> 96 flowchart TD 97 A["[[https://www.github.com|Link]]"] 98 </mermaid> 99 100### DokuWiki Search Highlight 101 102The search highlight of the DokuWiki search can prevent the proper parsing of the diagram, leading to an error. For that reason, it is disabled for the Mermaid diagrams. The search itself is not affected. 103 104## Further Information 105 106Mermaid supports multiple other diagrams besides the shown flowchart, for example: 107 - Sequence diagrams 108 - Gantt diagrams 109 - Class diagrams 110 - Git graphs 111 - User Journey diagrams 112 113For more information, see https://mermaid.js.org/intro/. 114 115## License 116 117This project is licensed under the GNU General Public License v2.0. See the [LICENSE](LICENSE) file for details. 118 119Mermaid is licensed under the MIT License. See the [LICENSE Mermaid](LICENSE%20Mermaid) file for details.
){kind=link}