Flowchart code
Uses the Mermaid flowchart syntax. Starts with graph or flowchart.
or drop a .mmd, .mermaid, .md, or .txt file
Preview
Your flowchart will appear here.
Turn typed flowchart syntax into a diagram
Write a flowchart as plain text — a line for each node, a line for each arrow — and see it rendered as a diagram as you type. This tool uses the Mermaid flowchart syntax, the same text format used by mermaid.live and many documentation tools: a diagram starts with graph or flowchart, followed by a direction and a list of nodes and connections.
It is scoped to one job: flowchart syntax in, an SVG or PNG image out. Mermaid can also draw sequence diagrams, Gantt charts, class diagrams and more, but this tool renders flowcharts only — that's a deliberate scope choice, not a missing feature. There is also no round trip back to editable code; download the image and you're done.
Why your diagram stays on your device
Privacy here is structural, not a promise. There is no upload step because there is no server to upload to:
- Parsing and rendering happen entirely in your browser.
- The page is served as static files and makes no request with your diagram text.
- 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 typing — no request carries your diagram text. Read the source.
How to use it
-
Type or paste your flowchart
Write flowchart syntax in the text box — start with graph or flowchart, then describe nodes and arrows, e.g. A[Start] --> B[End]. Not sure where to start? Click 'Load sample'.
-
Watch the live preview
About 300ms after you stop typing, the diagram re-renders automatically. Only flowchart diagrams are rendered; other Mermaid diagram types show a message instead.
-
Fix any syntax errors
If a line doesn't parse, the preview shows a message instead of guessing what you meant — check the code against your last working version.
-
Export the result
Download SVG for a scalable vector file you can edit in Illustrator or Inkscape, or download PNG for a raster image sized for documents and slides.
FAQ
Is my flowchart text uploaded anywhere?
No. Parsing and rendering happen entirely in your browser. There is no server component, so your text has no path off your device.
What syntax does it use?
The Mermaid flowchart syntax — the same text format used by tools like mermaid.live and many documentation platforms. A diagram starts with graph or flowchart, a direction (e.g. TD for top-down), then a list of nodes and arrows.
Can I draw a sequence diagram, Gantt chart, or other diagram type here?
No. This tool is scoped to flowcharts only. Supporting other Mermaid diagram types is a deliberate scope decision, not a technical limitation.
Can I edit the diagram's shapes with a mouse, or turn a rendered diagram back into code?
No. This tool is one-directional: text in, image out. There is no GUI node editor and no way to convert a rendered diagram back into text.
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.
What's the difference between the SVG and PNG downloads?
SVG is a scalable vector file — it stays crisp at any size and can be edited in vector tools. PNG is a fixed-resolution raster image, rendered larger than the on-screen preview for a sharp result in documents and slides.