Gitbook + Mermaid.js のセットアップ

ドキュメントを書くときに便利な Gitbook。それに UMLやガントチャートを記述できる Mermaid.js を組み込んだ環境を作るためのメモ。

ガントチャートがほしいならMermaid.jsだが、UMLが使えればいいのなら、PlantUMLを使うのがおすすめ。
PlantUMLが使えるGitbook環境については次のエントリで書いたのでそちらもどうぞ。

• Gitbook 環境 マイ・ベスト - Qiita

手順

1. まずは npm 環境の初期化。聞かれる設定は適宜入力。

$ npm init

1. gitbook-cli をインストールする

$ npm install -D gitbook-cli

1. 次の内容で book.json を作る。
   ここでは直接gitリポジトリから hypc/gitbook-plugin-mermaid.git を導入する。¹

book.json

{
    "plugins": [
      { "name": "mermaid",
        "version": "git+https://github.com/hypc/gitbook-plugin-mermaid.git"
      }
      ,"-sharing","hide-published-with"]
 }

1. 次のコマンドを実行して mermaid プラグインをインストールする

$ gitbook install

1. Gitbookを初期化する。

$ gitbook init

実行後、README.md と SUMMARY.md ができている。
ここまででセットアップ自体は終了。以下は動作確認

1. README.md に次の内容をコピペする

　```mermaid
　graph TD;
　  A-->B;
　  A-->C;
　  B-->D;
　  C-->D;
　```

1. 次のコマンドを実行して http://localhost:4000/ にブラウザでアクセスする。

$ gitbook serve

次のように表示されているとうまく動作している。

Tips

ドキュメントの作成開始時点で 目次とファイル構成が決まってるなら、SUMMARY.md にそれを記述して gitbook init を実行すれば、必要なディレクトリ/ファイルを生成してくれる。便利。

1. gitbook-plugin-mermaid−2 を試してみたが、うまく動かすには 2017/02/20現在ではソースを修正する必要があるらしい。このプラグインならその必要はない。 ↩