redmine.tokyo 第13回勉強会でのLT資料です

1. mermaidプラグインで始める構成図管理
林如弥﴾@morihaya55﴿
LT@2017/11/18 redmine.tokyo 第13回勉強会

2. 流れ
mermaid is 何?
mermaidプラグインについて
ちょっと使ってみた感想

3. mermaid is 何
‐> markdownのような簡単なコードで図形を生成できるスクリプ
ト言語です
GitHub‐> https://github.com/knsv/mermaid
ドキュメント‐> https://mermaidjs.github.io/
※11/18時点でGitHub Star14,544﴾MongoDBが12,615﴿

4. mermaidの主要3機能
フローチャート
シーケンス図
ガントチャート
をテキストで記述することができます

5. フローチャートの紹介
https://mermaidjs.github.io/flowchart.html
例えばこんなコードを書くと
graph LR;
A(旅立ち)
B{戦い}
C[成長]
D[敗北]
E((回復))
A‐‐>B;
B‐‐>C;
B‐‐>D;
D‐‐>E;
E‐‐>A;
C‐‐>B;

6. こんなフローチャートが生成されます

7. フローチャートで、出来ることざっくりまとめ
グラフの方向変更﴾上から下、左から右、その逆）
図形の種類変更﴾四角、丸四角、丸、ひし形）
図形のスタイル変更﴾色、囲み先の太さなど﴿
連結の線の種類変更﴾直線、矢印、点線など﴿
線にテキストを付与
サブグラフ（複数図形の囲み﴿
マウスオーバでポップアップ

8. フローチャートの機能沢山使ってみたコード
graph LR
id1[Start];
id2(Running);
id3{Split};
id4((End1));
id5>End2];
id1‐‐ exec ‐‐‐id2
id2‐‐>id3
subgraph Ends
id3==>id4
id3‐.‐id5
end
style id2 fill:#1f3,stroke:#f33,stroke‐width:10px

9. こうなります

10. シーケンス図
※私は使っていないのでサンプルそのままです﴾><）
https://mermaidjs.github.io/sequenceDiagram.html
sequenceDiagram
Alice‐>>Bob: Hello Bob, how are you?
alt is sick
Bob‐>>Alice: Not so good :(
else is well
Bob‐>>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob‐>>Alice: Thanks for asking
end

11. こうなります

12. ガントチャート
https://mermaidjs.github.io/gantt.html

13. ガントチャートはredmineの機能を使え
ばいいと思いますよ...
"Easy Gantt"とかもありますよね

14. mermaidプラグインについて
https://github.com/taikii/redmine_mermaid_macro
開発者：taikii さん
Ver1.0.0が2017/11/10にリリースされたばかり
おめでとうございます＆ありがとうございます
プラグイン開発についてブログを書かれていました
https://taikii.github.io/posts/2017/10/redmine‐mermaid‐
macro‐plugin/

15. mermaidプラグインのインストールは超簡単です
1. git cloneする
cd <redmineのホーム>
git clone https://github.com/taikii/redmine_mermaid_macro.git
plugins/redmine_mermaid_macro
2. redmineをリスタートする
以上

16. ちょっと使ってみた感想
インフラエンジニアな私は、フローチャートを構成図として使え
らいいなって思ったが...

17. こんな図が

18. mermaidだとこうなった

19. 初見はちょっと抵抗感があるし、複雑な構成には向いていなさそ
うという印象をうけたが、やはり
コードで書けるメリットは大きい！
バージョン管理が楽
差分チェックが簡単
（書いていると﴿機器やサーバ間の接続が明確になる
ぜひ皆様もお試しくださいませ！
ご清聴ありがとうございましたm ﴾ _ _ ﴿ m