mermaidにはHTMLタグが埋め込める

フローチャートをささっと描く。スクリプトで定義するmermaidは魔法のよう。

ただ、矢印でつなぐ分には十分だけど、それ以上の表現ができないからなあ。そう思っていませんか。

Obsidianならデフォルトで対応。使い方は以前の記事を参照してください。

表記で\nを使うことができます。改行ですね。文章をブロックにできる。

graph
a(長い文章も\n折り畳んで\n表記できます)
b(ブロックを作り\nカード化して\n並べます)

```mermaid
graph
a(長い文章も\n折り畳んで\n表記できます)
b(ブロックを作り\nカード化して\n並べます)
```

水平線でカードを分割できます。 pタグをつけると位置関係も調う。

graph
a(<p>水平線の終わりには</p><hr><p>虹の橋があるのだろう</p>)

```mermaid
graph
a(<p>水平線の終わりには</p><hr><p>虹の橋があるのだろう</p>)
```

カードにリストを埋め込むこともできます。

graph
a(イルカ三兄弟<ol align=left><li>イル</li><li>カル</li><li>フィン</li></ol>)

```mermaid
graph
a(イルカ三兄弟<ol align=left><li>イル</li><li>カル</li><li>フィン</li></ol>)
```

ほかにもいろいろ。

graph
a(実は<b>手塚治虫</b>が<font color=blue>原作</font>)
style a fill:#eee

```mermaid
graph
a(実は<b>手塚治虫</b>が<font color=blue>原作</font>)
style a fill:#eee
```

テーブルも使えそうだけど、日本語だとセル幅が狭くなる？

夏が近づく。つい聞きたくなる。

宇宙戦艦ヤマトの西崎義展がプロデュース、ガンダムの富野由悠季の初監督作品。どちらのモチーフも「トリトン」には隠されている。

Jazzと読書の日々