Hexo でMermaid ダイアグラムを書いてみました。

2025-03-22 追記

  • テーマ変更に伴い、今後hexo-theme-butterflyのタグプラグインに書き換えが必要
  • 一旦ダークテーマにして戻すと正しく表示されるが初回から正常に表示されるように調整が必要

markdown のコードブロックと同様に、以下のコードを「```mermaid」と「```」で囲います。 

graph LR;
    linkStyle default interpolate basis
    A(ONU)-- IPv6 -->B(v6対応ルータ);
    B-->C[物理PC];
    C-->D[仮想サーバ];
    B-->E[ノートPC]
    B-->F(一般ルータ);
    F-->B;
    F-->G[OpenVPNサーバ];

インストールと設定

私の環境は以下です。

  • Hexo
  • freemind テーマ

パッケージのインストール

$ npm install hexo-filter-mermaid-diagrams

Hexo でmermaid を有効化

_config.yml
# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "7.1.2" # default v7.1.2
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true

テーマの修正(freemind の場合)

themes/freemind/layout/_partials/footer.ejs
<% if (theme.mermaid.enable) { %>
  <script src='https://unpkg.com/mermaid@<%= theme.mermaid.version %>/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({theme: 'forest'});
    }
  </script>
<% } %>

背景透明化の設定

themes/freemind/source/css/style.css
.mermaid {                           
  background: transparent !important; 
  border: none !important;            
}

使用例

フローチャート

https://mermaidjs.github.io/flowchart.html

graph TD;
    linkStyle default interpolate basis
    A[四角]-->B(角丸四角);
    A-->C((丸));
    B-->D{ひし形};
    C-->D;
    D-->F>変な形]

その他の使用例

https://github.com/webappdevelp/hexo-filter-mermaid-diagrams#user-content-flowchart

Sequence diagram

https://mermaidjs.github.io/sequenceDiagram.html

Gantt diagram

https://mermaidjs.github.io/gantt.html

Class diagram (実験的)

Git graph (実験的)

追記

font awesome 対応 (2019/07/05)

fab とかを使う場合はmermaid の新しめのバージョンを利用します。

  • mermaid のバージョン指定
    以下で新しめのリリースを調べて指定します。
    https://github.com/knsv/mermaid/releases
    _config.yml
    # mermaid chart
    mermaid: ## mermaid url https://github.com/knsv/mermaid
      enable: true  # default true
      version: "8.1.0" # default v7.1.2
      options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
      #startOnload: true  // default true
  • font awesome のリンク指定
    以下でlatest のバージョンを調べて指定します。
    https://fontawesome.com/changelog/latest
    ./themes/freemind/layout/_partial/head.ejs
    <!-- CSS -->
    <link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet">

bootstrap の影響補正 (2019/07/05)

文字のサイズや垂直位置がbootstrap のスタイルによってずれているので少し補正します。

  • style.css の修正
    ./themes/freemind/source/css/style.css
    .mermaid .label {
      font-size: 120% !important;
      line-height: 3 !important;
    }