Mermaidで作成できるサイト Mermaid Live Editor (公式)
Mermaidで図形を描いてみた Mermaid.js 記述事例
Mermaid.js 各種ダイアグラムのノードと矢印の図形
Mermaid.jsは、Markdown形式のテキストから様々な種類のダイアグラムを生成できる強力なツールです。ここでは、主要なダイアグラム機能であるフローチャート、シーケンス図、クラス図、ステート図、マインドマップ、要件図、およびER図において利用できるノードの図形と、その記述例、説明をまとめました。
フローチャート (Graph)
フローチャートは、プロセスの流れやシステムの動作を視覚的に表現する際に使用されます。様々な図形をノードとして利用し、ステップや決定点を示します。
ノード図形
| 図形の種類 | 記述例 | 説明 |
|---|---|---|
| 長方形 (Rectangle) | id[テキスト] |
最も基本的なノード形状で、プロセスやステップを表します。 |
| 角丸長方形 (Rounded Rectangle) | id(テキスト) |
開始点、終了点、または特定の状態を表すためによく使用されます。 |
| 円 (Circle) | id((テキスト)) |
単一のイベント、データ、またはコネクタを表すのに使われます。 |
| スタジアム型 (Stadium / Pill) | id([テキスト]) |
データファイルや開始/終了イベントによく使用されます。 |
| 円筒型 (Cylindrical) | id(((テキスト))) |
データベースを表すためによく使われます。 |
| サブルーチン型 (Subroutine) | id[[テキスト]] |
別の場所で定義されたプロセス(サブルーチン)を表します。 |
| 六角形 (Hexagon) | id{{テキスト}} |
準備ステップや特定の操作を表すのに使われます。 |
| ひし形 (Rhombus / Diamond) | id{テキスト} |
決定点や条件分岐を表します。はい/いいえの選択肢が分岐します。 |
| 平行四辺形 (Parallelogram) | id[/テキスト/]id[\テキスト\] |
データの入力または出力を表します。 |
| 台形 (Trapezoid) | id[/テキスト\]id[\テキスト/] |
手動操作や特定のイベントの開始/終了を表すために使用されることがあります。 |
矢印の種類
| 矢印の種類 | 記述例 | 説明 |
|---|---|---|
| 閉じた矢印 (Arrow head) | A --> B |
一般的なフローの方向を示します。 |
| 開いた矢印 (Open arrow) | A --- B |
単なる接続線。方向性はありません。 |
| 太い矢印 (Thick arrow) | A ==> B |
強調されたフローの方向を示します。 |
| 点線矢印 (Dotted arrow) | A --. BA --> B |
オプションのフローや破線接続を示します。 |
| テキスト付き矢印 (Arrow with text) | A -- テキスト --> B |
矢印にラベルを付けて、関係やイベントを説明します。 |
| リンク (Link) | A --- テキスト --- B |
テキスト付きの方向性のない接続を示します。 |
シーケンス図 (Sequence Diagram)
シーケンス図は、システム内のオブジェクト間のメッセージのやり取りの時間順序を表現します。ノードは主に「参加者(Participant)」を表します。
ノード図形
| 図形の種類 | 記述例 | 説明 |
|---|---|---|
| 参加者 (Participant) | participant 参加者名 |
シーケンス図の基本的な要素で、メッセージを送受信するエンティティを表します。 |
| アクター (Actor) | actor アクター名 |
参加者の一種で、通常はシステムとやり取りする人間を表します。 |
| ボックス (Box) | box ボックス名 |
関連する参加者をグループ化するために使用されます。 |
矢印の種類
| 矢印の種類 | 記述例 | 説明 |
|---|---|---|
| 実線矢印 (Solid arrow) | Participant1->Participant2: メッセージ |
同期メッセージまたは通常のメッセージ呼び出しを示します。 |
| 点線矢印 (Dotted arrow) | Participant2-->Participant1: 応答 |
非同期メッセージ、戻りメッセージ、または応答を示します。 |
| 太い矢印 (Thick arrow) | Participant1->>Participant2: 非同期メッセージ |
非同期メッセージを示します。 |
| 実線オープン矢印 (Solid open arrow) | Participant1->Participant2: メッセージ (デフォルト) |
基本的なメッセージの送信を示します。 |
| 点線オープン矢印 (Dotted open arrow) | Participant1-->Participant2: メッセージ |
基本的な戻りメッセージや非同期の応答を示します。 |
クラス図 (Class Diagram)
クラス図は、システムの構造を、クラス、属性、操作、およびそれらの関係性の観点から示します。ノードは主に「クラス」そのものを表します。
ノード図形
| 図形の種類 | 記述例 | 説明 |
|---|---|---|
| クラス (Class) |
class クラス名 {
+フィールド: 型
-メソッド(): 戻り値
}
|
属性(フィールド)と操作(メソッド)を持つ基本的な構造単位を表します。 |
| インターフェース (Interface) | class クラス名 <<Interface>> |
操作の集合を定義しますが、実装を持ちません。通常、クラス名の上に「<<Interface>>」のステレオタイプで示されます。 |
| 抽象クラス (Abstract Class) | class クラス名 <<Abstract>> |
抽象メソッドを含む、直接インスタンス化できないクラスを表します。 |
矢印の種類
| 矢印の種類 | 記述例 | 説明 |
|---|---|---|
| 継承 (Inheritance / Generalization) | ClassA --|> ClassB |
汎化関係を示し、ClassAがClassBのサブクラスであることを示します。 |
| 実装 (Realization) | ClassA --.|> InterfaceB |
クラスがインターフェースを実装することを示します。 |
| 関連 (Association) | ClassA -- ClassB |
2つのクラス間の構造的な関係を示します。 |
| 直接関連 (Directed Association) | ClassA --> ClassB |
関連に方向性があることを示します(ClassAがClassBを知っている)。 |
| 集約 (Aggregation) | ClassA --o ClassB |
全体と部分の関係で、部分が全体から独立して存在できることを示します。 |
| コンポジション (Composition) | ClassA --* ClassB |
全体と部分の関係で、部分が全体なしでは存在できないことを示します。 |
| 依存 (Dependency) | ClassA ..> ClassB |
あるクラスが別のクラスに依存していることを示しますが、永続的な関係ではありません。 |
ステート図 (State Diagram)
ステート図は、オブジェクトのライフサイクルにおける状態と、それらの状態間の遷移を示します。ノードは「状態」を表します。
ノード図形
| 図形の種類 | 記述例 | 説明 |
|---|---|---|
| 状態 (State) | state "状態名" |
システムの特定の状態を表す基本的なノードです。 |
| 開始状態 (Start State) | [*] |
オブジェクトのライフサイクルの開始点を示します。 |
| 終了状態 (End State) | [*] |
オブジェクトのライフサイクルの終了点を示します。 |
| サブ状態 (Substate) |
state "親状態名" {
state "子状態1"
state "子状態2"
}
|
より複雑な状態を示すために、他の状態を内部に含むことができます。 |
矢印の種類
| 矢印の種類 | 記述例 | 説明 |
|---|---|---|
| 遷移 (Transition) | StateA --> StateB |
ある状態から別の状態へのイベント駆動型の遷移を示します。 |
| テキスト付き遷移 (Transition with text) | StateA -- イベント --> StateB |
遷移を引き起こすイベントや条件を説明するラベル付きの遷移です。 |
マインドマップ (Mindmap)
マインドマップは、中心となるアイデアから放射状に広がる形で情報を整理し、関連付けるためのダイアグラムです。ノードは「トピック」を表します。
ノード図形
| 図形の種類 | 記述例 | 説明 |
|---|---|---|
| デフォルトのトピック (Default Topic) | (トピックのテキスト) |
最も一般的なトピック形状で、角丸長方形のようになります。 |
| 四角いトピック (Square Topic) | [トピックのテキスト] |
四角い形状のトピックです。 |
| 丸いトピック (Circular Topic) | ((トピックのテキスト)) |
円形のトピックです。 |
| 二重角括弧トピック (Double Bracket Topic) | [[トピックのテキスト]] |
二重の角括弧で囲まれたトピックです。 |
| 非対称トピック (Asymmetric Topic) | (トピックのテキスト][トピックのテキスト) |
左右で異なる形状を持つトピックです。 |
矢印の種類
| 矢印の種類 | 記述例 | 説明 |
|---|---|---|
| デフォルトの接続 (Default Connection) | 親トピック --- 子トピック |
親トピックと子トピックの間の階層的な関係を示します。通常、シンプルで線状です。 |
要件図 (Requirement Diagram)
要件図は、システムの要件とその関連要素(機能、インターフェースなど)を視覚的に表現します。ノードはさまざまな種類の要件要素を表します。
ノード図形
| 図形の種類 | 記述例 | 説明 |
|---|---|---|
| 要件 (Requirement) | requirement "要件ID" { ... } |
システムの機能的または非機能的要件を表します。 |
| 要素 (Element) | element "要素名" { ... } |
システム内の具体的なコンポーネントや要素を表します。 |
| 機能 (Function) | function "機能名" { ... } |
システムが実行する特定の機能を定義します。 |
| インターフェース (Interface) | interface "インターフェース名" { ... } |
システム間の境界や相互作用の点を示します。 |
| モジュール (Module) | module "モジュール名" { ... } |
関連する要素の論理的なグループ化を表します。 |
矢印の種類
| 矢印の種類 | 記述例 | 説明 |
|---|---|---|
| 包含 (Contains) | RequirementA -- contains --> RequirementB |
RequirementAがRequirementBを含むことを示します。 |
| 精緻化 (Refine) | RequirementA -- refines --> RequirementB |
RequirementAがRequirementBをより詳細に精緻化することを示します。 |
| トレース (Traces) | RequirementA -- traces --> RequirementB |
RequirementAがRequirementBに由来することを示します。 |
| 検証 (Verifies) | TestCase -- verifies --> Requirement |
テストケースが要件を検証することを示します。 |
| 派生 (Derives) | RequirementA -- derives --> RequirementB |
RequirementBがRequirementAから派生することを示します。 |
| 実現 (Satisfies) | Element -- satisfies --> Requirement |
要素が要件を満たすことを示します。 |
ER図 (Entity Relationship Diagram)
ER図は、データベースの構造を、エンティティ、属性、およびそれらの間の関係の観点から視覚的に表現します。
ノード図形
| 図形の種類 | 記述例 | 説明 |
|---|---|---|
| エンティティ (Entity) |
erDiagram
ENTITY_NAME {
VARCHAR(255) id PK
VARCHAR(255) name
INT age
}
|
データベースにおけるデータ構造の主要なオブジェクト(テーブル)を表します。属性とその型を内部に記述します。 |
| 属性 (Attribute) | VARCHAR(255) id PKVARCHAR(255) name |
エンティティが持つプロパティを表します。PK (主キー) や FK (外部キー) などの制約を記述できます。Mermaidでは、属性自体に特定の図形はなく、エンティティ内部にリストされます。 |
矢印の種類(関係)
ER図の矢印は、エンティティ間の関係とカーディナリティ(多重度)を示します。
| 矢印の種類 | 記述例 | 説明 |
|---|---|---|
| ゼロまたは一 (Zero or One) | EntityA ||--o| EntityB(EntityAの1インスタンスはEntityBの0または1インスタンスに関連する) |
片方が任意で、もう片方が最大1つと関連することを示します。 |
| ちょうど一 (Exactly One) | EntityA ||--|| EntityB(EntityAの1インスタンスはEntityBのちょうど1インスタンスに関連する) |
両方のエンティティがお互いに正確に1つのインスタンスと関連することを示します。 |
| ゼロまたは多 (Zero or Many) | EntityA ||--o{ EntityB(EntityAの1インスタンスはEntityBの0または多インスタンスに関連する) |
片方が任意で、もう片方が複数と関連することを示します。 |
| 一または多 (One or Many) | EntityA ||--|{ EntityB(EntityAの1インスタンスはEntityBの1または多インスタンスに関連する) |
片方が必須で、もう片方が複数と関連することを示します。 |
| 結合関係 (Association Relationship) | CUSTOMER ||--o{ ORDER : has |
2つのエンティティ間の一般的な関連を示し、関係名を追加できます。 |
この情報はMermaid.jsの公式ドキュメントに基づいています。最新の情報や詳細な記述については、Mermaid.jsの公式ドキュメントを参照してください。
