This plugin provides support for the diagramming tool Mermaid. Mermaid is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

Install the plugin using the Plugin Manager and the download URL above, which points to latest version of the plugin. Refer to Plugins on how to install plugins manually.

<mermaid>
graph TD
    A-->B
    A-->C
    B-->D
    C-->D
</mermaid>

results in

Mermaid supports multiple other diagrams besides the shown flowchart, for example:

• Sequence diagrams
• Gantt diagrams
• Class diagrams
• Git graphs
• User Journey diagrams

For full information, see https://mermaid.js.org/intro/.

The full syntax is

<mermaid #width #height>
    #Content
</mermaid>

#Content specifies the code that gets passed on to Mermaid for rendering. #Width and #Height are optional parameters and are used to specify the size of the container of the diagram. They can take any value supported by CSS, for example <mermaid 100% 1cm>. Default value is auto.

For more examples and details on the mermaid syntax, see https://mermaid.js.org/intro/.

There is only one setting. You can choose which Mermaid version you want to use:

• the locally hosted version
• the remotely hosted, currently available, latest version
• a remotely hosted specific version

In the file action.php, change the logLevel of Mermaid to debug for easier debugging by setting MERMAIDLOGLEVEL to debug.

• 2023-07-07
  • Bug fix
• 2023-07-04
  • Update to support the new Mermaid version 10.2
• 2023-04-05
  • Update to support the new Mermaid version 10.1
• 2023-02-28
  • Update to support the new Mermaid version 10.0
• 2023-02-03
  • Added setting to choose between a locally or remotely hosted mermaid file
• 2023-01-26
  • Initial release with Mermaid version 9.3