こんにちは。sweeepの清川です。みなさんの会社では「Notion」使っていますか？sweeepでは、情報共有やプロジェクト管理にNotionを大活用しています。

今回は日々の仕事にも役立つNotionで「簡単にフローチャートを書く方法」をご紹介します。Mermaidという言語を使いますが、直感的に書けるので覚えてしまえば難しくはありません。どうぞチャレンジしてみてくださいね！

※こちらの記事はkiyo個人noteの転載です。

1. コードブロックを呼び出す

フローチャートを作成したいページに「/code」と打ち込むと、コードブロックが呼び出されます。このブロック内でMermaidを記述し、フローチャート図を作成していきましょう。

コードブロック内で言語を選択できるようになっているので、「Mermaid」を選択し、コードと同時にプレビューが表示されるよう「Split」を選択します。

2. 何の図を作りたいのか宣言する

Mermaidでは、フローチャートの他にシーケンス図やクラス図など、様々な図を書くことができます。今回はフローチャートを作成したいので、まず「flowchart LR 」と書き、作る図の種類を宣言をします。

ちなみに、LRとはLeftからRightに流れる図を書くという意味です。上下の図にしたい場合は「flowchart TB」と書けばTopからBottomの図になります。

3. ノードを変数で記述する

ノードを変数で記述していきます。例えば、「勉強に取り掛かる」というノードを作りたい場合、S(勉強に取り掛かる)と記述しておけば、次からSと書くだけでそのノードを指定することができます。

変数の後ろのカッコの形で、記号の形を変更できます。ノードの内容によって、()や[]、{}で囲み、形を変更していきましょう。

4. ノードを矢印でつないでいく

ノードが出来たら、つなげたいノードの間に「-->」と書いていきます。すると、あら、不思議。簡単に矢印で繋がって、フローチャートになりました！

「-.->」とすると点線にできたり、「-」の数を増やすと矢印が長くできたり、「<-->」とすると双方向の矢印にできます。

さらに、| | を変数の前に記述すると、矢印の間に文字を表示させることもできます。

5. コメントをつける

%%で囲うとコメントをつけることができます。また、コメント部分をドラッグすると、文字色の変更メニューが表示されるので、コメントの色や大きさを変えられます。

色をつけたり、太字にしておくと、後から探しやすくなるので便利ですよ！

6. 記号の色を変える

記号の色や線の太さも変更できます。
classDefの後に変数名を書いてそれぞれ色を指定していきましょう。

fill：は塗りつぶしたい色、stroke：は線の色、stroke-width：は線の太さ、color：は記号内の文字色です。

色の変数が書けたら、ノードの後ろに「:::変数名」と記述します。例えば、「S{勉強に取り掛かる}:::orange」と書くと、勉強に取り掛かるという記号がorangeという変数内で指定した色になって表示されます。

7. 個別で矢印の色を変える

矢印の色を個々で変更したい場合は、linkStyleと書いていきましょう。

例えば、「やらない」というステップの矢印の色を青色にしたい場合は、
linkStyle 1 stroke:blue
と記述します。このときの1という数字は、0から連番で自動的に割り振られる番号です。そのため、あらかじめステップの番号をコメントに入れておくと、あとで指定しやすいです。

8. 記号に別ページへのリンクをつける

「この機能、すごい！」と驚いたのが、フローチャート図の記号にリンクをつけられることです。

書き方は「click 変数名 "リンク先のURL"」です。例えば、「click DO ”https://www.notion.xo/xxxx」と書くと、「DO」というノードをクリックできるようになり、クリックするとリンク先に飛ばせます。

9. 書き終わったらプレビュー表示

ひととおり書き終わったら「Split」から「Preview」に状態を変更します。これで、フローチャート図だけが表示されるようになりました。

8で指定したノードをクリックすると、指定したURLにちゃんと飛ぶことも確認できました！

10. まとめ

プログラミング言語を書いたことのない自分でも簡単に記述することができたMermaid。最初は戸惑いますが、一度書き方を覚えてしまえばどなたでも楽しく書けますよ。

Mermaidのチートシートはこちらにあるので、記述の仕方を忘れても大丈夫…。自分が参考にした動画のリンクはこちらです。どうぞ参考になさってくださいね！