-14

Mermaid is a useful tool to generate diagrams with a simple language. For example, this code...

graph TD
  isMobile{theme.isMobile}
  isMobile --> |true| isPortrait{"theme.isPortrait"}
  isMobile --> |false| widthBig["width: 1200px"]

  isPortrait --> |true| widthMid["width: calc(100% - 162px)"]
  isPortrait --> |false| widthMobile["width: 800px"]

...will generate this image:

I use this type of flowchart diagram in some of my Stack Overflow answers to easily explain logic, concepts, etc.

The issue is that I have to use the online-editor to create this image and inject it in the post.

Would it be possible to have an editor like for HTML, CSS, and JavaScript that just takes the Mermaid syntax and directly renders the image?

7
  • Could you also explain why we should not have this feature if you downvote the question? Oct 29, 2020 at 18:42
  • 4
    First read this please, and adjust your FR accordingly. Second I did downvote, because I don't think it's worh SE dev's time to implement such a niche feature, which is only useful for a handful of quesitons or answers here. Oct 29, 2020 at 18:49
  • Niche or not, would be nice to have. I don't see the harm having it. Yes, anything devs add takes up resources from potentially other things, but I'm not in charge of project management.
    – yivi
    Oct 29, 2020 at 18:51
  • 2
    @yivi You'd have to evaluate which projects would get pushed back due to it. Also, you'd have to evaluate whether there'd be a performance impact. (That's actually the reason that MathJax isn't enabled on Stack Overflow, for example - too few use cases to justify the performance impact). Oct 29, 2020 at 18:53
  • I mean devs are here to continue improving this website. If they doesn't have something more important to develop (and yes probably they have) why not take the time for it. Oct 29, 2020 at 18:54
  • @johannchopin There's quite a long backlog already. Oct 29, 2020 at 19:06
  • 3
    @EJoshuaS Meh. I actually do not agree that we should play PM when voting for FRs. I have no way to know what projects would or wouldn't be pushed back or by how much, I have no view of the developers available, their skillsets, what are they engaged on, what's the current roadmap, the relative cost of this feature against other features, etc. I think one should simply judge on the attractiveness of the proposal. I believe there is merit in a richer editor, and there is value in having a diagram language available. And I like mermaid(s).
    – yivi
    Oct 29, 2020 at 19:25

2 Answers 2

9

Use a code-snippet as alternative for creating an image and having to fiddle with the online editor.

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

<div class="mermaid">
    graph TD
        isMobile{theme.isMobile}
        isMobile --> |true| isPortrait{"theme.isPortrait"}
        isMobile --> |false| widthBig["width: 1200px"]

        isPortrait --> |true| widthMid["width: calc(100% - 162px)"]
        isPortrait --> |false| widthMobile["width: 800px"]
</div>

Copied from my answer over on MSE: https://meta.stackexchange.com/a/321336

1
  • 2
    Wow, so this is not the first ever request for this feature? Color me shocked.
    – Cody Gray Mod
    Oct 30, 2020 at 7:07
6

I didn't downvote, but I don't see all that many questions or answers that use this.

There's also a clear workaround for not having this - include a screenshot (like you did in your post).

The only advantage of including the markup "directly" in the code is if another user had to update the diagram. The question becomes: how often does that actually happen? I don't have any statistics on that, but I'm guessing that it doesn't happen all that often.

I'm not completely opposed to including something like this, I just question how worthwhile it is to include it for what's effectively a very narrow use case.

You must log in to answer this question.

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