GitHub Pagesでmermaidを利用する

Github Pagesでmermaidを利用する方法を記載します。

結構表現力があるので、設計書やシステム構成図などこれで書いていけば Excelや画像などと違って差分を見られて便利な気がしています。

graph TD
    LB[ロードバランサー] --> WS1[WEBサーバー1]
    LB --> WS2[WEBサーバ2]
    WS1 --> AP1[APサーバ1]
    WS2 --> AP2[APサーバ2]    
    AP1 --> DB[DBサーバ]
    AP2 --> DB

上記を記載することで以下のように表示されます。

graph TD
    LB[ロードバランサー] --> WS1[WEBサーバー1]
    LB --> WS2[WEBサーバ2]
    WS1 --> AP1[APサーバ1]
    WS2 --> AP2[APサーバ2]    
    AP1 --> DB[DBサーバ]
    AP2 --> DB

方法としては、以下を.mdのファイルの末尾に記載しています。

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
<script>
   mermaid.initialize({
       startOnLoad:true,
       theme: 'default'
   });
   window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
</script>

ちなみに、Vidual Studio Codeで編集しているのですが、「Markdown Preview Mermaid Support」というプラグインを使うとプレビューで作成したグラフなどが見えます。ぜひ使ってください。

作成日:2024-04-28　 更新日:2024-04-28