✓ Verified 📁 File Management ✓ Enhanced Data

Mermaid

Generate diagrams from text using [Mermaid](https://mermaid.js.org/).

Rating: 4.2 (150 reviews)
Downloads: 42,004 downloads
Version: 1.0.0

Overview

Generate diagrams from text using [Mermaid](https://mermaid.js.org/).

Complete Documentation

View Source →

Mermaid Diagrams Skill

Generate diagrams from text using Mermaid.

Requirements

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

Usage

Write Mermaid syntax to a .mmd file
Run mmdc to render PNG/SVG
Return the image to the user

Basic Command

bash

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

Options

Flag	Description
-i	Input .mmd file
-o	Output file (.png, .svg, .pdf)
-t	Theme: default, dark, forest, neutral
-b	Background color (transparent, hex)
-w	Width in pixels (default: 800)
-H	Height in pixels
-s	Scale factor (default: 1, use 2-3 for high-res)
-c	Config JSON file for advanced theming

Supported Diagram Types

Flowchart: graph TD / graph LR
Sequence: sequenceDiagram
Class: classDiagram
State: stateDiagram-v2
ER: erDiagram
Gantt: gantt
Pie: pie
Mindmap: mindmap
Timeline: timeline
Git graph: gitGraph
Quadrant: quadrantChart
Block: block-beta

Workflow

Determine the best diagram type for what the user wants
Write the .mmd file to /tmp/mermaid-.mmd
Render: mmdc -i /tmp/mermaid-.mmd -o /tmp/mermaid-.png -t dark -b transparent -s 2
Show the image to the user via Read tool
Clean up temp files if not needed

Example: Architecture Diagram

mermaid

graph TD
    A[Client] -->|HTTPS| B[API Gateway]
    B --> C[Auth Service]
    B --> D[App Server]
    D --> E[(PostgreSQL)]
    D --> F[(Redis Cache)]

Example: Sequence Diagram

mermaid

sequenceDiagram
    participant U as User
    participant A as API
    participant DB as Database
    U->>A: POST /login
    A->>DB: Validate credentials
    DB-->>A: User record
    A-->>U: JWT token

Tips

Use graph LR for left-to-right flow, graph TD for top-down
Keep node labels short — detail goes in tooltips or notes
Use subgraphs to group related components
For dark backgrounds, use -t dark -b transparent
Scale -s 2 or -s 3 for sharp images on retina displays
Always use pty: false when calling mmdc

Theming

For custom colors, create a config JSON:

json

{
  "theme": "base",
  "themeVariables": {
    "primaryColor": "#f59e0b",
    "primaryTextColor": "#1a1a1a",
    "primaryBorderColor": "#d97706",
    "lineColor": "#6b7280",
    "secondaryColor": "#10b981",
    "tertiaryColor": "#3b82f6"
  }
}

Then: mmdc -i input.mmd -o output.png -c config.json

Installation

Terminal bash


openclaw install mermaid

Copied!

💻Code Examples

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

mmdc--i-inputmmd--o-outputpng--t-dark--b-transparent.txt

### Options

| Flag | Description |
|---|---|
| `-i` | Input `.mmd` file |
| `-o` | Output file (`.png`, `.svg`, `.pdf`) |
| `-t` | Theme: `default`, `dark`, `forest`, `neutral` |
| `-b` | Background color (`transparent`, hex) |
| `-w` | Width in pixels (default: 800) |
| `-H` | Height in pixels |
| `-s` | Scale factor (default: 1, use 2-3 for high-res) |
| `-c` | Config JSON file for advanced theming |

### Supported Diagram Types

- **Flowchart**: `graph TD` / `graph LR`
- **Sequence**: `sequenceDiagram`
- **Class**: `classDiagram`
- **State**: `stateDiagram-v2`
- **ER**: `erDiagram`
- **Gantt**: `gantt`
- **Pie**: `pie`
- **Mindmap**: `mindmap`
- **Timeline**: `timeline`
- **Git graph**: `gitGraph`
- **Quadrant**: `quadrantChart`
- **Block**: `block-beta`

### Workflow

1. Determine the best diagram type for what the user wants
2. Write the `.mmd` file to `/tmp/mermaid-<name>.mmd`
3. Render: `mmdc -i /tmp/mermaid-<name>.mmd -o /tmp/mermaid-<name>.png -t dark -b transparent -s 2`
4. Show the image to the user via `Read` tool
5. Clean up temp files if not needed

### Example: Architecture Diagram

A-->>U: JWT token

-a--u-jwt-token.txt

### Tips

- Use `graph LR` for left-to-right flow, `graph TD` for top-down
- Keep node labels short — detail goes in tooltips or notes
- Use subgraphs to group related components
- For dark backgrounds, use `-t dark -b transparent`
- Scale `-s 2` or `-s 3` for sharp images on retina displays
- **Always use `pty: false`** when calling `mmdc`

### Theming

For custom colors, create a config JSON:

example.txt

graph TD
    A[Client] -->|HTTPS| B[API Gateway]
    B --> C[Auth Service]
    B --> D[App Server]
    D --> E[(PostgreSQL)]
    D --> F[(Redis Cache)]

example.txt

sequenceDiagram
    participant U as User
    participant A as API
    participant DB as Database
    U->>A: POST /login
    A->>DB: Validate credentials
    DB-->>A: User record
    A-->>U: JWT token

example.json

{
  "theme": "base",
  "themeVariables": {
    "primaryColor": "#f59e0b",
    "primaryTextColor": "#1a1a1a",
    "primaryBorderColor": "#d97706",
    "lineColor": "#6b7280",
    "secondaryColor": "#10b981",
    "tertiaryColor": "#3b82f6"
  }
}