Skip to content

Mermaid viewer for Windows: see diagrams, not code

By Kunal Sahu · Last updated

Short answer: Mermaid diagrams are plain text inside ```mermaid blocks, so they only turn into pictures in an app that runs the Mermaid renderer. On Windows you can paste them into the online Mermaid Live Editor, add an extension to VS Code, or open the whole Markdown file in a viewer that draws them inline and offline, like MD Reader.

What a Mermaid diagram looks like

This is the text an AI agent typically writes into a plan:

```mermaid
graph LR
  A[Login] --> B{valid?}
  B -->|yes| C[Dashboard]
  B -->|no| D[Refresh]
```

And this is what a Mermaid-aware viewer shows instead:

Loginvalid?DashboardRefreshyesno

Ways to view Mermaid diagrams on Windows

ToolWorks offlineWhole Markdown fileBest for
Mermaid Live EditorNoNo, one diagram at a timeEditing and exporting a single diagram
GitHubNoYes, after you pushSharing docs in a repository
VS Code + Mermaid extensionYesYesPeople who already live in VS Code
ObsidianYesYes, inside a vaultPersonal notes
MD ReaderYesYes, any .md fileReading AI-written docs with live reload

Avoid pasting private architecture or customer details into online renderers. A local viewer keeps the document on your PC.

Diagram types you'll meet

Mermaid supports more than 20 diagram types. The ones coding agents write most often are:

  • Flowcharts (graph / flowchart) for request flows and decision logic.
  • Sequence diagrams for API calls between services.
  • Class and entity-relationship diagrams for data models.
  • State diagrams for UI or order lifecycles.
  • Gantt charts and timelines for project plans.

The full reference lives in the official Mermaid documentation.

Why AI-written Mermaid sometimes fails to render

Agents get Mermaid right most of the time, but a few mistakes come up again and again. When a diagram shows an error instead of a picture, check these first:

  • Special characters in labels. Parentheses, colons or quotes inside A[Fetch (retry)] can break parsing. Wrap the label in quotes: A["Fetch (retry)"].
  • The word end. In flowcharts a lowercase end as a node name closes a subgraph. Use End or done.
  • Mixed diagram syntax. Sequence-diagram arrows like ->> don't work inside a flowchart.
  • Missing fence language. The block must start with ```mermaid, not ``` or ```diagram.

A useful prompt: "Write the diagram in Mermaid, quote every node label, and avoid the word end as a node id."

A sequence diagram, for comparison

Flowcharts use graph; sequence diagrams have their own arrow syntax. Agents use them to explain API calls:

```mermaid
sequenceDiagram
  participant App
  participant API
  App->>API: POST /refresh
  API-->>App: 200 new token
```

Export a Mermaid diagram as an image

Viewing is usually enough, but for slides or tickets you may want a PNG or SVG:

  • Mermaid Live Editor: paste the diagram and use the export options for PNG or SVG.
  • Command line: the official mermaid-cli converts a file offline, for example npx -p @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.svg. It needs Node.js.
  • Quick and dirty: take a screenshot of the rendered diagram with Win+Shift+S.

Related guides

New to Markdown files on Windows? Start with how to open .md files on Windows. Reading agent output all day? See the Claude Code, Codex and Cursor workflow.