Mermaid formatter and beautifier
Paste messy Mermaid code and get it back consistently indented, with tidy arrows and blank lines. The result is checked against the original, so it always draws the same diagram. Free and runs in your browser.
flowchart TD
A[Start] --> B{Is it tidy?}
subgraph Formatter
B -->|No| C[Re-indent]
C --> D[Space the arrows]
end
D --> E([Done])How to do it
- Step 1
Paste your code
Paste your Mermaid code into the box above.
- Step 2
Choose a style
Choose two or four spaces, and whether to space flowchart arrows.
- Step 3
Review the result
The formatted code appears next to the original with a count of changed lines.
- Step 4
Use it
Copy it, download it, or open it in the editor.
Why format Mermaid
Mermaid does not care about indentation in most diagram types, so diagrams pasted from chat tools, generated by AI or edited by several people drift into inconsistent shapes. Consistent indentation makes the structure, especially nested subgraphs and sequence blocks, readable at a glance and keeps diffs small.
What counts as a block
The formatter knows which keywords open and close a block in each diagram type: subgraph and end in flowcharts; loop, alt, opt, par, critical, break, rect and box in sequence diagrams, with else and and set one level out; and curly braces in class, state, ER, requirement and C4 diagrams.
What this does not do
- Arrow spacing is applied to flowcharts only; other diagram types keep their own spacing inside lines.
- The formatter does not reorder statements or rename nodes.
- Code with a syntax error is still re-indented, but the result cannot be checked, so the tool warns you.
Frequently asked questions
What does the formatter change?
It indents the body of the diagram one level, and each nested block (subgraph, loop, alt, class, state, ER entity, namespace) one more. It puts single spaces around flowchart arrows, trims trailing spaces and collapses runs of blank lines. Labels, comments, front matter and directives are left as they are.
Can formatting break my diagram?
No. After formatting, the tool parses both versions and, for flowcharts, compares every node, label and link. If anything would differ, it drops the arrow spacing, and if that is still not safe it returns your code untouched and says why.
Why is my mind map not re-indented?
Mind maps, kanban boards and treemaps use indentation to mean nesting, so re-indenting them would change the diagram. For those, only trailing spaces and extra blank lines are tidied.
Two or four spaces?
Four spaces is the style used in the Mermaid documentation and most examples. Two is common in repositories that use two-space indentation elsewhere. Pick whichever matches your codebase.