フローチャート - 基本構文

フローチャートは、**ノード**（幾何学的形状）と**エッジ**（矢印または線）で構成されています。Mermaidコードは、ノードとエッジの作成方法を定義し、さまざまな矢印の種類、多方向矢印、およびサブグラフとの任意のリンクに対応します。

警告

フローチャートのノードで「end」という単語を使用する場合は、単語全体または文字のいずれかを大文字にする（例：「End」または「END」）、またはこの回避策を適用してください。「end」をすべて小文字で入力すると、フローチャートが壊れます。

警告

接続するフローチャートノードの先頭文字に「o」または「x」を使用する場合は、文字の前にスペースを追加するか、文字を大文字にします（例：「dev--- ops」、「dev---Ops」）。

「A---oB」と入力すると、円形エッジが作成されます。

「A---xB」と入力すると、クロスエッジが作成されます。

ノード（デフォルト）

情報

IDはボックスに表示されるものです。

ヒント

flowchartの代わりにgraphを使用することもできます。

テキストを含むノード

ボックス内のテキストをIDとは異なるものにすることも可能です。これを複数回行う場合、ノードに使用されるのは最後に検出されたテキストです。また、後でノードのエッジを定義する場合は、テキスト定義を省略できます。レンダリング時にボックスに使用されるのは、以前に定義されたテキストです。

Unicodeテキスト

Unicodeテキストを囲むには"を使用します。

Markdown書式

Markdownテキストを囲むには、二重引用符とバッククォート「` text `」を使用します。

方向

このステートメントは、フローチャートの方向を宣言します。

これは、フローチャートが上から下に向いていることを宣言します（TDまたはTB）。

これは、フローチャートが左から右に向いていることを宣言します（LR）。

可能なフローチャートの方向は次のとおりです。

• TB - 上から下
• TD - 上から下（TBと同じ）
• BT - 下から上
• RL - 右から左
• LR - 左から右

ノードの形状

丸みを帯びたエッジを持つノード

スタジアム型のノード

サブルーチン形状のノード

円柱形状のノード

円形のノード

非対称形状のノード

現在、上記の形状のみが可能であり、鏡像は不可能です。今後のリリースで変更される可能性があります。

ノード（菱形）

六角形のノード

平行四辺形

平行四辺形（代替）

台形

台形（代替）

二重円

Mermaidフローチャートの拡張ノード形状（v11.3.0以降）

Mermaidは、フローチャート作成の柔軟性と精度を向上させるために、30個の新しい形状を導入しました。これらの新しい形状は、プロセス、決定、イベント、データストレージなどを視覚的に表現するためのより多くのオプションを提供し、フローチャートの明確さと意味論的な意味を向上させます。

形状定義の新しい構文

Mermaidは、増加する数の形状に対応するために、形状の種類を定義するための一般的な構文をサポートするようになりました。この構文により、明確で柔軟なフォーマットを使用して、ノードに特定の形状を割り当てることができます。

A@{ shape: rect }

この構文は、ノードAを長方形として作成します。これは、A["A"]またはAと同じようにレンダリングされます。

新しい形状の完全なリスト

以下は、新しく導入された形状とその対応する意味論的な意味、短い名前、およびエイリアスの包括的なリストです。

