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 : "区分"
