Troubleshooting

Symptom	Likely cause / fix
Component shows a parse error	The definition isn’t valid Mermaid. Paste it into the Mermaid live editor to find the offending line.
Blank component, no error	Either definition is empty, or showError is off and it failed to parse. Turn showError back on while debugging.
Worked in the live editor, fails here	Almost always lost newlines. A definition joined with spaces instead of \n will not parse — see Newlines matter.
Diagram is tiny or cropped	The component has too little space. Give it more height, or try fitMode: width for tall diagrams.
Diagram renders but labels look wrong	Punctuation in a data-driven label is being parsed as Mermaid syntax. Wrap labels in quotes: A["Line 1 (west)"].
Wheel scrolls the page instead of zooming	That’s intended — hold Ctrl/Cmd while scrolling, and confirm zoom.wheel is on.
Zoom buttons missing	zoom.enabled or zoom.showControls is off.
Download button missing	download.enabled, download.showControls, or download.svg is off.
Zoom fights itself / flickers	A bidirectional binding on zoomLevel. The component writes to that property — see Avoid binding loops.
Diagram is unreadable on a dark screen	Set theme to dark — the default Mermaid theme assumes a light background.
Clicking a node does nothing	Click handlers require securityLevel: loose. Read Security levels before changing it.
Component missing from the palette	Confirm the module is Running under Config → Modules, then close and reopen the Designer session.

Still stuck?

Open an issue on the documentation repository with the diagram definition and a screenshot of what you’re seeing.