Generation of diagrams and flowcharts from text in a similar manner as markdown.

Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?

This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript. Try it using our editor.

• Contribute to mermaid: https://github.com/knsv/mermaid
• Contribute to documentation: https://github.com/mermaidjs/mermaid-gitbook

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

Play with mermaid using this live editor.

Many thanks to the d3 and dagre-d3 projects for providing the graphical layout and drawing libraries! Thanks also to the js-sequence-diagram project for usage of the grammar for the sequence diagrams.

Mermaid was created by Knut Sveidqvist for easier documentation.

Knut has not done all work by himself, here is the full list of the projects contributors.

Mermaid is supported in a number of publishing systems and editors. Please report if a plugin/editor is missing from the list below:

• Markdown Plus - Markdown editor with extra features
• gitbook-plugin
• Confluence plugin
• Using mermaid via docpad
• Using mermaid in Jekyll
• Using mermaid via Octopress
• Using mermaid via Gatsby
• Mardown editor Haroopad
• Plugin for atom
• Atom Package markdown-preview-enhanced
• Vim Plugin
• Sphinx extension
• Pandoc filter
• hads
• Mermaid Preview for VS Code
• Package for Sublime Text 3
• MediaWiki extension
• StackEdit
• HackMd
• remark.js
• Leo Vue
• Typora - Markdown editor for MacOS, Windows, and Linux

An editor is available for creating diagrams. With it you can quickly start writing mermaid diagrams. It is possible to:

• save the result as a svg

• get a link to a viewer of the diagram

• get a link to edit of the diagram to share a diagram so that someone else can tweak it and send a new link back

• Editor