意味的な名前	形状名	短い名前	説明	サポートされるエイリアス
カード	ノッチ付き長方形	notch-rect	カードを表します	card、notched-rectangle
照合	砂時計	hourglass	照合操作を表します	collate、hourglass
通信リンク	稲妻	bolt	通信リンク	com-link、lightning-bolt
コメント	波括弧	brace	コメントを追加します	brace-l、comment
右側のコメント	波括弧	brace-r	コメントを追加します
両側に波括弧のあるコメント	波括弧	braces	コメントを追加します
データ入力/出力	右に傾いた長方形	lean-r	入力または出力を表します	in-out、lean-right
データ入力/出力	左に傾いた長方形	lean-l	出力または入力を表します	lean-left、out-in
データベース	円柱	cyl	データベースストレージ	cylinder、database、db
決定	ひし形	diam	意思決定ステップ	decision、diamond、question
遅延	半円形長方形	delay	遅延を表します	half-rounded-rectangle
直接アクセスストレージ	水平円柱	h-cyl	直接アクセスストレージ	das、horizontal-cylinder
ディスクストレージ	ライン付き円柱	lin-cyl	ディスクストレージ	disk、lined-cylinder
ディスプレイ	湾曲した台形	curv-trap	ディスプレイを表します	curved-trapezoid、display
分割プロセス	分割長方形	div-rect	分割プロセス形状	div-proc、divided-process、divided-rectangle
ドキュメント	ドキュメント	doc	ドキュメントを表します	doc、document
イベント	丸みのある長方形	rounded	イベントを表します	イベント
抽出	三角形	tri（三角形略記）	抽出プロセス	extract、triangle
フォーク/ジョイン	塗りつぶされた長方形	fork（フォーク略記）	プロセスフローにおけるフォークまたはジョイン	join（ジョイン略記）
内部ストレージ	ウィンドウペイン	win-pane（ウィンドウペイン略記）	内部記憶域	internal-storage、window-pane
ジャンクション	塗りつぶされた円	f-circ（塗りつぶされた円略記）	ジャンクションポイント	filled-circle、junction
ライン付きドキュメント	ライン付きドキュメント	lin-doc（ライン付きドキュメント略記）	線のあるドキュメント	lined-document
線/影付きプロセス	線付き長方形	lin-rect（線付き長方形略記）	線付きプロセスシェイプ	lin-proc、lined-process、lined-rectangle、shaded-process
ループ制限	台形五角形	notch-pent（台形五角形略記）	ループ制限ステップ	loop-limit、notched-pentagon
手動ファイル	反転三角形	flip-tri（反転三角形略記）	手動ファイル操作	flipped-triangle、manual-file
手動入力	傾斜長方形	sl-rect（傾斜長方形略記）	手動入力ステップ	manual-input、sloped-rectangle
手動操作	台形上底	trap-t（台形上底略記）	手動タスクを表す	inv-trapezoid、manual、trapezoid-top
複数ドキュメント	積み重ねられたドキュメント	docs（ドキュメント略記）	複数のドキュメント	documents、st-doc、stacked-document
複数プロセス	積み重ねられた長方形	st-rect（積み重ねられた長方形略記）	複数のプロセス	processes、procs、stacked-rectangle
奇数	奇数	odd（奇数略記）	奇数形状
紙テープ	旗	flag（旗略記）	ペーパーテープ	paper-tape
条件の準備	六角形	hex（六角形略記）	準備または条件ステップ	hexagon、prepare
優先アクション	台形下底	trap-b（台形下底略記）	優先度の高いアクション	priority、trapezoid、trapezoid-bottom
プロセス	長方形	rect（長方形略記）	標準的なプロセスシェイプ	proc、process、rectangle
開始	円	circle（円略記）	開始点	circ（円略記）
開始	小さい円	sm-circ（小さい円略記）	小さな開始点	small-circle、start
停止	二重円	dbl-circ（二重円略記）	停止点を表す	double-circle
停止	枠付き円	fr-circ（枠付き円略記）	停止点	framed-circle、stop
保存されたデータ	蝶ネクタイ型長方形	bow-rect（蝶ネクタイ型長方形略記）	保存されたデータ	bow-tie-rectangle、stored-data
サブプロセス	枠付き長方形	fr-rect（枠付き長方形略記）	サブプロセス	framed-rectangle、subproc、subprocess、subroutine
サマリー	交差した円	cross-circ（交差した円略記）	サマリー	crossed-circle、summary
タグ付きドキュメント	タグ付きドキュメント	tag-doc（タグ付きドキュメント略記）	タグ付けされたドキュメント	tag-doc、tagged-document
タグ付きプロセス	タグ付き長方形	tag-rect（タグ付き長方形略記）	タグ付けされたプロセス	tag-proc、tagged-process、tagged-rectangle
終端点	スタジアム	stadium（スタジアム略記）	終端点	pill、terminal
テキストブロック	テキストブロック	text（テキスト略記）	テキストブロック

