図の種類 — 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

アーキテクチャ図

こんなときに経営層・取締役レベルでシステム全体を見せたいとき — プロダクト本体、利用者、依存する外部サービスを一望する。

ソースコードを見る

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

よく使う図の種類