シーケンス図やフローだけじゃなくて、体制図や連絡フローにも利用してみたかった。
1. gitbookの環境づくり
ディレクトリを作る。
mkdir organization-chart
gitbookの初期化。
gitbook init
info: init book at /Users/bearjet/Develop/e-book/organization-chart
info: detect structure from SUMMARY (if it exists)
info: create SUMMARY.md
info: create README.md
info: initialization is finished
Done, without error
gitbookをビルドしておく。
gitbook build
info: loading book configuration....OK
info: load plugin gitbook-plugin-highlight ....OK
info: load plugin gitbook-plugin-search ....OK
info: load plugin gitbook-plugin-sharing ....OK
info: load plugin gitbook-plugin-fontsettings ....OK
info: >> 4 plugins loaded
info: start generation with website generator
info: clean website generatorOK
info: generation is finished
Done, without error
gitbookを見る。
gitbook serve
Live reload server started on port: 35729
Press CTRL+C to quit ...
info: loading book configuration....OK
info: load plugin gitbook-plugin-mermaid-2 ....OK
info: load plugin gitbook-plugin-highlight ....OK
info: load plugin gitbook-plugin-search ....OK
info: load plugin gitbook-plugin-sharing ....OK
info: load plugin gitbook-plugin-fontsettings ....OK
info: load plugin gitbook-plugin-livereload ....OK
info: >> 6 plugins loaded
info: start generation with website generator
info: clean website generator
info: OK
info: generation is finished
Starting server ...
Serving book on http://localhost:4000
2. 図をmarkdownで描きたい
http://knsv.github.io/mermaid/
mermaidを利用する。
gitbook-plugin-mermaid-2
https://github.com/morlay/gitbook-plugin-mermaid-2
2ってついているほうが、良いみたい。普通のmarkdownのコードの中に書ける。
npm init
npm install gitbook-plugin-mermaid-2
バージョンを確認。
package.json
.
.
.
"dependencies": {
"gitbook-plugin-mermaid-2": "0.0.3"
},
.
.
.
book.jsonを作成する。
themeは通常とforestが最初に用意されているようでした。
お好みの色合いでイケるのかな？
book.json
{
"plugins": ["mermaid-2"],
"pluginsConfig": {
"mermaid-2": {
"theme": "forest"
}
}
}
試しに、連絡フローを書いてみる！
README.md
# 連絡フロー
```mermaid
graph LR;
Aさん-->Bさん;
Bさん-->Cさん;
Cさん-->Dさん;
Cさん-->Eさん;
Cさん-->Fさん;
```
gitbookをビルドする。
gitbook build
体制図もイケそうです。
Atomエディタのプラグイン
https://github.com/y-takey/atom-mermaid
いちいちビルドするのは辛いから。助けてもらいます！！
node-gypが必要。
npm install -g node-gyp
markdown文書全体だとPreviewできず、チャートのみで利用可能。
ng.md
# Introduction
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
ok.md
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;