VSCode Now Natively Supports Mermaid Diagrams in Markdown Preview

VSCode has introduced a major update: its built-in Markdown preview now natively supports Mermaid syntax, allowing developers to create diagrams directly within Markdown files without switching to dedicated diagramming tools or embedding images.

What Is Mermaid?

Mermaid is a text-based diagramming markup language. In compatible Markdown editors, writing code-like text descriptions automatically renders flowcharts, sequence diagrams, Gantt charts, and more. The syntax is concise, and because diagrams remain plain text alongside documentation, they are easy to version-control.

Basic Usage

Wrap diagram code in a fenced code block tagged mermaid:

```mermaid
// diagram code here
```

Syntax consists of keywords, text content, and connection symbols; it is case-sensitive and whitespace-insensitive. This works in VSCode, Typora, Obsidian, GitBook, and other mainstream note platforms.

Common Diagram Types & Examples

1. Flowchart (flowchart)

Direction parameters: TD / TB (top-down), BT (bottom-up), LR (left-right), RL (right-left).

Node shapes: id[text] rectangle, id(text) rounded rectangle, id{text} diamond decision node.

Connections: --> solid arrow, --- solid line without arrow.

Example:

flowchart LR
    A[Start] --> B(Execute)
    B --> C{Condition}
    C -- Yes --> D[End]
    C -- No --> B

2. Sequence Diagram (sequenceDiagram)

Basic form: ParticipantA -> ParticipantB: Message. Arrow types: -> solid, --> dashed. Notes: note left/right of Participant: text.

Example:

sequenceDiagram
    Client -> Server: Request
    Server --> Database: Query
    Database --> Server: Result
    Server -> Client: Response
    note right of Client: Flow ends

3. Pie Chart (pie)

Declare with pie, then lines of "Category" : value.

Example:

pie
    "Frontend" : 40
    "Backend" : 35
    "Testing" : 25

4. Class Diagram (classDiagram)

Describes class relationships. Common symbols: <|-- inheritance, *-- composition, --> association.

Example:

classDiagram
    Animal <|-- Cat
    Animal <|-- Dog
    Animal : +makeSound()

5. Gantt Chart (gantt)

Project task scheduling. Format: TaskName : marker, startDate, duration. Markers include done, active.

Example:

gantt
    title Project Progress
    Requirements :done, des1, 2026-06-01, 3d
    Development :active, dev1, 2026-06-04, 5d
    Testing : test1, 2026-06-09, 2d

Official documentation: https://code.visualstudio.com/docs/languages/markdown#_mermaid-diagram-rendering