Mermaid: Create diagrams and visualizations using text and code

• Mermaid

  90 3,562 9.1 TypeScript

  Edit, preview and share mermaid charts/diagrams. New implementation of the live editor.

  

* options for editors (including online ones! https://mermaid.live rocks)

Casey's Mermaid.js tutorial: https://www.happyandeffective.com/blog/realtime-collaborativ...

---

I also wrote a tutorial for graphviz (which does not have GitHub or Notion support last I checked). I'm so proud of it -- it's the most starred graphviz tutorial on GitHub

Casey's Graphviz tutorial: https://github.com/caseywatts/graphviz-tutorial

• mermaid

  122 66,838 10.0 JavaScript

  Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

  

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• mermaid-cli

  7 2,031 8.6 JavaScript

  Command line tool for the Mermaid library

  

I come from past experiments with (py)graphviz, yed, probably a couple other forgotten things. (As well as manual diagrams in LucidChart and even Inkscape.) And am generally a non-web python guy.

I was looking at Mermaid last weekend, since a coworker has praised it a few times and I was wanting to play with it.

I think my expectation of how to use it was wrong? I typically expect to share my diagrams as .png files. The main documentation didn't seem to give much guidance in this usecase.

I ended up going to https://github.com/mermaid-js/mermaid-cli ... there didn't seem to be a simple install-and-use pathway similar to `apt` or `pip`, so I ended up trying the docker image for it. I got it working to create pngs, but I thought having to mess with docker volume mounts and defining my own aliases (`alias mermaid='docker run -u $UID -it --rm -v ~/mermaid:/data minlag/mermaid-cli -i'` so I can do `mermaid blah.mmd` in my ~/mermaid folder) was a bit cumbersome...

Just sharing to see if there's hot takes on where I went wrong, I guess. (for example, I certainly didn't extensively read the docs to understand the usage paradigm it's intended for)

• ob-mermaid

  3 237 0.0 Emacs Lisp

  Generate mermaid diagrams within Emacs org-mode babel

Interested Emacs users should check out ob-mermaid[1]. It’s an org babel extension that lets you inline mermaid diagrams in org documents.

[1] https://github.com/arnm/ob-mermaid

• graphviz-tutorial

  1 37 10.0 Shell

  how do I graphviz? oh I see!

* options for editors (including online ones! https://mermaid.live rocks)

Casey's Mermaid.js tutorial: https://www.happyandeffective.com/blog/realtime-collaborativ...

---

I also wrote a tutorial for graphviz (which does not have GitHub or Notion support last I checked). I'm so proud of it -- it's the most starred graphviz tutorial on GitHub

Casey's Graphviz tutorial: https://github.com/caseywatts/graphviz-tutorial

• obsidian-releases

  1,652 7,956 9.9 JavaScript

  Community plugins list, theme list, and releases of Obsidian.

  

• go-diagrams

  5 4,514 0.0 Go

  Create beautiful system diagrams with Go

  

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• diagrams

  110 34,794 6.3 Python

  :art: Diagram as Code for prototyping cloud system architectures

There are Go and Python packages for diagrams as well:

https://diagrams.mingrammer.com/

• pom-visualizer-maven-plugin

  2 3 0.0 Java

  Maven plugin to visualize the POM you are working on

Shameless plug, but I used mermaid.js to create a pom visualizer maven plugin [0] and it was honestly pretty great.

Like some of the other comments say (and after working with it quite a bit) it definitely has its warts. It's not super well documented, it's not as feature rich as I'd like, and the syntax can be a little wonky. All that said, it "just works" for creating simple visualizations and fit my use case near perfectly.

[0]: https://github.com/floverfelt/pom-visualizer-maven-plugin

Suggest a related project