-2

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?

  • 3
    When you're making a feature request, you need to have more than vague "I think" statements. Why would it be useful exactly? Where? Do you have examples of questions or answers that could make use of it, and across SE sites? I also don't think SE supports even the full basic markdown. – TheWanderer Jan 1 at 0:20
3

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

Here is something I copied from the Mermaid usage documentation:

mermaid.initialize({startOnLoad:true});
<script src="https://unpkg.com/mermaid@8.0.0/dist/mermaid.min.js"></script>

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

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

  • This is awesome! Thanks for sharing! – Bizhan Jan 1 at 19:16
4

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

  • thanks! I think this is somehow what I've been looking for. – Bizhan Jan 1 at 2:11
  • 2
    "the preferred way to do graphs and diagrams on SE is using ASCII and code blocks": Preferred? Really?! I doubt so: do you have any statistics across the sites? – Massimo Ortolano Jan 1 at 14:02
  • Nope. Or posting an image :p – Journeyman Geek Jan 1 at 14:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .