Turn written descriptions or Mermaid code into diagrams showing processes, interactions, and data relationships. Choose a color theme and save both SVG files, which stay sharp when enlarged, and high-resolution PNG images.
Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram.
Run score Not tested
See how to installThis skill turns written descriptions or Mermaid code into diagrams and saves both SVG and PNG files. It supports flowcharts for process branches, sequence diagrams for the order of interactions, state diagrams, class diagrams, and entity-relationship diagrams for relationships between data. Rendering uses Beautiful Mermaid, with a choice of themes that includes light and dark color schemes.
Use it to explain business procedures, API calls, or database structures visually. If you have only a written explanation, the workflow includes creating the diagram’s Mermaid code. It also helps when you need both an SVG that stays sharp when enlarged and a PNG that is convenient to use as an image.
PNG creation requires the agent-browser skill. Script examples use Bun, with alternatives for tsx and Deno. If you do not specify a theme, it uses default. Files are saved in the current working directory unless you specify another destination.
This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.
AI checked the SKILL.md for operations that need care and for setup requirements. The score comes only from actually running the skill (hands-on test).
Not counted in the score. Rated by AI (OpenAI Codex) as of Oct 23, 2026. Treat it as a guide and read the original before installing.
Review the instructions the agent will receive before you install.
Render Mermaid diagrams as SVG and PNG images using the Beautiful Mermaid library.
This skill requires the agent-browser skill for PNG rendering. Load it before proceeding with PNG capture.
Default, Dracula, Solarized, Zinc Dark, Tokyo Night, Tokyo Night Storm, Tokyo Night Light, Catppuccin Latte, Nord, Nord Light, GitHub Dark, GitHub Light, One Dark.
If no theme is specified, use default.
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
Wrap labels containing special characters in quotes:
A["Label with (parens)"]
B["Label with / slash"]
If the user provides a description rather than code, generate valid Mermaid syntax. Consult references/mermaid-syntax.md for full syntax details.
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.
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.
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.
After rendering, remove all intermediary files. Only the final .svg and .png should remain.
Files to clean up:
diagram.html).mmd files created to hold diagram coderm diagram.html
If a temporary .mmd file was created, remove it as well.
Both outputs are always produced:
Files are saved to the current working directory unless the user explicitly specifies a different path.
| Theme | Background | Best For |
|---|---|---|
| default | Light grey | General use |
| dracula | Dark purple | Dark mode preference |
| tokyo-night | Dark blue | Modern dark aesthetic |
| tokyo-night-storm | Darker blue | Higher contrast |
| nord | Dark arctic | Muted, calm visuals |
| nord-light | Light arctic | Light mode with soft tones |
| github-dark | GitHub dark | Matches GitHub UI |
| github-light | GitHub light | Matches GitHub UI |
| catppuccin-latte | Warm light | Soft pastel aesthetic |
| solarized | Tan/cream | Solarized colour scheme |
| one-dark | Atom dark | Atom editor aesthetic |
| zinc-dark | Neutral dark | Minimal, no colour bias |
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.
-->|label| pipe notation, not -- label -->graph TD, graph LR, etc.)No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Create 3D objects from text or images, choose catalog assets for repeated scenery, and inspect the results in Blender. The workflow checks geometry, materials, scale, and ground contact while recording asset sources and generation costs.
Generate background music and songs with lyrics using ACE-Step 1.5, with controls for duration, tempo, and musical key. You can also restyle reference audio and separate vocals or individual instruments from mixed tracks.
Build voice assistants and conversational characters with ElevenLabs. Configure voices, language models, and external tools, then connect conversations to a website widget or use Twilio integration for outbound phone calls.
Create AI video clips from text or reference images, choosing among providers to match the task and budget. Supports vertical social videos, product photo animation, and conversational editing of existing clips with Gemini Omni Flash.
Generate video clips from text descriptions or reference images through multiple API services. Compare available providers by cost and task needs, choose aspect ratios, track generation progress, and refine existing clips through conversational editing with Gemini Omni.
Generate and edit images and videos through Atlas Cloud using one API key across multiple model families. Choose supported models for each task, download the results, and retain details about the model, inputs, and estimated cost.