NotionのMermaid記法で、subgraphを利用した要素分解やフローチャートを作成する際のチップスを紹介していきます。
subgraphが作れるようになると、表現の幅が広がりわかりやすく図示化することができます。

subgraphとは

Mermaidでは、領域をノードという単位で表現します。graphやflowchartもノードの1種です。
subgraphは、ノードを区切ってタイトルをつけたグループを作れる機能になります。
実際に作ってみた画像が下記になります。ダイエットの要素を簡略化して分解してみた図になりますが、接種カロリーを減らすエリアをグループ化したい時にsubgraph ... endと囲むことで視覚的に分かりやすくすることができます。

subgraphで方向を指定する

subgraphで方向を指定する場合は、directionを記述すれば指定することができます。

subgraph hogehoge
direction LR
end

subgraphに色を付ける

subgraphで命名した名前に対してstyleを当てることもできます。
この領域は目立たせたいから背景色を変える、文字色を変えるなどもできます。

graph LR
a[ダイエット]
a-->b[摂取カロリーを減らす]
a-->c[消費カロリーを増やす]

subgraph 消費カロリー  
direction LR
c-->d1[運動機会を増やす]
c-->d2[燃焼しやすい身体を作る]
end

subgraph 摂取カロリー
direction LR
b-->b1[食事回数を減らす]
b1-->b11[1日2食にする]  
b1-->b12[一定期間断食する]  
b-->b2[1回の食事量を減らす]
end


style 摂取カロリー fill:#ccc

今回はMermaid記法のsubgraphについてご紹介しました。subgraphを上手く使ってわかりやすい図解を心がけてみてください。