第1章:フローチャートの記述方法

基本的な構文

 
flowchart TB
    A([開始]) --> B[車が信号機に接近];
    B --> C{信号の色を確認};
    C -->|青| D[進む];
    C -->|黄| E{安全に停止できるか?};
    C -->|赤| F[停止する];
    E -->|"はい"| F;
    E -->|"いいえ"| D;
    D --> G([交差点を通過]);
    F --> H([停止線で待機]);
    
 
flowchart TB
    A([開始]) --> B[車が信号機に接近];
    B --> C{信号の色を確認};
    C -->|青| D[進む];
    C -->|黄| E{安全に停止できるか?};
    C -->|赤| F[停止する];
    E -->|"はい"| F;
    E -->|"いいえ"| D;
    D --> G([交差点を通過]);
    F --> H([停止線で待機]);

サブグラフ

 
	flowchart LR
	    %% サブグラフ 1:処理開始〜入力
	    subgraph StartFlow [入力フェーズ]
	        A([開始ノード(丸)])
	        B[/入力ノード(平行四辺形)/]
	    end

	    %% サブグラフ 2:処理
	    subgraph ProcessingFlow [処理フェーズ]
	        C[処理ノード(角丸)]
	        D{{条件ノード(ひし形)}}
	    end

	    %% サブグラフ 3:出力と終了
	    subgraph OutputFlow [出力フェーズ]
	        E[\出力ノード(平行四辺形)\]
	        F([終了ノード(丸)])
	    end

	    %% 通常の矢印
	    A --> B
	    B --> C
	    C --> D

	    %% 条件分岐(はい/いいえ)
	    D -- Yes --> E
	    D -- No --> C

	    %% 太線の矢印(重要な遷移)
	    E ==> F

	    %% 点線の矢印(補足的な流れ)
	    B -.-> F

	    %% 双方向の矢印(循環)
	    E <--> C
    
 
flowchart LR
    %% サブグラフ 1:処理開始〜入力
    subgraph StartFlow [入力フェーズ]
        A([開始ノード(丸)])
        B[/入力ノード(平行四辺形)/]
    end

    %% サブグラフ 2:処理
    subgraph ProcessingFlow [処理フェーズ]
        C[処理ノード(角丸)]
        D{{条件ノード(ひし形)}}
    end

    %% サブグラフ 3:出力と終了
    subgraph OutputFlow [出力フェーズ]
        E[\出力ノード(平行四辺形)\]
        F([終了ノード(丸)])
    end

    %% 通常の矢印
    A --> B
    B --> C
    C --> D

    %% 条件分岐(はい/いいえ)
    D -- Yes --> E
    D -- No --> C

    %% 太線の矢印(重要な遷移)
    E ==> F

    %% 点線の矢印(補足的な流れ)
    B -.-> F

    %% 双方向の矢印(循環)
    E <--> C
 

第2章:シーケンス図の記述方法

基本的な構文

 
sequenceDiagram
participant Client
participant Server
participant Device

Client->>+Server: Open  // ClientからServerへメッセージ、Serverが処理開始
Server-->>-Client: Ok    // ServerからClientへ返信、ServerのOpen処理が終了、Clientのライフラインが非活性化

Client->>+Server: Print // ClientからServerへメッセージ、ServerがPrint処理開始
Server->>+Device: Write // ServerからDeviceへメッセージ、Deviceが処理開始
Device-->>-Server: Ok   // DeviceからServerへ返信、Deviceの処理終了
Server-->>-Client: Ok   // ServerからClientへ最終返信、ServerのPrint処理が終了、Clientのライフラインが非活性化
  		
 
sequenceDiagram
    participant Client
    participant Server
    participant Device

    Client->>+Server: Open
    Server-->>-Client: Ok

    Client->>+Server: Print
    Server->>+Device: Write
    Device-->>-Server: Ok
    Server-->>-Client: Ok

ライフラインの活性化

 
sequenceDiagram
  actor Client
  actor Server
  actor Device
  Client->>+Server: 印刷処理依頼  // ClientがServerに依頼し、Serverが活性化
  Server->>+Device: 帳票出力      // ServerがDeviceに依頼し、Deviceが活性化
  Device-->>-Device: 処理実行     // (必要であれば) Device内部の処理で自身が活性化した後、非活性化する
  Device-->>Server: 出力完了      // DeviceがServerに完了を通知 (Serverは引き続き活性状態)
  Server-->>-Client: 印刷が完了しました // ServerがClientに最終通知し、Clientが非活性化。
                                    // このメッセージを送った後、Serverのライフラインは暗黙的に終了します。
        
 
