Mermaid図表の例¶

Mermaidを使用すると、マークダウン内で簡単に様々な図表を作成できます。

フローチャート¶

基本的なフローチャート¶

graph TD
    A[開始] --> B{条件分岐}
    B -->|Yes| C[処理1]
    B -->|No| D[処理2]
    C --> E[終了]
    D --> E

複雑なフローチャート¶

graph LR
    A[Start] --> B(処理1)
    B --> C{判断}
    C -->|条件1| D[処理2]
    C -->|条件2| E[処理3]
    D --> F[処理4]
    E --> F
    F --> G([終了])

    style A fill:#f9f,stroke:#333,stroke-width:2px
    style G fill:#bbf,stroke:#33f,stroke-width:2px

シーケンス図¶

基本的なシーケンス図¶

sequenceDiagram
    participant ユーザー
    participant システム
    participant データベース

    ユーザー->>システム: リクエスト送信
    システム->>データベース: クエリ実行
    データベース-->>システム: 結果返却
    システム-->>ユーザー: レスポンス表示

より詳細なシーケンス図¶

sequenceDiagram
    actor User as ユーザー
    participant Frontend as フロントエンド
    participant API as APIサーバー
    participant DB as データベース

    User->>+Frontend: フォーム送信
    Frontend->>+API: POSTリクエスト
    API->>+DB: データ保存
    Note right of DB: トランザクション開始
    DB-->>-API: 保存完了
    API-->>-Frontend: 成功レスポンス
    Frontend-->>-User: 完了メッセージ表示

クラス図¶

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound() void
    }
    class Dog {
        +String breed
        +bark() void
    }
    class Cat {
        +String color
        +meow() void
    }
    Animal <|-- Dog
    Animal <|-- Cat

ER図¶

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

ガントチャート¶

gantt
    title プロジェクトスケジュール
    dateFormat  YYYY-MM-DD

    section 企画
    要件定義           :a1, 2023-01-01, 30d
    設計               :a2, after a1, 20d

    section 開発
    コーディング       :b1, after a2, 40d
    テスト             :b2, after b1, 20d

    section リリース
    デプロイ           :c1, after b2, 5d
    運用開始           :milestone, after c1, 0d

状態図¶

stateDiagram-v2
    [*] --> 待機中
    待機中 --> 処理中 : 開始
    処理中 --> 完了 : 正常終了
    処理中 --> エラー : 異常発生
    エラー --> 待機中 : リセット
    完了 --> [*]

ユースケース: 開発フロー¶

graph LR
    A[要件定義] --> B[設計]
    B --> C[実装]
    C --> D[テスト]
    D --> E{バグあり?}
    E -->|はい| C
    E -->|いいえ| F[リリース]

    style A fill:#d0f0d0
    style B fill:#d0e0f0
    style C fill:#f0d0e0
    style D fill:#f0f0d0
    style F fill:#f0d0d0

ユースケース: CI/CDパイプライン¶

graph TD
    A[コード変更] --> B[自動ビルド]
    B --> C{ビルド成功?}
    C -->|Yes| D[自動テスト]
    C -->|No| E[開発者に通知]
    D --> F{テスト通過?}
    F -->|Yes| G[ステージング環境へデプロイ]
    F -->|No| E
    G --> H[手動承認]
    H --> I[本番環境へデプロイ]

ヒント¶

• Mermaid図表は、GitHubやGitLabなど多くのプラットフォームでもサポートされています
• テーマカラーはMkDocsのテーマに合わせて自動的に調整されます
• より複雑な図表についてはMermaidの公式ドキュメントを参照してください