Mermaid Flow Icon

Mermaid Flow

Flowchart Editor

Click below to create Mermaid JS Flowchart Diagrams with an interactive editor. Simply Drag and Drop nodes, edges and labels to create and modify your Mermaid Flowchart Diagrams visually.

Start Drawing

Drag n' Drop



...then Export!

An image of a text editor with Mermaid JS code. The code is the definition of the Mermaid Diagram that was shown before and was generated by this app.

Create Mermaid Diagrams Visually

What are Mermaid Diagrams?

From the Mermaid JS website, Mermaid lets you create diagrams and visualizations using text and code. Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. Doc-Rot is a Catch-22 that Mermaid helps to solve.

What can Mermaid Flow do for me?

Mermaid Flow takes this a step further and simplifies the creation and maintenance of your Mermaid Diagrams. Mermaid Flow generates Mermaid JS code which can be rendered directly in GitHub README's and also stored and version controlled in code. This app makes it easy to create Mermaid JS diagrams with its Visual and Interactive editor, so you get the stability of version controlled diagrams with the simplicity of drawing.

What diagrams are supported?

Currently Mermaid Flow supports Mermaid Flowchart Diagrams. In the future it will support diagrams and charts such as Sequence, Class, State and more.

If you use Mermaid Flow commercially, I ask that you make a donation, to support its development and get prioritized support. Thank you!