新しいシェイプを使用したフローチャートの例

新しく導入されたシェイプの一部を使用したフローチャートの例を以下に示します。

プロセス

イベント

終端点（スタジアム）

サブプロセス

データベース（円柱）

開始（円）

奇数

判定（菱形）

条件の準備（六角形）

データ入力/出力（右に傾斜）

データ入力/出力（左に傾斜）

優先アクション（台形下底）

手動操作（台形上底）

停止（二重円）

テキストブロック

カード（切り欠きのある長方形）

線/影付きプロセス

開始（小さい円）

停止（枠付き円）

フォーク/ジョイン（長い長方形）

整理（砂時計）

コメント（中括弧）

右側のコメント（右側のねじれた中括弧）

両側に中括弧のあるコメント

通信リンク（稲妻）

ドキュメント

遅延（半円形の長方形）

直接アクセス記憶装置（水平円柱）

ディスク記憶装置（線付き円柱）

表示（湾曲台形）

分割プロセス（分割長方形）

抽出（小さい三角形）

内部ストレージ（ウィンドウペイン）

ジャンクション（塗りつぶされた円）

ライン付きドキュメント

ループ制限（切り欠きのある五角形）

手動ファイル（反転三角形）

手動入力（傾斜長方形）

複数ドキュメント（積み重ねられたドキュメント）

複数プロセス（積み重ねられた長方形）

紙テープ（旗）

保存されたデータ（蝶ネクタイ型長方形）

サマリー（交差した円）

タグ付きドキュメント

タグ付きプロセス（タグ付き長方形）

Mermaidフローチャート（v11.3.0以降）の特殊なシェイプ

Mermaidでは、フローチャートを強化するための2つの特殊なシェイプ、**アイコン**と**画像**も導入されています。これらのシェイプを使用すると、アイコンと画像をフローチャートに直接含めることができ、より視覚的なコンテキストと明確性を提供します。

アイコンシェイプ

iconシェイプを使用して、フローチャートにアイコンを含めることができます。アイコンを使用するには、最初にアイコンパックを登録する必要があります。こちらに記載されている手順に従ってください。アイコンシェイプを定義するための構文は次のとおりです。

パラメータ

• icon：登録されたアイコンパックからのアイコンの名前。
• form：アイコンの背景シェイプを指定します。定義されていない場合、アイコンには背景がありません。オプションには以下が含まれます。
  • 正方形
  • circle（円略記）
  • rounded
• label：アイコンに関連付けられたテキストラベル。任意の文字列を使用できます。定義されていない場合、ラベルは表示されません。
• pos：ラベルの位置。定義されていない場合、ラベルはアイコンの下部にデフォルト設定されます。使用可能な値は次のとおりです。
  • 上
  • 下
• h：アイコンの高さ。定義されていない場合、最小値である48にデフォルト設定されます。

画像シェイプ

imageシェイプを使用して、フローチャートに画像を含めることができます。画像シェイプを定義するための構文は次のとおりです。

パラメータ

• img：表示する画像のURL。
• label：画像に関連付けられたテキストラベル。任意の文字列を使用できます。定義されていない場合、ラベルは表示されません。
• pos：ラベルの位置。定義されていない場合、ラベルは画像の下部にデフォルト設定されます。使用可能な値は次のとおりです。
  • 上
  • 下
• w：画像の幅。定義されていない場合、画像の自然な幅にデフォルト設定されます。
• h：画像の高さ。定義されていない場合、画像の自然な高さにデフォルト設定されます。
• constraint：画像がノードのサイズを制約するかどうかを決定します。この設定により、画像の元の縦横比が維持され、幅（w）に合わせて高さが（h）調整されます。定義されていない場合、offにデフォルト設定されます。使用可能な値は次のとおりです。
  • オン
  • オフ

