Mermaid.js 各種ダイアグラムのノードと矢印の図形
第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 : "区分"