mermaid-diagrams

Mermaid Diagram Rendering with beautiful-mermaid

Render Mermaid .mmd files into styled SVG using beautiful-mermaid v1.0.2 and bun.

Skill Contents

| File | Purpose | |------|---------| | render-mermaid.ts | CLI tool: renders .mmd files to SVG | | gemini-diagram-prompt.md | Prompt for Gemini image generation |

Installation

Only bun is required. The beautiful-mermaid dependency is auto-installed by bun on first run.

# macOS
brew install oven-sh/bun/bun

# Or universal installer
curl -fsSL https://bun.sh/install | bash

CLI Reference

render-mermaid — Render Mermaid .mmd files to themed SVG

Usage:
  bun run render-mermaid.ts [options] <input.mmd...>
  echo 'graph TD; A-->B' | bun run render-mermaid.ts -o out.svg

Options:
  -o, --output <file>   Output file (single input only)
  --outdir <dir>        Output directory for multiple files
  -t, --theme <name>    Theme (default: tokyo-night)
  --list-themes         List available themes
  --help                Show this help

Output defaults: Without -o or -d, writes <name>.svg next to each input file.

Shorthand: Set MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts for shorter commands.

Examples

MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts

# Render single file (output next to input)
bun run $MERMAID diagram.mmd

# Render to specific output
bun run $MERMAID diagram.mmd -o pretty.svg

# Render all .mmd files to output directory
bun run $MERMAID docs/diagrams/*.mmd --outdir docs/diagrams

# Different theme
bun run $MERMAID -t dracula diagram.mmd

# Pipe from stdin
echo 'graph TD; A-->B-->C' | bun run $MERMAID -o quick.svg

# List themes
bun run $MERMAID --list-themes

Project Diagrams

Mermaid source files (.mmd) and rendered output (.svg) in docs/diagrams/:

| Source | Description | |--------|-------------| | docs/diagrams/autofile-policy.mmd | AutoFile policy flowchart | | docs/diagrams/three-stage-autorun.mmd | Three-stage autorun flowchart | | autorun-architecture.mmd | Full architecture (too complex for beautiful-mermaid) |

Regenerate:

bun run $MERMAID docs/diagrams/*.mmd --outdir docs/diagrams

Known Limitations

• Complex diagrams with deeply nested subgraphs may hit dagre layout bugs. Failed diagrams are reported but don't block other renders.
• %%{init:...}%% front matter is stripped automatically (beautiful-mermaid applies its own theming).

Gemini Image Generation

gemini-diagram-prompt.md contains a prompt for Gemini to generate an outcome-focused project overview image. Copy the prompt into a Gemini conversation.