Introduce Mermaid diagram support

feature
1

example:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

This code block shall be rendered into diagram

image

That is, Hugo not hightlight mermaid block, only transform the block to mermaid syntax, then mermaid.js can parses and renders it.

  <div class="mermaid">
  graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
  </div>

This is very useful feature for documenting code/high level design/architecture.

2

Someone figured out a clever hack to get this to work: Use mermaid with code fences

It depends on goldmark converting the fenced code block (with an unrecognized language) to a <pre class="mermaid-language"> rather than the mermaid default of class="mermaid", so it might break in the future…
But now I can use Typora to edit diagrams offline, and see the expected diagram in the blog, and that’s good!

3

Have you included the Mermaid Javascript? That should render the code to a diagram, when using the div.

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

4

… sorry, edited my post above before I noticed your reply here. But see the referenced article for a fix!