Agent Skills › kinncj/Heimdall › mermaid-diagrams

mermaid-diagrams

GitHub

用于生成和验证Mermaid图表（组件、序列、ER、部署、状态机），以记录软件架构。要求图表语法正确，节点不超过30个，并在提交前测试。

.claude/skills/mermaid-diagrams/SKILL.md kinncj/Heimdall

触发场景

需要绘制系统架构图需要展示业务流程时序需要描述数据库实体关系需要规划基础设施部署需要定义业务状态流转

安装

npx skills add kinncj/Heimdall --skill mermaid-diagrams -g -y

更多选项

非标准路径

npx skills add https://github.com/kinncj/Heimdall/tree/main/.claude/skills/mermaid-diagrams -g -y

不安装直接使用

npx skills use kinncj/Heimdall@mermaid-diagrams

指定 Agent (Claude Code)

npx skills add kinncj/Heimdall --skill mermaid-diagrams -a claude-code -g -y

安装 repo 全部 skill

npx skills add kinncj/Heimdall --all -g -y

预览 repo 内 skill

npx skills add kinncj/Heimdall --list

SKILL.md

Frontmatter

{
    "name": "mermaid-diagrams",
    "description": "Generate and validate Mermaid diagrams (component, sequence, ER, deployment, state machine) for features. Use when documenting architecture."
}

SKILL: Mermaid Diagrams

Required Diagrams Per Feature

Component diagram (graph TB)
Sequence diagram (sequenceDiagram)
ER diagram (erDiagram)
Deployment diagram (graph TB with deployment focus)
State machine (stateDiagram-v2) — where applicable

Rules

Maximum 30 nodes per diagram.
All diagrams must be syntactically valid.
Test diagrams in the Mermaid Live Editor before committing.
Use descriptive node labels.

Component Diagram

graph TB
    subgraph "Frontend"
        UI["React App"]
    end
    subgraph "Backend"
        API["REST API"]
        DB[("PostgreSQL")]
        Cache[("Redis")]
    end
    UI -->|"HTTPS"| API
    API --> DB
    API --> Cache

Sequence Diagram

sequenceDiagram
    actor U as User
    participant F as Frontend
    participant A as API
    participant D as Database

    U->>F: Action
    F->>A: POST /api/resource
    A->>D: INSERT
    D-->>A: 201 Created
    A-->>F: {id, data}
    F-->>U: Success

ER Diagram

erDiagram
    USER {
        uuid id PK
        string email UK
        timestamp created_at
    }
    ORDER {
        uuid id PK
        uuid user_id FK
        decimal total
        timestamp created_at
    }
    USER ||--o{ ORDER : "places"

State Machine

stateDiagram-v2
    [*] --> Pending
    Pending --> Processing: payment received
    Processing --> Completed: fulfilled
    Processing --> Failed: error
    Failed --> Pending: retry
    Completed --> [*]

Deployment Diagram

graph TB
    subgraph "Vercel Edge"
        FE["Next.js App"]
        EF["Edge Functions"]
    end
    subgraph "AWS"
        LB["Load Balancer"]
        APP["App Servers"]
        RDS[("RDS PostgreSQL")]
        EC["ElastiCache Redis"]
    end
    FE --> EF
    EF --> LB
    LB --> APP
    APP --> RDS
    APP --> EC