mermaid▌

Render Mermaid diagrams as SVG and PNG images with theme customization. \n \n Supports five diagram types: flowchart, sequence, state, class, and entity-relationship diagrams \n Produces both vector SVG (scalable) and high-resolution PNG (4K viewport) outputs in a single workflow \n Includes 13 built-in themes (default, Dracula, Tokyo Night, Nord, GitHub, Catppuccin, Solarized, One Dark, Zinc Dark) \n Requires agent-browser skill for PNG capture; uses Bun, Node, or Deno for SVG rendering \n Prov

Create flowcharts, sequence diagrams, ERDs, and architecture visualizations in Mermaid syntax. \n \n Supports 10+ diagram types including flowcharts, sequence diagrams, ERDs, C4 architecture, state machines, Gantt charts, and class diagrams \n Includes decision matrix to select appropriate diagram type based on content (processes, APIs, databases, architecture, timelines) \n Provides step-by-step workflow from diagram selection through styling, with syntax examples and validation checklists for

Create diagrams and visualizations using Mermaid markdown syntax.

Render Mermaid diagrams as SVG or ASCII with 15+ themes and 5 diagram types. \n \n Supports five diagram types: flowchart, sequence, state, class, and ER diagrams for workflows, APIs, databases, and object models \n Offers 15 built-in themes (tokyo-night, dracula, github-dark, nord, catppuccin, and more) with light and dark variants \n Generates SVG output for web and documentation, or ASCII art for terminals and plain-text files \n Batch rendering with parallel processing ( --workers flag) for

Quick Start: Identify diagram type (flowchart/sequence/state/class/ER/gantt/mindmap) → Define nodes with shapes → Connect with arrows → Wrap in ```mermaid fence. Default: top-to-bottom (TD), use flowchart over graph, Unicode supported.

Convert Mermaid diagrams into animated GIFs with rich animation effects. Supports .mmd files and extracting ```mermaid code blocks from .md files.

Convert ```mermaid code blocks in Markdown (or other text) files into PNG images, and replace the code blocks with image references. Useful for platforms that don't render Mermaid natively (GitHub Pages/Jekyll, Dev.to, etc.).

This skill enables extraction of Mermaid diagrams from markdown files and generation of high-quality PNG images. The skill bundles all necessary scripts (extract-and-generate.sh, extract_diagrams.py, and puppeteer-config.json) in the scripts/ directory for portability and reliability.

This skill automatically converts text descriptions of system architectures, module specifications, workflow documentation, and design concepts into valid Mermaid diagram syntax. It enables clear visual communication of complex systems, ensuring diagrams are production-ready and embeddable in markdown documentation.

Use this skill when the user needs text-based diagrams: Mermaid diagrams for architecture, OAuth, integration flows, ERDs, or Agentforce structure, plus ASCII fallback when plain-text compatibility matters.