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 Visual Studio on the files of your solution or folder. Requires Visual Studio 2022 (17.14 or later) or Visual Studio 2026.

Use it

1. Open or select a Mermaid file (.mmd or .mermaid).
2. Right-click it in Solution Explorer, its document tab or the code editor and choose Open Drawmaid Diagram Editor (or … to the Side). Open With… → Drawmaid Diagram Editor works too, and Set as Default there opens such files in Drawmaid from then on.
3. Edit on either side. The text editor and the diagram follow each other as you type. From the diagram's tab, Open Text Editor to the Side shows the Mermaid code next to it.

The file stays an ordinary Mermaid file. Save, undo, reload 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.

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 the extension's own folder in your local app data. 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 Visual Studio. 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).