Readit News logoReadit News
mackenly · 8 months ago
I really like Mermaid, but I'm not seeing the value in this as is.

- Mermaid within .md is widely supported. The file format of .mmd, while supported in most integrations, is a standalone file rather than living within my documentation/markdown. I use Mermaid charts and graphs as visual aids to add to the documentation or notes rather than having them stand alone. If I wanted a standalone file, I'd use any other diagram tool with its proprietary file format. I like Meriamid because of how easy it is to integrate into markdown. The value isn't in having a Mermaid file; the value is in adding diagrams and charts to markdown.

- Within .md files there's a Mermaid logo added beside the Mermaid, but it doesn't seem to be clickable or have a context menu. Maybe this is a bug. It also weirdly highlights all of the Mermaid code. Why doesn't it syntax highlight within markdown? This extension works great for highlighting: https://marketplace.visualstudio.com/items/?itemName=bpruitt...

- It doesn't add support for viewing mermaid within markdown preview. I currently use this extension for it. This is a key feature that is missing. https://marketplace.visualstudio.com/items/?itemName=bierner...

Overall, excited to see what this becomes. Hope this is useful feedback! It can only get better from here.

mubou · 8 months ago
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.

arijun · 8 months ago
Just to draw more attention to the point, it's not an unrelated project simply "using the Mermaid name," it's a for profit project started by the creator of mermaid.js, which charges for some advanced tooling around the opens source project. It's a common enough paradigm to see and in my opinion a pretty virtuous way to fund open source development.

See also Redis labs, Gitlab, ElasticSearch...

benoau · 8 months ago
It's pretty instinctive to name stuff like this, especially when it's not a general purpose solution like you're not downloading this for any other reason except to build upon what Mermaid does.

They could have called it something entirely different, and then they can say (vscode plugin for mermaid.js) every time they mention their unique name that carries no association with it.

And Mermaid could have decided they want exclusive use of the name and trademarked it half a decade ago.

So it's just fair use, isn't it?

submeta · 8 months ago
Love mermaid. And for me mermaidchart.com was synonymous with mermaid markup. Thank you very much! I didn’t know the official website of the project is https://mermaid.js.org/ Just learned from you.
atombender · 8 months ago
Mermaid Charts is the company run by Knut Sveidqvist, the original author of Mermaid [1]. I don't think it's disingenuous at all.

[1] https://www.mermaidchart.com/company

amanzi · 8 months ago
Perhaps PlantUML isn't as new and interesting as Mermaid, but each time I try a side-by-side comparison, the results are always better in PlantUML than Mermaid. I'll admit that the Mermaid syntax is a lot easier to understand, but the PlantUML syntax is a lot more powerful. I especially like the new Activity diagrams in PlantUML with the conditionals and looping syntax.
antman · 8 months ago
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
makeitdouble · 8 months ago
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.

ashryan · 9 months ago
Mermaid is fantastic as a portable I/O format for LLM context. I spent some time discussing entity relationships with an LLM recently, and had it produce a Mermaid diagram to wrap up the conversation.

Once you have the diagram code, you can use that as an artifact for new LLM chats related to databases, APIs, etc.

I'm not sure what the history of mermaidchart.com specifically is, but I'm guessing it's new since the ER diagram docs are marked as "coming soon":

https://docs.mermaidchart.com/mermaid/er/syntax

I'm curious how this plugin compares to Markdown Preview Mermaid Support: https://marketplace.cursorapi.com/items?itemName=bierner.mar...

bredren · 8 months ago
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.

aitchnyu · 8 months ago
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?
wfn · 8 months ago
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)...

potamic · 8 months ago
Don't mean to be blunt, but I found your comments really hard to comprehend. Something about the phrases feels atypical, almost like it's a different dialect. Curious if it's just me.
sakesun · 8 months ago
Never know we can format comment like this in HN :o
esafak · 9 months ago
5Qn8mNbc2FNCiVV · 9 months ago
Never seen a bigger waste of time than when my colleague (who was given more authority for some reason) tried establishing Mermaid as our go-to diagramming tool for the company.

Had no real benefits, was way more cumbersome for almost everyone and honestly even me as a developer I'd rather have a few paragraphs instead of a diagram.

Somehow it's just never "readable"

fayten · 9 months ago
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

anitil · 8 months ago
I use excalidraw, even upgraded to pro out of my own pocket. It's not git-compatible in the sense that it's not text (though you can export to SVG and commit that, which I've done). But I love that it has the feel of an approximation or just a quick sketch rather than a formal promise of how a system works.

When I've used dot or mermaid to build diagrams I've always found it hard to specify layout, colours and sizes, which I use to emphasise different views on a system. I'd love some sort of middle ground where I get the benefits of version control but also the sketch-like character of excalidraw

intrasight · 9 months ago
Nowadays I use mermaid, but I only use sequence diagrams. They're incredibly useful to convey to a client at a high-level what are the different workflows in a system.
5Qn8mNbc2FNCiVV · 8 months ago
From the post: All diagrams that look like the top image or the mermaid example after the complex one, could just be a list of steps.

For the complex one, maybe yes, it makes sense to have an overview and I think maintaining that vs text is also easier. However from what I've seen, most things can be boiled down to a list of 1, 2, 2.1, etc.

lxgr · 9 months ago
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.

5Qn8mNbc2FNCiVV · 8 months ago
Text, just an ordered list of steps
bhouston · 9 months ago
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

robertlagrant · 8 months ago
The discussion seems to make it pretty clear where the issues are, though, and how you can get around them using mermaid's render to svg.
sebazzz · 9 months ago
So what do you use? Figma?
5Qn8mNbc2FNCiVV · 8 months ago
Commented elsewhere, sorry should have clarified. Just a bit of text, mostly a bit of context of the requirements, potential edge cases and then an ordered list of steps
darepublic · 9 months ago
I have been using mermaid with gpt... describing the diagram I want and getting the syntax, then copy pasting it into the repl. I also wanted to investigate using marp for quickly coding up power point slides. But I regularly ran into issues with customising styles and documentation around html so I gave up on that
dataviz1000 · 8 months ago
I've been asking gpt to use mermaid to diagram before writing the code. It seems to help produce better results.
oigursh · 8 months ago
Is there a visual interface for Mermaid?

I can blast out auto-reflowing flowcharts in Flying Logic on a keyboard but it's moved to a subscription model that doesn't make sense for my irregular use.

Seeing the connections in real time really helps with my thought process.

knsv · 8 months ago
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

smcleod · 8 months ago
The extension seems awfully heavy and it loads every time you run VSCode - not just when you need it.