ahundt/autorun/mermaid-diagrams

Mermaid Diagram Rendering with beautiful-mermaid

<purpose>

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

Skill Contents

</purpose>

<setup>

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

</setup>

<reference>

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 --outdir, writes <name>.svg next to each input file (-d is swallowed by bun run; use --outdir).

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

</reference>

<examples>

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/, plus one source at the repository root:

Regenerate:

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

</examples>

<limitations>

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).

</limitations>

<image_generation>

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.

</image_generation>