Adding mermaid diagrams to WordPress

Well, now that the rendering of LaTeX worked, might as well get diagrams working the same way. It’s the same idea, there is a WP Mermaid plugin and there is both Gutenberg block and there is a shortcode [ mermaid ]. Note that after you install a plugin, you need to restart any edit session to pick up new blocks.

So if you create a paragraph block and add but I found that this does not work. It probably has something to do with that fact that in Paragraph mode, you area actually adding all kinds of HTML which confused the parser. There doesn’t seem to be a way in Paragraph mode to add true newlines as there get converted into br tags. So you actually have to add a “shortcode” block for this to work, but if you are doing this you might as well just use the full Gutenberg block you get with the + sign.

[mermaid]
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
[/mermaid]

Now if you create a Gutenberg block then you not only get an easy place to put it, but you get a live preview so this is almost always the rgi

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John–>>Alice: Great! John->>Bob: How about you? Bob–>>John: Jolly good!