【Obsidian】 mermaidのFlowchartで特殊記号を表示する

mermaidでFlowchartを描くときに、特殊記号を入れるとエラーが出て困ったことありませんか？ 例えば「 ² 」とか「 ± 」とか「℃ 」なんかは普通にコピペして表示しようとしてもエラーになります。

```mermaid
graph LR
 id1[10²希釈液を37±2℃で保温]
```

これをプレビューすると、

Error parsing Mermaid diagram!

Lexical error on line 2. Unrecognized text.
graph LR id1[10²希釈液を37±2℃で保温]
---------------^

といった感じです。「 ² 」の部分でUnrecognized(認識されない) textって言われちゃってますね。

この問題は数値文字参照や文字実体参照を用いることで解決できます。詳しく知りたい方はこちら(Wikipedia)。

すなわち、数値文字参照は&#10進数の文字番号;(例: ℃)または&#x16進数の文字番号;(例: ²)として指定する方法で、文字実体参照は&文字列;(例: ±)として指定する方法です。文字番号とかはググれば出てきます。

mermaidではどうやら最後の;(セミコロン)も受け付けないようなのですが、省略することでエラーが出なくなるようです。実際に先ほどの例に沿って入力してみると、

```mermaid
graph LR
 id1[10&#x00B2希釈液を37&plusmn2&#8451で保温]
```

このようになり、プレビューしてもきちんと表示されているのが分かります。

綺麗にまとまりましたね。

特殊記号を入れる他に、HTMLタグの<br>を入れることで改行したり、&nbspで文字参照することで半角スペースほどの空白を入れたりすることも可能です。

見出し画像のように文字参照することで絵文字を埋め込むこともできます。ぜひ色々試してみてください。

それでは、良いObsidianライフを！