# mermaid

> Generate diagrams from text using Mermaid syntax. Use when asked to create flowcharts, sequence diagrams, class diagrams, ER diagrams, state diagrams, Gantt charts, pie charts, or any visual diagram. Converts Mermaid markdown to PNG, SVG, or PDF.

- Author: dsheerindavidson
- Repository: Odezra/mermaid-skill
- Version: 20260130115542
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/Odezra/mermaid-skill
- Web: https://mule.run/skillshub/@@Odezra/mermaid-skill~mermaid:20260130115542

---

---
name: mermaid
description: Generate diagrams from text using Mermaid syntax. Use when asked to create flowcharts, sequence diagrams, class diagrams, ER diagrams, state diagrams, Gantt charts, pie charts, or any visual diagram. Converts Mermaid markdown to PNG, SVG, or PDF.
---

# Mermaid Diagram Generator

Generate professional diagrams from text descriptions using Mermaid CLI (mmdc).

## Quick Start

```bash
# Ensure global npm bin is on PATH (if needed)
export PATH="$(npm prefix -g)/bin:$PATH"

# Generate PNG from .mmd file
mmdc -i diagram.mmd -o diagram.png

# Generate SVG
mmdc -i diagram.mmd -o diagram.svg -f svg

# With custom dimensions
mmdc -i diagram.mmd -o diagram.png -w 1200 -H 800

# With background color
mmdc -i diagram.mmd -o diagram.png -b '#ffffff'
```

## Workflow

1. Write Mermaid syntax to a `.mmd` file
2. Run `mmdc` to render
3. Output PNG/SVG/PDF

## Supported Diagram Types

| Type | Syntax Start | Use Case |
|------|--------------|----------|
| Flowchart | `flowchart TD` | Processes, workflows |
| Sequence | `sequenceDiagram` | API flows, interactions |
| Class | `classDiagram` | OOP design, schemas |
| ER | `erDiagram` | Database schemas |
| State | `stateDiagram-v2` | State machines |
| Gantt | `gantt` | Project timelines |
| Pie | `pie` | Proportions |
| Git | `gitGraph` | Branch visualization |

## Common Examples

### Flowchart
```mermaid
flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
```

### Sequence Diagram
```mermaid
sequenceDiagram
    participant U as User
    participant S as Server
    participant DB as Database
    U->>S: Request
    S->>DB: Query
    DB-->>S: Results
    S-->>U: Response
```

### ER Diagram
```mermaid
erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : includes
```

## CLI Options

| Flag | Description | Example |
|------|-------------|---------|
| `-i` | Input file | `-i flow.mmd` |
| `-o` | Output file | `-o flow.png` |
| `-f` | Format (svg/png/pdf) | `-f svg` |
| `-w` | Width | `-w 1200` |
| `-H` | Height | `-H 800` |
| `-b` | Background | `-b '#fff'` |
| `-t` | Theme | `-t dark` |
| `-c` | Config file | `-c config.json` |

## Themes

Available: `default`, `forest`, `dark`, `neutral`, `base`

```bash
mmdc -i diagram.mmd -o diagram.png -t dark
```

## Helper Script

Use the bundled script for quick generation:

```bash
# From description
{baseDir}/scripts/mermaid-gen.sh "flowchart of login process" output.png

# From file
{baseDir}/scripts/mermaid-gen.sh input.mmd output.png
```

If Chromium fails to launch (common in sandboxed environments), set:

```bash
MMDC_NO_SANDBOX=1 {baseDir}/scripts/mermaid-gen.sh "flowchart TD; A-->B" output.png
```

## Tips

- Use `TD` (top-down) or `LR` (left-right) for flowchart direction
- Wrap node labels in quotes if they contain special characters
- Use subgraphs to group related nodes
- Add `:::className` for custom styling