圖表類型 — DiagramZu

流程圖

適用場景你需要展示一個流程或分支判斷。

查看原始碼

mermaid

flowchart LR
  A[Visitor] --> B{Has account?}
  B -- Yes --> C[Sign in]
  B -- No --> D[Sign up]
  D --> E[Verify email]
  C --> F[Dashboard]
  E --> F

循序圖

適用場景你需要展示系統各部分之間隨時間發生的互動。

查看原始碼

mermaid

sequenceDiagram
  participant U as User
  participant C as Client
  participant A as Auth Server
  U->>C: Click "Sign in"
  C->>A: Request auth code
  A-->>C: Auth code
  C->>A: Exchange for token
  A-->>C: Access token
  C-->>U: Signed in

狀態圖

適用場景你需要展示某個東西的狀態隨時間如何變化 — 訂單生命週期、訂閱階段、部署流程。

查看原始碼

mermaid

stateDiagram-v2
  [*] --> Placed
  Placed --> Paid: payment received
  Placed --> Cancelled: cancelled by user
  Paid --> Shipped: order fulfilled
  Paid --> Refunded: refund issued
  Shipped --> Delivered: delivered to customer
  Delivered --> [*]
  Cancelled --> [*]
  Refunded --> [*]

ER 圖

適用場景你需要展示資料庫綱要 — 實體、關聯與基數。

查看原始碼

mermaid

erDiagram
  USER ||--o{ ORDER : places
  ORDER ||--|{ ORDER_ITEM : contains
  PRODUCT ||--o{ ORDER_ITEM : "ordered as"
  USER {
    string email
    string name
  }
  ORDER {
    string id
    date created_at
  }
  PRODUCT {
    string sku
    string name
  }

類別圖

適用場景你需要展示物件導向的結構 — 類別、繼承,以及每個類別各自的職責。

查看原始碼

mermaid

classDiagram
  class PaymentProcessor {
    +charge(amount) bool
    +refund(id) bool
  }
  class StripeAdapter {
    +charge(amount) bool
  }
  class PayPalAdapter {
    +charge(amount) bool
  }
  PaymentProcessor <|-- StripeAdapter
  PaymentProcessor <|-- PayPalAdapter

架構圖

適用場景你需要從 CEO 或董事會的角度展示系統全貌 — 產品本體、誰在使用、依賴了哪些第三方服務。

查看原始碼

mermaid

flowchart LR
  subgraph users[Users]
    U[End user]
    A[Admin]
  end
  subgraph product[Our product]
    W[Web app]
    DB[(Database)]
    W --> DB
  end
  subgraph external[Third-party services]
    AUTH[Auth provider]
    PAY[Payment processor]
    EMAIL[Email service]
    AI[AI model API]
  end
  U --> W
  A --> W
  W --> AUTH
  W --> PAY
  W --> EMAIL
  W --> AI

常見圖表類型