SKILL.md
readonly只读
name
diagram-creator
description
使用 Mermaid、PlantUML 和其他基于文本的图表工具创建专业图表。生成流程图、时序图、架构图等。
version
1.0.0
图表创建技能
概述
我帮助您使用 Mermaid 和 PlantUML 等基于文本的图表工具创建专业图表。这些图表可以渲染到文档、演示文稿和开发工具中。
我能做什么：
- 创建流程图和过程图
- 生成时序图
- 构建架构图和系统图
- 设计 ER（实体关系）图
- 创建类图和 UML
- 生成组织结构图
- 构建甘特图和时间线
我不能做什么：
- 直接渲染图像（请使用 Mermaid 在线编辑器等）
- 创建像素完美的自定义设计
- 生成光栅图像
如何使用我
第一步：描述您的图表
告诉我：
- 要可视化的过程/系统/概念
- 所需的图表类型
- 详细程度
- 目标受众
第二步：选择格式
- Mermaid：最适合网页、Markdown、GitHub
- PlantUML：最适合 UML、复杂图表
- ASCII：简单，通用兼容
- D2：现代、时尚的图表
第三步：指定样式
- 颜色和主题
- 方向（从上到下、从左到右）
- 详细程度
图表类型
1. 流程图 / 过程图
用途：业务流程、决策树、工作流
flowchart TD
A[开始] --> B{决策?}
B -->|是| C[操作1]
B -->|否| D[操作2]
C --> E[结束]
D --> E
2. 时序图
用途：API 调用、用户交互、系统通信
sequenceDiagram
participant U as 用户
participant A as 应用
participant S as 服务器
participant D as 数据库
U->>A: 点击登录
A->>S: POST /auth/login
S->>D: 查询用户
D-->>S: 用户数据
S-->>A: JWT 令牌
A-->>U: 重定向到仪表盘
3. 架构图
用途：系统设计、基础设施、组件关系
flowchart TB
subgraph 客户端
A[Web 应用]
B[移动应用]
end
subgraph 后端
C[API 网关]
D[认证服务]
E[用户服务]
F[订单服务]
end
subgraph 数据
G[(PostgreSQL)]
H[(Redis)]
I[(S3)]
end
A & B --> C
C --> D & E & F
D --> H
E --> G
F --> G & I
4. 实体关系图
用途：数据库设计、数据模型
erDiagram
CUSTOMER ||--o{ ORDER : 下单
ORDER ||--|{ LINE_ITEM : 包含
PRODUCT ||--o{ LINE_ITEM : "订购于"
CUSTOMER {
int id PK
string name
string email
}
ORDER {
int id PK
date created_at
int customer_id FK
}
PRODUCT {
int id PK
string name
decimal price
}
5. 类图
用途：面向对象设计、代码结构
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+String breed
+bark()
}
class Cat {
+boolean indoor
+meow()
}
Animal <|-- Dog
Animal <|-- Cat
6. 状态图
用途：状态机、状态工作流
stateDiagram-v2
[*] --> 草稿
草稿 --> 已提交: 提交
已提交 --> 审核中: 分配审核人
审核中 --> 已批准: 批准
审核中 --> 已拒绝: 拒绝
已拒绝 --> 草稿: 修改
已批准 --> [*]
7. 甘特图
用途：项目时间线、进度安排
gantt
title 项目时间线
dateFormat YYYY-MM-DD
section 规划
需求分析 :a1, 2024-01-01, 14d
设计 :a2, after a1, 21d
section 开发
后端 :b1, after a2, 30d
前端 :b2, after a2, 30d
section 测试
质量测试 :c1, after b1, 14d
用户验收测试 :c2, after c1, 7d
8. 思维导图
用途：头脑风暴、概念组织
mindmap
root((项目))
功能
功能A
功能B
功能C
团队
前端
后端
设计
时间线
第一季度
第二季度
第三季度
9. Git 分支图
用途：分支可视化、Git 工作流
gitGraph
commit
commit
branch feature
checkout feature
commit
commit
checkout main
merge feature
commit
输出格式
# 图表：[名称]
**类型**：[流程图 / 时序图 / 架构图 / 等]
**工具**：[Mermaid / PlantUML]
**目的**：[它说明的内容]
---
## 图表代码
### Mermaid
```mermaid
[Mermaid 代码]
PlantUML（备选）
[PlantUML 代码]
渲染说明
- Mermaid 在线编辑器：https://mermaid.live/
- GitHub：直接粘贴到 Markdown 文件中
- VS Code：安装 Mermaid 扩展
- Notion：使用 mermaid 类型的代码块
自定义选项
颜色主题
在开头添加：
%%{init: {'theme':'forest'}}%%
可用主题：default, forest, dark, neutral
方向
- TB（从上到下）
- BT（从下到上）
- LR（从左到右）
- RL（从右到左）
备注
- [关于图表的任何备注]
- [所做的假设]
---
### PlantUML 示例
#### 时序图
```plantuml
@startuml
actor 用户
participant "Web 应用" as App
participant "API 服务器" as API
database "数据库" as DB
用户 -> App: 登录请求
App -> API: POST /auth/login
API -> DB: SELECT user
DB --> API: 用户记录
API --> App: JWT 令牌
App --> 用户: 重定向到仪表盘
@enduml
组件图
@startuml
package "前端" {
[React 应用]
[移动应用]
}
package "后端" {
[API 网关]
[认证服务]
[用户服务]
}
database "PostgreSQL" as DB
[React 应用] --> [API 网关]
[移动应用] --> [API 网关]
[API 网关] --> [认证服务]
[API 网关] --> [用户服务]
[用户服务] --> DB
@enduml
制作更好图表的技巧
- 保持简洁 - 不要过度拥挤
- 使用一致的命名 - 清晰、描述性的标签
- 分组相关项 - 使用子图/包
- 选择合适的类型 - 图表与概念匹配
- 考虑受众 - 技术 vs 业务
- 谨慎使用颜色 - 仅用于强调
- 添加图例 - 使用符号/颜色时
- 保持层次结构 - 从上到下或从左到右的流程
渲染工具
| 工具 | 网址 | 最适合 |
|---|---|---|
| Mermaid Live | mermaid.live | 快速编辑 |
| PlantUML Server | plantuml.com | PlantUML 渲染 |
| Draw.io | draw.io | 手动编辑 |
| Excalidraw | excalidraw.com | 手绘风格 |
| Lucidchart | lucidchart.com | 专业图表 |
限制
- 无法直接渲染图像
- 复杂布局可能需要手动调整
- 与设计工具相比样式有限
- 某些图表类型并非所有工具都支持
由 Claude Office Skills 社区构建。欢迎贡献！
