Mermaid.js v11 Overview

Create text-based diagrams using Mermaid.js v11 declarative syntax. Convert code to SVG/PNG/PDF via CLI or render in browsers/markdown files.

Quick Start

Basic Diagram Structure:

{diagram-type}

Common Diagram Types:

flowchart - Process flows, decision trees sequenceDiagram - Actor interactions, API flows classDiagram - OOP structures, data models stateDiagram - State machines, workflows erDiagram - Database relationships gantt - Project timelines journey - User experience flows

See references/diagram-types.md for all 24+ types with syntax.

Creating Diagrams

Inline Markdown Code Blocks:

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

Configuration via Frontmatter:

---
theme: dark
---
flowchart LR
    A --> B

Comments: Use %% prefix for single-line comments.

CLI Usage

Convert .mmd files to images:

Installation

npm install -g @mermaid-js/mermaid-cli

Basic conversion

mmdc -i diagram.mmd -o diagram.svg

With theme and background

mmdc -i input.mmd -o output.png -t dark -b transparent

Custom styling

mmdc -i diagram.mmd --cssFile style.css -o output.svg

See references/cli-usage.md for Docker, batch processing, and advanced workflows.

JavaScript Integration

HTML Embedding:

  flowchart TD
    A[Client] --> B[Server]

See references/integration.md for Node.js API and advanced integration patterns.

Configuration & Theming

Common Options:

theme: "default", "dark", "forest", "neutral", "base" look: "classic", "handDrawn" fontFamily: Custom font specification securityLevel: "strict", "loose", "antiscript"

See references/configuration.md for complete config options, theming, and customization.

Practical Patterns

Load references/examples.md for:

Architecture diagrams API documentation flows Database schemas Project timelines State machines User journey maps Resources references/diagram-types.md - Syntax for all 24+ diagram types references/configuration.md - Config, theming, accessibility references/cli-usage.md - CLI commands and workflows references/integration.md - JavaScript API and embedding references/examples.md - Practical patterns and use cases