How to show Mermaid diagrams?

[ymmtshny]

I'd like to convert mermaid syntax to svg diagrams. How can I do it?

If you write the following,

~~~mermaid
flowchart LR
A --> B
B --> C
D --> C
~~~

I'd like to show this.

[colinodell]

Hey there!

This library will render your input to HTML like this:

<pre><code class="language-mermaid">
flowchart LR
A --> B
B --> C
D --> C
</code></pre>

So you'd want to install and use the mermaid JS library on the front end of your site. Have it look for those .language-mermaid HTML elements and run its code to render them.

Alternatively, if you'd like to render your mermaid input inside of a <div class="mermaid"> element, you'll probably want to create a custom block renderer for FencedCodeBlock objects that looks something like this (untested):

final class MyCustomFencedCodeRenderer implements NodeRendererInterface
{
    private FencedCodeRenderer $defaultRenderer;

    public function __construct(FencedCodeRenderer $defaultRenderer)
    {
        $this->defaultRenderer = $defaultRenderer
    }
 
    public function render(Node $node, ChildNodeRendererInterface $childRenderer)
    {
        FencedCode::assertInstanceOf($node);

        // Does this contain a mermaid diagram?
        $infoWords = $node->getInfoWords();
        if (\count($infoWords) !== 0 && $infoWords[0] === 'mermaid') {
            return new HtmlElement('div', ['class' => 'mermaid'], Xml::escape($node->getLiteral())); 
        }

        // Nope - use the default renderer instead
        return $this->defaultRenderer->render($node, $childRenderer);
    }
}

Hope that helps!