これらの新しいシェイプは、フローチャートに柔軟性と視覚的な魅力を追加し、より有益で魅力的なものにします。

ノード間のリンク

ノードはリンク/エッジで接続できます。異なる種類のリンクを持つことや、テキスト文字列をリンクに添付することも可能です。

矢印ヘッド付きのリンク

開いたリンク

リンク上のテキスト

または

矢印ヘッドとテキスト付きのリンク

または

点線リンク

テキスト付きの点線リンク

太いリンク

テキスト付き太いリンク

非表示リンク

ノードのデフォルトの位置を変更したい場合などに、これは便利なツールになることがあります。

リンクの連結

下記のように、同じ行に複数のリンクを宣言することができます。

下記のように、同じ行に複数のノードリンクを宣言することも可能です。

これにより、非常に表現力豊かな方法で依存関係を記述できます。下記の1行の例をご覧ください。

基本的な構文を使用して同じ図を記述すると、4行になります。警告として、やり過ぎると、マークダウン形式でフローチャートが読みづらくなる可能性があります。スウェーデンの言葉「lagom」が思い浮かびます。それは、多すぎず少なすぎないという意味です。これは、表現力豊かな構文にも当てはまります。

新しい矢印の種類

サポートされている新しい種類の矢印があります。

• 円形エッジ
• 交差エッジ

円形エッジの例

交差エッジの例

多方向矢印

多方向矢印を使用できます。

リンクの最小長さ

フローチャート内の各ノードは、最終的にレンダリングされたグラフ内でランク（つまり、フローチャートの向きに応じて垂直または水平レベル）に割り当てられます。これは、リンクされているノードに基づきます。デフォルトでは、リンクは任意の数のランクにまたがることができますが、リンク定義に追加のダッシュを追加することで、他のリンクよりも長くすることができます。

次の例では、ノード *B* からノード *E* へのリンクに2つの追加ダッシュが追加されているため、通常のリンクよりも2つのランク多くにまたがっています。

**注記** レンダリングエンジンによって、他の要求に対応するために、リンクが要求されたランク数よりも長くされる可能性があります。

リンクラベルがリンクの中央に記述されている場合、追加のダッシュはリンクの右側に追加する必要があります。次の例は前の例と同じです。

点線または太いリンクの場合、追加する文字は等号またはドットです。次の表にまとめられています。

長さ	1	2	3
標準	---	----	-----
矢印付き標準	-->	--->	---->
太い	===	====	=====
矢印付き太い	==>	===>	====>
点線	-.-	-..-	-...-
矢印付き点線	-.->	-..->	-...->

構文を壊す特殊文字

下記の例のように、より問題のある文字をレンダリングするために、引用符で囲んでテキストを記述できます。

文字をエスケープするエンティティコード

ここで例示されている構文を使用して、文字をエスケープできます。

数値は10進数なので、#は#35;としてエンコードできます。HTML文字名を使用することもサポートされています。

サブグラフ

subgraph title
    graph definition
end

下記に例を示します。

サブグラフに明示的なIDを設定することもできます。

フローチャート

graphtypeがflowchartの場合、下記のフローチャートのように、サブグラフとの間でエッジを設定することもできます。

サブグラフの方向

graphtypeがflowchartsの場合、この例のようにdirectionステートメントを使用して、サブグラフがレンダリングされる方向を設定できます。

制限

サブグラフのノードが外部にリンクされている場合、サブグラフの方向は無視されます。代わりに、サブグラフは親グラフの方向を継承します。

マークダウン文字列

「マークダウン文字列」機能は、太字や斜体などのテキスト書式設定オプションをサポートし、ラベル内のテキストを自動的に折り返す、より多様な文字列タイプを提供することで、フローチャートとマインドマップを強化します。

書式設定

