mermaid-diagram-generator
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseMermaid Diagram Generator Skill
Mermaid图表生成Skill
Purpose
用途
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.
该Skill可自动将系统架构、模块规格、工作流文档和设计概念的文本描述转换为有效的Mermaid图表语法。它能实现复杂系统的清晰可视化沟通,确保图表可用于生产环境并能嵌入Markdown文档。
When to Use This Skill
何时使用该Skill
- Architecture Visualization: Convert architecture descriptions into flowcharts or block diagrams
- Module Relationships: Create diagrams showing how brick modules connect via their studs (public contracts)
- Workflow Documentation: Visualize workflow states, decisions, and transitions (DDD phases, investigation stages)
- System Design: Display system components, data flow, and interactions
- Sequence Diagrams: Show agent interactions, request/response patterns, or call sequences
- Class Hierarchies: Document module structure and class relationships
- State Machines: Model workflow states and valid transitions
- Entity Relationships: Display data model structures and relationships
- Timeline Planning: Create Gantt charts for project phases or milestones
- 架构可视化:将架构描述转换为流程图或框图
- 模块关系:创建展示积木模块如何通过其studs(公共同约)连接的图表
- 工作流文档:可视化工作流状态、决策和转换(DDD阶段、调查步骤)
- 系统设计:展示系统组件、数据流和交互
- 序列图:展示Agent交互、请求/响应模式或调用序列
- 类层次结构:记录模块结构和类关系
- 状态机:为工作流状态和有效转换建模
- 实体关系:展示数据模型结构和关系
- 时间线规划:为项目阶段或里程碑创建甘特图
Supported Diagram Types
支持的图表类型
1. Flowcharts (Default)
1. 流程图(默认)
Best for: workflow sequences, decision trees, process flows, module relationships
mermaid
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action A]
B -->|No| D[Action B]
C --> E[End]
D --> E最适用于:工作流序列、决策树、流程、模块关系
mermaid
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action A]
B -->|No| D[Action B]
C --> E[End]
D --> E2. Sequence Diagrams
2. 序列图
Best for: agent interactions, API calls, multi-step processes, request/response patterns
mermaid
sequenceDiagram
participant User
participant API
participant Service
User->>API: Request
API->>Service: Process
Service-->>API: Response
API-->>User: Result最适用于:Agent交互、API调用、多步流程、请求/响应模式
mermaid
sequenceDiagram
participant User
participant API
participant Service
User->>API: Request
API->>Service: Process
Service-->>API: Response
API-->>User: Result3. Class Diagrams
3. 类图
Best for: module structure, inheritance hierarchies, data models, component relationships
mermaid
classDiagram
class Brick {
+String responsibility
+PublicContract studs
}
class Module {
+init()
+process()
}
Brick <|-- Module最适用于:模块结构、继承层次、数据模型、组件关系
mermaid
classDiagram
class Brick {
+String responsibility
+PublicContract studs
}
class Module {
+init()
+process()
}
Brick <|-- Module4. State Diagrams
4. 状态图
Best for: workflow states, state machines, workflow phases, condition-based transitions
mermaid
stateDiagram-v2
[*] --> Planning
Planning --> Design
Design --> Implementation
Implementation --> Testing
Testing --> [*]最适用于:工作流状态、状态机、工作流阶段、基于条件的转换
mermaid
stateDiagram-v2
[*] --> Planning
Planning --> Design
Design --> Implementation
Implementation --> Testing
Testing --> [*]5. Entity Relationship Diagrams
5. 实体关系图
Best for: data models, database schemas, entity relationships
mermaid
erDiagram
MODULE ||--o{ FUNCTION : exports
MODULE ||--o{ DEPENDENCY : requires
FUNCTION }o--|| CONTRACT : implements最适用于:数据模型、数据库模式、实体关系
mermaid
erDiagram
MODULE ||--o{ FUNCTION : exports
MODULE ||--o{ DEPENDENCY : requires
FUNCTION }o--|| CONTRACT : implements6. Gantt Charts
6. 甘特图
Best for: project timelines, workflow phases, milestone planning
mermaid
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最适用于:项目时间线、工作流阶段、里程碑规划
mermaid
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, 25dStep-by-Step Generation Process
分步生成流程
Step 1: Understand the Source Material
步骤1:理解源材料
- Read the architecture description, spec, or workflow document
- Identify the main entities or nodes
- Determine how they relate or flow
- Choose the appropriate diagram type
- 阅读架构描述、规格或工作流文档
- 识别主要实体或节点
- 确定它们的关联或流动方式
- 选择合适的图表类型
Step 2: Identify Diagram Type
步骤2:确定图表类型
| 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 |
| 源材料类型 | 最佳图表类型 |
|---|---|
| 工作流步骤、流程 | 流程图 |
| 模块关系、积木模块连接 | 流程图或类图 |
| Agent交互、调用序列 | 序列图 |
| 状态与转换 | 状态图 |
| 数据模型、实体 | 类图或实体关系图 |
| 数据库模式 | 实体关系图 |
| 项目时间线 | 甘特图 |
| 复杂层次结构 | 类图 |
Step 3: Extract Entities and Relationships
步骤3:提取实体与关系
- List all nodes/entities from the source
- Identify connections between them
- Determine connection types (data flow, inheritance, calling, etc.)
- Note any decision points or conditions
- 列出源材料中的所有节点/实体
- 识别它们之间的连接
- 确定连接类型(数据流、继承、调用等)
- 记录任何决策点或条件
Step 4: Generate Mermaid Syntax
步骤4:生成Mermaid语法
- Use appropriate Mermaid diagram declaration
- Create nodes with descriptive labels
- Draw connections with proper syntax
- Add styling if needed for clarity
- Ensure valid Mermaid syntax
- 使用合适的Mermaid图表声明
- 创建带有描述性标签的节点
- 使用正确的语法绘制连接
- 如有需要添加样式以提升清晰度
- 确保Mermaid语法有效
Step 5: Validate and Enhance
步骤5:验证与优化
- Ensure all entities are included
- Verify connections are accurate
- Add styling for important elements
- Make diagram readable and not cluttered
- Test syntax for validity
- 确保所有实体都已包含
- 验证连接是否准确
- 为重要元素添加样式
- 确保图表可读且不过于杂乱
- 测试语法有效性
Step 6: Document and Embed
步骤6:文档与嵌入
- Add title and description
- Include explanation of diagram
- Provide legend if needed
- Embed in markdown with proper formatting
- 添加标题和描述
- 包含图表说明
- 如有需要提供图例
- 使用正确格式嵌入Markdown
Usage Examples
使用示例
Example 1: Architecture Description to Flowchart
示例1:架构描述转流程图
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:
mermaid
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输入:
身份验证模块处理JWT令牌验证。当请求到达时,首先检查令牌是否存在。如果不存在,返回未授权。如果存在,验证令牌签名。如果有效,提取载荷并继续。如果无效,返回禁止访问。载荷会传递给授权模块进行基于角色的访问控制。输出:
mermaid
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 --> KExample 2: Module Spec to Class Diagram
示例2:模块规格转类图
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:
mermaid
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输入:
模块:身份验证
- 导出:validate_token, TokenPayload, AuthError
- 类:TokenPayload(user_id, role, expires_at), AuthError(message, code)
- 函数:validate_token(token, secret) -> TokenPayload
- 内部依赖:JWT(PyJWT库), 模型(TokenPayload)输出:
mermaid
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 -- AuthErrorExample 3: Workflow to State Diagram
示例3:工作流转状态图
Input:
DDD Workflow: Phase 0 (Planning) -> Phase 1 (Documentation) ->
Approval Gate -> Phase 2 (Code Planning) -> Phase 3 (Implementation) ->
Phase 4 (Testing & Cleanup) -> CompleteOutput:
mermaid
stateDiagram-v2
[*] --> Planning
Planning --> Documentation
Documentation --> ApprovalGate
ApprovalGate --> CodePlanning
CodePlanning --> Implementation
Implementation --> Testing
Testing --> [*]输入:
DDD工作流:阶段0(规划)-> 阶段1(文档)->
审批关口 -> 阶段2(代码规划)-> 阶段3(实现)->
阶段4(测试与清理)-> 完成输出:
mermaid
stateDiagram-v2
[*] --> Planning
Planning --> Documentation
Documentation --> ApprovalGate
ApprovalGate --> CodePlanning
CodePlanning --> Implementation
Implementation --> Testing
Testing --> [*]Example 4: Agent Interaction to Sequence Diagram
示例4:Agent交互转序列图
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:
mermaid
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输入:
Prompt-writer Agent明确用户需求。然后将明确后的需求发送给Architect Agent。Architect创建规格并发送给Builder Agent。Builder实现代码并发送给Reviewer。Reviewer检查质量,如果发现问题将反馈发送回Builder,否则发送给用户。输出:
mermaid
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 & ApprovedExample 5: System Architecture to Flowchart
示例5:系统架构转流程图
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:
mermaid
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输入:
客户端请求通过API网关流向服务。服务可以是身份验证服务、用户服务或数据服务。所有服务都连接到共享数据库和日志器。服务通过API网关将响应返回给客户端。输出:
mermaid
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 --> LoggerMermaid Syntax Reference
Mermaid语法参考
Flowchart Nodes
流程图节点
A[Rectangle]
B(Rounded Rectangle)
C{Diamond/Decision}
D[(Database)]
E[/Parallelogram Right/]
F[\Parallelogram Left\]
G[[Subroutine]]
H((Circle))A[Rectangle]
B(Rounded Rectangle)
C{Diamond/Decision}
D[(Database)]
E[/Parallelogram Right/]
F[\Parallelogram Left\]
G[[Subroutine]]
H((Circle))Flowchart Connections
流程图连接
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 arrowA --> B # 箭头
A -- Text --> B # 带标签的箭头
A ---|Yes| B # 带是/否的箭头
A -->|Condition| B
A -.-> B # 虚线
A ==> B # 粗箭头Styling
样式设置
classDef className fill:#f9f,stroke:#333,stroke-width:2px,color:#000
class A,B className
style A fill:#f9f,stroke:#333,stroke-width:4pxclassDef className fill:#f9f,stroke:#333,stroke-width:2px,color:#000
class A,B className
style A fill:#f9f,stroke:#333,stroke-width:4pxQuality Checklist
质量检查清单
Before presenting a diagram, verify:
- All entities from source are included
- Connections accurately represent relationships
- Diagram type matches content (flowchart for flows, sequence for interactions, etc.)
- Labels are clear and descriptive
- No circular logic or dead ends (unless intentional)
- Mermaid syntax is valid
- Diagram is readable and not overly complex
- Decision points have clear yes/no paths
- Legend provided if needed for understanding
- Comments explain non-obvious elements
在展示图表前,请验证:
- 源材料中的所有实体都已包含
- 连接准确表示关系
- 图表类型与内容匹配(流程用流程图,交互用序列图等)
- 标签清晰且具有描述性
- 无循环逻辑或死胡同(除非是故意设计)
- Mermaid语法有效
- 图表可读且不过于复杂
- 决策点有清晰的是/否路径
- 如有需要提供图例
- 注释解释非显而易见的元素
Common Patterns
常见模式
Brick Module Visualization
积木模块可视化
mermaid
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"mermaid
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"Workflow Decision Tree
工作流决策树
mermaid
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]mermaid
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]Error Handling Flow
错误处理流程
mermaid
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 --> Gmermaid
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 --> GIntegration with Documentation
与文档集成
Embedding in Markdown
嵌入Markdown
markdown
undefinedmarkdown
undefinedSystem Architecture
系统架构
mermaid
flowchart TD
...
**Key Components:**
- Component A handles...
- Component B processes...
mermaid
flowchart TD
...
**关键组件:**
- 组件A负责...
- 组件B处理...
Using with Document-Driven Development
与文档驱动开发结合
- Create diagrams during documentation phase
- Include architecture diagrams in spec docs
- Use sequence diagrams to explain workflows
- Add state diagrams to describe state machines
- 在文档阶段创建图表
- 在规格文档中包含架构图表
- 使用序列图解释工作流
- 添加状态图描述状态机
Using with Investigation Workflow
与调查工作流结合
- Visualize discovered architecture
- Show data flow between components
- Map discovered dependencies
- Display call sequences between services
- 可视化已发现的架构
- 展示组件间的数据流
- 映射已发现的依赖关系
- 展示服务间的调用序列
Tips for Effective Diagrams
有效图表技巧
- Keep It Simple: One concept per diagram
- Use Clear Labels: Names should describe purpose
- Follow Visual Conventions: Diamonds for decisions, circles for states
- Avoid Crossing Lines: Reorganize to reduce visual clutter
- Logical Flow: Top-to-bottom or left-to-right
- Consistent Styling: Similar elements should look similar
- Legend: Include if symbols aren't obvious
- Test Syntax: Ensure Mermaid renders without errors
- Add Comments: Explain non-obvious relationships
- Iterate: Refine based on feedback
- 保持简洁:每个图表对应一个概念
- 使用清晰标签:名称应描述用途
- 遵循视觉规范:菱形表示决策,圆形表示状态
- 避免交叉线条:重新组织以减少视觉杂乱
- 逻辑流向:从上到下或从左到右
- 一致样式:相似元素外观应一致
- 图例:如果符号不明显请包含图例
- 测试语法:确保Mermaid可正常渲染
- 添加注释:解释非显而易见的关系
- 迭代优化:根据反馈改进
Common Pitfalls to Avoid
常见误区
- Too Complex: Diagram has too many elements (break into multiple diagrams)
- Unclear Labels: Node names don't describe their purpose
- Missing Connections: Important relationships not shown
- Invalid Syntax: Mermaid errors prevent rendering
- Ambiguous Decision Points: Yes/no paths not clearly marked
- Crossing Arrows: Visual confusion from overlapping connections
- No Legend: Symbols or colors not explained
- Wrong Diagram Type: Using flowchart for sequence data
- Inconsistent Style: Different formatting for similar elements
- No Context: Diagram shown without explanation
- 过于复杂:图表包含过多元素(拆分为多个图表)
- 标签模糊:节点名称未描述其用途
- 缺失连接:未展示重要关系
- 无效语法:Mermaid错误导致无法渲染
- 模糊决策点:是/否路径未明确标记
- 箭头交叉:重叠连接导致视觉混淆
- 无图例:符号或颜色未解释
- 错误图表类型:用流程图展示序列数据
- 样式不一致:相似元素格式不同
- 无上下文:展示图表时未附带解释
Success Criteria
成功标准
A good Mermaid diagram:
- Shows all key entities from source material
- Accurately represents relationships and flow
- Uses appropriate diagram type for content
- Clear, descriptive labels on all nodes
- Valid Mermaid syntax (renders without error)
- Readable without excessive complexity
- Supports understanding of the system
- Could be embedded in documentation
- Decision points clearly marked
- Legend included if needed
- Purpose and scope clear from context
优秀的Mermaid图表:
- 包含源材料中的所有关键实体
- 准确表示关系与流程
- 使用适合内容的图表类型
- 所有节点都有清晰、描述性的标签
- Mermaid语法有效(可正常渲染)
- 可读且不过于复杂
- 有助于理解系统
- 可嵌入文档
- 决策点标记清晰
- 如有需要包含图例
- 从上下文可明确用途与范围
Related Skills
相关技能
- module-spec-generator: Generate specs that can be visualized as class diagrams
- Document-Driven Development: Use diagrams in specification documents
- Investigation Workflow: Create architecture diagrams from discovered systems
- module-spec-generator:生成可可视化为类图的规格
- 文档驱动开发:在规格文档中使用图表
- 调查工作流:从已发现的系统创建架构图表
Output Format
输出格式
Diagrams are generated in Mermaid markdown format, ready to embed:
markdown
```mermaid
[Generated Mermaid Syntax]
```Include explanation before or after the diagram.
图表以Mermaid Markdown格式生成,可直接嵌入:
markdown
```mermaid
[生成的Mermaid语法]
```在图表前后包含说明。
Feedback and Improvement
反馈与改进
This skill evolves based on usage patterns:
- What types of diagrams are most useful?
- What features make diagrams clearer?
- What errors occur and how to prevent them?
- How can diagrams better support documentation?
Document learnings and suggest improvements for .
~/.amplihack/.claude/context/DISCOVERIES.md该Skill会根据使用模式不断演进:
- 哪些类型的图表最有用?
- 哪些功能能让图表更清晰?
- 会出现哪些错误以及如何预防?
- 图表如何更好地支持文档?
记录学习成果并在中提出改进建议。
~/.amplihack/.claude/context/DISCOVERIES.md