可以請 Claude Code 畫的 Mermaid 圖表類型

流程圖

適用場景要呈現一個流程，或有分支的判斷。

查看原始碼

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

常見圖表類型