mermaid-diagrams

Render Mermaid diagrams (mmdc) to SVG/PNG/PDF — flowcharts, sequence, ERDs, class, state, Gantt, pie, gitGraph. Use when rendering .mmd or embedding diagrams in GitHub Markdown.

Jump to install

Repository: laurigates/claude-plugins
Last source activity: June 13, 2026 at 13:38
Detected SKILL.md language: English
Stars: 49
Forks: 7

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/laurigates/claude-plugins --skill mermaid-diagrams

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

mcp-management

Install, configure and troubleshoot MCP servers. Use when adding/enabling servers, editing .mcp.json, fixing OAuth, or when a server runs stale code after an upstream fix.

2026-08-08

finops-overview

FinOps snapshot — org billing, workflow stats, cache usage. Use when you want a high-level view of CI spending or workflow health before diving deeper.

2026-08-08

github-actions-finops

GitHub Actions billing, workflow efficiency, and waste analysis at org or repo level. Use when investigating CI/CD costs, wasted runs, or optimizing triggers.

2026-08-08

View all from this repository

Use this skill when...	Use d2-diagrams instead when...
Embedding a diagram directly in a GitHub README or wiki	The output needs rich styling, custom themes, or icons
Authoring sequence diagrams or simple flowcharts	The diagram has deeply nested containers or complex layouts
Targeting platforms that natively render Mermaid (GitHub, GitLab, Notion)	Generating standalone SVG/PDF architecture diagrams
Diagrams must travel as plain text alongside the source	A premium layout engine (`tala`) materially improves the result

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

# npx (no install)
npx @mermaid-js/mermaid-cli -i input.mmd -o output.svg

# Convert to SVG (default)
mmdc -i diagram.mmd -o diagram.svg

# Convert to PNG
mmdc -i diagram.mmd -o diagram.png

# Convert to PDF
mmdc -i diagram.mmd -o diagram.pdf

# Pipe from stdin
echo 'graph TD; A-->B' | mmdc --input - -o diagram.svg

# Use built-in theme
mmdc -i diagram.mmd -o diagram.svg -t dark
mmdc -i diagram.mmd -o diagram.svg -t forest
mmdc -i diagram.mmd -o diagram.svg -t neutral

# Custom CSS
mmdc -i diagram.mmd -o diagram.svg -C custom.css

# Background color
mmdc -i diagram.mmd -o diagram.png -b transparent
mmdc -i diagram.mmd -o diagram.png -b '#ffffff'

# Set dimensions (PNG)
mmdc -i diagram.mmd -o diagram.png -w 1920 -H 1080

# Scale factor
mmdc -i diagram.mmd -o diagram.png -s 2

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello
    B-->>A: Hi there
    A->>+B: Request
    B-->>-A: Response

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +fetch()
    }
    Animal <|-- Dog

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "ordered in"

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : submit
    Processing --> Complete : success
    Processing --> Error : failure
    Complete --> [*]
    Error --> Idle : retry

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Phase 1
    Task A :a1, 2024-01-01, 30d
    Task B :after a1, 20d

pie title Distribution
    "Category A" : 40
    "Category B" : 30
    "Category C" : 30

gitGraph
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit

graph TD
    A[Styled]:::custom --> B
    classDef custom fill:#f96,stroke:#333,stroke-width:2px
    style A fill:#bbf,stroke:#f66

# Using Docker
docker run --rm -v "$(pwd)":/data minlag/mermaid-cli -i /data/diagram.mmd -o /data/output.svg

# With UID for correct permissions
docker run -u $UID --rm -v "$(pwd)":/data minlag/mermaid-cli -i /data/diagram.mmd

Context	Command
Quick SVG	`mmdc -i diagram.mmd -o diagram.svg`
PNG with transparency	`mmdc -i diagram.mmd -o diagram.png -b transparent`
High-res PNG	`mmdc -i diagram.mmd -o diagram.png -s 2`
Dark theme	`mmdc -i diagram.mmd -o diagram.svg -t dark`
Batch process	`for f in *.mmd; do mmdc -i "$f" -o "${f%.mmd}.svg"; done`
Stdin pipe	`echo 'graph TD; A-->B' \| mmdc --input - -o out.svg`

Flag	Description
`-i, --input`	Input file (use `-` for stdin)
`-o, --output`	Output file (determines format)
`-t, --theme`	Theme: default, dark, forest, neutral
`-b, --backgroundColor`	Background color
`-C, --cssFile`	Custom CSS file
`-c, --configFile`	Mermaid config JSON
`-w, --width`	Output width (PNG)
`-H, --height`	Output height (PNG)
`-s, --scale`	Scale factor
`-p, --puppeteerConfigFile`	Puppeteer config
`-h, --help`	Show help

graph TB
    subgraph Frontend
        A[React App]
    end
    subgraph Backend
        B[API Gateway]
        C[Service 1]
        D[Service 2]
    end
    subgraph Data
        E[(PostgreSQL)]
        F[(Redis)]
    end
    A --> B
    B --> C
    B --> D
    C --> E
    D --> F

sequenceDiagram
    participant C as Client
    participant G as Gateway
    participant S as Service
    participant D as Database

    C->>G: HTTP Request
    G->>S: Forward
    S->>D: Query
    D-->>S: Result
    S-->>G: Response
    G-->>C: HTTP Response

{
  "args": ["--no-sandbox", "--disable-setuid-sandbox"]
}

mmdc -p puppeteer-config.json -i diagram.mmd -o diagram.svg

# Increase timeout
mmdc -i large.mmd -o large.svg --timeout 60000

name	mermaid-diagrams
description	Render Mermaid diagrams (mmdc) to SVG/PNG/PDF — flowcharts, sequence, ERDs, class, state, Gantt, pie, gitGraph. Use when rendering .mmd or embedding diagrams in GitHub Markdown.
user-invocable	false
allowed-tools	Bash, Read, Write, Grep, Glob, TodoWrite
model	sonnet
created	"2025-12-26T00:00:00.000Z"
modified	"2026-05-09T00:00:00.000Z"
reviewed	"2026-04-25T00:00:00.000Z"

name	mermaid-diagrams
description	Render Mermaid diagrams (mmdc) to SVG/PNG/PDF — flowcharts, sequence, ERDs, class, state, Gantt, pie, gitGraph. Use when rendering .mmd or embedding diagrams in GitHub Markdown.
user-invocable	false
allowed-tools	Bash, Read, Write, Grep, Glob, TodoWrite
model	sonnet
created	"2025-12-26T00:00:00.000Z"
modified	"2026-05-09T00:00:00.000Z"
reviewed	"2026-04-25T00:00:00.000Z"

Arrow	Description
`->`	Solid line
`-->`	Dotted line
`->>`	Solid with arrowhead
`-->>`	Dotted with arrowhead
`-x`	Solid with cross
`-)`	Async (open arrow)

Shape	Syntax
Rectangle	`[Text]`
Rounded	`(Text)`
Stadium	`([Text])`
Diamond	`{Text}`
Hexagon	`{{Text}}`
Circle	`((Text))`
Asymmetric	`>Text]`
Database	`[(Text)]`
Subroutine	`[[Text]]`

mermaid-diagrams

Install options

Review the source files