Diagrams not rendering

If diagrams show as code blocks instead of rendered visuals, check these in order.

1) Confirm the code block language

Your fenced code block must use the right language tag:

• Mermaid: ```mermaid
• Graphviz/DOT: ```dot
• Markmap: ```markmap

2) Test with a known-good example

Use the examples in:

• Diagram Tools
• Mermaid Diagrams
• Math Equations

3) Validate or export the smallest example

If a minimal diagram fails, test the source independently before adding it back to a larger document:

• Mermaid: validator (opens in a new tab), PNG (opens in a new tab), SVG (opens in a new tab), WebP (opens in a new tab), or PDF (opens in a new tab)
• Graphviz/DOT: PNG (opens in a new tab) or SVG (opens in a new tab)
• Markmap: PNG (opens in a new tab) or SVG (opens in a new tab)

4) If you’re in an extension

• Make sure you’re actually on a Markdown surface the extension renders:
  • web URLs that end in .md
  • local file:// Markdown files (with file access enabled)

5) If you’re offline

Some diagrams can still render offline, but if your document references remote assets, parts of the preview/export may degrade.

Related:

• Browser extension docs: Markdown Viewer & Reader
• VS Code/Cursor: VS Code extension