• 太字にするには、テキストの前後に二重アスタリスク（**）を使用します。
• 斜体にするには、テキストの前後に単一アスタリスク（*）を使用します。
• 従来の文字列では、ノード内のテキストを折り返すために<br>タグを追加する必要がありました。しかし、マークダウン文字列は、テキストが長すぎると自動的にテキストを折り返し、<br>タグの代わりに改行文字を使用するだけで改行を開始できます。

この機能は、ノードラベル、エッジラベル、サブグラフラベルに適用できます。

自動折り返しは無効にできます。

---
config:
  markdownAutoWrap: false
---
graph LR

インタラクション

ノードにクリックイベントをバインドできます。クリックは、JavaScriptコールバック、または新しいブラウザタブで開かれるリンクのいずれかになります。

情報

この機能は、securityLevel='strict'を使用している場合は無効になり、securityLevel='loose'を使用している場合は有効になります。

click nodeId callback
click nodeId call callback()

• nodeIdはノードのIDです。
• callbackは、グラフを表示するページで定義されたJavaScript関数の名前です。この関数は、nodeIdをパラメーターとして呼び出されます。

ツールチップの使用例を以下に示します。

<script>
  window.callback = function () {
    alert('A callback was triggered');
  };
</script>

ツールチップテキストは二重引用符で囲まれています。ツールチップのスタイルはクラス.mermaidTooltipで設定されます。

**成功** ツールチップ機能とURLへのリンク機能は、バージョン0.5.2から利用可能です。

?> DocsifyがJavaScriptコールバック関数を処理する方法の制限により、上記のコードの代替動作デモはこのjsfiddleで確認できます。

リンクはデフォルトで同じブラウザタブ/ウィンドウで開きます。クリック定義にリンクターゲットを追加することで、これを変更できます（_self、_blank、_parent、_topがサポートされています）。

初心者向けヒント—HTMLコンテキストでインタラクティブリンクを使用する完全な例

