Agent skill
mermaid-diagrams
Render Mermaid diagrams to SVG using beautiful-mermaid and bun. Use when the user asks to "render mermaid", "generate diagram", "create flowchart", "update diagrams", "render SVG from mermaid", "beautiful-mermaid", "regenerate diagrams", or needs to convert Mermaid diagram syntax into styled SVG files. Supports all Mermaid diagram types with 15 themes including tokyo-night.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/mermaid-diagrams-ahundt-autorun
SKILL.md
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?