Beautiful Mermaid

Render Mermaid diagrams as ASCII/Unicode art (for terminal) or SVG (for files).

Quick Start

Render ASCII diagram to terminal

node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs "graph LR; A-->B-->C"

Output:

┌───┐ ┌───┐ ┌───┐

│ A │────►│ B │────►│ C │

└───┘ └───┘ └───┘

Usage

node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs [options] [input]

Options

Option Description

-f, --format TYPE

Output format: ascii (default) or svg

-t, --theme NAME

Theme for SVG output (default: zinc-dark)

-o, --output FILE

Write to file instead of stdout

--ascii

Use pure ASCII instead of Unicode box-drawing

--themes

List available themes

-h, --help

Show help

Input Sources

• Inline: mermaid.mjs "graph TD; A-->B"

• File: mermaid.mjs diagram.mmd

• Stdin: echo "graph LR; A-->B" | mermaid.mjs -

Examples

ASCII Output (Terminal)

Flowchart with Unicode box-drawing (default)

node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs "graph TD; Start-->Process-->End"

Pure ASCII for maximum compatibility

node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs --ascii "graph LR; A-->B"

SVG Output (Files)

Create SVG with tokyo-night theme

node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs -f svg -t tokyo-night "graph TD; A-->B" -o diagram.svg

Sequence diagram

node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs -f svg -t catppuccin-mocha "sequenceDiagram Alice->>Bob: Hello Bob-->>Alice: Hi!" -o sequence.svg

Supported Diagram Types

Type Syntax

Flowchart graph TD/LR/BT/RL or flowchart TD/LR/BT/RL

State stateDiagram-v2

Sequence sequenceDiagram

Class classDiagram

ER erDiagram

Available Themes (15)

Dark themes: zinc-dark, tokyo-night, tokyo-night-storm, catppuccin-mocha, nord, dracula, github-dark, solarized-dark, one-dark

Light themes: zinc-light, tokyo-night-light, catppuccin-latte, nord-light, github-light, solarized-light

List themes: node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs --themes

When to Use

• Architecture diagrams — Visualize system components directly in conversation

• Data flows — Show how data moves through a system

• State machines — Document application states and transitions

• Sequence diagrams — Illustrate API interactions and message flows

• Class diagrams — Document object relationships

• ER diagrams — Database schema visualization

• Documentation — Export SVG for README files and docs