Mermaid Diagrams

Your agents write Mermaid. This renders it.

When Claude or ChatGPT drops a flowchart into a .md answer, MacMD Viewer renders it inline. Standard Mermaid syntax in a fenced code block. No plugins, no pushing to GitHub to preview.

Diagram Types

Six diagram types, all supported

Flowchart

Visualize processes and decision trees with directional graphs.

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
```

Sequence Diagram

Show interactions between components over time.

```mermaid
sequenceDiagram
    Client->>Server: HTTP Request
    Server->>Database: Query
    Database-->>Server: Results
    Server-->>Client: JSON Response
```

State Diagram

Model state machines and transitions.

```mermaid
stateDiagram-v2
    [*] --> Idle
    Idle --> Loading: fetch()
    Loading --> Success: 200 OK
    Loading --> Error: 4xx/5xx
    Error --> Idle: retry()
    Success --> [*]
```

Gantt Chart

Plan project timelines and task dependencies.

```mermaid
gantt
    title Project Plan
    section Design
    Wireframes    :a1, 2024-01-01, 7d
    Mockups       :a2, after a1, 5d
    section Dev
    Frontend      :b1, after a2, 14d
    Backend       :b2, after a2, 10d
```

Pie Chart

Display proportional data in a circular chart.

```mermaid
pie title Languages Used
    "Swift" : 45
    "TypeScript" : 30
    "Python" : 15
    "Other" : 10
```

Class Diagram

Document object-oriented structures and relationships.

```mermaid
classDiagram
    class Document {
        +String title
        +String content
        +render() HTML
    }
    class Renderer {
        +parse(md) AST
        +toHTML(ast) HTML
    }
    Document --> Renderer
```
How It Works

Just write Mermaid, we handle the rest

Use a standard fenced code block with the mermaid language tag. MacMD Viewer detects it automatically and renders the diagram inline. No configuration files, no setup, no extensions to install.

Learn More

Mermaid Guides

FAQ

Mermaid on Mac: common questions

What Mermaid diagram types does MacMD Viewer support?

Flowcharts, sequence diagrams, state diagrams, Gantt charts, pie charts, and class diagrams. All standard Mermaid syntax is rendered inline from fenced ```mermaid code blocks.

Do I need a plugin or extension to render Mermaid?

No. MacMD Viewer detects ```mermaid fenced code blocks automatically and renders them inline. There are no configuration files, no extensions, and no setup to install.

Can MacMD Viewer render Mermaid diagrams that Claude or ChatGPT generate?

Yes. When an AI agent writes a Mermaid diagram into a .md file, MacMD Viewer renders it inline the moment you open or save the file — no pushing to GitHub to check whether it renders.

Can I preview Mermaid diagrams in Finder with QuickLook?

Yes. With the QuickLook extension, press Space on a .md file in Finder and Mermaid diagrams render in the preview without opening the app.

How do I write a Mermaid diagram in Markdown?

Use a fenced code block with the mermaid language tag and standard Mermaid syntax inside it. MacMD Viewer detects the tag and renders the diagram automatically.

Is Mermaid support included in the $19.99 price?

Yes. Mermaid rendering is built into MacMD Viewer at the one-time $19.99 price — no subscription and no add-on.

Diagrams are just the start

Syntax highlighting, QuickLook, live reload, and more.

See all featuresBuy MacMD Viewer