Does Stack Exchange Markdown support MermaidJS?

Question

MermaidJS was my favourite cool thing in 2018!

But I can't find a way to draw MermaidJS graph or sequenceDiagram on Stack Overflow.

I've seen many Markdown tools such as StackEdit, Typora, Markdown Plus and Markdown Monster support MermaidJS, and I feel a little bit restricted not having the luxury of this cool technology on Stack Exchange sites.

Adding <!-- language: mermaid-js --> or triple back-ticks (```mermaid) didn't work so I assumed it is not supported.

I think this would be very useful in asking design-related questions, or in explaining complex scenarios.

So will it ever be supported? if not, what are the alternatives?

Answer 1

It doesn't but if a site has Stack Snippets enabled you can use that functionality to include your diagram.

The mermaid documentation gives an example of using Mermaid in a way that's compatible with Snippets.

The JavaScript snippet section to call the mermaidAPI in a separate script tag may not be needed.

The html snippet section must include:

• mermaid address using a script tag in the src section
• mermaid code/ graph definition declared inside a <pre> with class=mermaid

mermaid.initialize({ startOnLoad: true });

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

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

The only downside is that visitors of your post have to click the Run code snippet button to actually see your diagram.

Answer 2

To indirectly post your mermaid diagram, you can edit online with https://mermaid.live/.

You can then share your chart with a link that you can use in markdown (click on the picture to see the code and edit)

[![Node A connects to Node B, which splits into a "forbidden" node and a node with a spinner](https://mermaid.ink/img/eyJjb2RlIjoiICAgIGdyYXBoIExSXG4gICAgICBBIC0tLSBCXG4gICAgICBCLS0-Q1tmYTpmYS1iYW4gZm9yYmlkZGVuXVxuICAgICAgQi0tPkQoZmE6ZmEtc3Bpbm5lcilcbiAgICAgICIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In0sInVwZGF0ZUVkaXRvciI6ZmFsc2UsImF1dG9TeW5jIjp0cnVlLCJ1cGRhdGVEaWFncmFtIjpmYWxzZX0)](https://mermaid.live/edit#eyJjb2RlIjoiICAgIGdyYXBoIExSXG4gICAgICBBIC0tLSBCXG4gICAgICBCLS0-Q1tmYTpmYS1iYW4gZm9yYmlkZGVuXVxuICAgICAgQi0tPkQoZmE6ZmEtc3Bpbm5lcilcbiAgICAgICIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9)

Answer 3

As far as I know, no. It might be shiny but amusingly the preferred way to do graphs and diagrams on SE is using ASCII and code blocks.

  +--------------------+
  |                    |
  |                    |
  |   Computer         |
  |                    |    <--------------------------+
  |                    |          IF Man TOUCHES Computer
  |                    |          THEN Dog bites Man   |
  +--------+-----------+          ELSE SLEEP           |
           ^                                           |
           |                                           |
           X   No touchie!                             |
           |                                           |
           |                                           +
+----------+--------+
|                   |                            +----------------+
|                   |           Feeds dog        |                |
| Man               | +----------------------->  |                |
|                   |                            |    Dog         |
|                   |                            |                |
+-------------------+                            +----------------+

I use ASCII flow for this but there's other ways to do it