ちょっと見えてきた。
Mermaid
TextwellやObsidianでフローチャートを描く方法。調べると複雑なので、入門編を考えることにしました。「とりあえず使えればいいや」の気持ちでお入りください。
基本形
項目（ノード）を矢印で結ぶ。それが基本形です。
flowchart a --> b
aからbヘの矢印を付ける。下図のようになります。
フローチャートの方向
一行目の「flowchart」で「この図はフローチャートだよ」と指定します。つまり他のグラフも描けるのですが、今回は扱いません。
「flowchart」だけだと、上から下になります。左から右ヘのときは「flowchart LR」と書きます。LeftからRightです。
項目
項目にテキストを埋め込むには[]を使います。
a[スタート]
項目に丸みを持たせたいときは()で囲みます。
a(スタート)
このように囲み方で項目の形を変えることができます。いっぱい種類がありますが、初めは[]だけにしておきましょう。
矢印
項目の繋げ方も豊富です。実線で繋ぐ場合は「---」です。太線にするには「===」、点線にするには「-.-」になります。
この線に矢印を付けるときは「-->」になり、双方向を表すときは「<-->」になります。「<--」は使えないようです。
「---テキスト---」とすれば線上にテキストが載ります。
スタイル
項目の色を変えたいときは「style」を使います。
style a color:white, fill:darkred
文字色はcolor、背景色はfillになります。
実例
これらを組み合わせて図にします。
flowchart LR
a[宿屋で宿泊]
a --> b(旅をする)
b-->a
b --- c([モンスター現る])
c === d{戦う}==> e[/大ダメージ/]
d <--> f[[脱出]] == 次に進む ==> b
subgraph 戦闘モード
e & f -.-> g>力尽きた]
end
style a color:white, fill:darkred, stroke:darkred
上記コードは下図のように変換されます。
はてなに直接
hatenablogでもサポートされてました。
```mermaid
flowchart LR
あなたから--> メリークリスマス
```
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad: true});</script>
スクリプトを埋め込んでおけばコード表記で対応するらしい。
flowchart LR あなたから--> メリークリスマス
はてなブログでMermaidを使うための設定 - Jazzと読書の日々
より詳しく
詳しくは公式の「flowchart」を見てください。図入りなので英語でも平気平気。
まとめ
手描きより簡単。追加や修正をするものだし、テキスト表記は理にかなっている。
