Back to Details

diagram-creator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Diagram Creator Skill

图表创建Skill

Overview

概述

I help you create professional diagrams using text-based diagram tools like Mermaid and PlantUML. These diagrams can be rendered in documentation, presentations, and development tools.
What I can do:
  • Create flowcharts and process diagrams
  • Generate sequence diagrams
  • Build architecture and system diagrams
  • Design ER (Entity-Relationship) diagrams
  • Create class diagrams and UML
  • Generate organizational charts
  • Build Gantt charts and timelines
What I cannot do:
  • Render images directly (use Mermaid live editor or similar)
  • Create pixel-perfect custom designs
  • Generate raster images
我可以帮助你使用Mermaid、PlantUML等基于文本的图表工具创建专业图表。这些图表可在文档、演示文稿及开发工具中渲染展示。
我能做什么：
  • 创建流程图和过程图
  • 生成时序图
  • 构建架构图和系统图
  • 设计ER（实体关系）图
  • 创建类图和UML图
  • 生成组织结构图
  • 构建甘特图和时间线
我不能做什么：
  • 直接渲染图像（请使用Mermaid在线编辑器或类似工具）
  • 创建像素级完美的自定义设计
  • 生成光栅图像

How to Use Me

使用方法

Step 1: Describe Your Diagram

步骤1：描述你的图表

Tell me:
  • What process/system/concept to visualize
  • Type of diagram needed
  • Level of detail
  • Target audience
请告诉我：
  • 要可视化的流程/系统/概念
  • 需要的图表类型
  • 详细程度
  • 目标受众

Step 2: Choose Format

步骤2：选择格式

  • Mermaid: Best for web, markdown, GitHub
  • PlantUML: Best for UML, complex diagrams
  • ASCII: Simple, universal compatibility
  • D2: Modern, stylish diagrams
  • Mermaid：最适用于网页、Markdown、GitHub
  • PlantUML：最适用于UML图、复杂图表
  • ASCII：简单通用，兼容性强
  • D2：现代风格的精美图表

Step 3: Specify Style

步骤3：指定样式

  • Colors and themes
  • Direction (top-down, left-right)
  • Level of detail
  • 颜色和主题
  • 方向（自上而下、自左至右等）
  • 详细程度

Diagram Types

图表类型

1. Flowchart / Process Diagram

1. 流程图/过程图

Use for: Business processes, decision trees, workflows
mermaid
flowchart TD
    A[Start] --> B{Decision?}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
适用场景：业务流程、决策树、工作流
mermaid
flowchart TD
    A[Start] --> B{Decision?}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

2. Sequence Diagram

2. 时序图

Use for: API calls, user interactions, system communication
mermaid
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
适用场景：API调用、用户交互、系统通信
mermaid
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. Architecture Diagram

3. 架构图

Use for: System design, infrastructure, component relationships
mermaid
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
适用场景：系统设计、基础设施、组件关系
mermaid
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. Entity-Relationship Diagram

4. 实体关系（ER）图

Use for: Database design, data models
mermaid
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
    }
适用场景：数据库设计、数据模型
mermaid
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. Class Diagram

5. 类图

