# Beautiful Mermaid

Renders Mermaid diagrams as SVG and PNG images.

- Repository: https://github.com/calesthio/OpenMontage (74341 stars)
- Category: Design
- License: AGPL-3.0
- Last updated: 2026-10-28
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add calesthio/OpenMontage --skill beautiful-mermaid -g -a claude-code -y`
Codex: `npx skills add calesthio/OpenMontage --skill beautiful-mermaid -g -a codex -y`
Cursor: `npx skills add calesthio/OpenMontage --skill beautiful-mermaid -g -a cursor -y`
Gemini CLI: `npx skills add calesthio/OpenMontage --skill beautiful-mermaid -g -a gemini-cli -y`

## Description

Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Beautiful Mermaid Diagram Rendering

Render Mermaid diagrams as SVG and PNG images using the Beautiful Mermaid library.

## Dependencies

This skill requires the `agent-browser` skill for PNG rendering. Load it before proceeding with PNG capture.

## Supported Diagram Types

- **Flowchart** - Process flows, decision trees, CI/CD pipelines
- **Sequence** - API calls, OAuth flows, database transactions
- **State** - State machines, connection lifecycles
- **Class** - UML class diagrams, design patterns
- **Entity-Relationship** - Database schemas, data models

## Available Themes

Default, Dracula, Solarized, Zinc Dark, Tokyo Night, Tokyo Night Storm, Tokyo Night Light, Catppuccin Latte, Nord, Nord Light, GitHub Dark, GitHub Light, One Dark.

If no theme is specified, use `default`.

## Common Syntax Patterns

### Flowchart Edge Labels

Use pipe syntax for edge labels:

```mermaid
A -->|label| B
A ---|label| B
```

Avoid space-dash syntax which can cause incomplete renders:

```mermaid
A -- label --> B   # May cause issues
```

### Node Labels with Special Characters

Wrap labels containing special characters in quotes:

```mermaid
A["Label with (parens)"]
B["Label with / slash"]
```

## Workflow

### Step 1: Generate or Validate Mermaid Code

If the user provides a description rather than code, generate valid Mermaid syntax. Consult `references/mermaid-syntax.md` for full syntax details.

### Step 2: Render SVG

Run the rendering script to produce an SVG file:

```bash
bun run scripts/render.ts --code "graph TD; A-->B" --output diagram --theme default
```

Or from a file:

```bash
bun run scripts/render.ts --input diagram.mmd --output diagram --theme tokyo-night
```

Alternative runtimes:
```bash
npx tsx scripts/render.ts --code "..." --output diagram
deno run --allow-read --allow-write --allow-net scripts/render.ts --code "..." --output diagram
```

This produces `<output>.svg` in the current working directory.

### Step 3: Create HTML Wrapper

The rest: https://github.com/calesthio/OpenMontage/blob/HEAD/.agents/skills/beautiful-mermaid/SKILL.md