---
name: Mermaid
slug: mermaid
category: Automation
description: Mermaid renders Mermaid diagrams as SVG or ASCII art for flowcharts, sequence diagrams, state diagrams, class diagrams, and ER diagrams. Use it when you need to create or preview diagrams from Mermaid text.
github: "https://github.com/peintune/runjam/tree/main/src-tauri/builtin-skills/mermaid"
language: Rust
stars: 195
forks: 12
install: "npx degit https://github.com/peintune/runjam/tree/main/src-tauri/builtin-skills/mermaid ~/.claude/skills/mermaid"
installs_to: ~/.claude/skills/mermaid
source_path: src-tauri/builtin-skills/mermaid/SKILL.md
collection_size: 13
category_size: 2032
collection_url: "https://dirskills.com/collections/peintune/runjam"
added: 2026-09-06T05:18:57.966Z
last_synced: 2026-09-06T05:18:57.966Z
canonical_url: "https://dirskills.com/skills/mermaid"
---

# Mermaid

Mermaid renders Mermaid diagrams as SVG or ASCII art for flowcharts, sequence diagrams, state diagrams, class diagrams, and ER diagrams. Use it when you need to create or preview diagrams from Mermaid text.

**Install:**

```bash
npx degit https://github.com/peintune/runjam/tree/main/src-tauri/builtin-skills/mermaid ~/.claude/skills/mermaid
```

## README

> **⚠️ Platform note — read before running any command.** The shell snippets in this skill are written for **macOS / Linux** (bash/zsh). Always check which OS you are on first. On **Windows** do **not** run them verbatim — the underlying tool/CLI commands are usually cross-platform, but the surrounding shell syntax is not. Translate it to PowerShell before running:
>
> | bash (macOS / Linux) | PowerShell (Windows) |
> | --- | --- |
> | `a && b` | run as two steps, or `a; if ($?) { b }` |
> | `cat <<'EOF' \| tool …` (heredoc) | write the text to a temp file, then pipe/pass that file to the tool |
> | `VAR=$(cmd)` … `$VAR` | `$VAR = cmd` … `$VAR` |
> | `cmd > /dev/null` | `cmd > $null` |
> | `… \| grep PAT` | `… \| Select-String PAT` |
> | `… \| jq …` | `… \| ConvertFrom-Json`, then read the fields |
> | `python3 x.py` | `python x.py` (or `py x.py`) |
> | `~/dir`, `/tmp` | `$env:USERPROFILE\dir`, `$env:TEMP` |
> | `cp` / `mkdir -p` / `rm -rf` | `Copy-Item` / `New-Item -ItemType Directory -Force` / `Remove-Item -Recurse -Force` |
>
> If a command has no obvious Windows equivalent, prefer the built-in file/HTTP tools over raw shell.

# Mermaid Diagram Renderer

Render Mermaid diagrams using `beautiful-mermaid` library. Supports 5 diagram types with dual output modes.

## Quick Start

> Dependencies (`beautiful-mermaid`) auto-install on first run.

### SVG Output (Default)

```bash
# From file
npx tsx scripts/render.ts diagram.mmd --output diagram.svg

# From stdin
echo "graph LR; A-->B-->C" | npx tsx scripts/render.ts --stdin --output flow.svg
```

### ASCII Output (Terminal)

```bash
# ASCII art for terminal display
npx tsx scripts/render.ts diagram.mmd --ascii

# Pipe directly
echo "graph TD; Start-->End" | npx tsx scripts/render.ts --stdin --ascii
```

Output example:

```
┌───────┐     ┌─────┐
│ Start │────▶│ End │
└───────┘     └─────┘
```

## Supported Diagrams

| Type      | Syntax            | Best For                |
| --------- | ----------------- | ----------------------- |
| Flowchart | `graph TD/LR`     | Processes, decisions    |
| Sequence  | `sequenceDiagram` | API calls, interactions |
| State     | `stateDiagram-v2` | State machines          |
| Class     | `classDiagram`    | OOP design              |
| ER        | `erDiagram`       | Database schemas        |

## Theming (SVG only)

```bash
npx tsx scripts/render.ts diagram.mmd --theme github-dark --output out.svg
```

Use invalid theme name to see available themes list (e.g., `--theme ?`)

## Resources

- `scripts/render.ts` - Main rendering script
- `references/syntax.md` - Mermaid syntax quick reference