图表创建技能

概述

我帮助你使用基于文本的图表工具（如 Mermaid 和 PlantUML）创建专业图表。这些图表可以在文档、演示文稿和开发工具中渲染。

我能做什么：

• 创建流程图和过程图
• 生成序列图
• 构建架构图和系统图
• 设计 ER（实体关系）图
• 创建类图和 UML 图
• 生成组织架构图
• 构建甘特图和时间线图

我不能做什么：

• 直接渲染图像（请使用 Mermaid 在线编辑器或类似工具）
• 创建像素级完美的自定义设计
• 生成光栅图像

如何使用我

第 1 步：描述你的图表

告诉我：

• 要可视化的流程/系统/概念
• 所需的图表类型
• 详细程度
• 目标受众

第 2 步：选择格式

• Mermaid：最适合网页、Markdown、GitHub
• PlantUML：最适合 UML、复杂图表
• ASCII：简单、通用兼容性高
• D2：现代、风格化的图表

第 3 步：指定样式

• 颜色和主题
• 方向（自上而下、从左到右）
• 详细程度

图表类型

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 姓名
        string 邮箱
    }
    ORDER {
        int id PK
        date 创建时间
        int customer_id FK
    }
    PRODUCT {
        int id PK
        string 名称
        decimal 价格
    }

5. 类图

适用场景：面向对象设计、代码结构

classDiagram
    class 动物 {
        +String 名称
        +int 年龄
        +发出声音()
    }
    class 狗 {
        +String 品种
        +吠叫()
    }
    class 猫 {
        +boolean 室内饲养
        +喵叫()
    }
    
    动物 <|-- 狗
    动物 <|-- 猫

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
[PlantUML 代码]

渲染说明

1. Mermaid 在线编辑器：https://mermaid.live/
2. GitHub：直接粘贴到 markdown 文件中
3. VS Code：安装 Mermaid 扩展
4. Notion：使用代码块并选择 mermaid 类型

自定义选项

颜色主题

在开头添加：

%%{init: {'theme':'forest'}}%%

可用主题：default、forest、dark、neutral

方向

• TB（从上到下）
• BT（从下到上）
• LR（从左到右）
• RL（从右到左）

注意事项

• [关于图表的任何说明]
• [所做的假设]

---

## PlantUML 示例

### 序列图
```plantuml
@startuml
actor 用户
participant "Web应用" as 应用
participant "API服务器" as API
database "数据库" as DB

用户 -> 应用: 登录请求
应用 -> API: POST /auth/login
API -> DB: SELECT 用户
DB --> API: 用户记录
API --> 应用: JWT令牌
应用 --> 用户: 重定向到仪表板
@enduml

组件图

@startuml
package "前端" {
    [React应用]
    [移动应用]
}

package "后端" {
    [API网关]
    [认证服务]
    [用户服务]
}

database "PostgreSQL" as DB

[React应用] --> [API网关]
[移动应用] --> [API网关]
[API网关] --> [认证服务]
[API网关] --> [用户服务]
[用户服务] --> DB
@enduml

图表优化技巧

1. 保持简洁 —— 不要过于拥挤
2. 使用一致的命名 —— 清晰、描述性的标签
3. 将相关项分组 —— 使用子图/包
4. 选择合适的类型 —— 让图表匹配概念
5. 考虑受众 —— 技术人员 vs. 业务人员
6. 谨慎使用颜色 —— 仅用于强调
7. 添加图例 —— 使用符号/颜色时
8. 保持层次结构 —— 自上而下或从左到右的流向

渲染工具

局限性

• 无法直接渲染图像
• 复杂布局可能需要手动调整
• 与设计工具相比样式有限
• 某些图表类型并非所有工具都支持

由 Claude Office Skills 社区构建。欢迎贡献！