Gitbook-Plugin-Plantumlをgit cloneから利用できるようにする

Abstract

wordで仕様書であったり設計書を書いてたけど，
とってもいいツール(gitbook)を見つけてしまったのでそちらへ移行した際にプラグインの一つが上手く動かなかったのでそのお話．

開発環境はMacです．

Background

gitbookを使うことでmarkdown形式でドキュメントが書けるようになりました．
しかも，HTML,PDFなどに簡単にエキスポートできます．素晴らしい．

ですが，設計書を書く上で図表作成は避けれぬ道．

そこで，gitbookに図表生成ツールがあるのか探していたところ，ツールがありました．

• lyhcode/gitbook-plugin-plantuml
• vowstar/gitbook-plugin-uml

二つあります．どちらでもいいと思います．
今回は，__vowstar/gitbook-plugin-uml__で作業を進めます．（私の環境では__lyhcode/gitbook-plugin-plantuml__が動かなかった）

npm installが進まない...

How to

graphvizとplantuml本体をインストール

# もしかしたらこの作業はいらないかもしれない
$ brew install graphviz
$ brew install plantuml

npmで__vowstar/gitbook-plugin-uml__をインストール

$ npm i -D gitbook-plugin-uml
⸨░░░░░░░░░░░░░░░░░░⸩ ⠋ fetchMetadata: sill resolveWithNewModule gitbook-plugin-uml@1.0.0 checking installable status

止まった．動かない．

---

しょうがないのでgitから直接インストールする．

$ git clone https://github.com/vowstar/gitbook-plugin-uml.git

gitbookのnode_modulesの中にcloneしたvowstar/gitbook-plugin-umlを配置
vowstar/gitbook-plugin-umlはnode-plantumlを用いているのでそれもインストール

$ npm i -D node-plantuml

gitbookのbook.jsonのpluginsへ以下を記述

{
    "plugins": ["uml"],
}

gitbook への適用

$ gitbook install
info: installing 1 plugins using npm@3.9.2 
info:  
info: installing plugin "uml" 
info: install plugin "uml" (*) from NPM with version 1.0.0 
info: >> plugin "uml" installed with success 

確認

ここのサンプルコードをmdファイルに書く

$ gitbook serve

http://localhost:4000/ へアクセス，表示できていれば終了

Conclusion

結構時間かかったので，苦戦している方は是非お試しあれ．

References

• PlantUMLをMac OS Xで使う