はんなりと、ゆるやかに

アジャイル、スクラムが好きなITエンジニアが日々から学んだことをアウトプット

Notion+Mermaidを使うとテキストでロジックツリーが書ける

Notion で ロジックツリーを書きたいと思っていたら、Mermaid を使うとできそうだったのでまとめておきます。ロジックツリー以外にも色々な図が書けます。

結論

  • ちょっとしたものなら手軽&気軽に使えて良さそう
  • コードが大きくなると図が小さくなって少し見にくい
  • Notion の表現の幅が広がる

Mermaidとは

JavascriptベースのMarkdown構文で書ける作図ツールです。
mermaid-js.github.io
フローチャートやシーケンス図、クラス図、ユーザージャーニー、パイチャートなど、多様な図を表現することが出来ます。また、フローチャートを応用して、ロジックツリー図、マインドマップ、ループ図、なども書けます。

書き方

/codeでコードブロックを設定します。
f:id:iucstscui:20220121013121p:plain

言語を Mermaid にします。表示は分割コードプレビューが選べます。コードを書きながらプレビューが見れる分割がお勧めです。書き終わったらプレビューにしておくと図だけになって資料として見やすくなると思います。
f:id:iucstscui:20220121013218p:plain

フローチャートを使ってロジックツリーのようなものを書いてみた

このブログで書くことをまとめてみました。
f:id:iucstscui:20220121013534p:plain
使った構文
flowchart LR
 フローチャートの方向を示します。LRは左から右、TDは上から下です。
Top[Notion..書ける]
 記号にIDをふれます。長い名前の記号に使うと便利です。
「-->」
 記号同士を繋ぐ線画書けます。
 -- hoge -->と書くと線の途中にコメントが書けます。

ループ図もこんな感じで書けます。

f:id:iucstscui:20220121014621p:plain

コードが大きくなると図が小さくなって見にくい

コードが大きくなると図は表示サイズに合わせて縮小されます。大作マインドマップを作ると小さくなり文字が見えなくなるだろうと感じました。
f:id:iucstscui:20220121015031p:plain

まとめ

Notionはデータベースや他との連携などで幅広い使い方がありますね。他の使い方も探索したいと思います。