Show HN: Mermaid Chart VS Code Plugin: Mermaid.js Diagrams in Visual Studio Code

It's worth pointing out that mermaidchart.com is NOT the official Mermaid project (https://mermaid.js.org/).

They're a for-profit company using the Mermaid name.

This creates a lot of confusion whenever the name comes up, which I suspect is deliberate.

Thats what I also found out, supported by llms, nice looking output. I have not found a proper left to right renderer for the activity diagrams

Agreed.

I use it mostly for sequence diagrams, but never hit a case where Mermaid felt better than PlantUML. It has been more of a forced transition as SaaS like Notion don't have a PlantUML integration or it's not available at the organization level.

It is. I had a meeting this past week where we discussed a novel workflow and I was able to generate an initial based on the transcription of our discussion so far, then two quick revisions based on realtime feedback.

Though, I’ve used it to generate visuals of pipelines too and find it often takes coaching similar to any output that requires very high precision.

Another bit is that gpt4o and sonnet both seem to want to put syntax breaking parentheses in and struggle to avoid continuing to do so.

Once it’s right, though it is a valuable new context artifact to include in further problem solving on a domain.

Is there anybody creating Mermaid diagrams with LLMs, especially? I tried with Claude and R1 (ProxyAI plugin for Jetbrains) and I had to find the correct phrasing to interact with it. Does the Mermaid-blessed AI have any secret sauce or can I instruct any LLM?

Re: LLMs & diagrams - in general, diagrams and tables as info compression tool (both in the general sense as well as in the practical concrete "optimise for token / context window" sense) - e.g. today as part of request to do 'deep research' on Dwarf Fortress personality / psychology system, at a late point (preparing to relaunch with a fresh empty context window among other things) I asked GPT 4.5 to (among other diagrams) draw me a concise 'psychological data flow diagram' (I was kind of vague and was deliberately pushing for abstraction / compression) -

among (many elaborate) other things it gave me - and I liked it (NB don't trust it willy nilly w.r.t. the below of course) - (auto-indented by 2 spaces hope formatting works) =>

```

  DWARVEN PSYCHE DATA FLOW
  ───────────────────────────────────────────────────────────────────
  
        External Events
    (Trauma, Success, Social)
              │
              ▼
  ┌─────────────────────────┐
  │     Event Processing    │─── Modulated by → Personality facets
  │ (Emotion generation)    │─── Modulated by → Personal values
  └───────────┬─────────────┘
              │ Generates
              ▼
  ┌─────────────────────────┐
  │  Emotional Reactions    │─── Short-term emotion (Anger, Joy, Sadness)
  │  (Immediate Thoughts)   │
  └───────────┬─────────────┘
              │ Stored as
              ▼
  ┌─────────────────────────┐
  │    Memory Storage       │─── Short-term → Long-term memories (core)
  │ (Core & transient)      │─── Decay/Replacement over time
  └───────────┬─────────────┘
              │ Recalled as
              ▼
  ┌─────────────────────────┐
  │ Memory Re-experiencing  │─── Repeated emotional impacts
  │ (Periodic Thoughts)     │
  └───────────┬─────────────┘
              │ Accumulate
              ▼
  ┌─────────────────────────┐
  │      Stress Level       │─── Increased by negative memories
  │  (Running total score)  │─── Decreased by positive memories
  └───────────┬─────────────┘
              │ Monitored
              ▼
  ┌─────────────────────────┐
  │  Stress Threshold Check │─── If threshold breached → Psychological Crisis
  │                         │─── Else → Coping behaviors activated
  └───────────┬─────────────┘
              │
              │
        ┌─────┴─────┐
        │           │
        ▼           ▼
  ┌───────────┐ ┌─────────────────┐
  │ Coping    │ │ Psychological   │
  │Mechanisms │ │ Breakdown       │
  │(Needs met,│ │ (Tantrum,       │
  │ hardening,│ │  Depression,    │
  │ social)   │ │  Insanity)      │
  └───────────┘ └─────────────────┘
        │                │
        │                ▼
        │       ┌───────────────────┐
        │       │ Personality Change│
        └──────▶│ (Facet alterations│
                │ via trauma, events│
                └───────────────────┘

p.s. it chose the syntax/format itself; regardless, some time ago when asked for guidance re: how to manage sliding context window, it did suggest tables itself (user employing them for concise input - and likewise requesting tabulated/diagrammatic/schematic output).

p.p.s. (edit) many good very particular insights, if anyone's by chance interested then lmk, I'll ping once distilled interesting output is on a not-yet-extant blog (it's gonna happen finally)...

Using the extension, you can see your changes from the Mermaid Code rendered as a diagram in real-time.

If you also want to interact with the diagram itself to make the changes, you can do that using the Mermaid Chart Playground: https://www.mermaidchart.com/play

I'm curious what you prefer instead?

I find that tools like Mermaid are pretty invaluable, especially when editing very large processes. Draw.io diagrams tend to get pretty unwieldy as they scale and editing inter process stuff if you forgot something quite frustrating.

Sequence diagrams are possibly my favorite feature in Mermaid: https://jessems.com/posts/2023-07-22-the-unreasonable-effect...

Admittedly I primarily use D2 nowadays. The only features I miss in D2 from mermaid are the GitHub automatic rendering and Sequence diagram numbers. https://play.d2lang.com

Had no benefits/was more cumbersome than what?

My colleagues frequently use one of these general-purpose WYSIWYG drawing tools, and I'm not a fan at all – everybody has their own slightly or wildly varying riff on UML or flowcharts, and the result is chaos: Sometimes rectangles are states, sometimes they're decisions; sometimes arrows are labeled state transitions, but other times they're unlabeled and state transitions are also boxes.

Discoverability is also much worse compared to e.g. Mermaid or PlantUML diagrams checked into version control or stored as text source in Wiki articles.

I also ran into massive issues trying to use Mermaid when I tried to pair it up with Marp (markdown for presentations). I am not sure if it is Mermaid's fault or Marp's fault but it didn't work and tons of people want it to work:

https://github.com/orgs/marp-team/discussions/207

So what do you use? Figma?

I've been asking gpt to use mermaid to diagram before writing the code. It seems to help produce better results.

You are right! A light plugin was released then.

Now, we have added lots of new functionality. Proper editing with syntax highlighting, etc. Apart from that, we have also added integration with GitHub Copilot, so you can generate diagrams from code and continue to edit them using the extension.

More good input! Appreciate it. What about PNG export? It seems more direct than a PDF to me.