mermaid-studio

Create, validate, and render Mermaid diagrams to SVG, PNG, or ASCII formats.

Updated Sep 15, 2026
One-click install
npx skills add https://github.com/Peterson-Benhame/agent-skills --skill mermaid-studio-peterson-benhame
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mermaid-studio
Source: https://github.com/Peterson-Benhame/agent-skills/tree/main/packages/skills-catalog/skills/%28tooling%29/mermaid-studio
Command: npx skills add https://github.com/Peterson-Benhame/agent-skills --skill mermaid-studio-peterson-benhame

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires beautiful-mermaid, @mermaid-js/mermaid-cli, puppeteer, @iconify-json/logos, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Writing Mermaid diagrams by hand often produces syntax errors, harsh default styling, and unreadable layouts, and rendering them to shareable image formats requires manual tooling setup. ## Core Features & Use Cases - Diagram Creation: Generates Mermaid code for 20+ diagram types including flowcharts, sequence diagrams, ERDs, C4 architecture, AWS architecture-beta with service icons, state machines, and git graphs, with curated color palettes and styling rules applied by default. - Validation and Rendering: Validates .mmd syntax before rendering and outputs SVG, PNG, or ASCII using mermaid-cli, beautiful-mermaid, or a Puppeteer pipeline with Iconify icon pack support. - Code-to-Diagram Analysis: Analyzes existing codebases (ORM models, API routes, module dependencies) to generate ERDs, sequence diagrams, and architecture diagrams from source code. - Use Case: Ask the agent to visualize your NestJS order service as a C4 Container diagram; it reads the code, generates styled .mmd source, validates it, and renders a PNG for your architecture documentation. ## Quick Start Ask the agent to create and render a flowchart of your login process as an SVG file.

Frequently Asked Questions about mermaid-studio

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render a Mermaid diagram to SVG or PNG?

Run the render script with an input .mmd file and output path, such as node render.mjs -i diagram.mmd -o diagram.svg. Use the --width flag for PNG sizing and --icons logos when the diagram uses Iconify icon packs.

How do I create AWS architecture diagrams with Mermaid?

Use the architecture-beta diagram type with logos:aws-* icons from the Iconify logos pack, rendered with the --icons logos flag. For complex architectures over 8 nodes, use a C4 Container diagram instead since architecture-beta lacks edge routing.

Can Mermaid diagrams be rendered as ASCII art in a terminal?

Yes, the render-ascii script converts flowchart, sequence, state, class, and ER diagrams to ASCII output using the beautiful-mermaid library. Run node render-ascii.mjs -i diagram.mmd to print to stdout or save to a text file.

Why do my Mermaid C4 diagram lines overlap and look messy?

C4 diagrams default to harsh black lines and poor spacing. Apply UpdateRelStyle with soft slate colors to every relationship, add UpdateLayoutConfig with c4ShapeInRow settings, and keep diagrams under 6 relationships to avoid Dagre routing arrows through nodes.

What diagram types does Mermaid support?

Mermaid supports over 20 types including flowchart, sequence, class, state, ERD, Gantt, pie, mindmap, timeline, git graph, sankey, XY chart, quadrant, block, user journey, requirement, packet, kanban, C4, and architecture-beta diagrams.