Why AI-generated Mermaid breaks
Language models write Mermaid from memory, and the parser is strict. One pair of parentheses in a label, a node called end or a -> arrow is enough to stop the whole diagram from rendering, and the parser's error — “Expecting 'SQE', got 'PS'” — is no help to most people. This page checks your Mermaid syntax, explains the problem in plain words and repairs the common mistakes automatically.
How the fixer works
- Your code is rendered with Mermaid 10.9.1 in the browser. If it fails, the error is translated and the line is highlighted in the editor.
- Repair rules run one at a time. After every rule that changes something, the diagram is rendered again, and the fixer stops as soon as it works.
- You see a line-by-line diff and the list of rules that were used. Nothing changes until you click Apply fix, and Undo fix brings the original back.
The rules are deterministic and run locally — no AI model is called and your code never leaves the page. On our test set of 120+ broken diagrams written in the style of ChatGPT, Claude and Gemini answers, the rules repair about nine in ten.
Common Mermaid syntax errors and how to fix them
Each row shows the kind of code that fails, and the version the fixer produces. They also work as a quick Mermaid diagram syntax reference if you prefer to fix things by hand.
| Problem | Fails | Works |
|---|---|---|
| Markdown code fence around the code | ```mermaid flowchart TD A --> B ``` | flowchart TD A --> B |
| Brackets or parentheses inside a label | A[Start (init)] --> B | A["Start (init)"] --> B |
| Double quotes inside a label | A[Click "Buy"] --> B | A["Click #quot;Buy#quot;"] --> B |
| Lowercase end used as a node | A --> end | A --> endNode |
| Full-width punctuation in syntax | A[开始] → B A->>B：hi | A[开始] --> B A->>B: hi |
| Single-dash arrow in a flowchart | A -> B | A --> B |
| Broken edge label | A -->|yes|> B | A -->|yes| B |
| Subgraph title with spaces or symbols | subgraph Client Side (React) | subgraph g1["Client Side (React)"] |
| Missing diagram type | A --> B | flowchart TD A --> B |
| Wrong case or direction in the type line | Flowchart top-down | flowchart TD |
| Explanation text around the code | Here is the diagram: flowchart TD A --> B | flowchart TD A --> B |
| graph keyword with newer syntax | graph TD | flowchart TD |
| Invisible characters from chat apps | A --> B (zero-width space) | A --> B |
| Spaces in node IDs | User Login --> Home | User_Login["User Login"] --> Home |
| Unclosed subgraph or loop | subgraph API A --> B | subgraph API A --> B end |
| Sequence message without a colon | Client->>Server GET /health | Client->>Server: GET /health |
| Unquoted ER relationship label | USER ||--o{ ORDER : places, cancels | USER ||--o{ ORDER : "places, cancels" |
| Unquoted pie label or % value | Chrome : 65% | "Chrome" : 65 |
| New shape syntax on Mermaid 10 | db@{ shape: cyl } | db[("db")] |
When the rules cannot fix it
Some errors need a human: a label that is cut off halfway, a reference to a task that does not exist, or a deactivate without a matching activate. In those cases the error explanation and the highlighted line tell you where to look. Once it renders, export it with Mermaid to SVG or Mermaid to PNG, or keep editing in the Mermaid viewer.