# History of Mermaid.js: Diagrams as Code, From a Lost Visio File to 85K GitHub Stars (2026)

> The complete history of Mermaid.js — from a lost Visio file in 2014 to 85K GitHub stars, native GitHub support, $7.5M funding, and the AI-native beautiful-mermaid renderer. Every diagram type, live.

- Source: https://www.taskade.com/blog/history-of-mermaid
- Published: 2026-03-21
- Updated: 2026-09-25
- Author: Taskade Team

In 2014, a Swedish software architect named Knut Sveidqvist lost a Microsoft Visio file. Instead of recreating the diagram by clicking through menus, he asked a different question: **what if diagrams were just text?**

That question became [Mermaid.js](https://github.com/mermaid-js/mermaid) — an open-source library that lets you write diagrams the way you write code. Twelve years later, it has **85,000+ GitHub stars**, native support in GitHub, GitLab, Notion, and Obsidian, a [$7.5M seed round](https://techcrunch.com/2024/03/20/mermaid-chart-a-markdown-like-tool-for-creating-diagrams-raises-5-5m/) from Sequoia and Microsoft, and 8 million+ users worldwide.

This is the story of how one lost file sparked a movement.

> **TL;DR:** Mermaid.js turned diagrams into text that lives in version control alongside code — eliminating doc-rot and enabling AI-generated visualizations. From a solo project in 2014 to 85K GitHub stars and $7.5M in funding, it's now the standard for diagrams-as-code. [Taskade Genesis](https://www.taskade.com/create) uses [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) to render all 6 supported diagram types natively in workspaces and blog posts.

---

## 🧩 What Is Mermaid.js?

Mermaid.js is a JavaScript library that renders diagrams and charts from Markdown-inspired text definitions. Instead of dragging boxes in a GUI, you write:

```mermaid
graph LR
    A[Write Text] --> B[Commit to Git]
    B --> C[Renders as Diagram]
    C --> D[Version Controlled]
    D -.->|Update text| A
    style A fill:#ff2d60,color:#fff
    style C fill:#ff2d60,color:#fff
```

That code block renders as a live flowchart — no Visio, no Figma, no screenshot. The diagram lives in your Markdown file, version-controlled alongside your code.

The name? Inspired by **The Little Mermaid**, which Sveidqvist's children were watching when he started the project.

---

## 📜 The Origin Story: A Lost Visio File (2014)

Knut Sveidqvist spent his career in front-end architecture and platform engineering at companies like Telia and GE Lifesciences in Stockholm. A recurring theme across every role: **documentation was always out of date**.

The breaking point was losing a Visio file. Binary diagram formats like `.vsdx` couldn't be diffed, couldn't be version-controlled, and couldn't survive a laptop swap. Every time the architecture changed, someone had to open a GUI tool and manually redraw boxes.

Sveidqvist's insight was simple: **if documentation is code, diagrams should be code too**.

He built the first version of Mermaid.js in 2014 with just two diagram types — flowcharts and sequence diagrams. The syntax was intentionally Markdown-like, lowercase, and readable:

```mermaid
sequenceDiagram
    actor Dev as Developer
    participant Repo as Git Repository
    participant CI as CI Pipeline
    participant Docs as Documentation Site
    Dev->>Repo: Push code + diagram text
    Repo->>CI: Trigger build
    CI->>Docs: Render Mermaid → SVG
    Docs-->>Dev: Live diagrams, always current
    Note over Dev,Docs: No manual diagram updates needed
```

This wasn't just a new tool — it was a new workflow. Diagrams and code travel together, review together, and deploy together.

---

## 🔄 The Docs-as-Code Revolution

Mermaid didn't emerge in a vacuum. It arrived alongside a broader movement called **docs-as-code** — the philosophy that documentation should use the same tools, workflows, and version control as source code.

```mermaid
graph TD
    subgraph Old Way
        A[Draw in Visio] --> B[Export PNG]
        B --> C[Upload to Wiki]
        C --> D[Architecture Changes]
        D --> E[Diagram Outdated]
        E -.->|Manual update| A
    end
    subgraph Docs as Code
        F[Write Mermaid Text] --> G[Commit to Git]
        G --> H[Auto-Renders]
        H --> I[Architecture Changes]
        I --> J[Update Text in Same PR]
        J --> G
    end
    style A fill:#6c7086,color:#fff
    style E fill:#6c7086,color:#fff
    style F fill:#ff2d60,color:#fff
    style J fill:#ff2d60,color:#fff
```

The movement gained traction at:

- **Google** — internal `g3doc` platform stored documentation alongside code in the monorepo
- **Spotify** — launched **TechDocs** in 2019, treating docs like microservices
- **Squarespace** — migrated from Confluence to docs-in-repo
- **Write the Docs** community — advocated for docs-as-code as an industry standard

Mermaid became the visual layer of this revolution. When your architecture diagram lives in the same PR as the code change, reviewers can verify that the diagram matches reality. Doc-rot — the slow decay of documentation accuracy — was eliminated for visual docs.

---

## 📈 Growth: From Side Project to 85K Stars

The growth trajectory of Mermaid.js mirrors the docs-as-code movement itself:

```mermaid
xychart-beta
    title "Mermaid.js GitHub Stars Growth"
    x-axis [2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025, 2026]
    y-axis "Stars (thousands)" 0 --> 90
    line "Growth trend" [0, 1, 2, 4, 8, 15, 25, 35, 52, 62, 72, 78, 85]
    bar "GitHub stars" [0, 1, 2, 4, 8, 15, 25, 35, 52, 62, 72, 78, 85]
```

The inflection point was **February 14, 2022** — when GitHub announced native Mermaid rendering. Overnight, every GitHub README, issue, PR, and discussion could contain live diagrams. Two weeks later, GitHub Gists followed.

### Key Milestones

| Year | Milestone |
|------|-----------|
| **2014** | Knut Sveidqvist creates Mermaid.js (flowcharts + sequence diagrams) |
| **2019** | v8.x release — Entity-Relationship diagrams added (v8.5) |
| **2021** | *The Official Guide to Mermaid.js* published (Packt) |
| **Feb 2022** | GitHub adds native Mermaid rendering — watershed moment |
| **2022** | Sveidqvist co-founds Mermaid Chart Inc. with Open Core Ventures |
| **Mar 2024** | Mermaid Chart raises **$7.5M seed** (Sequoia, Microsoft M12, OCV) |
| **2024-25** | v10-v11 — mindmaps, timelines, XY charts, Sankey diagrams added |
| **2025** | **beautiful-mermaid** launches — AI-native SVG + ASCII renderer |
| **2026** | 85K+ stars, 15+ diagram types, 8M+ users |

---

## 🏗️ Anatomy of Every Diagram Type

Mermaid.js now supports **15+ diagram types**. The [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) renderer — which we use at [Taskade](https://www.taskade.com/) to render diagrams in blog posts — supports **6 of these** with enhanced SVG output, 15 built-in themes, and synchronous rendering.

Let's walk through every type supported by beautiful-mermaid, with live rendered examples.

### Beyond beautiful-mermaid: The Full Mermaid Diagram Catalog

Core Mermaid.js supports **15+ diagram types** — far more than the 6 that beautiful-mermaid renders. The full list includes:

| Supported by beautiful-mermaid | Core Mermaid only (not rendered by beautiful-mermaid) |
|-------------------------------|------------------------------------------------------|
| Flowcharts | Gantt charts |
| Sequence diagrams | Pie charts |
| State diagrams | Mindmaps |
| Class diagrams | Timeline diagrams |
| ER diagrams | Git graphs |
| XY charts | Quadrant charts, Sankey, C4 (experimental) |

The 6 beautiful-mermaid types cover the vast majority of developer use cases. Gantt charts and pie charts remain available in the core library for project management and reporting contexts. C4 diagram support in Mermaid is **experimental** — for production C4 architecture docs, [Structurizr](#the-model-based-alternative-structurizr) is more mature.

Now let's walk through each beautiful-mermaid type with live rendered examples.

### 1. Flowcharts — The Original

Flowcharts were Mermaid's first diagram type and remain its most used. They support 12 node shapes, 6 edge styles, subgraphs, parallel links, per-edge color styling, and all four directions (TD, LR, BT, RL).

**All 12 node shapes:**

```mermaid
graph LR
    A[Rectangle] --> B(Rounded)
    B --> C{Diamond}
    C --> D([Stadium])
    D --> E((Circle))
    E --> F[[Subroutine]]
    F --> G(((Double Circle)))
    G --> H{{Hexagon}}
    H --> I[(Database)]
    I --> J>Flag]
    J --> K[/Trapezoid\]
    K --> L[\Inverse Trap/]
```

**Edge styles — solid, dotted, thick, bidirectional:**

```mermaid
graph TD
    A[Source] -->|solid| B[Target 1]
    A -.->|dotted| C[Target 2]
    A ==>|thick| D[Target 3]
    E[Client] <-->|bidirectional| F[Server]
    style A fill:#ff2d60,color:#fff
```

**Nested subgraphs with direction override — a real CI/CD pipeline:**

```mermaid
graph TD
    subgraph ci [CI Pipeline]
        A[Push Code] --> B{Tests Pass?}
        B -->|Yes| C[Build Image]
        B -->|No| D[Fix & Retry]
        D -.-> A
    end
    C --> E([Deploy Staging])
    E --> F{QA Approved?}
    F -->|Yes| G((Production))
    F -->|No| D
    style G fill:#ff2d60,color:#fff
```

**System architecture with subgraphs:**

```mermaid
graph LR
    subgraph clients [Client Layer]
        A([Web App]) --> B[API Gateway]
        C([Mobile App]) --> B
    end
    subgraph services [Service Layer]
        B --> D[Auth Service]
        B --> E[User Service]
        B --> F[Order Service]
    end
    subgraph data [Data Layer]
        D --> G[(Auth DB)]
        E --> H[(User DB)]
        F --> I[(Order DB)]
        F --> J([Message Queue])
    end
    style B fill:#ff2d60,color:#fff
```

**Parallel links (`&`) — fan one trigger out to many actions:**

The `&` operator draws one-to-many edges without repeating yourself. It is the exact shape of a Taskade [automation](https://www.taskade.com/learn/automation/automations-execution): one event arrives, an agent decides, and several actions fire in parallel.

```mermaid
graph LR
    T[New lead email]:::ev --> AG[AI Agent reads and decides]:::ai
    AG --> R[Reply to lead]:::act & C[Create CRM record]:::act & F[Add follow-up task]:::act
    classDef ev fill:#1a140a,color:#ffb74d,stroke:#e65100,stroke-width:1.5px
    classDef ai fill:#1a0d24,color:#ce93d8,stroke:#6a1b9a,stroke-width:2px
    classDef act fill:#0d1a0e,color:#86efac,stroke:#22c55e,stroke-width:1.5px
```

**Per-edge color with `linkStyle` — follow the hot path at a glance:**

`linkStyle` paints individual edges by index, so the eye follows the urgent route, the decision, and the routine path without reading a single label. Here a pulled-in event (blue) reaches an agent that routes the urgent case (pink) and the normal case (green), both writing back to project memory.

```mermaid
graph LR
    E[Event in]:::ev --> D{Agent decides}:::ai
    D -->|urgent| P1[Page on-call]:::hot
    D -->|normal| P2[Add to queue]:::act
    P1 --> M[(Project memory)]:::mem
    P2 --> M
    linkStyle 0 stroke:#38bdf8,stroke-width:3px
    linkStyle 1 stroke:#ff2d60,stroke-width:2.5px
    linkStyle 2 stroke:#22c55e,stroke-width:2px
    linkStyle default stroke:#475569,stroke-width:1.5px
    classDef ev fill:#1a140a,color:#ffb74d,stroke:#e65100,stroke-width:1.5px
    classDef ai fill:#1a0d24,color:#ce93d8,stroke:#6a1b9a,stroke-width:2px
    classDef hot fill:#2a1225,color:#ff8fa3,stroke:#ff2d60,stroke-width:1.5px
    classDef act fill:#0d1a0e,color:#86efac,stroke:#22c55e,stroke-width:1.5px
    classDef mem fill:#0d1b2a,color:#7dd3fc,stroke:#38bdf8,stroke-width:1.5px
```

---

### 2. Sequence Diagrams — Interactions Over Time

Sequence diagrams were the second type Sveidqvist built. They show how actors and systems exchange messages over time — perfect for API flows, authentication, and microservice orchestration.

**OAuth 2.0 flow with actors, activation boxes, and notes:**

```mermaid
sequenceDiagram
    actor U as User
    participant App as Client App
    participant Auth as Auth Server
    participant API as Resource API
    U->>App: Click Login
    App->>Auth: Authorization request
    Auth->>U: Login page
    U->>Auth: Credentials
    Auth-->>App: Authorization code
    App->>+Auth: Exchange code for token
    Auth-->>-App: Access token
    App->>+API: Request + token
    API-->>-App: Protected resource
    App-->>U: Display data
    Note over App,API: Token valid for 1 hour
```

**Microservice orchestration with parallel execution and alt blocks:**

```mermaid
sequenceDiagram
    participant G as Gateway
    participant A as Auth
    participant U as Users
    participant O as Orders
    participant N as Notify
    G->>A: Validate token
    A-->>G: Valid
    par Fetch data
        G->>U: Get user
        U-->>G: User data
    and
        G->>O: Get orders
        O-->>G: Order list
    end
    alt Has new orders
        G->>N: Send notification
        N-->>G: Queued
    else No new orders
        G-->>G: Skip notification
    end
    Note over G: Aggregate response
```

**Database transaction with critical section:**

```mermaid
sequenceDiagram
    participant C as Client
    participant S as Server
    participant DB as Database
    C->>S: POST /transfer
    S->>DB: BEGIN
    critical Transaction
        S->>DB: Debit account A
        S->>DB: Credit account B
        S->>DB: INSERT audit_log
    end
    alt Success
        S->>DB: COMMIT
        S-->>C: 200 OK
    else Insufficient funds
        S->>DB: ROLLBACK
        S-->>C: 400 Bad Request
    end
```

---

### 3. State Diagrams — Finite State Machines

State diagrams model system behavior through discrete states and transitions. Mermaid uses the `stateDiagram-v2` syntax with support for composite (nested) states.

**Connection lifecycle:**

```mermaid
stateDiagram-v2
    [*] --> Closed
    Closed --> Connecting : connect()
    Connecting --> Connected : success
    Connecting --> Closed : timeout
    Connected --> Disconnecting : close()
    Connected --> Reconnecting : error
    Reconnecting --> Connected : success
    Reconnecting --> Closed : max_retries
    Disconnecting --> Closed : done
    Closed --> [*]
```

**Composite states — order processing pipeline:**

```mermaid
stateDiagram-v2
    [*] --> Received
    Received --> Processing : validate
    state Processing {
        Parse --> Enrich
        Enrich --> Score
        Score --> Route
    }
    Processing --> Fulfilled : approved
    Processing --> Rejected : declined
    Rejected --> Received : retry
    Fulfilled --> [*]
```

---

### 4. Class Diagrams — Object-Oriented Design

Class diagrams show inheritance, composition, and relationships between objects. Mermaid supports all 6 UML relationship types.

**Design pattern — Observer:**

```mermaid
classDiagram
    class Subject {
        <<interface>>
        +attach(Observer) void
        +detach(Observer) void
        +notify() void
    }
    class Observer {
        <<interface>>
        +update() void
    }
    class EventEmitter {
        -List~Observer~ observers
        +attach(Observer) void
        +detach(Observer) void
        +notify() void
    }
    class Logger {
        +update() void
    }
    class Alerter {
        +update() void
    }
    Subject <|.. EventEmitter
    Observer <|.. Logger
    Observer <|.. Alerter
    EventEmitter --> Observer
```

**All 6 relationship types:**

```mermaid
classDiagram
    A <|-- B : inheritance
    C *-- D : composition
    E o-- F : aggregation
    G --> H : association
    I ..> J : dependency
    K ..|> L : realization
```

**MVC architecture:**

```mermaid
classDiagram
    class Model {
        -data Map
        +getData() Map
        +setData(key, val) void
        +notify() void
    }
    class View {
        -model Model
        +render() void
        +update() void
    }
    class Controller {
        -model Model
        -view View
        +handleInput(event) void
        +updateModel(data) void
    }
    Controller --> Model : updates
    Controller --> View : refreshes
    View --> Model : reads
    Model ..> View : notifies
```

---

### 5. Entity-Relationship Diagrams — Data Modeling

ER diagrams arrived in Mermaid v8.5, bringing database schema visualization to the text-as-code paradigm. They support 4 cardinality types, identifying vs. non-identifying relationships, and entity attributes with PK/FK/UK markers.

**E-commerce schema:**

```mermaid
erDiagram
    CUSTOMER {
        int id PK
        string name
        string email UK
        date created_at
    }
    ORDER {
        int id PK
        date created
        int customer_id FK
        string status
    }
    PRODUCT {
        int id PK
        string name
        float price
    }
    LINE_ITEM {
        int id PK
        int order_id FK
        int product_id FK
        int quantity
    }
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : includes
```

**Blog platform with all relationship types:**

```mermaid
erDiagram
    USER {
        int id PK
        string username UK
        string email UK
        date joined
    }
    POST {
        int id PK
        string title
        text content
        int author_id FK
        date published
    }
    COMMENT {
        int id PK
        text body
        int post_id FK
        int user_id FK
    }
    TAG {
        int id PK
        string name UK
    }
    USER ||--o{ POST : writes
    USER ||--o{ COMMENT : authors
    POST ||--o{ COMMENT : has
    POST }|--o{ TAG : tagged
```

---

### 6. XY Charts — Data Visualization

XY charts are the newest addition to beautiful-mermaid's supported types. They render bar charts, line charts, and combined overlays with support for horizontal orientation and numeric axes.

**Monthly active users — bar + line overlay:**

```mermaid
xychart-beta
    title "Monthly Active Users (2025)"
    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
    y-axis "Users (thousands)" 0 --> 30
    bar "Monthly users" [12, 14, 15, 17, 19, 20, 20, 22, 23, 24, 26, 28]
    line "Trend" [12, 14, 15, 17, 19, 20, 20, 22, 23, 24, 26, 28]
```

**Sprint burndown — planned vs actual:**

```mermaid
xychart-beta
    title "Sprint Burndown"
    x-axis [D1, D2, D3, D4, D5, D6, D7, D8, D9, D10]
    y-axis "Story Points" 0 --> 80
    line "Ideal" [72, 65, 58, 50, 43, 36, 29, 22, 14, 0]
    line "Actual" [72, 68, 62, 55, 52, 44, 35, 28, 18, 3]
```

**Revenue comparison — 2024 vs 2025:**

```mermaid
xychart-beta
    title "Quarterly Revenue: 2024 vs 2025"
    x-axis [Q1, Q2, Q3, Q4]
    y-axis "Revenue ($K)" 0 --> 400
    bar "2024" [200, 250, 300, 280]
    bar "2025" [260, 310, 350, 380]
```

**Horizontal bars — rank categories with room for long labels:**

Flip orientation with `xychart-beta horizontal` when categories have long names or you want a ranked list that reads top to bottom. Here is Taskade's own [integration](https://www.taskade.com/integrations) breadth, by category.

```mermaid
xychart-beta horizontal
    title "Connected apps by category"
    x-axis [Communication, Project Mgmt, Productivity, Marketing, Social, Developer, CRM, Commerce]
    y-axis "Apps" 0 --> 10
    bar [8, 8, 7, 6, 5, 3, 2, 2]
```

**Horizontal combined — a line over horizontal bars:**

Overlay a line on horizontal bars to compare two series at a glance, like planned versus actual.

```mermaid
xychart-beta horizontal
    title "Budget vs Actual by team"
    x-axis [Eng, Sales, Marketing, Product, Ops]
    y-axis "USD (K)" 0 --> 600
    bar "Budget" [500, 350, 250, 200, 150]
    line "Actual" [480, 380, 230, 180, 160]
```

---

## 🤖 Mermaid in the Age of AI

Mermaid's constrained **ABNF grammar** gives it a unique advantage in the AI era. Unlike free-form visual tools, Mermaid syntax follows strict rules that LLMs can learn with lower hallucination rates than other diagram languages.

```mermaid
graph TD
    A[Natural Language Prompt] --> B[LLM]
    B --> C{Output Format}
    C -->|Mermaid Syntax| D[Structured Text]
    C -->|SVG/HTML| E[Unstructured Markup]
    D --> F[Validated Parse]
    E --> G[Error-Prone]
    F --> H[Rendered Diagram]
    G -.->|Retry| B
    style D fill:#ff2d60,color:#fff
    style H fill:#ff2d60,color:#fff
```

The AI-Mermaid ecosystem in 2026:

- **ChatGPT** — Mermaid Chart plugin for diagram generation
- **MCP Server** — dynamic diagram generation from any LLM
- **Gemini** — powers Mermaid AI for intelligent diagram suggestions
- **[Taskade Genesis](https://www.taskade.com/create)** — renders [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) diagrams inside AI-generated apps, blog posts, and workspaces

### Why beautiful-mermaid Exists

The core Mermaid.js library is optimized for the browser. But modern use cases — server-side rendering, AI pipelines, terminal output — need something different.

[beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) by lukilabs was built for the age of AI:

| Feature | Mermaid.js | beautiful-mermaid |
|---------|------------|-------------------|
| **Rendering** | Async, browser-dependent | Synchronous, zero DOM deps |
| **Output** | SVG only | SVG + ASCII/Unicode |
| **Themes** | 5 built-in | 15 built-in + any Shiki theme |
| **React** | Requires async handling | Works with `useMemo()` |
| **Performance** | Variable | 100+ diagrams in <500ms |
| **Background** | Opaque | Transparent support |
| **Diagram types** | 15+ | 6 (focused, high-quality) |

The 15 built-in themes include: `zinc-light`, `zinc-dark`, `tokyo-night`, `tokyo-night-storm`, `tokyo-night-light`, `catppuccin-mocha`, `catppuccin-latte`, `nord`, `nord-light`, `dracula`, `github-light`, `github-dark`, `solarized-light`, `solarized-dark`, and `one-dark`.

At Taskade, we use `catppuccin-mocha` with our brand accent `#ff2d60` — every mermaid diagram on this blog renders through beautiful-mermaid's synchronous SVG pipeline.

---

## ⚔️ Mermaid vs. The Competition

Mermaid didn't invent text-to-diagram. Here's how the landscape looks in 2026:

```mermaid
graph TD
    subgraph pioneers [Pioneers - Pre-2010]
        A[Graphviz<br/>DOT Language<br/>1991]
        B[PlantUML<br/>Java-based<br/>2009]
    end
    subgraph modern [Modern Wave - 2014+]
        C[Mermaid.js<br/>Markdown-native<br/>2014]
        D[D2<br/>Go-based<br/>2022]
    end
    subgraph visual [Visual Tools]
        E[Excalidraw<br/>Hand-drawn<br/>2020]
        F[tldraw<br/>Canvas-based<br/>2021]
    end
    A -.->|influenced| C
    B -.->|influenced| C
    C -.->|inspired| D
    style C fill:#ff2d60,color:#fff
```

| Tool | Syntax | Integrations | AI-Readiness | Best For |
|------|--------|-------------|-------------|----------|
| **Mermaid.js** | Markdown-like | GitHub, GitLab, Notion, Obsidian, VS Code | Highest (constrained grammar) | Docs-as-code, README diagrams |
| **PlantUML** | Verbose, powerful | IntelliJ, Confluence, Jenkins | Medium | UML-heavy enterprise projects |
| **Graphviz** | DOT language | Academic tools, CLI | Low | Large algorithmic graph layouts |
| **D2** | Clean, modern | CLI, VS Code, CI | High | Modern infra documentation |
| **Structurizr** | DSL (model-based) | PlantUML export, C4 native | Medium | C4 architecture models |
| **Eraser** | DiagramGPT | Web app, VS Code | Very High | AI-first diagram generation |
| **Python `diagrams`** | Python code | Jupyter, CLI (40K+ stars) | Medium | Cloud architecture (AWS/Azure/GCP) |
| **Excalidraw** | Visual (no code) | Obsidian, VS Code | N/A | Whiteboard-style brainstorming |

Mermaid's decisive advantage: **platform ubiquity**. No other text-to-diagram tool renders natively in GitHub, GitLab, Notion, and Obsidian simultaneously.

### The Model-Based Alternative: Structurizr

One tool deserves special mention. **Structurizr**, created by Simon Brown (inventor of the C4 model), takes a fundamentally different approach: instead of drawing individual diagrams, you build a **model** of your architecture and generate multiple views from it.

Change a service name once → it updates across all diagrams. Add a new component → it appears in every relevant view. This model-based approach eliminates the consistency problem that plagues Mermaid and PlantUML, where the same component might be named differently in different diagrams.

The tradeoff: Structurizr is **C4-only** (context, container, component, code levels). Mermaid handles 15+ diagram types. Most teams use both — Structurizr for architecture documentation, Mermaid for everything else.

### Same Diagram, Three Syntaxes

To illustrate the syntax differences, here's the same simple authentication flow expressed in three languages:

**Mermaid** (rendered live):

```mermaid
graph LR
    A[User] --> B[Auth Service]
    B --> C[(User DB)]
    B --> D[Token Service]
    D --> E[Protected API]
    style B fill:#1e1e2e,color:#cdd6f4,stroke:#00d4aa,stroke-width:2px
    style D fill:#1e1e2e,color:#cdd6f4,stroke:#00d4aa,stroke-width:2px
```

**PlantUML** (same diagram, different syntax):

```
@startuml
actor User
User -> [Auth Service]
[Auth Service] -> database [User DB]
[Auth Service] -> [Token Service]
[Token Service] -> [Protected API]
@enduml
```

**D2** (same diagram, cleanest syntax):

```
User -> Auth Service -> User DB
Auth Service -> Token Service -> Protected API
```

Mermaid's syntax sits between PlantUML's verbosity and D2's minimalism. The tradeoff: Mermaid has the broadest rendering support, D2 has the cleanest output, PlantUML has the most diagram types.

### Choosing the Right Tool: Practitioner Insights

Jacqui Read, author of *Communication Patterns* (O'Reilly), [teaches a workshop](https://www.youtube.com/watch?v=QvESyTxeN4o) on diagrams-as-code with AI. Her framework for choosing between tools:

1. **What diagram type do you need?** Activity diagrams → PlantUML. C4 architecture → Structurizr. Flowcharts and sequences → Mermaid.
2. **What does your organization already use?** If your knowledge management renders Mermaid, stick with Mermaid.
3. **Do you need a model or just diagrams?** Structurizr maintains a model behind the scenes — change a service name once and it updates across all views. Mermaid and PlantUML are stateless diagrams.
4. **Where will diagrams render?** Mermaid is JavaScript-native (easy for web platforms). PlantUML requires a Java runtime (harder to integrate).
5. **License compatibility** — all three are open source but with different licenses.

> "You can't just say 'we're only going to use Mermaid in our organization.' It doesn't cover everything you're going to need. In some contexts you'll choose one and in some contexts another." — Jacqui Read

The critical gap Read identifies: **Mermaid has no legend/key feature**. PlantUML has one (though clunky). Structurizr auto-generates legends from the model. For production architecture docs, this matters.

### The Hallucination Problem

When LLMs generate Mermaid diagrams, the results vary based on **how specific your prompt is**:

- **Too high-level** ("create a diagram of my system") → hallucinated syntax, made-up keywords
- **Too specific** ("move elements from left to right") → LLMs invent non-existent arrow modifiers
- **Just right** ("reorder these elements so X appears on the right") → correct output

Read's observation: the prompt for generating a sequence diagram via LLM is often **longer than just writing the Mermaid code directly**. The real value of LLMs is in **conversion** (PlantUML → Mermaid → Structurizr), **error debugging**, and **generating diagrams from existing code** — not writing diagrams from scratch.

### Spec-Driven Development: Diagrams as Validation

A new movement in 2026, **spec-driven development**, uses Markdown specifications (part human, part AI) to drive code generation. Diagrams-as-code plays a validation role:

```mermaid
graph TD
    A[Human + AI Write Spec] --> B[Spec Contains<br/>Mermaid Diagrams]
    B --> C[AI Generates Code]
    C --> D[AI Generates Diagram<br/>of Actual Code]
    D --> E{Spec Diagram ≟<br/>Code Diagram}
    E -->|Match| F[Ship It]
    E -->|Mismatch| G[Review & Fix]
    G --> A
    style E fill:#ff2d60,color:#fff
    style F fill:#ff2d60,color:#fff
```

The pattern: give an LLM your architecture spec (with Mermaid diagrams), let it generate code, then ask a **different model** to diagram the generated code. Compare the two diagrams visually. Humans are good at spotting visual mismatches — better than reading thousands of lines of code.

> "The diagrams aren't necessarily for the AI. They're for humans to validate what the AI produced." — Jacqui Read

---

## 🌍 Platform Integrations

The breadth of Mermaid integrations in 2026 is unmatched:

```mermaid
graph TD
    M[Mermaid.js] --> G[GitHub<br/>Native since Feb 2022]
    M --> GL[GitLab<br/>Native since v10.3]
    M --> AZ[Azure DevOps<br/>Native rendering]
    M --> N[Notion<br/>Native block]
    M --> O[Obsidian<br/>Native rendering]
    M --> VS[VS Code / Cursor<br/>Windsurf / IDX]
    M --> D[Docusaurus<br/>Plugin]
    M --> MK[MkDocs<br/>Plugin]
    M --> C[Confluence<br/>Plugin]
    M --> J[Jupyter<br/>Notebooks]
    M --> T[Taskade<br/>beautiful-mermaid]
    style M fill:#1e1e2e,color:#cdd6f4,stroke:#00d4aa,stroke-width:2px
    style T fill:#2a1225,color:#ff8fa3,stroke:#ff2d60,stroke-width:2px
```

The **February 2022 GitHub announcement** was the inflection point. Before that, developers needed browser extensions or custom build steps. After, any `README.md` with a mermaid code block rendered automatically. Stars jumped from ~35K to 52K in a single year.

---

## 💰 From Open Source to $7.5M: Mermaid Chart Inc.

In 2022, Sveidqvist partnered with **Open Core Ventures** to co-found **Mermaid Chart Inc.**, with Andrew Firestone as CEO. The thesis: Mermaid's open-source library is the foundation; the company builds commercial collaboration, editing, and enterprise features on top.

In **March 2024**, Mermaid Chart raised a **$7.5M seed round** from Sequoia, Microsoft M12, and Open Core Ventures — a strong signal that diagrams-as-code had matured from developer curiosity to enterprise infrastructure.

The business model follows the **open core** pattern:

```mermaid
stateDiagram-v2
    [*] --> OpenSource
    state OpenSource {
        Library : Mermaid.js (MIT)
        Rendering : 15+ diagram types
        Integrations : GitHub, GitLab, etc.
    }
    OpenSource --> Commercial : Mermaid Chart Inc.
    state Commercial {
        Editor : Visual diagram editor
        Collab : Team collaboration
        Enterprise : SSO, audit, compliance
        AI : Gemini-powered suggestions
    }
    Commercial --> [*]
```

---

## 📊 The Flowchart Renaissance

Flowcharts were Mermaid's *first* diagram type — and they remain its most commercially valuable. Keywords like "flowchart generator," "generate flowchart," and "flowchart maker" consistently rank among the highest-converting search terms in the productivity and diagramming space.

Why? Because flowcharts solve a universal problem: **making complex processes visible**. Business workflows, onboarding sequences, decision trees, approval chains — every organization has processes that live in someone's head until a flowchart externalizes them.

### Mermaid AI: Natural Language to Flowchart

Mermaid Chart's [AI chat interface](https://www.youtube.com/watch?v=QHMdkajJ-oQ) takes this further — you describe a process in plain English and get a rendered flowchart instantly:

> *"Create a user sign-in flow for a website"*

The AI generates the flowchart, and you iterate conversationally: *"Introduce a forgot password flow"*, *"Make the diagram more visually appealing"*. Each prompt refines the diagram in real time. The result is a fully customizable flowchart — editable via AI chat, visual editor, or raw Mermaid code — in under two minutes.

```mermaid
graph TD
    A[Describe Process<br/>in Plain English] --> B[Mermaid AI<br/>Generates Flowchart]
    B --> C{Satisfied?}
    C -->|No| D[Refine via Chat]
    D --> B
    C -->|Yes| E[Edit in Visual Editor]
    E --> F[Export PNG/SVG]
    E --> G[Export Mermaid Code]
    F --> H[Presentations & Docs]
    G --> I[Version Control]
    style B fill:#ff2d60,color:#fff
    style E fill:#ff2d60,color:#fff
```

This workflow is why [AI flowchart generators](https://www.taskade.com/generate/flowchart) have exploded — tools like [Taskade's Flowchart Maker](https://www.taskade.com/generate/flowchart/flowchart-maker) and [Flowchart Creator](https://www.taskade.com/generate/flowchart/flowchart-creator) let anyone build professional process diagrams from a single prompt.

For pre-built starting points, explore [flowchart templates](https://www.taskade.com/templates/flowchart) or use [AI flowchart agents](https://www.taskade.com/agents/flowchart) that design, refine, and maintain diagrams that stay synced with your actual workflows.

### Claude Code: Architecture Diagrams from Context

Where Mermaid AI handles individual flowcharts, [Claude Code with Opus 4.6](https://www.youtube.com/watch?v=RU43gmmQ6Z0) generates entire **architecture diagrams** from codebase context:

- Point Claude at a file → get a flowchart of the code's logic
- Describe a system → get a Mermaid sequence diagram of the data flow
- Ask for a CI/CD pipeline → get a rendered graph with all stages

The key insight: Claude generates **both** Mermaid (structured, precise, version-controlled) and Excalidraw (hand-drawn, collaborative, presentation-ready) from the same prompt. Mermaid for documentation that lives in Git. Excalidraw for whiteboard sessions with the team.

### IDE Integration: Diagrams Where You Code

The Mermaid ecosystem now extends into every major code editor. A [single plugin](https://www.youtube.com/watch?v=FvSI68laaDA) works across **VS Code, Cursor, Windsurf, and Google's Project IDX** (all VS Code forks sharing the same extension system):

- **Live preview** — edit Mermaid code on the left, see the rendered diagram update on the right
- **AI generation** — ask the editor's AI to create a Mermaid diagram from any file in your project
- **Cloud sync** — connect diagrams to your Mermaid Chart account across editors
- **Export** — PNG, SVG, or raw Mermaid code from the preview panel

The workflow: write code → ask AI to diagram it → preview renders live → export or commit the `.mmd` file alongside the code. Diagrams stay version-controlled, reviewable, and always in sync.

For teams looking for alternatives to standalone diagramming tools, Taskade offers a [free Whimsical alternative](https://www.taskade.com/compare/free-whimsical-alternative) and [free Miro alternative](https://www.taskade.com/compare/free-miro-alternative) with AI-powered flowchart generation built into every workspace.

---

## 🔮 The Future: Diagrams Generated, Not Drawn

The trajectory is clear. Diagrams are moving from **manually drawn** → **text-defined** → **AI-generated**.

```mermaid
graph LR
    A[Manual Drawing<br/>Visio, Lucidchart<br/>1990s-2010s] --> B[Text-Defined<br/>Mermaid, PlantUML<br/>2010s-2020s]
    B --> C[AI-Generated<br/>LLM + Mermaid<br/>2024-Present]
    C --> D[Living Diagrams<br/>Auto-updating<br/>from code]
    style C fill:#ff2d60,color:#fff
    style D fill:#ff2d60,color:#fff
```

In the AI-generated phase, you don't write `graph TD` — you describe what you want:

> *"Show me how our authentication service handles OAuth flows with the user database and cache layer"*

The LLM outputs valid Mermaid syntax. The renderer (like beautiful-mermaid) converts it to SVG. The diagram lives in your docs, updates when the code changes, and renders everywhere your Markdown goes.

This is exactly what [Taskade Genesis](https://www.taskade.com/create) enables. Build an AI app with a single prompt, and the [agents](https://www.taskade.com/agents) generate architecture diagrams, data flow charts, and process maps — all as Mermaid code blocks that render live in your workspace.

---

## 🛠️ Getting Started with Mermaid in 2026

### Mermaid Live Editor — The Fastest Way to Start

The quickest path to your first diagram: open **mermaid.live** in your browser. No installation, no account, no setup. Type Mermaid syntax on the left, see the rendered diagram on the right. Export as PNG, SVG, or shareable link.

The Live Editor is how most developers first encounter Mermaid — and it's the best way to prototype a diagram before committing it to your repo.

### In GitHub

Just add a mermaid code block to any Markdown file:

````
```mermaid
graph LR
    A[Your Idea] --> B[Your Diagram]
```
````

That's it. No extensions, no build steps, no configuration. Works in README files, issues, PRs, discussions, and Gists. Also supported natively in **GitLab** (since v10.3) and **Azure DevOps**.

### In Your Editor

The Mermaid VS Code extension provides **live preview** — edit code on the left, see the diagram update in real time on the right. The same extension works in **Cursor**, **Windsurf**, and **Google's Project IDX** since all are VS Code forks.

Install from the extensions marketplace → create a `.mmd` file → right-click → "Preview Diagram."

### In Taskade

Every [Taskade blog post](https://www.taskade.com/blog) and workspace supports mermaid code blocks rendered via [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) with the `catppuccin-mocha` theme and teal accent. [Taskade Genesis](https://www.taskade.com/create) AI agents can generate diagrams from natural language descriptions — just describe the process and get a rendered [flowchart](https://www.taskade.com/generate/flowchart) or architecture diagram.

### With beautiful-mermaid (Code)

```javascript
import { renderMermaidSVG, THEMES } from 'beautiful-mermaid';

const svg = renderMermaidSVG('graph LR\n  A --> B --> C', {
  theme: THEMES['catppuccin-mocha'],
  accent: '#00d4aa',
  transparent: true,
});
```

Synchronous. No DOM. Works anywhere JavaScript runs — server-side rendering, CLI tools, CI pipelines, React `useMemo()`.

---

## 🎨 The Renderer Behind This Post: Beautiful-Mermaid

Every diagram you've scrolled past in this article was rendered server-side by [**beautiful-mermaid**](https://github.com/lukilabs/beautiful-mermaid) — an open-source renderer from Luki Labs (the team behind Craft) that turns Mermaid syntax into hand-tuned SVGs with zero client-side JavaScript. It's the same engine that powers diagrams across the Taskade [blog](https://www.taskade.com/blog) and [wiki](https://www.taskade.com/wiki).

Standard Mermaid.js renders in the browser at runtime. Beautiful-mermaid renders ahead of time, on the server, and bakes the theme straight into the SVG — so diagrams appear instantly with no layout shift, no hydration flash, and no render-blocking script. That's why every diagram on this page switches between light and dark the moment you toggle your theme.

| Capability | Mermaid.js (default) | Beautiful-Mermaid |
|---|---|---|
| Rendering | Client-side, async | Server-side, synchronous |
| Output formats | SVG | SVG **and** ASCII/Unicode |
| Built-in themes | 5 | **15+** (Tokyo Night, Catppuccin, Nord, Dracula, GitHub, Solarized…) |
| Theme switching | Re-render | Instant (CSS custom properties) |
| Mono mode | No | Yes — a coherent diagram from two colors |
| Client JS required | Yes | **None** |

Here's a real-world flow it renders cleanly — an OAuth 2.0 authorization handshake, the kind of sequence diagram that shows up in every auth design doc:

```mermaid
sequenceDiagram
    participant U as User
    participant A as App
    participant S as Auth Server
    participant R as Resource API
    U->>A: Click "Sign in"
    A->>S: Redirect with client_id + PKCE challenge
    S->>U: Prompt for consent
    U->>S: Approve
    S->>A: Authorization code
    A->>S: Exchange code + verifier
    S->>A: Access token
    A->>R: Request with Bearer token
    R->>A: Protected resource
    A->>U: Signed in
```

Because beautiful-mermaid also emits **ASCII/Unicode** output, the same diagram source can render in a terminal, a CLI tool, or a plain-text changelog — no browser required. With **mono mode**, a dense diagram collapses to a coherent two-color palette that still reads cleanly in print. For a platform that ships thousands of diagrams across [blog posts](https://www.taskade.com/blog), wiki articles, and AI-generated docs, server-side rendering isn't a nicety — it's what keeps pages fast at scale. It's the same instinct behind [Taskade Genesis](https://www.taskade.com/create): do the heavy lifting once, on the server, and hand the user something that just works.

---

## 📐 Mermaid Best Practices

Lessons from teams using Mermaid at scale:

**1. Keep diagrams under 30 nodes.** Beyond 30, layout algorithms struggle and the diagram becomes unreadable. Split into multiple diagrams with a clear hierarchy (overview → detail).

**2. Use subgraphs for grouping.** Don't let a flat flowchart sprawl. Subgraphs create visual boundaries that help readers parse the diagram:

```mermaid
graph TD
    subgraph frontend [Frontend]
        A[React App] --> B[State Manager]
    end
    subgraph backend [Backend]
        C[API Server] --> D[(Database)]
    end
    B --> C
    style A fill:#1e1e2e,color:#cdd6f4,stroke:#00d4aa
    style C fill:#1e1e2e,color:#cdd6f4,stroke:#00d4aa
```

**3. Label everything.** Every edge should have a label. Every node should have a human-readable name, not just an ID. Unlabeled arrows are the #1 source of diagram misinterpretation.

**4. Choose direction intentionally.** `graph TD` (top-down) for hierarchies. `graph LR` (left-right) for sequences and pipelines. Don't default to one direction for everything.

**5. Store diagrams alongside code.** The whole point of diagrams-as-code is co-location. Put your `.mmd` files in the same directory as the code they describe. Review them in the same PR.

**6. Don't diagram everything.** Document the "why" and the high-level "how." The lower you go in detail, the faster diagrams rot. API interfaces and system boundaries — yes. Individual function calls — usually no.

---

## 🧬 From Text to Living Diagrams

Knut Sveidqvist lost a Visio file in 2014. Twelve years later, his frustration powers 85,000+ stars of open-source infrastructure, native rendering in every major developer platform, and an AI-ready grammar that LLMs produce more reliably than any other visual language.

The lesson: **the best tools don't just solve a problem — they change the workflow**. Mermaid didn't make better diagrams. It made diagrams a natural part of how developers think and communicate.

At Taskade, we took this one step further with [Taskade Genesis](https://www.taskade.com/create) — where [AI agents](https://www.taskade.com/agents) don't just generate diagrams, they generate entire [living applications](https://www.taskade.com/blog/code-vs-runtime) with diagrams embedded. Your workspace becomes the runtime. Your agents become the team. Your [automations](https://www.taskade.com/automate) become the execution.

**One prompt. One app. Diagrams that live.**

[**Try Taskade Genesis free →**](https://www.taskade.com/create)

---

## 📚 Further Reading

### Flowchart & Diagram Tools
- [AI Flowchart Generator](https://www.taskade.com/generate/flowchart) — Create professional flowcharts from natural language
- [AI Flowchart Maker](https://www.taskade.com/generate/flowchart/flowchart-maker) — Streamline workflows with AI-powered diagrams
- [Flowchart Templates](https://www.taskade.com/templates/flowchart) — Pre-designed templates for processes, decision trees, and workflows
- [AI Flowchart Agents](https://www.taskade.com/agents/flowchart) — Agents that design, refine, and maintain process diagrams
- [Free Whimsical Alternative](https://www.taskade.com/compare/free-whimsical-alternative) — AI-powered diagramming in Taskade
- [Free Miro Alternative](https://www.taskade.com/compare/free-miro-alternative) — Collaborative flowcharts without the premium price

### AI & Technology Deep Dives
- [Metacognitive AI: How Agents Learn to Think About Thinking](https://www.taskade.com/blog/metacognitive-ai) — The 50-year arc from Flavell (1979) to Reflexion (2023) to Genesis (2026), with mermaid diagrams of the Nelson-Narens monitoring/control loop and Wells' Cognitive Attentional Syndrome
- [What Is Agentic Engineering?](https://www.taskade.com/blog/what-is-agentic-engineering) — How AI agents are reshaping software development
- [How Do Large Language Models Work?](https://www.taskade.com/blog/how-do-llms-work) — Transformers explained from attention to generation
- [What Is Intelligence?](https://www.taskade.com/blog/what-is-intelligence) — From biological neurons to AI agents
- [They Generate Code, We Generate Runtime](https://www.taskade.com/blog/code-vs-runtime) — The Taskade Genesis manifesto
- [The Complete History of GitHub](https://www.taskade.com/blog/github-history) — Home of 1B+ repos and 85K+ Mermaid stars, from Octocat to Copilot agents
- [Types of Memory in AI Agents](https://www.taskade.com/blog/ai-agent-memory) — How agents remember and learn
- [What Is AI Safety?](https://www.taskade.com/blog/what-is-ai-safety) — The complete guide to risks, alignment, and the future
- [What Is Mechanistic Interpretability?](https://www.taskade.com/blog/what-is-mechanistic-interpretability) — Understanding what happens inside neural networks
- [What Is Grokking in AI?](https://www.taskade.com/blog/what-is-grokking-ai) — When models suddenly learn
- [Agentic Workflows: Path Towards AGI](https://www.taskade.com/blog/agentic-workflows-towards-agi) — Design patterns for autonomous AI

### Explore Taskade
- [Taskade Genesis — Build AI Apps](https://www.taskade.com/create) — One prompt, one living app
- [AI Agents](https://www.taskade.com/agents) — Custom agents with tools, memory, and multi-model collaboration
- [Automations](https://www.taskade.com/automate) — durable execution with 100+ integrations
- [Taskade Community](https://www.taskade.com/apps) — Templates, agents, and workflows

- [Free AI Flowchart Maker: 13 Best Tools Tested (2026)](https://www.taskade.com/blog/ai-flowchart-makers)

## Frequently Asked Questions

### What is Mermaid.js and who created it?

Mermaid.js is an open-source JavaScript library for creating diagrams from text-based syntax. Created in 2014 by Swedish software architect Knut Sveidqvist after losing a Microsoft Visio file, it now has 85K+ GitHub stars and supports 15+ diagram types. The name was inspired by The Little Mermaid, which Sveidqvist's children were watching at the time.

### What diagram types does Mermaid.js support?

Mermaid.js supports 15+ diagram types: flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, pie charts, user journey maps, git graphs, mindmaps, timelines, quadrant charts, sankey diagrams, XY charts, and block diagrams. The beautiful-mermaid renderer supports 6 of these with enhanced SVG and ASCII output.

### When did GitHub add native Mermaid support?

GitHub added native Mermaid rendering on February 14, 2022. Any code block tagged as mermaid in GitHub Markdown files, issues, PRs, and discussions renders as a diagram. Support extended to GitHub Gists on February 28, 2022. This was the watershed moment that drove mainstream developer adoption.

### What is beautiful-mermaid and how does it differ from Mermaid.js?

beautiful-mermaid is a TypeScript library by lukilabs that renders Mermaid diagrams as SVG or ASCII/Unicode output. Unlike core Mermaid.js, it offers synchronous rendering (works with React useMemo), 15 built-in themes with Shiki VS Code theme compatibility, zero DOM dependencies, and transparent background support. It supports 6 diagram types: flowcharts, state diagrams, sequence diagrams, class diagrams, ER diagrams, and XY charts.

### How does Mermaid.js compare to PlantUML and Graphviz?

Mermaid.js has the broadest platform integration (GitHub, GitLab, Notion, Obsidian, VS Code) and easiest syntax. PlantUML offers the most diagram types and customization but requires a Java runtime. Graphviz excels at large algorithmic graph layouts but has dated visuals and a steep learning curve. D2 (2022) offers modern visuals and fast Go-based rendering but has a smaller ecosystem.

### What is the diagrams-as-code movement?

Diagrams-as-code is a sub-movement of docs-as-code where visual diagrams are written in text-based syntax stored in version control alongside source code. Benefits include proper version history, PR-based review, elimination of doc-rot, and developer-friendly workflows. Mermaid.js leads this movement with 85K+ GitHub stars and 8M+ users.

### How is Mermaid.js used in AI and LLM workflows?

Mermaid's constrained ABNF grammar makes it uniquely AI-ready — LLMs produce valid Mermaid syntax with lower hallucination rates than other diagram languages. ChatGPT has a Mermaid Chart plugin, there is an MCP Server for dynamic diagram generation, and Gemini powers Mermaid AI. Taskade Genesis uses beautiful-mermaid to render AI-generated diagrams inside blog posts and workspaces.

### What funding has Mermaid Chart raised?

Mermaid Chart Inc., co-founded by Knut Sveidqvist with Open Core Ventures in 2022, raised a $7.5M seed round in March 2024. Investors include Sequoia, Microsoft M12, and Open Core Ventures. The company offers commercial editing, collaboration, and enterprise features built on top of the open-source Mermaid.js library.

### How do you create a flowchart with Mermaid.js?

Create a Mermaid flowchart by writing a code block starting with graph TD (top-down) or graph LR (left-right). Define nodes with square brackets for rectangles, curly braces for diamonds, and parentheses for rounded shapes. Connect nodes with arrows using --> for solid lines or -.-> for dotted lines. Add labels with pipe syntax: -->|label|. Mermaid flowcharts render natively in GitHub, GitLab, Notion, Obsidian, and VS Code. For AI-powered generation, tools like Mermaid AI and Taskade Genesis create flowcharts from natural language descriptions.

### Can you use Mermaid diagrams in VS Code, Cursor, and Windsurf?

Yes. A single Mermaid plugin works across VS Code, Cursor, Windsurf, and Google's Project IDX since all four are VS Code forks sharing the same extension system. The plugin provides live preview, AI diagram generation from files, cloud sync with Mermaid Chart accounts, and PNG/SVG export. Any changes in code update the visual preview instantly, and vice versa.