Mermaid
Mermaidとは、テキストをレンダリングしてグラフやチャートを描けるJavaScriptのライブラリです。
はてなブログで記事を書く際にも利用したかったのですが、デフォルトでは利用できず追加の設定が必要だったので、設定方法をまとめておきます。
設定方法
1)Mermaidのスクリプトをロード・埋め込む
<script type="module"> import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true }); </script>
2)CSS設定を追加
上記により```mermaid
の記法が使えるようになりますが、このままだとはてなブログのCSSがきいてコードブロックの背景が黒くなってしまい、mermaidの図がかなり見づらくなります。
それを避けるため、pre.code.mermaid
のときはスタイルが当たらないように修正します。
手順:
/*mermaid用*/ .entry-content pre.code.mermaid { background: none; border: none; padding: 0; } .entry-content pre.code.mermaid[data-lang="mermaid"]:before { content: none; }
3)Mermaidを書く
ここまでの設定を終えると、Markdownモードの記事編集画面で、```mermaid
の記法が使えるようになります。
```mermaid sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later! ```
sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later!
色んなチャートが簡単に書けて便利
フローチャート、シーケンス図、クラス図、ER図など、色々な図を簡単に書くことができます。
元々はGitのブランチ運用の図をサクッと書けないかな〜と思って探していたのですが、それもバッチリありました。
```mermaid --- title: Example Git diagram --- gitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commit ```
--- title: Example Git diagram --- gitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commit