Loona Mermaid Diagram Maker — Paste Mermaid Code, Get a Diagram
Developers and technical writers describe diagrams as Mermaid text in documentation and AI chats. When you just need the picture — for slides, a document or a quick review — paste the code here instead of setting up a whole toolchain.
How to use the Mermaid Diagram Maker
- Paste or write Mermaid flowchart code in the box. Start with graph TD (top-down) or graph LR (left-right).
- Use the supported shapes: A[Process], B(Rounded), C{Decision}, D((Circle)) — and connections A --> B or A -->|label| B.
- The diagram renders live with a layered layout; any line outside the supported subset is reported under the canvas, never silently dropped.
- Download the PNG at the diagram’s full natural size.
How it works
The hand-rolled parser reads node tokens and connections line by line, then a layered layout assigns each node a depth by breadth-first search from the roots (nodes with no incoming arrows) and packs each level in order. Supported: flowchart/graph headers (TD, TB, BT, LR, RL), the node shapes listed on this page, solid and labelled arrows, and plain links (---). Not supported (by design, and stated honestly): sequence, class, state and gantt diagrams, subgraphs and styling directives — those lines are flagged in the status line instead of being rendered wrongly.
Worked example
An AI chat gives a developer Mermaid code for a checkout flow. She pastes it here, checks the decision branches render as intended, and drops the PNG into the team’s design document.
Frequently Asked Questions
Which Mermaid syntax is supported?
The flowchart subset: graph/flowchart TD/TB/BT/LR/RL, nodes A[..], A(..), A{..}, A((..)), A[[..]], connections -->, ---, -., ==> variants, and |labels|. Sequence/class/gantt diagrams are not part of this renderer — the page tells you when a line is unsupported.
Why not use the full Mermaid library?
This page is hand-rolled to stay fully self-contained and fast with zero external dependencies, covering the flowchart subset most people paste. The full Mermaid.js library covers more diagram types.
What happens to unsupported lines?
They are collected and reported in the status line under the canvas ("Line N: not in the supported subset") — never silently ignored.
Is my code uploaded?
No — parsing and rendering happen 100% in your browser.