Diagrams that compile.

Mermaid gets the same treatment as your code — syntax highlighting, completion, validation, and refactoring. All inside your IDE.

Install Plugin Documentation

architecture-beta
  group api(cloud)[API Layer]
  group services(server)[Services]
  group data(database)[Data Layer]

  service gateway(internet)[API Gateway] in api
  service auth(lock)[Auth] in services
  service users(person)[Users] in services
  service orders(cart)[Orders] in services
  service postgres(database)[PostgreSQL] in data
  service redis(disk)[Redis] in data

  gateway:B --> T:auth
  gateway:B --> T:users
  gateway:B --> T:orders
  auth:B --> T:redis
  users:B --> T:postgres
  orders:B --> T:postgres

Write diagrams like you write code.

Not a preview tool. A full language implementation.

Code Completion

Press Ctrl+Space and get context-aware suggestions. Keywords, node references, style properties — the IDE knows what you need.

→ Diagram type keywords (flowchart, sequenceDiagram, …)
→ Node shapes and arrow types
→ Previously defined node IDs
→ Style and class properties

architecture.mmd

sequenceDiagram

participant API

participant DB

API->>DB← autocomplete

API

+ new participant…

flow.mmd

flowchart TD

A[Start] —> B[Process]

B —> C

Error: Undefined node ‘C’. Did you mean to define it?

Real-time Validation

Errors highlighted before you try to render. Hover for details, click for quick fixes. No more guessing what went wrong.

→ Syntax errors caught as you type
→ Undefined node references
→ Invalid style properties
→ Diagram-specific rule violations

Refactoring

Shift+F6 to rename. All references update automatically. This isn’t find-replace — it’s real refactoring.

→ Rename nodes across the entire diagram
→ Find usages to see where a node is referenced
→ Go to definition with Ctrl+B
→ Safe delete with usage checking

Rename Node

flowchart LR

UserService[User Service]

UserService —> DB

API —> UserService

Shift+F6→ Rename all 3 occurrences

Where it fits.

README Diagrams

Diagrams that live in your repo, render on GitHub, and get full IDE support. No more broken image links or outdated PNGs.

mermaid</div>         <div className="text-gray-400">flowchart LR</div>         <div className="text-gray-400">  Install --&gt; Configure --&gt; Use</div>         <div className="text-gray-500">

Full syntax highlighting and validation inside Markdown code blocks.

API Documentation

Sequence diagrams that show exactly how your endpoints work. Update the diagram when the code changes — they’re in the same PR.

Architecture Decision Records

Document your architecture decisions with diagrams that evolve with your codebase. C4, flowcharts, ER diagrams — all version controlled.

# ADR-0012: Event-Driven Architecture

## Context

mermaid</div>         <div className="text-gray-400">flowchart TD</div>         <div className="text-gray-400">  Service --&gt; EventBus --&gt; Consumer</div>         <div className="text-gray-500">