mermaid

name	mermaid
description	Diagram generation using Mermaid syntax — flowcharts, sequence diagrams, ER diagrams, class diagrams, state machines, and more
layer	utility
category	visualization
triggers	["draw a diagram","create a flowchart","sequence diagram","ER diagram","class diagram","state diagram","visualize this","mermaid"]
inputs	[{"description":"Natural language description of what to diagram"},{"diagram_type":"flowchart | sequence | er | class | state | gantt | pie | git | mindmap"},{"entities":"List of entities/components to include"},{"relationships":"Connections between entities"}]
outputs	[{"mermaid_code":"Valid Mermaid syntax ready for rendering"},{"diagram_explanation":"Plain-text explanation of the diagram"},{"alternatives":"Alternative diagram types that could represent the same information"}]
linksTo	["data-modeling","api-designer","ai-multimodal"]
linkedFrom	["orchestrator","planner","code-architect"]
preferredNextSkills	["data-modeling","api-designer"]
fallbackSkills	["sequential-thinking"]
riskLevel	low
memoryReadPolicy	selective
memoryWritePolicy	selective
sideEffects	[]

Mermaid

Purpose

This skill generates precise, valid Mermaid diagram syntax from natural language descriptions, code analysis, or structured data. Mermaid diagrams are version-controllable, embeddable in Markdown, and renderable in GitHub, GitLab, Notion, and most documentation platforms.

Key Concepts

Diagram Type Selection Guide

You Want To Show...	Use This Diagram	Mermaid Type
Process flow with decisions	Flowchart	flowchart TD/LR
Request/response between services	Sequence Diagram	sequenceDiagram
Database tables and relationships	ER Diagram	erDiagram
Object-oriented class structure	Class Diagram	classDiagram
State transitions	State Diagram	stateDiagram-v2
Project timeline	Gantt Chart	gantt
Proportional data	Pie Chart	pie
Git branching	Git Graph	gitGraph
Hierarchical concepts	Mindmap	mindmap
User journey steps	User Journey	journey

Syntax Fundamentals

Direction: TD (top-down), LR (left-right), BT (bottom-top), RL (right-left)

Node Shapes:

id[Rectangle]
id(Rounded)
id{Diamond/Decision}
id([Stadium])
id[[Subroutine]]
id[(Database)]
id((Circle))
id>Asymmetric]
id{{Hexagon}}

Edge Types:

A --> B          Solid arrow
A --- B          Solid line (no arrow)
A -.-> B         Dotted arrow
A ==> B          Thick arrow
A -- text --> B   Labeled edge
A -->|text| B    Labeled edge (alternative)

Diagram Templates

Template 1: System Architecture Flowchart

flowchart TD
    subgraph Client["Client Layer"]
        Browser["Browser/Mobile App"]
    end

    subgraph Edge["Edge Layer"]
        CDN["CDN (CloudFront)"]
        LB["Load Balancer"]
    end

    subgraph App["Application Layer"]
        API["API Server"]
        Worker["Background Worker"]
        Cache["Redis Cache"]
    end

    subgraph Data["Data Layer"]
        DB[(PostgreSQL)]
        S3["Object Storage (S3)"]
        Queue["Message Queue"]
    end

    Browser --> CDN
    CDN --> LB
    LB --> API
    API --> Cache
    API --> DB
    API --> Queue
    Queue --> Worker
    Worker --> DB
    Worker --> S3

    style Client fill:#e1f5fe
    style Edge fill:#f3e5f5
    style App fill:#e8f5e9
    style Data fill:#fff3e0