Load a flowchart
Paste Mermaid flowchart code, drop a file, or load the sample.
or drop a file anywhere on the page · Supported: .mmd, .mermaid, .md, .txt
A structural editor that never rewrites what you didn’t touch
This tool reads Mermaid flowchart code (the graph / flowchart syntax used by mermaid.live and many documentation tools), lets you edit its structure with an inspector — add or remove nodes and edges, change a label or a shape, move a node between groups, change the diagram direction — and writes the result back out as code.
It keeps a line-by-line record of the source you loaded. A line you never edit is written back exactly as it was, terminator and all — comments, styling directives, and syntax this tool doesn’t model (chained arrows, semicolon-separated statements, non-Latin node ids, and more) all pass through untouched instead of being silently reformatted or dropped.
It doesn’t draw diagrams from scratch or export images — for a plain “type code, see a live SVG preview, export as SVG/PNG” tool, see the sibling draw-flowchart. This tool is specifically for restructuring an existing flowchart’s code through a GUI and getting clean code back.
Why your flowchart never leaves your device
Privacy here is structural, not a promise. There is no upload step because there is no server to upload to:
- Parsing, editing, and rendering all happen in your browser.
- The page is served as static files and makes no request carrying your flowchart text.
- There is no shareable-link feature that would encode your diagram into a URL.
- The source is open and anyone can read it (MIT).
- It works offline, which is only possible because nothing leaves the device.
If you want to check for yourself, open your browser's Network panel while editing — no request carries your flowchart text. Read the source.
How to use it
-
Load your flowchart
Paste Mermaid flowchart code, drop a .mmd/.mermaid/.md/.txt file, or click “Load sample”. Pasting text copied from an AI chat response automatically extracts the code from a ```mermaid block.
-
Edit the structure
Select a node or edge from the lists (or click it in the preview, when that mapping is available) to edit its label, shape, or connections. Add nodes and edges, move a node into or out of a subgraph group, or change the overall direction from the toolbar.
-
Check the result
The preview and the code pane both update live. If a line can’t be parsed, editing is paused with the error shown — the last working preview stays visible while you fix it in the code pane, which is always editable directly.
-
Export the code
Copy the code, copy it as a fenced ```mermaid block, download the .mmd file, or use “Copy for AI” to get a ready-to-paste before/after instruction for an AI chat — see below.
FAQ
Is my flowchart uploaded anywhere?
No. Parsing, editing, and rendering all happen entirely in your browser. There is no server component and no shareable-link feature, so your flowchart text has no path off your device.
What does "byte-identical round trip" actually mean?
If you load a file and export it again without changing anything, the output is byte-for-byte the same file — same whitespace, same comments, same line endings. When you do make an edit, only the line(s) that edit actually touches are rewritten; every other line is untouched.
What happens to syntax this tool doesn’t understand?
It’s kept exactly as written and still shown in the preview, but it isn’t editable through the GUI — things like classDef/style/linkStyle/click directives, chained arrows (A --> B --> C), and a few other constructs. The summary at the bottom of the editor reports how many lines fall into this category. You can still edit them directly in the code pane.
Can I drag nodes around to reposition them?
No, and this is deliberate, not a missing feature. Mermaid’s flowchart syntax has no way to record a node’s position — layout is always automatic — so a dragged position could never be written back into the code. Every editing feature here corresponds to something that actually exists in the text format.
Can I rename a node’s id?
No — only its label. Renaming an id could silently break a reference to it in a line this tool doesn’t otherwise touch (an unsupported click or style directive, for example), so it’s out of scope. You can edit ids directly in the code pane, where you can see and fix any such reference yourself.
What is "Copy for AI" for?
It copies the flowchart code as it was when you loaded it and the code as it is now, as two labeled, fenced code blocks, ready to paste into an AI chat as a change instruction. This is aimed at a specific workflow: describe a UI’s structure as a flowchart (containers as subgraphs, components as nodes), edit it here, and hand the before/after to an AI as the diff.
Does it work offline?
Yes. It is a PWA. After the first visit it is cached, so it works without a network connection. You can also install it to your home screen.