A markdown editor that draws your Mermaid diagrams

Paste a design doc into the editor above. Markdown With Diagrams renders the GitHub-flavored markdown on the right, turns every fenced mermaid block into a diagram, and hands you a PDF when you press Export. You do not sign in, and nothing you type leaves your browser until you ask for that PDF.

Diagrams beside the prose

Flowcharts, sequence diagrams and the rest of Mermaid, drawn as you type. The picture lives in the same file as the paragraph that explains it.

A PDF you can send

A4 pages with real margins. Readers can select the text and search it, and the diagrams stay vector, so they hold up when someone prints the deck.

Markdown you already write

Tables, task lists and fenced code with highlighting. Copy a file out of your repo and it renders the way you expect.

Writing

Keep the diagram next to the text that explains itDesign docs and their diagrams drift apart within months, so write the picture as Mermaid in the same markdown file and let code review catch both.
Stop screenshotting your Mermaid diagramsA screenshot of your Mermaid diagram blurs at print resolution and hides the text from search. Export the markdown to vector PDF instead.
The design doc people actually readMost design docs fail because the author writes for the author. Structure yours for a reviewer who reads it once, in a meeting, on a printout.

markdownwithdiagrams.com · Markdown and Mermaid rendering in your browser