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

フローチャートは、ノード（幾何学的形状）とエッジ（矢印または線）で構成されています。Mermaidコードは、ノードとエッジがどのように作成されるかを定義し、異なる矢印の種類、双方向矢印、サブグラフからのリンクに対応しています。

WARNING

フローチャートノードで「end」という単語を使用する場合は、単語全体を大文字にするか、いずれかの文字を大文字にしてください（例: "End" または "END"）。または、この[回避策](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897)を適用してください。小文字で「end」と入力すると、フローチャートは破損します。

WARNING

接続フローチャートノードの最初の文字として「o」または「x」を使用している場合は、その文字の前にスペースを追加するか、大文字にしてください（例: "dev--- ops", "dev---Ops"）。 "A---oB"と入力すると、[円エッジ](#circle-edge-example)が作成されます。 "A---xB"と入力すると、[交差エッジ](#cross-edge-example)が作成されます。

ノード（デフォルト）

Code:

mermaid

NOTE

idはボックスに表示される内容です。

tip

`flowchart`の代わりに`graph`も使用できます。

テキスト付きのノード

ボックス内にidとは異なるテキストを設定することも可能です。これが何度も行われると、ノードに対して最後に見つかったテキストが使用されます。また、後でノードのエッジを定義する場合は、テキスト定義を省略できます。レンダリング時には、以前に定義されたものが使用されます。

Code:

mermaid

Unicodeテキスト

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

Code:

mermaid

Markdownフォーマット

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

Code:

mermaid

方向

この文は、フローチャートの方向を宣言します。

これはフローチャートが上から下への向きであることを宣言します（TDまたはTB）。

Code:

mermaid

これはフローチャートが左から右への向きであることを宣言します。

Code:

mermaid

フローチャートの可能な向きは以下の通りです。

TB - 上から下
TD - 上から下/上から下と同じ
BT - 下から上
RL - 右から左
LR - 左から右

ノードの形状

円形のノード

Code:

mermaid

スタジアム形のノード

Code:

mermaid

サブルーチン形のノード

Code:

mermaid

円筒形のノード

Code:

mermaid

円形のノード

Code:

mermaid

非対称形のノード

Code:

mermaid

現在、上記の形状のみが可能であり、その鏡像は可能ではありません。この点は今後のリリースで変更されるかもしれません。

菱形のノード

Code:

mermaid

六角形のノード

Code:

mermaid

平行四辺形

Code:

mermaid

平行四辺形（代替）

Code:

mermaid

台形

Code:

mermaid

台形（代替）

Code:

mermaid

二重円

Code:

mermaid

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

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

形状定義の新しい構文

Mermaidは、増加する形状の数に対応するために、形状タイプを定義するための一般的な構文をサポートしています。この構文は、ノードに特定の形状を割り当てるための明確で柔軟な形式を提供します。

A@{ shape: rect }

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

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

以下は、新たに導入された形状とそれに対応する意味、短縮名、エイリアスの包括的なリストです。

新形状を使用したフローチャートの例

以下は、新しく導入された形状のいくつかを使用したフローチャートの例です。

Code:

mermaid

プロセス

Code:

mermaid

イベント

Code:

mermaid

ターミナルポイント（スタジアム）

Code:

mermaid

サブプロセス

Code:

mermaid

データベース（円筒）

Code:

mermaid

スタート（円）

Code:

mermaid

奇妙な形

Code:

mermaid

決定（ダイヤモンド）

Code:

mermaid

条件の準備（六角形）

Code:

mermaid

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

Code:

mermaid

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

Code:

mermaid

プライオリティアクション（下辺台形）

Code:

mermaid

手動操作（上辺台形）

Code:

mermaid

ストップ（二重円）

Code:

mermaid

テキストブロック

Code:

mermaid

カード（ノッチ付き長方形）

Code:

mermaid

線付き/陰影付きプロセス

Code:

mermaid

スタート（小円）

Code:

mermaid

ストップ（フレーム付き円）

Code:

mermaid

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

Code:

mermaid

まとめ（砂時計）

Code:

mermaid

コメント（カールブレース）

Code:

mermaid

コメント右（カールブレース右）

Code:

mermaid

両側にブレースのあるコメント

Code:

mermaid

コミュニケーションリンク（雷のボルト）

Code:

mermaid

ドキュメント

Code:

mermaid

遅延（半円形付き長方形）

Code:

mermaid

直接アクセスストレージ（水平円筒）

Code:

mermaid

ディスクストレージ（線付き円筒）

Code:

mermaid

表示（曲線台形）

Code:

mermaid

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

Code:

mermaid

抽出（小三角形）

Code:

mermaid

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

Code:

mermaid

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

Code:

mermaid

線付きドキュメント

Code:

mermaid

ループ制限（ノッチ付き五角形）

Code:

mermaid

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

Code:

mermaid

手動入力（傾斜した長方形）

Code:

mermaid

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

Code:

mermaid

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

Code:

mermaid

紙テープ（フラグ）

Code:

mermaid

保存データ（蝶タイ付き長方形）

Code:

mermaid

まとめ（交差円）

Code:

mermaid

タグ付きドキュメント

Code:

mermaid

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

Code:

mermaid

Mermaidフローチャートの特別な形状（v11.3.0以上）

Mermaidは、フローチャートを向上させるために2つの特別な形状を導入します：アイコンと画像。これらの形状を使用することで、フローチャート内にアイコンや画像を直接含めることができ、視覚的なコンテキストと明確さを提供します。

アイコン形状

フローチャートにアイコンを含めるには、icon形状を使用できます。アイコンを使用するには、最初にアイコンパックを登録する必要があります。手順についてはこちらを参照してください。アイコン形状を定義するための構文は以下の通りです。

Code:

mermaid

パラメータ

icon: 登録されたアイコンパックからのアイコンの名前。
form: アイコンの背景形状を指定します。定義されていない場合、アイコンに背景はありません。選択肢には以下が含まれます：
- square
- circle
- rounded
label: アイコンに関連付けられたテキストラベル。任意の文字列を指定できます。定義されていない場合、ラベルは表示されません。
pos: ラベルの位置。定義されていない場合、ラベルはアイコンの下部にデフォルトで配置されます。可能な値は：
- t
- b
h: アイコンの高さ。定義されていない場合、最小値の48がデフォルトとなります。

画像形状

フローチャートに画像を含めるには、image形状を使用できます。画像形状を定義するための構文は以下の通りです。

Code:

mermaid

パラメータ

img: 表示する画像のURL。
label: 画像に関連付けられたテキストラベル。任意の文字列を指定できます。定義されていない場合、ラベルは表示されません。
pos: ラベルの位置。定義されていない場合、ラベルは画像の下部にデフォルトで配置されます。可能な値は：
- t
- b
w: 画像の幅。定義されていない場合、自然幅がデフォルトとなります。
h: 画像の高さ。定義されていない場合、自然高さがデフォルトとなります。
constraint: 画像がノードサイズを制限するかどうかを決定します。この設定により、画像はオリジナルのアスペクト比を維持し、高さ（h）を幅（w）に応じて調整します。定義されていない場合、これはデフォルトでoffとなります。可能な値は：
- on
- off

これらの新しい形状は、フローチャートに追加の柔軟性と視覚的魅力を提供し、情報をより明確かつ魅力的にします。

ノード間のリンク

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

矢印付きリンク

Code:

mermaid

開いたリンク

Code:

mermaid

リンク上のテキスト

Code:

mermaid

または

Code:

mermaid

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

Code:

mermaid

または

Code:

mermaid

点線のリンク

Code:

mermaid

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

Code:

mermaid

太いリンク

Code:

mermaid

テキスト付きの太いリンク

Code:

mermaid

見えないリンク

これにより、ノードのデフォルトの配置を変更するのが便利な場合があります。

Code:

mermaid

リンクのチェーニング

同じ行で多くのリンクを宣言することができます。

Code:

mermaid

同じ行で複数のノードをリンクすることも可能です。

Code:

mermaid

このようにして、非常に表現豊かな方法で依存関係を説明できます。下記の1行のように：

Code:

mermaid

基本構文を使用して同じ図を説明すると、4行かかります。警告として、あまりにも表現豊かになりすぎると、Markdown形式でフローチャートを読むのが難しくなることがあります。スウェーデン語の「lagom」が思い浮かびます。これは「多すぎず少なすぎず」という意味です。このことは、表現豊かな構文にも当てはまります。

新しい矢印のタイプ

新しいタイプの矢印がサポートされています：

円エッジ
交差エッジ

円エッジの例

Code:

mermaid

交差エッジの例

Code:

mermaid

多方向の矢印

多方向の矢印を使用することができます。

Code:

mermaid

リンクの最小長さ

フローチャート内の各ノードは、最終的にレンダリングされたグラフ内のランク（縦または横のレベル）に割り当てられます（フローチャートの向きによって異なります）。デフォルトでは、リンクは任意の数のランクを跨ぐことができますが、リンク定義に追加のダッシュを加えることで、他のリンクよりも長くすることを要求できます。

次の例では、ノード_B_からノード_E_へのリンクに2つの追加ダッシュが追加されているため、通常のリンクよりも2つのランクを跨いでいます：

Code:

mermaid

注意リンクは、要求されたランク数よりも長くなることがあります他のリクエストに対応するために、レンダリングエンジンによって可能です。

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

Code:

mermaid

点線や太いリンクの場合、追加する文字は等号またはドットです。以下の表に要約されています：

長さ	1	2	3
通常	`---`	`----`	`-----`
矢印付き普通	`-->`	`--->`	`---->`
太い	`===`	`====`	`=====`
太い矢印付き	`==>`	`===>`	`====>`
点線	`-.-`	`-..-`	`-...-`
点線矢印付き	`-.->`	`-..->`	`-...->`

構文を壊す特別な文字

問題のある文字をレンダリングするために、テキストを引用符で囲むことができます。以下の例のように：

Code:

mermaid

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

以下のように、文法を示すことで文字をエスケープすることができます。

Code:

mermaid

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

サブグラフ

subgraph タイトル
    グラフ定義
end

以下の例：

Code:

mermaid

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

Code:

mermaid

フローチャート

グラフタイプのフローチャートでは、以下のようにサブグラフとのエッジを設定することも可能です。

Code:

mermaid

サブグラフ内の方向

フローチャートのグラフタイプでは、次のようにサブグラフがレンダリングされる方向を設定できます。

Code:

mermaid

制限事項

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

Code:

mermaid

Markdown文字列

「Markdown文字列」機能は、フローチャートとマインドマップを強化し、太字やイタリック体などのテキストフォーマットオプションをサポートする、より多才な文字列タイプを提供します。ラベル内のテキストを自動的にラップすることができます。

Code:

mermaid

フォーマット：

太字のテキストには、前後に二重アスタリスク（**）を使用します。
イタリック体には、有効な顔（*）を使用します。
従来の文字列では、ノード内でテキストをラップするために<br>タグを追加する必要がありました。ただし、Markdown文字列では、テキストが長すぎると自動的にラップされ、<br>タグの代わりに改行文字を使用して新しい行を開始できます。

この機能は、ノードラベル、エッジラベル、およびサブグラフラベルに適用されます。

自動ラッピングは、以下のようにして無効にできます。

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

相互作用

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

NOTE

この機能は、`securityLevel='strict'`で使用すると無効になり、`securityLevel='loose'`で使用すると有効になります。

click nodeId callback
click nodeId call callback()

nodeIdはノードのIDです
callbackは、グラフを表示しているページで定義されたJavaScript関数の名前であり、その関数はnodeIdを引数にして呼び出されます。

以下はツールチップの使用例です：

html

<script>
  window.callbackはfunction () {
    alert('コールバックがトリガーされました');
  };
</script>

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

Code:

mermaid

成功ツールチップ機能とURLへのリンクの能力は、0.5.2バージョン以降で使用可能です。

?> DocsifyがJavaScriptのコールバック関数の扱いに制限があるため、上記のコードの代わりの動作するデモはこちらのjsfiddleで確認できます。

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

Code:

mermaid

初心者向けのヒント—HTMLコンテキスト内でのインタラクティブリンクを使用した完全な例は次のとおりです：

html

<body>
  <pre class="mermaid">
    flowchart LR
        A-->B
        B-->C
        C-->D
        click A callback "ツールチップ"
        click B "https://www.github.com" "これはリンクです"
        click C call callback() "ツールチップ"
        click D href "https://www.github.com" "これはリンクです"
  </pre>

  <script>
    window.callbackはfunction () {
      alert('コールバックがトリガーされました');
    };
    const config = {
      startOnLoad: true,
      flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

フローチャート内にコメントを入力することができ、そのコメントはパーサーによって無視されます。コメントは独自の行にある必要があり、%%（二重パーセント記号）で始まる必要があります。コメントの開始から次の改行までのテキストはすべてコメントと見なされ、フローチャートの構文を含むことになります。

スタイリングとクラス

リンクのスタイリング

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

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

複数のリンクに同時にスタイルを追加することもできます。カンマで区切ってリンク番号を指定することで可能です。

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のドキュメントを参照してください。

ノードのスタイリング

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

Code:

mermaid

クラス

スタイルを毎回定義するのではなく、スタイルのクラスを定義し、そのクラスを異なる見た目を持たせたいノードに適用することができます。

クラス定義の見た目は、次の例のようになります：

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

複数のクラスを一度に定義することも可能です。

    classDef firstClassName,secondClassName font-size:12pt;

クラスをノードに付与する際は、次のようになります：

    class nodeId1 className;

特定のスタイルを持たせたいノードのリストにクラスを一度で付与することもできます。

    class nodeId1,nodeId2 className;

:::演算子を用いて、ノードを宣言しながらクラスを追加する短い方法も使用できます。

Code:

mermaid

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

Code:

mermaid

CSSクラス

別のスタイルシートに定義されたクラスを適用からグラフ定義で適用することも可能です。以下のような例になります。

スタイル例

html

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

定義例

Code:

mermaid

デフォルトクラス

クラス名がデフォルトと名付けられている場合、特定のクラス定義がないすべてのクラスに付与されます。

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

FontAwesomeの基本サポート

FontAwesomeからアイコンを追加することができます。

アイコンは、fa:#icon class name#構文を介してアクセスされます。

Code:

mermaid

Mermaidは、ウェブサイトにCSSを含めることでFont Awesomeをサポートします。Mermaidは、使用するFont Awesomeのバージョンに制限を設けていません。

ウェブサイトにFont Awesome v6.5.1を含めるには、次のスニペットを<head>内に追加してください。

html

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

カスタムアイコン

Webサイトが対応するキットをインポートしている限り、Font Awesomeから提供されるカスタムアイコンを使用することが可能です。

カスタムアイコンは、現在Font Awesomeの有料機能であることに注意してください。

カスタムアイコンの例：

flowchart TD
    B[fa:fa-twitter] %% 標準アイコン
    B-->E(fak:fa-custom-icon-name) %% カスタムアイコン

それをレンダリングしようとすると：

Code:

mermaid

グラフ宣言の間隔とセミコロンの省略

グラフ宣言では、文がセミコロンを含まなくても終わることができるようになりました。0.2.16以降、グラフの文をセミコロンで終わらせるのはオプションに過ぎません。
頂点とリンクの間に単一のスペースが許可されています。ただし、頂点とそのテキスト、リンクとそのテキストの間にはスペース

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

ノード（デフォルト） ​

Code:

テキスト付きのノード ​

Code:

Unicodeテキスト ​

Code:

Markdownフォーマット ​

Code:

方向 ​

Code:

Code:

ノードの形状 ​

円形のノード ​

Code:

スタジアム形のノード ​

Code:

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

Code:

円筒形のノード ​

Code:

円形のノード ​

Code:

非対称形のノード ​

Code:

菱形のノード ​

Code:

六角形のノード ​

Code:

平行四辺形 ​

Code:

平行四辺形（代替） ​

Code:

台形 ​

Code:

台形（代替） ​

Code:

二重円 ​

Code:

Mermaidフローチャートの拡張されたノード形状（v11.3.0以上） ​

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

新形状を使用したフローチャートの例 ​

Code:

プロセス ​

Code:

イベント ​

Code:

ターミナルポイント（スタジアム） ​

Code:

サブプロセス ​

Code:

データベース（円筒） ​

Code:

スタート（円） ​

Code:

奇妙な形 ​

Code:

決定（ダイヤモンド） ​

Code:

条件の準備（六角形） ​

Code:

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

Code:

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

Code:

プライオリティアクション（下辺台形） ​

Code:

手動操作（上辺台形） ​

Code:

ストップ（二重円） ​

Code:

テキストブロック ​

Code:

カード（ノッチ付き長方形） ​

Code:

線付き/陰影付きプロセス ​

Code:

スタート（小円） ​

Code:

ストップ（フレーム付き円） ​

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

ノード（デフォルト）

テキスト付きのノード

Unicodeテキスト

Markdownフォーマット

方向

ノードの形状

円形のノード

スタジアム形のノード

サブルーチン形のノード

円筒形のノード

円形のノード

非対称形のノード

菱形のノード

六角形のノード

平行四辺形

平行四辺形（代替）

台形

台形（代替）

二重円

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

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

新形状を使用したフローチャートの例

プロセス

イベント

ターミナルポイント（スタジアム）

サブプロセス

データベース（円筒）

スタート（円）

奇妙な形

決定（ダイヤモンド）

条件の準備（六角形）

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

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

プライオリティアクション（下辺台形）

手動操作（上辺台形）

ストップ（二重円）

テキストブロック

カード（ノッチ付き長方形）

線付き/陰影付きプロセス

スタート（小円）

ストップ（フレーム付き円）

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

まとめ（砂時計）

コメント（カールブレース）

コメント右（カールブレース右）

両側にブレースのあるコメント

コミュニケーションリンク（雷のボルト）

ドキュメント

遅延（半円形付き長方形）

直接アクセスストレージ（水平円筒）

ディスクストレージ（線付き円筒）

表示（曲線台形）

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

抽出（小三角形）

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

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

線付きドキュメント

ループ制限（ノッチ付き五角形）

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

手動入力（傾斜した長方形）

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

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

紙テープ（フラグ）

保存データ（蝶タイ付き長方形）

まとめ（交差円）

タグ付きドキュメント

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

Mermaidフローチャートの特別な形状（v11.3.0以上）

アイコン形状

パラメータ

画像形状

パラメータ

ノード間のリンク

矢印付きリンク

開いたリンク

リンク上のテキスト