mermaid-diagram-generator by rysweet/amplihack
npx skills add https://github.com/rysweet/amplihack --skill mermaid-diagram-generator此技能自动将系统架构、模块规范、工作流文档和设计概念的文本描述转换为有效的 Mermaid 图表语法。它能够清晰可视化复杂系统,确保图表可用于生产环境并可直接嵌入 Markdown 文档。
最适合:工作流序列、决策树、过程流、模块关系
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action A]
B -->|No| D[Action B]
C --> E[End]
D --> E
最适合:代理交互、API 调用、多步骤过程、请求/响应模式
sequenceDiagram
participant User
participant API
participant Service
User->>API: Request
API->>Service: Process
Service-->>API: Response
API-->>User: Result
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
最适合:模块结构、继承层次结构、数据模型、组件关系
classDiagram
class Brick {
+String responsibility
+PublicContract studs
}
class Module {
+init()
+process()
}
Brick <|-- Module
最适合:工作流状态、状态机、工作流阶段、基于条件的转换
stateDiagram-v2
[*] --> Planning
Planning --> Design
Design --> Implementation
Implementation --> Testing
Testing --> [*]
最适合:数据模型、数据库模式、实体关系
erDiagram
MODULE ||--o{ FUNCTION : exports
MODULE ||--o{ DEPENDENCY : requires
FUNCTION }o--|| CONTRACT : implements
最适合:项目时间线、工作流阶段、里程碑规划
gantt
title Project Timeline
section Phase 1
Planning :p1, 0, 30d
Design :p2, after p1, 20d
section Phase 2
Implementation :p3, after p2, 40d
Testing :p4, after p3, 25d
| 源材料 | 最佳图表类型 |
|---|---|
| 工作流步骤、过程流 | 流程图 |
| 模块关系、brick 连接 | 流程图或类图 |
| 代理交互、调用序列 | 序列图 |
| 状态和转换 | 状态图 |
| 数据模型、实体 | 类图或 ERD |
| 数据库模式 | ERD |
| 项目时间线 | 甘特图 |
| 复杂层次结构 | 类图 |
输入:
The authentication module handles JWT token validation. When a request arrives,
it first checks if a token exists. If not, it returns unauthorized. If it does,
it validates the token signature. If valid, it extracts the payload and continues.
If invalid, it returns forbidden. The payload is passed to the authorization
module for role-based access control.
输出:
flowchart TD
A[Request Arrives] --> B{Token Exists?}
B -->|No| C[Return Unauthorized]
B -->|Yes| D{Token Valid?}
D -->|No| E[Return Forbidden]
D -->|Yes| F[Extract Payload]
F --> G[Check Role-Based Access]
G --> H{Authorized?}
H -->|No| I[Return Access Denied]
H -->|Yes| J[Allow Request]
C --> K[End]
E --> K
I --> K
J --> K
输入:
Module: authentication
- Exports: validate_token, TokenPayload, AuthError
- Classes: TokenPayload (user_id, role, expires_at), AuthError (message, code)
- Functions: validate_token(token, secret) -> TokenPayload
- Internal: JWT (PyJWT library), Models (TokenPayload)
输出:
classDiagram
class AuthenticationModule {
+validate_token(token, secret)
+TokenPayload
+AuthError
}
class TokenPayload {
+String user_id
+String role
+DateTime expires_at
+to_dict()
}
class AuthError {
+String message
+Integer code
+__str__()
}
AuthenticationModule -- TokenPayload
AuthenticationModule -- AuthError
输入:
DDD Workflow: Phase 0 (Planning) -> Phase 1 (Documentation) ->
Approval Gate -> Phase 2 (Code Planning) -> Phase 3 (Implementation) ->
Phase 4 (Testing & Cleanup) -> Complete
输出:
stateDiagram-v2
[*] --> Planning
Planning --> Documentation
Documentation --> ApprovalGate
ApprovalGate --> CodePlanning
CodePlanning --> Implementation
Implementation --> Testing
Testing --> [*]
输入:
The prompt-writer agent clarifies requirements from the user. It then sends
the clarified requirements to the architect agent. The architect creates a
specification and sends it to the builder agent. The builder implements code
and sends it to the reviewer. The reviewer checks quality and sends feedback
back to the builder if issues are found, or to the user if complete.
输出:
sequenceDiagram
actor User
participant PromptWriter
participant Architect
participant Builder
participant Reviewer
User->>PromptWriter: Request Feature
PromptWriter->>Architect: Clarified Requirements
Architect->>Builder: Specification
Builder->>Reviewer: Implementation
Reviewer-->>Builder: Issues Found
Builder->>Reviewer: Fixed Implementation
Reviewer-->>User: Complete & Approved
输入:
Client requests flow through API Gateway to Services. Services can be
Authentication Service, User Service, or Data Service. All services
connect to a shared Database and Logger. Services return responses
through the API Gateway back to Client.
输出:
flowchart LR
Client[Client]
Gateway[API Gateway]
Auth[Auth Service]
User[User Service]
Data[Data Service]
DB[(Database)]
Logger[Logger]
Client <--> Gateway
Gateway --> Auth
Gateway --> User
Gateway --> Data
Auth --> DB
User --> DB
Data --> DB
Auth --> Logger
User --> Logger
Data --> Logger
A[Rectangle]
B(Rounded Rectangle)
C{Diamond/Decision}
D[(Database)]
E[/Parallelogram Right/]
F[\Parallelogram Left\]
G[[Subroutine]]
H((Circle))
A --> B # Arrow
A -- Text --> B # Arrow with label
A ---|Yes| B # Arrow with yes/no
A -->|Condition| B
A -.-> B # Dotted line
A ==> B # Bold arrow
classDef className fill:#f9f,stroke:#333,stroke-width:2px,color:#000
class A,B className
style A fill:#f9f,stroke:#333,stroke-width:4px
在展示图表之前,请验证:
flowchart TD
B1["Brick Module 1<br/>(Responsibility)"]
B2["Brick Module 2<br/>(Responsibility)"]
S1["Stud: public_function"]
S2["Stud: public_class"]
B1 --> S1
B1 --> S2
S1 -.depends on.-> B2
B2 --> "Stud: get_data"
flowchart TD
Start[Start] --> Q1{Condition 1?}
Q1 -->|No| End1[End: Rejected]
Q1 -->|Yes| Q2{Condition 2?}
Q2 -->|No| End2[End: Review]
Q2 -->|Yes| Q3{Condition 3?}
Q3 -->|No| End3[End: Partial]
Q3 -->|Yes| End4[End: Approved]
flowchart TD
A[Execute] --> B{Error?}
B -->|No| C[Success]
B -->|Yes| D{Recoverable?}
D -->|No| E[Fail]
D -->|Yes| F[Retry]
F --> A
C --> G[End]
E --> G
## System Architecture
```mermaid
flowchart TD
...
**关键组件:**
* 组件 A 处理...
* 组件 B 处理...
### 与文档驱动开发结合使用
* 在文档阶段创建图表
* 在规范文档中包含架构图
* 使用序列图来解释工作流
* 添加状态图来描述状态机
### 与调查工作流结合使用
* 可视化发现的架构
* 展示组件之间的数据流
* 映射发现的依赖关系
* 显示服务之间的调用序列
## 有效图表的技巧
1. **保持简单**:每个图表一个概念
2. **使用清晰的标签**:名称应描述目的
3. **遵循视觉惯例**:菱形表示决策,圆形表示状态
4. **避免交叉线**:重新组织以减少视觉混乱
5. **逻辑流**:从上到下或从左到右
6. **一致的样式**:相似的元素看起来应该相似
7. **图例**:如果符号不明显,请包含图例
8. **测试语法**:确保 Mermaid 渲染无误
9. **添加注释**:解释非显而易见的关系
10. **迭代**:根据反馈进行改进
## 需要避免的常见陷阱
* **过于复杂**:图表元素过多(拆分成多个图表)
* **标签不清晰**:节点名称未描述其目的
* **缺少连接**:未显示重要的关系
* **无效语法**:Mermaid 错误导致无法渲染
* **模糊的决策点**:“是/否”路径未明确标记
* **交叉箭头**:重叠连接导致视觉混乱
* **没有图例**:未解释符号或颜色
* **错误的图表类型**:使用流程图处理序列数据
* **样式不一致**:相似元素的格式不同
* **没有上下文**:图表在没有解释的情况下显示
## 成功标准
一个好的 Mermaid 图表:
* [ ] 显示源材料中的所有关键实体
* [ ] 准确表示关系和流程
* [ ] 为内容使用适当的图表类型
* [ ] 所有节点都有清晰、描述性的标签
* [ ] 有效的 Mermaid 语法(渲染无错误)
* [ ] 可读且不过度复杂
* [ ] 有助于理解系统
* [ ] 可以嵌入到文档中
* [ ] 决策点标记清晰
* [ ] 如果需要,包含图例
* [ ] 目的和范围从上下文中清晰可见
## 相关技能
* **module-spec-generator**:生成可可视化为类图的规范
* **Document-Driven Development**:在规范文档中使用图表
* **Investigation Workflow**:从发现的系统创建架构图
## 输出格式
图表以 Mermaid markdown 格式生成,可直接嵌入:
```markdown
```mermaid
[Generated Mermaid Syntax]
```
在图表前后包含解释。
此技能根据使用模式不断演进:
记录学习成果,并为 ~/.amplihack/.claude/context/DISCOVERIES.md 提出改进建议。
每周安装次数
212
仓库
GitHub 星标数
39
首次出现
2026 年 1 月 23 日
安全审计
安装于
opencode193
gemini-cli183
codex181
cursor181
github-copilot175
cline167
This skill automatically converts text descriptions of system architectures, module specifications, workflow documentation, and design concepts into valid Mermaid diagram syntax. It enables clear visual communication of complex systems, ensuring diagrams are production-ready and embeddable in markdown documentation.
Best for: workflow sequences, decision trees, process flows, module relationships
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action A]
B -->|No| D[Action B]
C --> E[End]
D --> E
Best for: agent interactions, API calls, multi-step processes, request/response patterns
sequenceDiagram
participant User
participant API
participant Service
User->>API: Request
API->>Service: Process
Service-->>API: Response
API-->>User: Result
Best for: module structure, inheritance hierarchies, data models, component relationships
classDiagram
class Brick {
+String responsibility
+PublicContract studs
}
class Module {
+init()
+process()
}
Brick <|-- Module
Best for: workflow states, state machines, workflow phases, condition-based transitions
stateDiagram-v2
[*] --> Planning
Planning --> Design
Design --> Implementation
Implementation --> Testing
Testing --> [*]
Best for: data models, database schemas, entity relationships
erDiagram
MODULE ||--o{ FUNCTION : exports
MODULE ||--o{ DEPENDENCY : requires
FUNCTION }o--|| CONTRACT : implements
Best for: project timelines, workflow phases, milestone planning
gantt
title Project Timeline
section Phase 1
Planning :p1, 0, 30d
Design :p2, after p1, 20d
section Phase 2
Implementation :p3, after p2, 40d
Testing :p4, after p3, 25d
| Source Material | Best Diagram Type |
|---|---|
| Workflow steps, process flow | Flowchart |
| Module relationships, brick connections | Flowchart or Class Diagram |
| Agent interactions, call sequences | Sequence Diagram |
| States and transitions | State Diagram |
| Data models, entities | Class Diagram or ERD |
| Database schema | ERD |
| Project timeline | Gantt Chart |
| Complex hierarchies | Class Diagram |
Input:
The authentication module handles JWT token validation. When a request arrives,
it first checks if a token exists. If not, it returns unauthorized. If it does,
it validates the token signature. If valid, it extracts the payload and continues.
If invalid, it returns forbidden. The payload is passed to the authorization
module for role-based access control.
Output:
flowchart TD
A[Request Arrives] --> B{Token Exists?}
B -->|No| C[Return Unauthorized]
B -->|Yes| D{Token Valid?}
D -->|No| E[Return Forbidden]
D -->|Yes| F[Extract Payload]
F --> G[Check Role-Based Access]
G --> H{Authorized?}
H -->|No| I[Return Access Denied]
H -->|Yes| J[Allow Request]
C --> K[End]
E --> K
I --> K
J --> K
Input:
Module: authentication
- Exports: validate_token, TokenPayload, AuthError
- Classes: TokenPayload (user_id, role, expires_at), AuthError (message, code)
- Functions: validate_token(token, secret) -> TokenPayload
- Internal: JWT (PyJWT library), Models (TokenPayload)
Output:
classDiagram
class AuthenticationModule {
+validate_token(token, secret)
+TokenPayload
+AuthError
}
class TokenPayload {
+String user_id
+String role
+DateTime expires_at
+to_dict()
}
class AuthError {
+String message
+Integer code
+__str__()
}
AuthenticationModule -- TokenPayload
AuthenticationModule -- AuthError
Input:
DDD Workflow: Phase 0 (Planning) -> Phase 1 (Documentation) ->
Approval Gate -> Phase 2 (Code Planning) -> Phase 3 (Implementation) ->
Phase 4 (Testing & Cleanup) -> Complete
Output:
stateDiagram-v2
[*] --> Planning
Planning --> Documentation
Documentation --> ApprovalGate
ApprovalGate --> CodePlanning
CodePlanning --> Implementation
Implementation --> Testing
Testing --> [*]
Input:
The prompt-writer agent clarifies requirements from the user. It then sends
the clarified requirements to the architect agent. The architect creates a
specification and sends it to the builder agent. The builder implements code
and sends it to the reviewer. The reviewer checks quality and sends feedback
back to the builder if issues are found, or to the user if complete.
Output:
sequenceDiagram
actor User
participant PromptWriter
participant Architect
participant Builder
participant Reviewer
User->>PromptWriter: Request Feature
PromptWriter->>Architect: Clarified Requirements
Architect->>Builder: Specification
Builder->>Reviewer: Implementation
Reviewer-->>Builder: Issues Found
Builder->>Reviewer: Fixed Implementation
Reviewer-->>User: Complete & Approved
Input:
Client requests flow through API Gateway to Services. Services can be
Authentication Service, User Service, or Data Service. All services
connect to a shared Database and Logger. Services return responses
through the API Gateway back to Client.
Output:
flowchart LR
Client[Client]
Gateway[API Gateway]
Auth[Auth Service]
User[User Service]
Data[Data Service]
DB[(Database)]
Logger[Logger]
Client <--> Gateway
Gateway --> Auth
Gateway --> User
Gateway --> Data
Auth --> DB
User --> DB
Data --> DB
Auth --> Logger
User --> Logger
Data --> Logger
A[Rectangle]
B(Rounded Rectangle)
C{Diamond/Decision}
D[(Database)]
E[/Parallelogram Right/]
F[\Parallelogram Left\]
G[[Subroutine]]
H((Circle))
A --> B # Arrow
A -- Text --> B # Arrow with label
A ---|Yes| B # Arrow with yes/no
A -->|Condition| B
A -.-> B # Dotted line
A ==> B # Bold arrow
classDef className fill:#f9f,stroke:#333,stroke-width:2px,color:#000
class A,B className
style A fill:#f9f,stroke:#333,stroke-width:4px
Before presenting a diagram, verify:
flowchart TD
B1["Brick Module 1<br/>(Responsibility)"]
B2["Brick Module 2<br/>(Responsibility)"]
S1["Stud: public_function"]
S2["Stud: public_class"]
B1 --> S1
B1 --> S2
S1 -.depends on.-> B2
B2 --> "Stud: get_data"
flowchart TD
Start[Start] --> Q1{Condition 1?}
Q1 -->|No| End1[End: Rejected]
Q1 -->|Yes| Q2{Condition 2?}
Q2 -->|No| End2[End: Review]
Q2 -->|Yes| Q3{Condition 3?}
Q3 -->|No| End3[End: Partial]
Q3 -->|Yes| End4[End: Approved]
flowchart TD
A[Execute] --> B{Error?}
B -->|No| C[Success]
B -->|Yes| D{Recoverable?}
D -->|No| E[Fail]
D -->|Yes| F[Retry]
F --> A
C --> G[End]
E --> G
## System Architecture
```mermaid
flowchart TD
...
```
Key Components:
Component A handles...
Component B processes...
Include explanation before or after the diagram.
This skill evolves based on usage patterns:
Document learnings and suggest improvements for ~/.amplihack/.claude/context/DISCOVERIES.md.
Weekly Installs
212
Repository
GitHub Stars
39
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykFail
Installed on
opencode193
gemini-cli183
codex181
cursor181
github-copilot175
cline167
Skills CLI 使用指南:AI Agent 技能包管理器安装与管理教程
31,600 周安装
A good Mermaid diagram:
Diagrams are generated in Mermaid markdown format, ready to embed:
```mermaid
[Generated Mermaid Syntax]
```