Introduce Mermaid diagram support


graph TD;

This code block shall be rendered into diagram


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]

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

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!

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

<script src=""></script>

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