Hexoで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 でMermaid ダイアグラムを書いてみました。

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>変な形]

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

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Gantt diagram

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

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

Class diagram (実験的)

classDiagram
Class01 <|-- averylongclass : cool class03 *-- class04 class05 o-- class06 class07 .. class08 class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

Git graph (実験的)

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

追記

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

<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;
}