Drawmaid — Mermaid diagram editor
Edit Mermaid diagrams visually, in sync with your .mmd file. Drag shapes on a canvas, draw the
connections, rename things in place, and the Mermaid code is kept up to date. Edit the code and the
diagram follows.
This is the Drawmaid web editor, running inside VS Code on the
files in your workspace.
Use it
- Open a Mermaid file (
.mmd or .mermaid).
- Click the Open Diagram Editor to the Side button in the editor's title bar, or run
Drawmaid: Open Diagram Editor from the Command Palette. You can also right-click the file in
the Explorer.
- Edit on either side. The text editor and the diagram follow each other as you type.
The file stays an ordinary Mermaid file. Save, undo, revert and source control all work the way they
do for any other file: Ctrl+S saves it and Ctrl+Z undoes the last change, whichever side made
it.
To open Mermaid files with Drawmaid by default, add this to your settings:
"workbench.editorAssociations": { "*.mmd": "drawmaid.editor" }
Diagram types
The type is read from the code, so there is nothing to choose for a file that already has a diagram
in it.
- Flowchart
- Sequence diagram
- Class diagram
- State diagram
- ER diagram
- Requirement diagram
- User journey
- Gantt chart
- Pie chart
- Quadrant chart
- Gitgraph
- Swimlanes (Beta)
- Mindmap (Beta)
- Timeline (Beta)
- C4 diagram (Beta)
- Use case diagram (Beta)
- Agentflow diagram (Beta)
"Beta" marks the types whose Mermaid syntax is still experimental upstream. Other Mermaid types
(sankey, XY chart, block and so on) are not edited: such a file is left untouched and Drawmaid says so.
A new, empty file asks which type of diagram to start. Nothing is written until your first edit.
What you can do
- Add, rename, connect and delete the elements of the diagram, with the controls each type needs:
shapes and subgraphs in a flowchart, participants and messages in a sequence diagram, members and
relations in a class diagram, tasks and dates in a gantt chart, and so on.
- Arrange a diagram yourself, or let auto layout do it, in the types that have a free canvas.
- Check the result in the Preview tab: Mermaid's own rendering, or for a flowchart the arrangement
you made on the canvas.
- Export the diagram as SVG, PNG or PDF. Seven types also export as PlantUML code.
Good to know
- Moving things never changes your file. In the types with a free canvas (flowchart, class,
state, ER, requirement, swimlanes, C4, use case, agentflow), where each element sits is remembered
for each file on this computer, in VS Code's storage for the extension. It is not written into the
Mermaid code and is not shared through source control. Moving an element cannot be undone with
Ctrl+Z. Two exceptions: in a C4 diagram the order of the elements on the canvas is the order of
the statements, so dragging one past another is an edit of the file; and in a quadrant chart a
point's position is its coordinates in the code.
- A diagram edit rewrites the file in Drawmaid's own formatting. Mermaid comments (
%%),
directives (%%{init}%%), front matter and your own formatting are not kept, and neither is
styling the diagram editor does not show (classDef, style, click, and similar). Drawmaid asks
before it rewrites a file it did not write, once per file, and says what that file would lose.
Edits you type in the text editor are never reformatted.
- The file decides the type. If the text of an open file becomes a diagram of another type, the
editor opens again as that type. If the file is emptied, it asks for a type again.
- A file with a syntax error is not opened as a diagram and is left untouched. Fix it in the text
editor and the diagram appears by itself.
- Mermaid blocks inside Markdown files are not edited. Drawmaid works on files that contain one
Mermaid diagram and nothing else.
Privacy
Drawmaid runs entirely inside VS Code. It makes no network requests, has no telemetry, and reads and
writes only the file you open with it, plus the remembered layout described above. The editor's page
is not allowed to contact any server.
Privacy policy · Terms of service
Feedback
drawdiags.com/contact
Part of the Free Diagrams suite: Drawmaid (Mermaid), Drawuml (PlantUML),
Drawtabase (SQL), Drawpenapi (OpenAPI) and Drawlize (JSON and YAML).
