beautiful-mermaid

Installation
Summary

Render Mermaid diagrams as SVG and PNG images with theme customization.

  • Supports five diagram types: flowchart, sequence, state, class, and entity-relationship diagrams
  • Produces both vector SVG (scalable) and high-resolution PNG (4K viewport) outputs in a single workflow
  • Includes 13 built-in themes (default, Dracula, Tokyo Night, Nord, GitHub, Catppuccin, Solarized, One Dark, Zinc Dark)
  • Requires agent-browser skill for PNG capture; uses Bun, Node, or Deno for SVG rendering
  • Provides syntax guidance for edge labels and special characters to avoid incomplete renders
SKILL.md

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.

Related skills

More from intellectronica/agent-skills

Installs
1.2K
GitHub Stars
259
First Seen
Jan 29, 2026