How do I install the Mermaid skill?

Run npx skillmds@latest add adambien/mermaid in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Mermaid safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Mermaid?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Mermaid free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Mermaid?

AdamBien (@adambien) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Mermaid by adambien — Agent Skill

Name: Mermaid
Author: AdamBien

Mermaid

Generate Mermaid overview diagrams for architecture and component visualization. Use when asked to create, generate, or draw Mermaid diagrams, architecture overviews, component diagrams, dependency graphs, or system visualizations. Triggers on "mermaid diagram", "architecture diagram", "component overview", "dependency graph", "draw a diagram", or requests to visualize system structure. Not for sequence diagrams or class diagrams.

AdamBien 70896cc 2.5 KB Updated Sep 17, 2026

File contents

Mermaid Overview Diagrams

Rules

prefer flowchart (graph) with TD or LR direction
wrap in ```mermaid fenced code block
use stadium-shaped nodes: ([text])
use meaningful node IDs reflecting component names
use --> for dependencies, -.-> for optional/async dependencies
label arrows only when ambiguous: Gateway -->|routes| Service
visualize only high-level concepts — omit classes, methods, implementation details
use subgraphs for logical grouping (subsystems)
write diagram into the target file (e.g. README.md) when context is clear

BCE Shape Mapping

Element	Mermaid syntax	Style class
Business Component (BC)	`Orders([Orders])`	`bc`
Subsystem	`subgraph Billing`	`subsystem`
External service	`PayGW([Payment Gateway])`	`ext`
Boundary layer	`Boundary([Boundary])`	`boundary`
Control layer	`Control([Control])`	`control`
Entity layer	`Entity([Entity])`	`entity`

Style Classes

Define these classDef entries at the end of the graph and apply with class or ::::

classDef bc fill:#dae8fc,stroke:#6c8ebf,color:#000
classDef ext fill:#fff2cc,stroke:#d6b656,color:#000,stroke-dasharray:5 5
classDef boundary fill:#d5e8d4,stroke:#82b366,color:#000
classDef control fill:#e1d5e7,stroke:#9673a6,color:#000
classDef entity fill:#fff2cc,stroke:#d6b656,color:#000

Color Palette

BC blue: fill #dae8fc, border #6c8ebf
External yellow: fill #fff2cc, border #d6b656
Boundary green: fill #d5e8d4, border #82b366
Control purple: fill #e1d5e7, border #9673a6
Entity yellow: fill #fff2cc, border #d6b656

Example — Between Components

graph LR
    subgraph Billing
        Orders([Orders]) -->|charges| Payments([Payments])
    end
    Orders -.->|async| Notifications([Notifications])
    Payments -->|REST| PayGW([Payment Gateway])

    classDef bc fill:#dae8fc,stroke:#6c8ebf,color:#000
    classDef ext fill:#fff2cc,stroke:#d6b656,color:#000,stroke-dasharray:5 5
    class Orders,Payments,Notifications bc
    class PayGW ext

---name: mermaiddescription: Generate Mermaid overview diagrams for architecture and component visualization. Use when asked to create, generate, or draw Mermaid diagrams, architecture overviews, component diagrams, dependency graphs, or system visualizations. Triggers on "mermaid diagram", "architecture diagram", "component overview", "dependency graph", "draw a diagram", or requests to visualize system structure. Not for sequence diagrams or class diagrams.---# Mermaid Overview Diagrams## Rules- prefer flowchart (graph) with TD or LR direction- wrap in ` ```mermaid ` fenced code block- use stadium-shaped nodes: `([text])`- use meaningful node IDs reflecting component names- use `-->` for dependencies, `-.->` for optional/async dependencies- label arrows only when ambiguous: `Gateway -->|routes| Service`- visualize only high-level concepts — omit classes, methods, implementation details- use subgraphs for logical grouping (subsystems)- write diagram into the target file (e.g. README.md) when context is clear## BCE Shape Mapping| Element | Mermaid syntax | Style class ||---|---|---|| Business Component (BC) | `Orders([Orders])` | `bc` || Subsystem | `subgraph Billing` | `subsystem` || External service | `PayGW([Payment Gateway])` | `ext` || Boundary layer | `Boundary([Boundary])` | `boundary` || Control layer | `Control([Control])` | `control` || Entity layer | `Entity([Entity])` | `entity` |## Style ClassesDefine these `classDef` entries at the end of the graph and apply with `class` or `:::`:```classDef bc fill:#dae8fc,stroke:#6c8ebf,color:#000classDef ext fill:#fff2cc,stroke:#d6b656,color:#000,stroke-dasharray:5 5classDef boundary fill:#d5e8d4,stroke:#82b366,color:#000classDef control fill:#e1d5e7,stroke:#9673a6,color:#000classDef entity fill:#fff2cc,stroke:#d6b656,color:#000```## Color Palette- BC blue: fill `#dae8fc`, border `#6c8ebf`- External yellow: fill `#fff2cc`, border `#d6b656`- Boundary green: fill `#d5e8d4`, border `#82b366`- Control purple: fill `#e1d5e7`, border `#9673a6`- Entity yellow: fill `#fff2cc`, border `#d6b656`## Example — Between Components```mermaidgraph LR subgraph Billing Orders([Orders]) -->|charges| Payments([Payments]) end Orders -.->|async| Notifications([Notifications]) Payments -->|REST| PayGW([Payment Gateway]) classDef bc fill:#dae8fc,stroke:#6c8ebf,color:#000 classDef ext fill:#fff2cc,stroke:#d6b656,color:#000,stroke-dasharray:5 5 class Orders,Payments,Notifications bc class PayGW ext```

Frequently asked questions