<body>
  <pre class="mermaid">
    flowchart LR
        A-->B
        B-->C
        C-->D
        click A callback "Tooltip"
        click B "https://www.github.com" "This is a link"
        click C call callback() "Tooltip"
        click D href "https://www.github.com" "This is a link"
  </pre>

  <script>
    window.callback = function () {
      alert('A callback was triggered');
    };
    const config = {
      startOnLoad: true,
      flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

コメント

フローチャート内にコメントを入力できます。パーサーによって無視されます。コメントはそれぞれ別の行に記述する必要があり、%%（二重パーセント記号）を先頭に付ける必要があります。コメントの開始から次の改行までのテキストは、フロー構文を含めてすべてコメントとして扱われます。

スタイルとクラス

リンクのスタイル設定

リンクのスタイルを設定できます。たとえば、フローで逆方向に進んでいるリンクのスタイルを設定したい場合があります。リンクにはノードと同じようにIDがないため、リンクにどのスタイルを適用するかを決定する別の方法が必要です。IDの代わりに、グラフでリンクが定義された順序番号を使用するか、すべてリンクに適用するデフォルトを使用します。次の例では、linkStyleステートメントで定義されたスタイルは、グラフ内の4番目のリンクに属します。

linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;

コンマでリンク番号を区切ることで、1つのステートメントで複数のリンクにスタイルを追加することもできます。

linkStyle 1,2,7 color:blue;

ラインカーブのスタイル設定

デフォルトの方法がニーズを満たさない場合は、アイテム間の線のカーブの種類のスタイルを設定できます。使用可能なカーブスタイルには、basis、bumpX、bumpY、cardinal、catmullRom、linear、monotoneX、monotoneY、natural、step、stepAfter、stepBeforeなどがあります。

この例では、左右のグラフでstepBeforeカーブスタイルを使用しています。

%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR

カスタムカーブの説明を含む、使用可能なカーブの完全なリストについては、Shapesのドキュメントを参照してください。d3-shapeプロジェクト。

ノードのスタイル設定

より太い境界線や異なる背景色などの特定のスタイルをノードに適用できます。

クラス

毎回スタイルを定義するよりも便利なのは、スタイルのクラスを定義し、異なる外観を持つ必要があるノードにこのクラスを添付することです。

クラス定義は、下記の例のようになります。

    classDef className fill:#f9f,stroke:#333,stroke-width:4px;

また、1つのステートメントで複数のクラスにスタイルを定義することもできます。

    classDef firstClassName,secondClassName font-size:12pt;

ノードへのクラスの添付は、下記のように行います。

    class nodeId1 className;

1つのステートメントで複数のノードのリストにクラスを添付することもできます。

    class nodeId1,nodeId2 className;

クラスを追加するより短い方法は、下記のように:::演算子を使用してノードにクラス名を添付することです。

この形式は、ノード間の複数のリンクを宣言する場合に使用できます。

CSSクラス

下記の例のように、グラフ定義から適用できるCSSスタイルでクラスを事前に定義することもできます。

スタイル例

<style>
  .cssClass > rect {
    fill: #ff0000;
    stroke: #ffff00;
    stroke-width: 4px;
  }
</style>

定義例

デフォルトクラス

クラス名がdefaultの場合、特定のクラス定義のないすべてのクラスに割り当てられます。

    classDef default fill:#f9f,stroke:#333,stroke-width:4px;

Fontawesomeの基本サポート

Fontawesomeからアイコンを追加できます。

アイコンには、fa:#アイコンクラス名#構文でアクセスします。

Mermaidは、CSSがウェブサイトに含まれている場合、Font Awesomeをサポートします。Mermaidは、使用できるFont Awesomeのバージョンに制限はありません。

ウェブサイトへの追加方法については、公式Font Awesomeドキュメントを参照してください。

<head>にこのスニペットを追加すると、Font Awesome v6.5.1がサポートされます。

<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
  rel="stylesheet"
/>

カスタムアイコン

ウェブサイトが対応するキットをインポートしている限り、Font Awesomeから提供されるカスタムアイコンを使用できます。

これは現在、Font Awesomeの有料機能であることに注意してください。

カスタムアイコンには、fakプレフィックスを使用する必要があります。

例

flowchart TD
    B[fa:fa-twitter] %% standard icon
    B-->E(fak:fa-custom-icon-name) %% custom icon

そして、レンダリングを試みます。

頂点とリンクの間にスペースがあり、セミコロンがないグラフ宣言

• グラフ宣言では、ステートメントはセミコロンで終わる必要もなくなりました。0.2.16以降のリリースでは、グラフステートメントをセミコロンで終わらせるのはオプションです。そのため、下記のグラフ宣言は、古いグラフ宣言と同様に有効です。

• 頂点とリンクの間に1つのスペースを許可します。ただし、頂点とそのテキスト、およびリンクとそのテキストの間にスペースがあってはいけません。古いグラフ宣言の構文も機能するため、この新しい機能はオプションであり、可読性を向上させるために導入されました。

グラフエッジの新しい宣言を以下に示します。これは、古いグラフエッジの宣言と同様に有効です。

設定

レンダラー

ダイアグラムのレイアウトはレンダラーによって行われます。デフォルトのレンダラーはdagreです。

Mermaidバージョン9.4以降では、elkという別のレンダラーを使用できます。elkレンダラーは、より大きく複雑なダイアグラムに適しています。

elkレンダラーは実験的な機能です。このディレクティブを追加することで、レンダラーをelkに変更できます。

%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%

情報

この機能が動作するには、サイトでMermaidバージョン9.4以降を使用し、遅延読み込みの設定でこの機能を有効にする必要があることに注意してください。

幅

レンダリングされたフローチャートの幅を調整できます。

これは、mermaid.flowchartConfigを定義するか、CLIを使用して設定を含むJSONファイルを使用することによって行われます。CLIの使用方法については、mermaidCLIページに記載されています。mermaid.flowchartConfigは、設定パラメータを含むJSON文字列、または対応するオブジェクトに設定できます。

mermaid.flowchartConfig = {
    width: 100%
}