mermaid – Generation of diagram and flowchart from text in a similar manner as markdown

Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

The code for the sequence diagram at the top is this:

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

💁‍♂️ Note that this library does not render to a flattened image, but to an SVG with text nodes and such.

Also supports Decision Trees, Pie Charts, Gantt Charts, Class Diagrams, … A CLI version is also available/

mermaid
mermaid-cli

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.