Agent Skills
› kinncj/Heimdall
› mermaid-diagrams
mermaid-diagrams
GitHub用于生成和验证组件、序列、ER、部署及状态机Mermaid图表，辅助架构文档化。需遵循节点数限制并确保语法有效，提交前应在Live Editor测试。
Trigger Scenarios
需要为功能特性生成架构图
记录系统组件交互关系
设计数据库实体模型
绘制服务部署拓扑
描述业务状态流转
Install
npx skills add kinncj/Heimdall --skill mermaid-diagrams -g -y
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 TBwith 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
Version History
- f4ea31f Current 2026-07-05 10:42
