【Notion】Mermaidを使ったフローチャートの作り方

Notionでは、Mermaidを利用して簡単にフローチャート作ることができます。Mermaidの機能は本当に豊富で、この記事には収めようと思っても収まりません。Mermaidについてもっと学びたいという方は、公式のドキュメントを読んでみてください。

>>About Mermaid

今回は、Mermaidを利用してこのような簡単なフローチャートを作る方法を紹介していきます。

Mermaidを入力する方法

新しいページが容易できたら、まずはコードスニペットを表示させます。

左上からプログラミング言語を選択するのですが、ここではMまで下がって「Mermaid」を選びます。

Mermaidを選んだら、このようなスニペットになります。

コードの編集はここから行っていきます。

フローチャートの作り方

フローチャートを作るのはとても簡単です。試しに、こちらのコードを打ってみます。

flowchart LR
T(東京)-->O(大阪)

すると、こんな感じで簡単に枠と矢印が表示されます。

コードの解説を加えると、flowchart LRは「左から右のフローチャートを書く」という意味です。T(東京)で東京、O(大阪)で大阪を表示させています。もうTとOはそれぞれ名前が定義されていますので、これから先に使いまわすことがあれば、単にTやOと略して書くことができます。

flowchart LR
T(東京)-->O(大阪)
O-->H(博多)

%% または %%

flowchart LR T(東京)-->O(大阪)-->H(博多)

すると、こんな感じ。3都市が矢印で繋がれます。

また、今回は左から右に書きたかったためflowchart LRとしましたが、右から左に書きたければ、florchart RLとすればOK。

東から西に動くという意味で、今回はこちらの方が自然かもしれません。

さて、ここまでの知識を応用して、もう少ししっかりしたフローチャートを作ってみましょう。こちらのコードをコピーして、ペーストしてみてください。

flowchart TB
S(開始)-->P(処理)-->D(判断)
D-->P1(処理A)-->F(終了)
D-->P2(処理B)-->F

すると、上から下に流れる、このようなフローチャートができあがります。Dから2つの分岐を作っているほか、TB（Top to bottom）を指定しているのが特徴です。

このままでは味気ないので、もう少しカスタマイズしていきます。まずは判断の後で、「はい」なら処理A、「いいえ」なら処理Bに進めるようにします。そのために、処理AとBの直前にコメントを追加します。

flowchart TB
S(開始)-->P(処理)-->D(判断)
D-->|はい|P1(処理A)-->F(終了)
D-->|いいえ|P2(処理B)-->F

すると、このようにコメントが追加されます。

枠の形を変更することもできます。

flowchart TB
S([開始])-->P(処理)-->D{判断}
D-->|はい|P1(処理A)-->F([終了])
D-->|いいえ|P2(処理B)-->F

すると、このように枠の形が変わります。

枠の形ですが、よく使われるものはこの8つでしょう。

P(処理)
P[処理]
P{処理}
P((処理))
P[[処理]]
P{{処理}}
P([処理])
P[(処理)]

色を付けることもできます。まずclassDefで色をコードで指定します。

flowchart TB
classDef blue fill:#87CEEB
S([開始])-->P(処理)-->D{判断}:::blue
D-->|はい|P1(処理A)-->F([終了])
D-->|いいえ|P2(処理B)-->F

すると、こんな感じで枠を塗りつぶすことができます。

フローチャートの応用

矢印を通常の直線に変えれば、系統樹のようなものを作ることができます。次のコードを試してみてください。

flowchart LR
I(印欧祖語)---G(ゲルマン語系)
I---L(ラテン語系)
L---S(スペイン語)
L---P(ポルトガル語)
L---IT(イタリア語)
L---F(フランス語)
G---WG(西ゲルマン語群)
WG---GE(ドイツ語)
WG---D(オランダ語)
G---NG(北ゲルマン語群)
NG---SW(スウェーデン語)
NG---DE(デンマーク語)

すると、このようにヨーロッパの言語の系統樹を作ることができます。

作成したフローチャートを使う

コードスニペットの左上をクリックして、表示方法を「分割」から「プレビュー」に変更します。

すると、フローチャート全体が綺麗に見えるようになります。

また、それぞれのブロックにリンクを設定することも可能です。試しに、下記のコードを追記してみましょう。

click D "https://google.com"

すると、「判断」をクリックしたときに指定したURL先にジャンプルするようになっています。今回は個別のページは作りませんでしたが、この機能を活用する場合は、個別のデータベースを作ってリンクで飛ばす形になると思います。