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

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

Gitbook 環境マイ・ベスト - Qiita

手順

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

$ npm init

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

$ npm install -D gitbook-cli

次の内容で 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"]
 }

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

$ gitbook install

Gitbookを初期化する。

$ gitbook init

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

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

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

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

$ gitbook serve

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

Tips

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

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