Agent skill · creative production · intellectronica
beautiful-mermaid
Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram.
Why this skill is useful
Adds specific rendering scripts and workflows for generating high-quality Mermaid diagrams that the AI wouldn't reliably generate on its own.
What it needs
Requires agent-browser, bun, deno, tsx installed locally. About 3k tokens when loaded. Last updated 2026-04-25. 281 stars on the source repository.
What this skill does
Beautiful Mermaid Diagram Rendering Render Mermaid diagrams as SVG and PNG images using the Beautiful Mermaid library. Dependencies This skill requires the agent-browser skill for PNG rendering. Load it before proceeding with PNG capture. Supported Diagram Types Flowchart - Process flows, decision trees, CI/CD pipelines Sequence - API calls, OAuth flows, database transactions State - State machines, connection lifecycles Class - UML class diagrams, design patterns Entity-Relationship - Database schemas, data models Available Themes 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. Common Syntax Patterns Flowchart Edge Labels Use pipe syntax for edge labels: Avoid space-dash syntax which can cause incomplete renders: Node Labels with Special Characters Wrap labels containing special characters in quotes: 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: Or from a file: Alternative runtimes: This produces <output>.svg in the current working directory. Step 3: Create HTML Wrapper Run the HTML wrapper script to prepare for screenshot: 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. 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills intellectronica/skills--54939f