Mermaid, the same text-diagram language GitHub, GitLab and many documentation tools render natively. A diagram you build here can be pasted straight into a README as a mermaid code block.

Why write a diagram instead of drawing one?

Because text goes in version control. A Mermaid diagram diffs like code, and changing one box is an edit rather than a fight with a drawing program.

Should I export SVG or PNG?

SVG stays sharp at any size and keeps the text selectable - the right choice for documentation. PNG for somewhere that will not accept an SVG.

My diagram will not render. What is wrong?

Mermaid is strict about indentation and arrow syntax, and the first line has to declare the diagram type. Start from one of the examples and change it a piece at a time.

Can I put a diagram on my website or blog?

Press Website embed and paste the code into your page's HTML: a Custom HTML block in WordPress, the HTML view in Blogger, or the Embed element of most site builders. The diagram is drawn live in a small frame, in the theme you chose, and stays sharp at any zoom. To change it later, use the edit link under the diagram, then copy a new embed code. The diagram travels in the part of the address after the #, so nothing about it is stored on this site; your visitors' browsers load the frame from johnmcm.com like any embedded video.

Is my diagram sent anywhere?

No. Mermaid runs in your browser, so an architecture diagram of an internal system stays internal. A shared link or an embed carries the diagram in the part of the address after the #, which browsers never send to the server.

Stays on your computer How this works

Free online Mermaid diagram editor

Write a diagram as text, see it draw itself — entirely in your browser

Diagram source

Preview

Diagrams are written in Mermaid syntax. Pick an example above to see the shape of each type, then edit it — the preview updates as you type, and nothing is sent anywhere. What you write is kept in this browser, so it is still here after a reload.

About this diagram editor

Write a diagram as text and watch it render as you type — flowcharts, sequence diagrams, state diagrams, Gantt charts and more — then export it as PNG or SVG.

Describing a diagram in text means it can live in version control next to the code it documents, and be edited without a drawing program. It is free to use, with no account and no upload limit, and it runs entirely in your browser: nothing is uploaded, and while the page stays open, a feature you have already used keeps working offline.

What you can do

Write Mermaid diagrams as text, with a preview that redraws as you type
Working examples of flowcharts, sequence, class, state, entity relationship, Gantt, pie and mind map diagrams to start from
Export a diagram as SVG, or as a PNG at twice its size
Copy the SVG or the Mermaid code, ready to paste into a README
Default, neutral, forest or dark theme
A syntax error is reported, and the last working diagram stays on screen
Your diagram is kept in this browser, so a reload does not lose it
A link that opens the page with your diagram filled in, to send to someone
An embed code that shows the diagram live on a website or blog, in the theme you picked
Full-screen mode

How to make a diagram from text

Pick a diagram type to load a working example - flowchart, sequence, class, state, entity relationship, Gantt, pie or mind map.
Edit the text. The diagram redraws as you type, and an error in the syntax tells you rather than silently failing. The text is kept in this browser, so a reload does not lose it; Reset to example starts again.
Choose a theme: default, neutral, forest or dark.
Copy the code or the SVG, or download the diagram as .svg or .png.
To share it, Copy link gives an address that opens this page with the diagram filled in; Website embed gives code that shows it on your own site.

Questions

What syntax is this?: Mermaid, the same text-diagram language GitHub, GitLab and many documentation tools render natively. A diagram you build here can be pasted straight into a README as a mermaid code block.
Why write a diagram instead of drawing one?: Because text goes in version control. A Mermaid diagram diffs like code, and changing one box is an edit rather than a fight with a drawing program.
Should I export SVG or PNG?: SVG stays sharp at any size and keeps the text selectable - the right choice for documentation. PNG for somewhere that will not accept an SVG.
My diagram will not render. What is wrong?: Mermaid is strict about indentation and arrow syntax, and the first line has to declare the diagram type. Start from one of the examples and change it a piece at a time.
Can I put a diagram on my website or blog?: Press Website embed and paste the code into your page's HTML: a Custom HTML block in WordPress, the HTML view in Blogger, or the Embed element of most site builders. The diagram is drawn live in a small frame, in the theme you chose, and stays sharp at any zoom. To change it later, use the edit link under the diagram, then copy a new embed code. The diagram travels in the part of the address after the #, so nothing about it is stored on this site; your visitors' browsers load the frame from johnmcm.com like any embedded video.
Is my diagram sent anywhere?: No. Mermaid runs in your browser, so an architecture diagram of an internal system stays internal. A shared link or an embed carries the diagram in the part of the address after the #, which browsers never send to the server.