Use for: OOP design, code structure
mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +String breed
        +bark()
    }
    class Cat {
        +boolean indoor
        +meow()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat
适用场景：面向对象设计、代码结构
mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +String breed
        +bark()
    }
    class Cat {
        +boolean indoor
        +meow()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat

6. State Diagram

6. 状态图

Use for: State machines, status workflows
mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> Submitted: Submit
    Submitted --> InReview: Assign reviewer
    InReview --> Approved: Approve
    InReview --> Rejected: Reject
    Rejected --> Draft: Revise
    Approved --> [*]
适用场景：状态机、状态工作流
mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> Submitted: Submit
    Submitted --> InReview: Assign reviewer
    InReview --> Approved: Approve
    InReview --> Rejected: Reject
    Rejected --> Draft: Revise
    Approved --> [*]

7. Gantt Chart

7. 甘特图

Use for: Project timelines, schedules
mermaid
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
适用场景：项目时间线、进度计划
mermaid
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. Mind Map

8. 思维导图

Use for: Brainstorming, concept organization
mermaid
mindmap
    root((Project))
        Features
            Feature A
            Feature B
            Feature C
        Team
            Frontend
            Backend
            Design
        Timeline
            Q1
            Q2
            Q3
适用场景：头脑风暴、概念整理
mermaid
mindmap
    root((Project))
        Features
            Feature A
            Feature B
            Feature C
        Team
            Frontend
            Backend
            Design
        Timeline
            Q1
            Q2
            Q3

9. Git Graph

9. Git分支图

Use for: Branch visualization, git workflows
mermaid
gitGraph
    commit
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature
    commit
适用场景：分支可视化、Git工作流
mermaid
gitGraph
    commit
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature
    commit

Output Format

输出格式

markdown
undefined
markdown
undefined

Diagram: [Name]

Diagram: [Name]

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

Diagram Code

Diagram Code

Mermaid

Mermaid

mermaid
[Mermaid code here]
mermaid
[Mermaid code here]

PlantUML (Alternative)

PlantUML (Alternative)

plantuml
[PlantUML code here]
plantuml
[PlantUML code here]

Rendering Instructions

渲染说明

  1. Mermaid Live Editor: https://mermaid.live/
  2. GitHub: Paste directly in markdown files
  3. VS Code: Install Mermaid extension
  4. Notion: Use code block with mermaid type
  1. Mermaid在线编辑器：https://mermaid.live/
  2. GitHub：直接粘贴到Markdown文件中
  3. VS Code：安装Mermaid扩展
  4. Notion：使用类型为mermaid的代码块

Customization Options

自定义选项

Color Theme

颜色主题

Add to the beginning:
%%{init: {'theme':'forest'}}%%
Available themes: default, forest, dark, neutral
在代码开头添加：
%%{init: {'theme':'forest'}}%%
可用主题：default、forest、dark、neutral

Direction

方向

  • TB (top to bottom)
  • BT (bottom to top)
  • LR (left to right)
  • RL (right to left)
  • TB（自上而下）
  • BT（自下而上）
  • LR（自左至右）
  • RL（自右至左）

Notes

注意事项

  • [Any notes about the diagram]
  • [Assumptions made]

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

---

PlantUML Examples

PlantUML示例

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
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

Component Diagram

组件图

plantuml
@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
plantuml
@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

Tips for Better Diagrams

优化图表的技巧

  1. Keep it simple - Don't overcrowd
  2. Use consistent naming - Clear, descriptive labels
  3. Group related items - Use subgraphs/packages
  4. Choose appropriate type - Match diagram to concept
  5. Consider audience - Technical vs. business
  6. Use colors sparingly - For emphasis only
  7. Add legends - When using symbols/colors
  8. Maintain hierarchy - Top-down or left-right flow
  1. 保持简洁 - 不要过度拥挤
  2. 命名一致 - 使用清晰、描述性的标签
  3. 分组相关项 - 使用子图/包
  4. 选择合适类型 - 让图表与概念匹配
  5. 考虑受众 - 技术人员 vs 业务人员
  6. 谨慎使用颜色 - 仅用于强调
  7. 添加图例 - 当使用特殊符号/颜色时
  8. 保持层级结构 - 自上而下或自左至右的流向

Rendering Tools

渲染工具

ToolURLBest For
Mermaid Livemermaid.liveQuick editing
PlantUML Serverplantuml.comPlantUML rendering
Draw.iodraw.ioManual editing
Excalidrawexcalidraw.comHand-drawn style
Lucidchartlucidchart.comProfessional diagrams
工具网址最佳用途
Mermaid在线编辑器mermaid.live快速编辑
PlantUML服务器plantuml.comPlantUML渲染
Draw.iodraw.io手动编辑
Excalidrawexcalidraw.com手绘风格图表
Lucidchartlucidchart.com专业图表制作

Limitations

局限性

  • Cannot render images directly
  • Complex layouts may need manual adjustment
  • Limited styling compared to design tools
  • Some diagram types not supported in all tools
Built by the Claude Office Skills community. Contributions welcome!
  • 无法直接渲染图像
  • 复杂布局可能需要手动调整
  • 与设计工具相比，样式选项有限
  • 部分图表类型并非所有工具都支持
由Claude Office Skills社区构建。欢迎贡献！