mermaid記法でFontAwesomeを使ってみた

Mermaid.jsにて標準サポートされているFontAwesomeは程よいサイズで且つ画像を別途用意する手間も省ける便利ものです。ただ、実際に利用されている状況をあまり見かけないこともあり、利用方法等交えて書いてみることにしました。

使い方

指定フォーマットで追記するだけです。正確に入力された場合に限りアイコンが表示されます。

記入例	変換後
d(fa:fa-user-circle 部門グループ)

フォーマット構成は fa:fa-XXX となっており、XXXの部分はFontAwesomeを参照します。mermaid.jsはver4とver5のアイコンと互換性があるため、最新バージョンでは表示されないものがいくつかあります。

例えば yen-sign の場合。

これは e(fa:fa-yen-sign お金) といった感じで利用します。

やってみる

とにかく触ってみたい場合はmermaid live editorを使ってみましょう。

表示させる

ページ上でstylesheetが読み込まれていなければ表示されません。headセクションを編集できるのであればBootstrapCDNを利用しましょう。

コードブロックにてGitHubやNotionはmermaid.jsに対応してますが、BootstrapCDNに対応していないようでアイコンは表示されません。

あとがき

必ずしも望むアイコンがあるとは限りませんが、文字列だけでアイコンが表示可能になる点はとても便利です。BootstrapCDNに対応していない場合はアイコン及び呼び出し文字列が表示されないだけで影響はありません。対応の是非に関わらず先行入力しておくのも一つの手です。