From ar
Renders Mermaid diagrams from .mmd files to styled SVG using beautiful-mermaid and bun CLI. Supports all diagram types with 15 themes including tokyo-night. For render/generate diagram requests.
npx claudepluginhub ahundt/autorun --plugin arThis skill uses the workspace's default tool permissions.
Render Mermaid `.mmd` files into styled SVG using [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) v1.0.2 and [bun](https://bun.sh).
Renders Mermaid diagrams from .mmd files or .md files with Mermaid blocks to SVG images using beautiful-mermaid. Supports themes, configs, batch directories, and extraction.
Generates Mermaid diagrams—flowcharts, sequence, ERD, class, state, Gantt—from text using mmdc CLI. Outputs SVG, PNG, PDF for Markdown docs and READMEs.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Share bugs, ideas, or general feedback.
Render Mermaid .mmd files into styled SVG using beautiful-mermaid v1.0.2 and bun.
| File | Purpose |
|---|---|
render-mermaid.ts | CLI tool: renders .mmd files to SVG |
gemini-diagram-prompt.md | Prompt for Gemini image generation |
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
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.
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
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
%%{init:...}%% front matter is stripped automatically (beautiful-mermaid applies its own theming).gemini-diagram-prompt.md contains a prompt for Gemini to generate an outcome-focused project overview image. Copy the prompt into a Gemini conversation.