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 DrawingDrag n' Drop
...then Export!
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.