Vloam Mermaid

Docs

Fix common errors

Repair the Mermaid mistakes that break the preview most often in this editor.

When the preview fails, read the error line first. Most fixes take one change.

Missing diagram type

Every diagram needs a type on line 1:

  • flowchart TD
  • sequenceDiagram
  • classDiagram
  • stateDiagram-v2

If you paste only the middle of a chart, Mermaid does not know which rules to use. Add the header, then try again.

Broken brackets or quotes

Labels need matching pairs:

  • [text] [[text]] (text) {text} "text"

A missing ] or " often produces a parse error near the end of the file. Scan the last few lines you edited.

Special characters in labels

Some characters confuse the parser inside a node label. Wrap the whole label in quotes:

flowchart LR
  A["Step: save & exit"] --> B[Done]

If a Chinese full-width punctuation mark sneaks in (： ， ？), replace it with the ASCII form (: , ?) or put the label in quotes.

Wrong arrow for the diagram type

Flowcharts use -->. Sequence diagrams use ->> and -->>. Class diagrams use <|-- and -->. Mixing them usually fails.

When you switch diagram type, rewrite the links. Do not paste a sequence arrow into a flowchart.

Duplicate ids with different shapes

In a flowchart, one id must keep one shape. This breaks:

A[Start]
A{Ready?}

Pick one shape for A, or use a new id for the decision node.

Empty source

Whitespace-only input shows as empty, not as an error. Paste a template from the toolbar if you cleared the editor by mistake.

How to debug fast

  1. Reduce the chart to three lines that still fail.
  2. Fix that tiny chart.
  3. Add the next node or message.
  4. Repeat until the full story renders.

The editor keeps your latest draft in the browser. You can experiment without losing the last good version if you copy it once before a big rewrite.