Return Home
...

Mermaid-js

Mermaid generates many common diagrams (flowchart, sequence, class, gantt, git, and more) automatically using a markdown-like language.


Tool Category:

Markup Language

Summary

Mermaid makes it possibly to quickly and programmatically generate many types of common diagrams from a simple, markdown-like language. The great part about the project is you can use it to generate standalone diagrams quickly or you can integrate its rendering code into your own project as it's built in JavaScript and can easily be integrated with regular old HTML websites or fancier applications built in React, Angular or Vue.

The sheer number of different formats supported make this tool invaluable.

Flowcharts, including numerous complications like sub-charts, branches, different pointer lengths and icons, are a piece of cake:

Mermaid Flowchart.png

Many of the diagrams are clearly aimed at software engineers and software developers, but they'll still be useful for other domains, such as entity-relationship diagrams:

MermaidErDiagram.png

Project management diagrams like gantt charts are can be rendered effortlessly:

MermaidGantt.png

The best part is, you can style diagrams with your own css and can easily export them to .png or .svg files. While the markdown-like syntax of "mermaid" is fairly intuitive, keep in mind that many less tech-savvy users prefer visual editors. While the syntax is relatively easy to figure out and creates diagrams much faster than drawing them by hand, more complex diagrams require some fairly complex markdown that will likely be a tough sell to end-users. Even in that situation, however, Mermaid-js could be a great rendering tool and you could use it to generate professional, rendered diagrams based on your desired data without necessarily requiring your users to generate the mermaid-syntax to generate them.

Stats

Open Source:Yes
Paid Support:No
API:N/A

License(s)

MIT

Tech Stack

JavaScript