Mermaid Studio
Write Mermaid on the left, see the diagram on the right, export it as PNG or SVG.
How it works
You write Mermaid on the left and the diagram renders on the right as you type. Nothing is compiled on a server: the Mermaid library runs in the page, so the loop between changing a line and seeing the result is as fast as your machine is.
The editor keeps your last diagram and theme in local storage, so closing the tab and coming back does not lose your work. That copy stays on your machine.
More detail
Diagram types it supports
Flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, pie charts, git graphs, mindmaps, timelines and user journeys. The templates menu has a working starting point for each, which is usually faster than remembering the syntax for a type you have not used in months.
Exporting
SVG export gives you the diagram as vectors, which stays sharp at any size and can be edited later in a vector editor. PNG export rasterises at a fixed size and is what you want for a chat message or a slide.
Both exports inline the typeface into the file so the diagram looks the same on a machine that does not have the font installed. That means the export step fetches the font stylesheet from Google Fonts. It is the one moment this tool talks to a third party, and it happens only when you export, not while you edit.
Sharing
The share button encodes your diagram into a link. Anyone with that link sees the same diagram and can edit their own copy of it. The stored copy expires if nobody opens it for a while, and every read pushes that expiry back, so a link that is in use stays alive and an abandoned one goes away.
Treat share links as public. Anyone holding the URL can read the diagram, so do not put anything confidential in one.
When a diagram will not render
Mermaid is whitespace and keyword sensitive, and its error messages are not always precise about where the problem is. The usual culprits are a node label containing a character that needs quoting, a stray arrow direction, or an indentation level that does not match the block above it.
If a diagram renders in one Mermaid version and not another, that is usually a syntax change between releases rather than something wrong with what you wrote.
Questions
Is my diagram sent to a server?
Not while you are editing. Rendering happens in your browser. A copy is uploaded only if you click Share, and exporting fetches a font stylesheet so the typeface can be embedded in the file.
Should I export PNG or SVG?
SVG if it will be scaled, printed, or edited later, because it stays sharp at any size. PNG if it is going straight into a chat, a slide or a document that will not accept vectors.
Do share links expire?
Yes, but the clock resets every time someone opens the link. A diagram people are still looking at stays available; one nobody has opened in a long time is cleaned up.
Will my work survive a refresh?
Yes. The current diagram and theme are kept in your browser's local storage. Clearing site data for this domain deletes them permanently, because there is no copy on our side.