提示詞技巧 · DiagramZu

結構

在顏色和佈局之前 —— AI 怎麼把圖搭起來。

01

選對圖表種類

流程圖並非萬能 —— 請求／回應用循序圖，生命週期用狀態圖，資料關係用 ER 圖。

檢視原始碼

mermaid

sequenceDiagram
  participant U as User
  participant API
  participant DB as Postgres
  U->>API: POST /login
  API->>DB: SELECT user
  DB-->>API: row
  API-->>U: 200 + session

02

依語意分組

DiagramZu 會自動為分組上色；你只要為分組命名。

把瀏覽器、CDN、閘道、Auth、Billing、Postgres 依職責分組上色的流程圖。

檢視原始碼

mermaid

flowchart TD
  A[Browser] --> B[CDN] --> C[Gateway]
  C --> D[Auth] & E[Billing]
  D & E --> F[(Postgres)]
  class A,B edge
  class C,D,E core
  class F data

03

用 subgraph 包住邊界

subgraph 讓「這是一個服務」「這是一個團隊」一目瞭然。

帶有 Browser、Backend services、Data 三個 subgraph 邊界的流程圖。

檢視原始碼

mermaid

flowchart LR
  subgraph client[Browser]
    UI[Web app]
  end
  subgraph services[Backend services]
    API[API gateway]
    AUTH[Auth]
    BILL[Billing]
  end
  subgraph data[Data]
    DB[(Postgres)]
  end
  UI --> API
  API --> AUTH & BILL
  AUTH & BILL --> DB
  class UI edge
  class API,AUTH,BILL core
  class DB data

04

選擇佈局方向

管線與請求流用 LR，層級與判斷用 TD。

檢視原始碼

mermaid

flowchart LR
  A[Source] --> B[Transform] --> C[Validate] --> D[Sink]
  class A edge
  class B,C core
  class D data

清晰

怎樣讓每個節點和箭頭都有承重作用，而不只是裝飾。

05

具體地命名

「Stripe」勝過「付款服務商」；具體名稱讓圖表更容易被引用。

檢視原始碼

mermaid

flowchart LR
  U[User] --> APP[Web app]
  APP --> STRIPE[Stripe]
  APP --> POSTGRES[(Postgres)]
  APP --> S3[S3]
  class U edge
  class APP core
  class STRIPE,POSTGRES,S3 data

06

為邊加上標籤

沒標籤的箭頭只說「發生了什麼」；有標籤的箭頭在教你。

檢視原始碼

mermaid

flowchart LR
  U[User] -- "submits form" --> API[API]
  API -- "validates" --> AUTH[Auth]
  AUTH -- "token" --> API
  API -- "writes row" --> DB[(Postgres)]
  class U edge
  class API,AUTH core
  class DB data

07

用 emoji 當路標

Mermaid 支援渲染標籤中的 Unicode。為關鍵節點加一個 emoji，焦點立現。

檢視原始碼

mermaid

flowchart LR
  U[User] --> APP[🔑 Auth gateway]
  APP --> SVC[Service]
  SVC --> DB[(💾 Postgres)]
  SVC --> AI[🤖 LLM]
  class U edge
  class APP,SVC core
  class DB,AI data

08

一張圖只談一件事

一張「什麼都談」的圖等於什麼都沒談。按問題拆開。

檢視原始碼

mermaid

flowchart LR
  REQ[Request] --> AUTH[Auth check] --> HANDLER[Handler] --> RES[Response]
  class REQ edge
  class AUTH,HANDLER core
  class RES data

迭代

怎樣把第一版草稿，變成你願意真正共享出去的圖。

09

迭代，不要重來

第一張圖是草稿。像編輯文章那樣編輯它。

檢視原始碼

mermaid

flowchart TD
  V1[v1: flat] --> V2[v2: grouped] --> V3[v3: labeled] --> V4[v4: shipped]
  class V1 edge
  class V2,V3 core
  class V4 accent

10

搭配合適的樣式

投影片用 Midnight、文件用 Paper、自然／健康用 Forest、維運用 Ocean、印刷用 Mono。

檢視原始碼

mermaid

flowchart LR
  SLIDES[📽 Slides] --> M[Midnight]
  DOCS[📄 Docs] --> P[Paper]
  PRINT[🖨 Print] --> MO[Mono]
  class SLIDES,DOCS,PRINT edge
  class M,P,MO core

好的提示詞，好的圖表