まずは mermaid block でマッピングしてみよう

一番シンプルなmermaidじゃないかなあ。

mermaid

そうそう、これを忘れてはいけない。 箱を並べるblock。

書き方は単純だけど、 うまく組み合わせれば豊かな表現力を引き出せると思いました。

block-beta

ID("テキスト")が基本形です。

```mermaid
block-beta

a["問題分析"]
b("何が問題か")
c("なぜ問題か")
d("どう問題か")
```

上記のように並べると、下図のように描画されます。

block-beta

a["問題分析"]
b("何が問題か")
c("なぜ問題か")
d("どう問題か")

多段組み

横に並ぶ箱の数をcolumnsで指定できます。

```mermaid
block-beta
columns 2

a[["問題分析"]]
b(["何が問題か"])
c{"なぜ問題か"}
d(("どう問題か"))
```

箱の形はflowchartに準拠します。

block-beta

columns 2
a[["問題分析"]]
b(["何が問題か"])
c{"なぜ問題か"}
d(("どう問題か"))

矢印

項目に:2をつけると、幅が2箱分になります。 spaceで余白を開けます。

```mermaid
block-beta
columns 2

a["問題分析"]:2
b("何が問題か")
c("なぜ問題か")
space:2
d("どう問題か"):2

b --> d
c --"目標"--> d
```

矢印を-->でつけることができます。 ラベルも書き込めます。

block-beta

columns 2
a["問題分析"]:2
b("何が問題か")
c("なぜ問題か")
space:2
d("どう問題か"):2

b --> d
c --"目標"--> d

グループ化

block:グループ名とendでグループを作れます。

```mermaid
block-beta

columns 2

a["問題分析"]:2
e<["詳細"]>(down):2

block:プロセス
columns 2
b("何が問題か")
c("なぜ問題か")
space:2
d("どう問題か"):2
end

b --> d
c --"目標"--> d
```

ID<["テキスト"]>(方向)で箱を矢印型にできます。

block-beta

columns 2

a["問題分析"]:2
e<["詳細"]>(down):2

block:プロセス
columns 2
b("何が問題か")
c("なぜ問題か")
space:2
d("どう問題か"):2
end

b --> d
c --"目標"--> d

このblock-betaはObsidianでもサポートされています。

箱の縦幅が不安定で、高くなったり低くなったり。 ここあたりが修正されればbetaでなくなるかな。

まとめ

flowchartよりも見やすい。

図式で表現するとき、箱と矢印でまず考える。 だいたいのマッピングはこれでなんとかなります。 mermaidはテキストを並べるだけなので、 ほんとお手軽。