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

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

Text-based software diagrams for domain modeling, architecture, flows, and database schemas. \n \n Supports nine diagram types: class diagrams, sequence diagrams, flowcharts, entity relationship diagrams, C4 architecture diagrams, state diagrams, git graphs, Gantt charts, and pie/bar charts \n All diagrams render from plain-text syntax, making them version-controllable and easy to maintain alongside code \n Native support in GitHub, GitLab, VS Code, Notion, Obsidian, and Confluence; exportable t

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.

Comprehensive markdown and Mermaid diagram writing skill for scientific documentation.

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.