sequenceDiagram
  actor Client
  actor Server
  actor Device
  Client->>+Server: 印刷処理依頼
  Server->>+Device: 帳票出力
  Device-->>-Device: 処理実行
  Device-->>Server: 出力完了
  Server-->>-Client: 印刷が完了しました

alt (選択)

 
sequenceDiagram
    participant ユーザー
    participant アプリケーション
    participant 外部サービス

    ユーザー->>アプリケーション: データ送信 (要求)

    alt 処理が完全に成功した場合
        アプリケーション->>外部サービス: API呼び出し
        外部サービス-->>アプリケーション: 200 OK
        アプリケーション-->>ユーザー: 処理完了 (成功メッセージ)
    else 外部サービスで一部エラーがあった場合
        アプリケーション->>外部サービス: API呼び出し
        外部サービス-->>アプリケーション: 206 Partial Content
        アプリケーション->>アプリケーション: エラーログ記録
        アプリケーション-->>ユーザー: 処理完了 (警告メッセージ)
    else その他の予期せぬエラーの場合
        アプリケーション->>外部サービス: API呼び出し
        外部サービス-->>アプリケーション: 500 Internal Server Error
        アプリケーション->>アプリケーション: エラー通知 (管理者へ)
        アプリケーション-->>ユーザー: 処理失敗 (エラーメッセージ)
    end

    アプリケーション->>ユーザー: ログアウト
          
 
sequenceDiagram
    participant ユーザー
    participant アプリケーション
    participant 外部サービス

    ユーザー->>アプリケーション: データ送信 (要求)

    alt 処理が完全に成功した場合
        アプリケーション->>外部サービス: API呼び出し
        外部サービス-->>アプリケーション: 200 OK
        アプリケーション-->>ユーザー: 処理完了 (成功メッセージ)
    else 外部サービスで一部エラーがあった場合
        アプリケーション->>外部サービス: API呼び出し
        外部サービス-->>アプリケーション: 206 Partial Content
        アプリケーション->>アプリケーション: エラーログ記録
        アプリケーション-->>ユーザー: 処理完了 (警告メッセージ)
    else その他の予期せぬエラーの場合
        アプリケーション->>外部サービス: API呼び出し
        外部サービス-->>アプリケーション: 500 Internal Server Error
        アプリケーション->>アプリケーション: エラー通知 (管理者へ)
        アプリケーション-->>ユーザー: 処理失敗 (エラーメッセージ)
    end

    アプリケーション->>ユーザー: ログアウト

第3章:クラス図の記述方法

クラスの定義と関係性

 
classDiagram
    direction LR

    %% Implementor (実装者) 階層 - 実現(Realization) と 継承(Inheritance)
    class IRenderer {
        <>
        +renderCircle(radius: float)
        +renderRectangle(width: float, height: float)
    }
    class VectorRenderer {
        +renderCircle(radius: float)
        +renderRectangle(width: float, height: float)
    }
    class RasterRenderer {
        +renderCircle(radius: float)
        +renderRectangle(width: float, height: float)
    }
    IRenderer <|.. VectorRenderer : 実現
    IRenderer <|.. RasterRenderer : 実現

    %% Abstraction (抽象化) 階層 - 継承(Inheritance)
    class Shape {
        <>
        -IRenderer renderer
        +draw()
        +resize(factor: float)
    }
    class Circle {
        -radius: float
        +Circle(renderer: IRenderer, radius: float)
        +draw()
    }
    class Rectangle {
        -width: float
        -height: float
        +Rectangle(renderer: IRenderer, width: float, height: float)
        +draw()
    }
    Shape <|-- Circle : 継承
    Shape <|-- Rectangle : 継承

    %% Composition (委譲/合成) - ShapeがIRendererを持つ
    Shape "1" *-- "1" IRenderer : 委譲/合成

    %% Aggregation (集約) - DrawingApplicationが複数のShapeを持つ
    class DrawingApplication {
        -shapes: List
        +addShape(s: Shape)
        +displayAllShapes()
    }
    DrawingApplication "1" o-- "*" Shape : 集約
