Beautiful Mermaid

If no theme is specified, use default.

Common Syntax Patterns

Flowchart Edge Labels

Use pipe syntax for edge labels:

A -->|label| B
A ---|label| B

Avoid space-dash syntax which can cause incomplete renders:

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

Node Labels with Special Characters

Wrap labels containing special characters in quotes:

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:

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

Or from a file:

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

Alternative runtimes:

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

Run the HTML wrapper script to prepare for screenshot:

bun run scripts/create-html.ts --svg diagram.svg --output diagram.html

This creates a minimal HTML file that displays the SVG with proper padding and background.

Step 4: Capture High-Resolution PNG with agent-browser

Use the agent-browser CLI to capture a high-quality screenshot. Refer to the agent-browser skill for full CLI documentation.

# Set 4K viewport for high-resolution capture
agent-browser set viewport 3840 2160

# Open the HTML wrapper
agent-browser open "file://$(pwd)/diagram.html"

# Wait for render to complete
agent-browser wait 1000

# Capture full-page screenshot
agent-browser screenshot --full diagram.png

# Close browser
agent-browser close

For even higher resolution on complex diagrams, increase the viewport further or use the --padding option when creating the HTML wrapper to give the diagram more space.

Step 5: Clean Up Intermediary Files

After rendering, remove all intermediary files. Only the final .svg and .png should remain.

Files to clean up:

• The HTML wrapper file (e.g., diagram.html)
• Any temporary .mmd files created to hold diagram code
• Any other files created during the rendering process

rm diagram.html

If a temporary .mmd file was created, remove it as well.

Output

Both outputs are always produced:

• SVG: Vector format, infinitely scalable, small file size
• PNG: High-resolution raster, captured at 4K (3840×2160) viewport with minimum 1200px diagram width

Files are saved to the current working directory unless the user explicitly specifies a different path.

Theme Selection Guide

Troubleshooting

Theme not applied

Check the render script output for the bg and fg values, or inspect the SVG's opening tag for --bg and --fg CSS custom properties.

Diagram appears cut off or incomplete

• Check edge label syntax — use -->|label| pipe notation, not -- label -->
• Verify all node IDs are unique
• Check for unclosed brackets in node labels

Render produces empty or malformed SVG

• Validate Mermaid syntax at https://mermaid.live before rendering
• Check for special characters that need escaping (wrap in quotes)
• Ensure flowchart direction is specified (graph TD, graph LR, etc.)