mermaid.js v8世代の素敵な図や機能をGitbook 3で使いたかったのでプラグインを作った [追記あり]


## 前置き

[mermaid.js使ってmarkdownで設計書書いたら楽だよ](https://qiita.com/uzuki_aoba/items/a01f8b0b52ced69c8092) って記事を書いて以降、もっぱら設計書はGitbookで書いている。

最近は GitLab Pages に CDしてそのままアクセス制限ありで限定共有することで、とても作業効率が上がっていて嬉しい限りである。

ただ、難点なのが、 Gitbook用のmermaid.jsのプラグインが軒並みメンテされておらず、 **Gitbook3で動かない** ものや、動いても **mermaid.jsのバージョンがv7系までしか対応してない** こと。

## 最近のmermaid.js

一方、mermaid.jsの方はv8系になって対応する図の種類が一気に増えた。
かつては、

- Flowcharts
- Sequence diagrams
- Gantt diagrams

だったのが、v8(v8.5)で増えたのが、

- Git graph
- Class diagrams
- Entity Relationship Diagrams
- State diagrams
- Pie chart diagrams

※一部、まだ試験的実装のものがあります。

という豪華さ。

詳しくは、以下の記事が日本語でまとめてくれてるのでありがたく参照しよう。

[mermaid.js で上流工程を好きになろう](https://qiita.com/caesar_cat/items/e8a116a585863633d15a)

あとあと、既存の図もだいぶ進化してる。例えば、 Sequence diagrams に **autonumber** 機能が増えた。

![スクリーンショット 2020-05-14 6.28.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52410/f88b0616-1f05-fe06-c62f-b15447c5f175.png)

**シーケンス番号がでると、図の下に番号付きリストで説明書いていく事ができる。Gitbookで設計書書くときにこの上なく便利。**

こんなに便利なのにGitbookで使えないのくやしい！


## それでは Plant UML ではダメなのか？

Plant UMLもかなり良い。しかもGitbookのプラグインもある。
ただ、メインのライブラリがJavaであり、jarファイルをいちいち取ってこないといけないことが、環境構築やCDの構築の際にちょっと手間になる。
nodeのdockerイメージ一発どーんで上手くいかないので、docker-compose挟んでPlant UMLのレンダリングサービスのdockerイメージを横で走らせるとか。

可能なんだがめんどいシリーズ。


## プラグイン作った。

無いなら作れ。って事で、npmで公開されてる中で一番良さげな [gitbook-plugin-mermaid-gb3](https://www.npmjs.com/package/gitbook-plugin-mermaid-gb3)(これでも最終更新3年前...)をforkさせてもらって、作った。

[gitbook-plugin-mermaid-newface](https://www.npmjs.com/package/gitbook-plugin-mermaid-newface)

名前がだいぶ脳死だが、ゆるしてほしい。  
(実際、実案件で使うので夜中に突貫で作ったのでゆるしてほしい。)

![スクリーンショット 2020-05-14 6.38.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52410/89a9f21a-4ef4-fbe5-43b9-550141b5e7d5.png)

Class Diagram だけが、レンダリング前に変にエスケープされて渡ってくるのでエラーになるが、その他はちゃんと描画できてる。すばらしい。

### 修正ポイント

mermaid.js のバージョンを上げればそれでいいでしょと思ったが、ほぼほぼ書き換えることになった。

#### mermaid.js の変更によるもの

- 初期化メソッドが `mermaid.init()` から `mermaid.initialize()` に変更。configも実質必須。
- cssはlinkで読込ではなく、mermaid.jsの内部で動的に適用される(`theme` を初期化メソッドで指定できるようになったため)。

#### Gitbook の変更によるもの

- 元は、gitbookの `hooks.page` イベント時に正規表現でコードブロックをひっかけて処理していたが、それだと他のライプラリとコンフリクトする( `gitbook-plugin-prism` とか)。 `blocks.code` イベントだとコードブロックだけ流れてくるので、ここで `language` の値を見て処理するがベター。
  -  [こんなかんじ](https://github.com/TakuroFukamizu/gitbook-plugin-mermaid-newface/blob/64aa359599e94662f24e7cf7ee813d7bfd8605ce/index.js#L9)
  -  ちなみに、 `blcoks.code` イベントの引数はこんな感じ。

```json
{ 
  "body": "sequenceDiagram\n    participant mcu as MCU\n    participant flash as FlashROM\n    participant sensor as Sensors\n    participant cloud as Cloud\n\n    mcu->>+cloud: get hoge\n    cloud-->>-mcu: hoge\n\n    mcu->>mcu: check hoge\n\n    alt fuga\n        mcu->>+flash: Write hoge\n        flash-->>-mcu: Write OK\n    end\n",
  "kwargs": { 
    "language": "mermaid" 
  },
  "args": [],
  "blocks": [] 
}
```

- ページのhtml側で読み込む [plugin.js](https://github.com/TakuroFukamizu/gitbook-plugin-mermaid-newface/blob/master/book/plugin.js) のほう、引数で渡ってくる `gitbook` オブジェクトが便利で、 `gitbook.state.config` に `book.json` の設定の内容が入ってくるので、これで処理分けられる。特に `pluginsConfig` とか。


## 終わりに

開発現場から Word / Excel の仕様書を駆逐しよう！！！！！

## 2021年1月30日追記
ページロード関連で描画されない問題があったのと、PDFで描画されない問題があったので、思い切って mermaid-cli を使うように変更した！

https://github.com/TakuroFukamizu/gitbook-plugin-mermaid-newface/pull/2/files

![Screen Shot 2021-01-30 at 11.16.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52410/fa320cdd-227d-89ee-ab66-bfd588b78604.png)

https://www.npmjs.com/package/gitbook-plugin-mermaid-newface

自画自賛だけどめっちゃ快適になった！！！

![Screen Shot 2021-01-30 at 11.18.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52410/837a5cc5-eaf2-d5b3-1d1b-fcfe7aa27dba.png)