Notionでは、Mermaidを利用して簡単にフローチャート作ることができます。Mermaidの機能は本当に豊富で、この記事には収めようと思っても収まりません。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先にジャンプルするようになっています。今回は個別のページは作りませんでしたが、この機能を活用する場合は、個別のデータベースを作ってリンクで飛ばす形になると思います。