# Introduce Mermaid diagram support

**URL:** https://discourse.gohugo.io/t/introduce-mermaid-diagram-support/11276
**Category:** feature
**Created:** [March 29, 2018, 6:11am UTC](https://discourse.gohugo.io/t/introduce-mermaid-diagram-support/11276 "2018-03-29T06:11:50Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![honghe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/honghe/32/5371_2.png) [@honghe](https://discourse.gohugo.io/u/honghe)
#### Post date: [March 29, 2018, 6:11am UTC](https://discourse.gohugo.io/t/introduce-mermaid-diagram-support/11276/1 "2018-03-29T06:11:50Z")

</div>

example:

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

```

This code block shall be rendered into diagram

![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/3/3e5c136dc82e8ceecb8be880ca258ae5868ff221.png)

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

```auto
  <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.

---

<div class="post-metadata">

### Author: ![BobHy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bobhy/32/12711_2.png) [@BobHy](https://discourse.gohugo.io/u/BobHy)
#### Post date: [December 28, 2020, 12:31am UTC](https://discourse.gohugo.io/t/introduce-mermaid-diagram-support/11276/2 "2020-12-28T00:31:17Z")

</div>

Someone figured out a clever hack to get this to work: [Use mermaid with code fences](https://discourse.gohugo.io/t/use-mermaid-with-code-fences/17211)

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!

---

<div class="post-metadata">

### Author: ![GothSeiDank](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/gothseidank/32/13028_2.png) [@GothSeiDank](https://discourse.gohugo.io/u/GothSeiDank)
#### Post date: [December 28, 2020, 1:14am UTC](https://discourse.gohugo.io/t/introduce-mermaid-diagram-support/11276/3 "2020-12-28T01:14:11Z")

</div>

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>`

---

<div class="post-metadata">

### Author: ![BobHy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bobhy/32/12711_2.png) [@BobHy](https://discourse.gohugo.io/u/BobHy)
#### Post date: [December 28, 2020, 1:19am UTC](https://discourse.gohugo.io/t/introduce-mermaid-diagram-support/11276/4 "2020-12-28T01:19:00Z")

</div>

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

---

<div class="post-metadata">

### Author: ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)
#### Post date: [December 28, 2020, 1:38am UTC](https://discourse.gohugo.io/t/introduce-mermaid-diagram-support/11276/5 "2020-12-28T01:38:11Z")

</div>