Mermaid.jsを使ったフロー図の作成方法
こちらのノートでは、Exploratoryのノートやダッシュボードで利用できるフロー図の作成方法を紹介いたします。
フロー図とは
フロー図（フローチャート）は、一連の処理や意思決定のステップを視覚的に表現した図です。
業務プロセスやデータの加工手順、分析のワークフローなど、複雑な流れを図として描くことで、テキストだけでは伝わりにくい「順序」や「分岐」を一目で理解することができます。
たとえば「データの前処理はどのような手順で行われているのか」「顧客対応のフローはどのように設計されているのか」といった内容を、ノートやダッシュボード上で視覚的かつわかりやすく伝えたいときにフロー図は役立ちます。
Mermaid.jsとは
Mermaid.jsは、テキストベースの記法でダイアグラムを作成できるJavaScriptライブラリです。プログラムを書くような感覚でシンプルな構文を記述するだけで、フロー図をきれいに描画できます。
画像編集ツールを使わずにコードで図を管理できるため、内容の更新や再利用も容易です。
Exploratoryでは Mermaid.js をサポートしており、ノートやダッシュボードにフロー図をコンテンツとして直接組み込むことができます。
構文の詳細については、以下の公式ドキュメントもご参考ください。
Exploratoryでの使い方
Exploratoryで、フロー図を作成するときには、ノートまたはダッシュボードのコンテンツ追加ボタンから「フロー図」を選択します。
すると、Mermaid.js のコードエディターがレポート上に追加されます。
エディターに Mermaid.js のコードを入力したら、「プレビュー」ボタンをクリックしてください。
入力したコードに基づいてフロー図が描画されます。
Mermaid.jsの記述方法
基本的な構文
Mermaid.js のフロー図は flowchart
キーワードと方向指定から始まります。方向は TD（上から下）や
LR（左から右）などを指定することができます。
flowchart TD
A[開始] --> B[処理を実行する]
B --> C[終了]図を構成する個々の要素（箱）を「ノード」と呼びます。ノードは
識別子[ラベル] の形式で定義し、-->
で矢印（接続）を表します。
なお、識別子とは上の例の A や B
のような名前で、コード内でノードを識別するために使い、ラベルは実際に図上で表示されるテキストです。
ノードの形状
ノードの形状は、ラベルを囲む記号によって変えることができます。
[ ] は長方形、( )
は角丸の長方形、{ }
はひし形（意思決定）、(( ))
は円形を表します。業務フローでは、処理ステップには長方形、条件分岐にはひし形を使うのが一般的です。
矢印の種類
矢印には実線（-->）と点線（-.->
）の2種類があります。また、-->|ラベル|
の形式で矢印にラベルを付けることで、分岐の条件や流れの意味を明示することができます。
例：サポート窓口の対応フロー
以下は、サポート窓口に寄せられた問い合わせを受け付けてから対応完了までの流れを表したシンプルなフローダイアグラムの例です。
flowchart TD
A[問い合わせを受け付ける] --> B{自分で対応できるか？}
B -->|はい| C[回答を送る]
B -->|いいえ| D[担当者へ転送する]
C --> E{顧客は解決したか？}
E -->|はい| F[対応完了]
E -->|いいえ| D
D --> F上記のスクリプトを実行すると、以下のような結果を得られます。
{ }
で囲んだノードがひし形として描画され、意思決定のポイントを表現しています。
|はい| や |いいえ|
の形式で矢印にラベルを付けることで条件分岐を示し、E --> D
のように前のノードへ矢印を戻すことでループも表現できます。
より詳細な設定
ノードのスタイル設定
style
を使うと、特定のノードの背景色・枠線の色・テキストの色を個別に設定することができます。記述形式は以下の通りです。
style ノードID fill:#背景色,stroke:#枠線色,color:#テキスト色色は #e3f2fd
のような16進数カラーコード（HEXカラーコード）で指定します。#RRGGBB
の形式で赤・緑・青の強さを00〜FFの16進数で表す、ウェブ標準のCSS色指定と同じ規格です。
ノードの種類や役割によって色を使い分けることで、図全体の見やすさが大きく向上します。
例：スタイルを適用したカスタマーサポートフロー
以下は、問い合わせカテゴリに応じて担当チームへ振り分けるサポートフローを、スタイル設定を加えて表現した例です。
flowchart TD
A["顧客からの問い合わせ"] --> B{"カテゴリを分類する"}
B -->|技術的な問題| C["技術サポートチーム"]
B -->|請求・支払い| D["経理チーム"]
B -->|一般的な質問| E["カスタマーサクセス"]
C --> F{"解決できたか？"}
D --> G["処理完了"]
E --> G
F -->|はい| G
F -->|いいえ| H["エスカレーション"]
H --> I["上位サポートへ転送"]
I --> G
style A fill:#e3f2fd,stroke:#1976d2,color:#1a1a1a
style B fill:#fff9c4,stroke:#f57f17,color:#1a1a1a
style G fill:#e8f5e9,stroke:#2e7d32,color:#1a1a1a
style H fill:#ffebee,stroke:#c62828,color:#1a1a1a
style I fill:#ffebee,stroke:#c62828,color:#1a1a1a上記のスクリプトを実行すると、以下のような結果を得られます。
上記の例のように、style
はコードの末尾にまとめて記述することができます。
起点となるノード、判断ノード、完了ノード、エスカレーションノードそれぞれに異なる色を割り当てることで、役割が直感的にわかる図になります。
HTMLを使ったノードラベル
ノードのラベル内に HTML を記述すると、改行など、より詳細な情報をノード内に表示することができます。
ラベルを "..." で囲んだ上で、<br/>
などの HTML タグを使います。
flowchart TD
A["注文データ"] -.-> B["1. データを読み込む<br/>CSVファイルから注文データを読み込む。"]
B -.-> C["2. 日付型に変換する<br/>注文日列を日付型に変換する。"]
C -.-> D["3. 顧客データと結合する<br/>顧客IDで左外部結合を実行する。"]
style A fill:#fdeee2,stroke:#f7c79d,color:#374151
style B fill:#ffffff,stroke:#00ab6d,color:#374151
style C fill:#ffffff,stroke:#00ab6d,color:#374151
style D fill:#ffffff,stroke:#00ab6d,color:#374151上記のスクリプトを実行すると、以下のような結果を得られます。
この例では、<br/>
で改行してステップのタイトルの下に説明文を続けることで、タイトルと詳細説明を1つのノードにまとめて表示しています。
また、style
でノードAにはオレンジ系の背景色、ノードB〜Dには白背景と緑の枠線を指定し、データの起点となるノードと処理ステップのノードを色で区別しています。矢印には点線（-.->
）を使っています。