diagram-creator

Name: diagram-creator
Author: claude-office-skills

github.com/claude-office-skills设计与 UI5455.0k 次安装39 周前更新

代码仓库

关于 diagram-creator

diagram-creator 是用于通过 Mermaid、PlantUML 等文本工具编写图表的技能，面向需要在文档、演示文稿或开发工具中表达流程与系统结构的人。它生成图表代码，但不直接渲染图像。

主要功能

01生成流程图与过程图
02创建时序图和架构图
03制作 ER、类和状态图
04生成甘特图、时间线与思维导图
05支持 Mermaid、PlantUML、ASCII 和 D2

适用场景

01在文档中展示业务流程
02说明 API 调用或系统交互
03绘制数据库模型与类结构
04整理项目时间线或头脑风暴

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/claude-office-skills/skills --skill diagram-creator

安装后在 Claude Code 中输入/diagram-creator确认已加载。

详细介绍

图表创建技能

概述

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

我能做什么：

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

我不能做什么：

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

使用方法

步骤 1：描述你的图表

告诉我：

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

步骤 2：选择格式

Mermaid：最适合网页、Markdown 和 GitHub
PlantUML：最适合 UML 和复杂图表
ASCII：简单且兼容性广
D2：现代、时尚的图表

步骤 3：指定样式

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

图表类型

1. 流程图 / 流程示意图

适用于：业务流程、决策树、工作流

flowchart TD
    A[Start] --> B{Decision?}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

2. 时序图

适用于：API 调用、用户交互、系统通信

sequenceDiagram
    participant U as User
    participant A as App
    participant S as Server
    participant D as Database
    
    U->>A: Click Login
    A->>S: POST /auth/login
    S->>D: Query user
    D-->>S: User data
    S-->>A: JWT token
    A-->>U: Redirect to dashboard

3. 架构图

适用于：系统设计、基础设施、组件关系

flowchart TB
    subgraph Client
        A[Web App]
        B[Mobile App]
    end
    
    subgraph Backend
        C[API Gateway]
        D[Auth Service]
        E[User Service]
        F[Order Service]
    end
    
    subgraph Data
        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 : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "ordered in"
    
    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
    [*] --> Draft
    Draft --> Submitted: Submit
    Submitted --> InReview: Assign reviewer
    InReview --> Approved: Approve
    InReview --> Rejected: Reject
    Rejected --> Draft: Revise
    Approved --> [*]

7. 甘特图

适用于：项目时间线、进度安排

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    
    section Planning
    Requirements    :a1, 2024-01-01, 14d
    Design          :a2, after a1, 21d
    
    section Development
    Backend         :b1, after a2, 30d
    Frontend        :b2, after a2, 30d
    
    section Testing
    QA Testing      :c1, after b1, 14d
    UAT             :c2, after c1, 7d

8. 思维导图

适用于：头脑风暴、概念整理

mindmap
    root((Project))
        Features
            Feature A
            Feature B
            Feature C
        Team
            Frontend
            Backend
            Design
        Timeline
            Q1
            Q2
            Q3

9. Git 图

适用于：分支可视化、Git 工作流

gitGraph
    commit
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature
    commit

输出格式

# Diagram: [Name]

**Type**: [Flowchart / Sequence / Architecture / etc.]
**Tool**: [Mermaid / PlantUML]
**Purpose**: [What it illustrates]

---

## Diagram Code

### Mermaid

```mermaid
[Mermaid code here]

PlantUML（替代方案）

[PlantUML code here]

渲染说明

Mermaid 在线编辑器：https://mermaid.live/
GitHub：直接粘贴到 Markdown 文件中
VS Code：安装 Mermaid 扩展
Notion：使用类型为 mermaid 的代码块

自定义选项

配色主题

在开头添加：

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

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

方向

TB（自上而下）
BT（自下而上）
LR（从左向右）
RL（从右向左）

备注

[关于图表的任何备注]
[所作假设]


---

## PlantUML Examples

### Sequence Diagram
```plantuml
@startuml
actor User
participant "Web App" as App
participant "API Server" as API
database "Database" as DB

User -> App: Login request
App -> API: POST /auth/login
API -> DB: SELECT user
DB --> API: User record
API --> App: JWT token
App --> User: Redirect to dashboard
@enduml

组件图

@startuml
package "Frontend" {
    [React App]
    [Mobile App]
}

package "Backend" {
    [API Gateway]
    [Auth Service]
    [User Service]
}

database "PostgreSQL" as DB

[React App] --> [API Gateway]
[Mobile App] --> [API Gateway]
[API Gateway] --> [Auth Service]
[API Gateway] --> [User Service]
[User Service] --> DB
@enduml

绘制更佳图表的技巧

保持简洁 - 避免内容过于拥挤
使用一致的命名 - 标签应清晰且具有描述性
对相关项目分组 - 使用子图或包
选择合适的类型 - 让图表类型与概念相匹配
考虑受众 - 技术人员还是业务人员
谨慎使用颜色 - 仅用于突出重点
添加图例 - 使用符号或颜色时添加
保持层次结构 - 采用自上而下或从左向右的流程

渲染工具

工具	URL	最适合
Mermaid Live	mermaid.live	快速编辑
PlantUML Server	plantuml.com	PlantUML 渲染
Draw.io	draw.io	手动编辑
Excalidraw	excalidraw.com	手绘风格
Lucidchart	lucidchart.com	专业图表

限制

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

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

支持 Markdown

登录后评论