Mermaid: Diagramming and Charting Tool

A key thing to appreciate is that both Github and Gitlab support rendering Mermaid graphs in their ReadMe's

[0] https://docs.gitlab.com/ee/user/markdown.html

[1] https://github.blog/developer-skills/github/include-diagrams...

I love mermaid because it’s so easily source-controlled. It also has pretty solid documentation.

Don’t love that each diagram type typically has significantly different syntax.

Also don’t love (as mentioned by another commenter) the lack of control over layout—yea there are some advanced options for this but I find them obscure and difficult to configure.

I did create an internal tool that scans my Firestore data model and outputs an ER Diagram in mermaid. Works really nicely for that.

Mermaid is great for simple stuff. If you want a more advanced approach where you can even have multiple levels. Lool at c4. The best way to do c4 without paying a dime I think is https://likec4.dev/

But again, for simple stuff, mermaid! It's also natively supported in a lot of markdown renderers, like gitlab

I used MermaidJS for diagrams in one of my projects.

Initially it was fun, although MermaidJS lacked support for the diagram types I used at that time.

What stooped to be fun, is that MermaidJS needs a whole Chromebrowser engine to render the diagrams and it is built on Node.js.

Trying to generate my diagrams in another environment again was a total PITA and not worth the time.

I would love if the MermaidJS devs would port everything to another tech stack, don't use a whole browser engine to render their diagrams and make diagram creation easy and reproducible for build piplelines.

MermaidJS is pretty cool. I used it at several previous organisations to document flows between services, internal data flows, and other kinds of diagrams.

The fact that it's written in plain text makes it ideal for versioning with git. You can ever update the diagram in the same patch that changes a flow.

This website design seems to be new, and it's quite disappointing that there's not a single diagram in sight. It seems like a missed opportunity, where the whole page could be filled with examples (both in text form and the rendered version).

Another nice thing about Mermaid for those of us working in a .NET ecosystem is that Azure Devops supports it[0].

[0] https://learn.microsoft.com/en-us/azure/devops/project/wiki/...

Mermaid Pros

- Can be embedded as code blocks in straight markdown notes (and many markdown editors support rendering)

- Since it's not a graphic, it's text searchable

Mermaid Cons

- if you don't like the way the diagram is visually laid out there's not really an easy way to change it

I tried to migrate to Mermaid, but despite all the disadvantages, I found that PlantUML + IDE Extension are superior in terms of syntax, diagram variation and visual customisation.

I can't help but notice that the homepage has at least a hundred pictures of humans, and zero pictures of any diagrams or charts.

I've been using this to diagram state machines while talking about complex UI/state flows at work and people are amazed at how quick and efficient it is as a real time presentation tool. I hate most of the color themes, but the tool is pretty good and chatGPT understands the syntax so you can have some constructive diagramming conversations with the robots.

This site compares a few text-based diagramming tools, including Mermaid: https://text-to-diagram.com

Mermaidjs is amazing. you could ask LLM to visualise your question (e.g codebase) using mermaidjs syntax and it mostly works just fine without any syntax errors. or at least on Claude Sonnet 3.5 from my experience

I created a front-end application + Ollama where, when you input a book name, it generates a graph using Mermaid, illustrating all character relationships

We use mermaid for our charting in our technical documentation (which is public facing). Mostly object diagrams and sequence diagrams. Moved from plantUML, which I still miss some days.

Love the ability to version control your charts as well as write them out quickly without involving a design team and still have them look pretty good.

Use mermaid quite often. It's best for simple flow charts, git flows, etc, but where applicable it is great.

It is especially nice combined with mkdocs and the mermaid plugin when doing documentation.

One of its biggest advantages is how widely deployed is it, it is supported by many apps for note taking in a way or another.

Does the CLI tool still pull in chromium to render an SVG?

This is the best thing ive found on the internet this week...

I like to use mermaid diagrams with LLMs, it's very handy to convert any type of text (code, prose) into e.g. a flow chart to viz in mermaid.

I wish Reddit and Old Reddit supported Mermaid natively.

Don't forget that ChatGPT supports the format and you can create diagrams, idea maps, gantt etc in no time!

marimo notebooks support mermaid as well - https://docs.marimo.io/api/diagrams.html#marimo.mermaid

It is a great tool for diagrams

Mermaid is great!