Generate diagrams with Mermaid

This is an optional add-on disabled by default. If you have just upgraded your plugin or the option isn’t visible from the settings panel, try to re-save your settings first to refresh the interface. By clicking the Screen Options button, Mermaid should be listed inside the list of the available add-on, just activate the option by checking the field and pressing the “Apply” button like this :

Lots of users / developers are already using their own integration on the front-end via a child theme or custom snippets so the library is only loaded on the back-end for the preview feature. You can trigger the SVG rendering on the front-end as well by checking the option from the tab :

Inside your blog post, you need to use a standard HTML PRE tag with the mermaid classname like this to trigger the rendering (and not via code block fences) :

<pre class="mermaid">
    sequenceDiagram
        participant Alice
        participant Bob
        Alice->>Bob: Hello Bob, how are you?
        Bob-->>Alice: I am good thanks!
</pre>

Here is the rendering of the previous example:

    sequenceDiagram
        participant Alice
        participant Bob
        Alice->>Bob: Hello Bob, how are you?
        Bob-->>Alice: I am good thanks!

And everything should be fine 🖖