图表类型 — 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

常见图表类型