```
          
 
%%{init: {"class": {"htmlLabels": false}}}%%
classDiagram
    direction LR
    class IRenderer {
        <<interface>>
        +renderCircle(radius: float)
        +renderRectangle(width: float, height: float)
    }
    class VectorRenderer {
        +renderCircle(radius: float)
        +renderRectangle(width: float, height: float)
    }
    class RasterRenderer {
        +renderCircle(radius: float)
        +renderRectangle(width: float, height: float)
    }
    IRenderer <|.. VectorRenderer : 実現
    IRenderer <|.. RasterRenderer : 実現
    class Shape {
        <<abstract>>
        -IRenderer renderer
        +draw()
        +resize(factor: float)
    }
    class Circle {
        -radius: float
        +Circle(renderer: IRenderer, radius: float)
        +draw()
    }
    class Rectangle {
        -width: float
        -height: float
        +Rectangle(renderer: IRenderer, width: float, height: float)
        +draw()
    }
    Shape <|-- Circle : 継承
    Shape <|-- Rectangle : 継承
    Shape "1" *-- "1" IRenderer : 委譲/合成
    class DrawingApplication {
        -shapes: List~Shape~
        +addShape(s: Shape)
        +displayAllShapes()
    }
    DrawingApplication "1" o-- "*" Shape : 集約

第4章:ステート図の記述方法

基本的な構文

 
stateDiagram-v2
    [*] --> 待機
    待機 --> 入金中: コイン投入
    入金中 --> 入金中: 追加コイン投入
    入金中 --> 商品排出: [金額充足] 商品選択
    入金中 --> おつり返却: 返却操作
    商品排出 --> おつり返却: おつり有り
    商品排出 --> 待機: おつり無し
    おつり返却 --> 待機: 返却完了
        
 
stateDiagram-v2
    [*] --> 待機
    待機 --> 入金中: コイン投入
    入金中 --> 入金中: 追加コイン投入
    入金中 --> 商品排出: [金額充足] 商品選択
    入金中 --> おつり返却: 返却操作
    商品排出 --> おつり返却: おつり有り
    商品排出 --> 待機: おつり無し
    おつり返却 --> 待機: 返却完了

複合状態

 
stateDiagram-v2
    [*] --> 停止中
    停止中 --> 走行中: アクセルON
    
    state 走行中 {
        direction LR
        [*] --> 低速
        低速 --> 中速: 加速
        中速 --> 高速: さらに加速
        高速 --> 中速: 減速
        中速 --> 低速: さらに減速
    }

    走行中 --> 停止中: ブレーキ
        
 
stateDiagram-v2
    [*] --> 停止中
    停止中 --> 走行中: アクセルON
    
    state 走行中 {
        direction LR
        [*] --> 低速
        低速 --> 中速: 加速
        中速 --> 高速: さらに加速
        高速 --> 中速: 減速
        中速 --> 低速: さらに減速
    }

    走行中 --> 停止中: ブレーキ

第5章:マインドマップの記述方法

基本的な構文

 
mindmap
  root((Mermaid.js ガイド))
    はじめに
    フローチャート
      基本的な構文
      サブグラフ
      必須テーブル: ノード図形
      必須テーブル: 矢印の種類
    シーケンス図
      基本的な構文
      ライフラインの活性化
      alt (選択)
    クラス図
      クラスの定義と関係性
      必須テーブル: 関係性と可視性
    ステート図
      基本的な構文
      複合状態
    マインドマップ
      基本的な構文と図形
      必須テーブル: ノード図形
      ノード形状の例
        四角形ノード[例:四角形]
        円形ノード((例:円形))
        雲形ノード)例:雲形(
    要件図
      基本的な構文
    カスタマイズ
      テーマの変更
      `classDef`によるクラス定義と適用
      `linkStyle`による矢印スタイル変更
    まとめ
        
 
mindmap
  root((Mermaid.js ガイド))
    はじめに
    フローチャート
      基本的な構文
      サブグラフ
      必須テーブル: ノード図形
      必須テーブル: 矢印の種類
    シーケンス図
      基本的な構文
      ライフラインの活性化
      alt (選択)
    クラス図
      クラスの定義と関係性
      必須テーブル: 関係性と可視性
    ステート図
      基本的な構文
      複合状態
    マインドマップ
      基本的な構文と図形
      必須テーブル: ノード図形
      ノード形状の例
        四角形ノード[例:四角形]
        円形ノード((例:円形))
        雲形ノード)例:雲形(
    要件図
      基本的な構文
    カスタマイズ
      テーマの変更
      `classDef`によるクラス定義と適用
      `linkStyle`による矢印スタイル変更
    まとめ

第6章:要件定義の記述方法

基本的な構文

 
requirementDiagram

    requirement loginProc {
        id: "REQ_LOGIN"
        text: "ユーザーログイン処理"
    }

    functionalRequirement inputCredentials {
        id: "REQ_INPUT"
        text: "認証情報入力"
    }

    functionalRequirement validateCredentials {
        id: "REQ_VALIDATE"
        text: "認証情報検証"
    }

    functionalRequirement loginSuccess {
        id: "REQ_SUCCESS"
        text: "ログイン成功"
    }

    functionalRequirement loginFailure {
        id: "REQ_FAILURE"
        text: "ログイン失敗"
    }

    element loginUI {
        type: "UI"
        docRef: "ログイン画面"
    }

    element authSystem {
        type: "System"
        docRef: "認証システム"
    }

    loginProc - contains -> inputCredentials
    loginProc - contains -> validateCredentials
    validateCredentials - contains -> loginSuccess
    validateCredentials - contains -> loginFailure

    loginUI - satisfies -> inputCredentials
    authSystem - satisfies -> validateCredentials
        
 
requirementDiagram

    requirement loginProc {
        id: "REQ_LOGIN"
        text: "ユーザーログイン処理"
    }

    functionalRequirement inputCredentials {
        id: "REQ_INPUT"
        text: "認証情報入力"
    }

    functionalRequirement validateCredentials {
        id: "REQ_VALIDATE"
        text: "認証情報検証"
    }

    functionalRequirement loginSuccess {
        id: "REQ_SUCCESS"
        text: "ログイン成功"
    }

    functionalRequirement loginFailure {
        id: "REQ_FAILURE"
        text: "ログイン失敗"
    }

    element loginUI {
        type: "UI"
        docRef: "ログイン画面"
    }

    element authSystem {
        type: "System"
        docRef: "認証システム"
    }

    loginProc - contains -> inputCredentials
    loginProc - contains -> validateCredentials
    validateCredentials - contains -> loginSuccess
    validateCredentials - contains -> loginFailure

    loginUI - satisfies -> inputCredentials
    authSystem - satisfies -> validateCredentials

第7章:ER図の記述方法

基本的な構文

 
erDiagram
    EMPLOYEE {
        int employee_id PK "社員番号"
        string name "氏名"
        string name_kana "かな氏名"
        string email UK "メールアドレス"
        string phone_number "電話番号"
        date hire_date "入社年月日"
        date date_of_birth "生年月日"
        string gender "性別"
        string address "住所"
        date resignation_date "退職年月日"
        int department_id FK "部署ID"
        int position_id FK "役職ID"
        int employment_status_id FK "雇用形態ID"
    }
    DEPARTMENT {
        int department_id PK "部署ID"
        string department_name "部署名"
    }
    POSITION {
        int position_id PK "役職ID"
        string position_name "役職名"
    }
    EMPLOYMENT_STATUS {
        int employment_status_id PK "雇用形態ID"
        string status_name "雇用形態名"
    }

    DEPARTMENT ||--|{ EMPLOYEE : "所属"
    POSITION ||--|{ EMPLOYEE : "担当"
    EMPLOYMENT_STATUS ||--|{ EMPLOYEE : "区分"
        
 
erDiagram
    EMPLOYEE {
        int employee_id PK "社員番号"
        string name "氏名"
        string name_kana "かな氏名"
        string email UK "メールアドレス"
        string phone_number "電話番号"
        date hire_date "入社年月日"
        date date_of_birth "生年月日"
        string gender "性別"
        string address "住所"
        date resignation_date "退職年月日"
        int department_id FK "部署ID"
        int position_id FK "役職ID"
        int employment_status_id FK "雇用形態ID"
    }
    DEPARTMENT {
        int department_id PK "部署ID"
        string department_name "部署名"
    }
    POSITION {
        int position_id PK "役職ID"
        string position_name "役職名"
    }
    EMPLOYMENT_STATUS {
        int employment_status_id PK "雇用形態ID"
        string status_name "雇用形態名"
    }

    DEPARTMENT ||--|{ EMPLOYEE : "所属"
    POSITION ||--|{ EMPLOYEE : "担当"
    EMPLOYMENT_STATUS ||--|{ EMPLOYEE : "区分"