About Diagram Studio
Draw ERD, sequence, flowchart and architecture diagrams from Mermaid text or by direct editing — the text and the canvas stay in sync.
What it does
A diagram editor with two ways in. Write Mermaid and watch the canvas update, or edit on the canvas — drag, rename, hover a node to add a connected one — and watch the text update. Entity-relationship, sequence, flowchart and architecture diagrams are supported, and diagrams are saved locally in your browser.
The text is the source of truth
Every edit, whether typed or made on the canvas, goes through the same Mermaid document. That means you can round-trip: paste Mermaid from a repository, edit it visually, and copy back text that is still valid Mermaid. Anything the parser does not recognise is preserved exactly as written rather than silently dropped, so a visual edit can never quietly delete part of your document.
Export
Export to SVG for something that stays sharp at any size and can be edited further, or PNG for pasting into a document or slide.
Common questions
- Is this compatible with Mermaid?
- Yes — flowchart syntax round-trips, so you can paste diagrams from a README, edit them here, and copy valid Mermaid back.
- Where are my diagrams stored?
- In your browser's IndexedDB. Nothing is uploaded, and there is no account.
- Can I export a diagram?
- Yes, as SVG (vector, stays sharp, still editable) or PNG.
- What happens to syntax it doesn't understand?
- It is preserved verbatim and reported, rather than being dropped. A visual edit will never silently delete part of your document.