AI Skills
diagram-creator

diagram-creator

熱門

使用 Mermaid、PlantUML 等文字型圖表工具建立專業圖表。產生流程圖、序列圖、架構圖等。

316星標
69分支
更新於 2026/1/31
獲取技能源代碼

相關技能

motion-advanced24萬next-partial-prefetching-adoption14萬migrate-radix-to-base12萬
SKILL.md
唯讀
名稱
diagram-creator
描述

使用 Mermaid、PlantUML 等文字型圖表工具建立專業圖表。產生流程圖、序列圖、架構圖等。

版本
1.0.0

Diagram Creator 技能

概述

我可以協助您使用 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 token
    A-->>U: 重新導向到儀表板

3. 架構圖

用途：系統設計、基礎架構、元件關係

flowchart TB
    subgraph 客戶端
        A[網頁應用程式]
        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
        團隊
            前端
            後端
            設計
        時間軸
            Q1
            Q2
            Q3

9. Git 圖

用途：分支視覺化、Git 工作流程

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

輸出格式

# 圖表：[名稱]

**類型**：[流程圖 / 序列圖 / 架構圖 / 等]
**工具**：[Mermaid / PlantUML]
**目的**：[說明的內容]

---

## 圖表程式碼

### Mermaid

```mermaid
[Mermaid 程式碼]

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 "網頁應用程式" as App
participant "API 伺服器" as API
database "資料庫" as DB

使用者 -> App: 登入請求
App -> API: POST /auth/login
API -> DB: SELECT user
DB --> API: 使用者記錄
API --> App: JWT token
App --> 使用者: 重新導向到儀表板
@enduml

元件圖

@startuml
package "前端" {
    [React App]
    [行動應用程式]
}

package "後端" {
    [API 閘道]
    [認證服務]
    [使用者服務]
}

database "PostgreSQL" as DB

[React App] --> [API 閘道]
[行動應用程式] --> [API 閘道]
[API 閘道] --> [認證服務]
[API 閘道] --> [使用者服務]
[使用者服務] --> DB
@enduml

製作更好圖表的技巧

  1. 保持簡單 - 不要過度擁擠
  2. 使用一致的名稱 - 清晰、描述性的標籤
  3. 分組相關項目 - 使用子圖/套件
  4. 選擇適當的類型 - 圖表要符合概念
  5. 考慮受眾 - 技術人員 vs. 商業人員
  6. 謹慎使用顏色 - 僅用於強調
  7. 加入圖例 - 使用符號/顏色時
  8. 維持層次結構 - 由上到下或由左到右的流程

渲染工具

工具 網址 最適合
Mermaid Live mermaid.live 快速編輯
PlantUML Server plantuml.com PlantUML 渲染
Draw.io draw.io 手動編輯
Excalidraw excalidraw.com 手繪風格
Lucidchart lucidchart.com 專業圖表

限制

  • 無法直接渲染圖片
  • 複雜佈局可能需要手動調整
  • 樣式限制比設計工具多
  • 某些圖表類型並非所有工具都支援

由 Claude Office Skills 社群建立。歡迎貢獻！