skills.rest
Yassimba
YassimbaCOMMUNITY
Explore all skills by this author →
GitHub

mermaid-skill

Generate Mermaid diagram source files and compile them to PNG, SVG, or PDF with mmdc.

9|Updated Jul 17, 2026
Search Tags:#documentation#mermaid#flowchart#visualization#sequence diagram#diagram#mmdc
One-click install
npx skills add https://github.com/Yassimba/loom --skill mermaid-skill-yassimba
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-skill
Source: https://github.com/Yassimba/loom/tree/main/skills/mermaid-skill
Command: npx skills add https://github.com/Yassimba/loom --skill mermaid-skill-yassimba

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mermaid-js/mermaid-cli, and includes references (resource) components.

What problem does it solve? Creating diagrams manually is slow and hard to maintain; this Skill lets you author diagrams as versionable text (.mmd files) and compile them to images automatically, with guidance on picking the right diagram type and fixing rendering issues. ## Core Features & Use Cases - Diagram Authoring: Choose from flowchart, sequence, class, ER, state, gantt, git graph, architecture, timeline, mindmap, and more, with syntax references for each type. - Compilation & Export: Render .mmd files to PNG, SVG, or PDF using mmdc with theme and sizing options. - Visual Self-Check & Review Loop: Inspect exported images for label truncation, cramped layouts, and edge spaghetti, then iterate with minimal edits. - Use Case: When documenting a microservices system, generate an architecture-beta diagram with AWS icons, compile it to a 2048px PNG, and embed it in your project README. ## Quick Start Use the mermaid skill to create a sequence diagram of our login flow and export it as a PNG.

Frequently Asked Questions about mermaid-skill

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

FAQPage Schema
How do I create a Mermaid diagram and export it to PNG?▼

Write the diagram as a .mmd text file using the appropriate type (flowchart, sequenceDiagram, etc.), then run mmdc -i diagram.mmd -o diagram.png -w 2048. The compile step also validates syntax, so parse errors indicate bugs in the .mmd source.

Which Mermaid diagram type should I use for my content?▼

Match the type to the content shape: flowchart for steps and branches, sequenceDiagram for call ordering, erDiagram or classDiagram for schemas and types, stateDiagram-v2 for lifecycles, and architecture-beta for deployed services. Gantt, gitGraph, pie, mindmap, and timeline cover schedules, branches, proportions, and events.

Why does mmdc fail with 'Could not find Chrome'?▼

This is a toolchain failure, not a diagram error: mmdc renders through Puppeteer and needs a headless Chrome. Run npx puppeteer browsers install chrome-headless-shell, or set PUPPETEER_EXECUTABLE_PATH to a system Chrome installation.

When should I use drawio or PlantUML instead of Mermaid?▼

Use drawio when you need pixel-precise placement, branded icons, or heavy styling, and PlantUML when strict conventional UML notation is required. Mermaid suits text-based, git-friendly diagrams where automatic layout is acceptable.

How do I fix parse errors on labels with special characters in Mermaid?▼

Wrap the label in quotes, for example A["Label: value"], and quote subgraph names containing spaces like subgraph "My Layer". Re-compile after each fix until the diagram renders.

Related Skills

Explore More Software Engineering Skills→
GS1NedGS1Ned

diagram-generator

Generate architecture, database, component, and sequence diagrams using Mermaid syntax.

Community
Intermediate
SomtoUgehSomtoUgeh

technical-svg-diagrams

Generate technical SVG diagrams for architecture, flow, and component views.

Community
Basic
HuynhHoangPhucHuynhHoangPhuc

sl:preview

Generate ASCII diagrams, Mermaid charts, or prose explanations for code architecture.

Community
Advanced
autonomous-aiautonomous-ai
465

excalidraw

Generate hand-drawn style diagrams as .excalidraw JSON files using a Python scene helper.

Official
Intermediate