Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20171117 redminetokyo13

3,111 views

Published on

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

20171117 redminetokyo13

  1. 1. mermaidプラグインで始める構成図管理 林如弥﴾@morihaya55﴿ LT@2017/11/18 redmine.tokyo 第13回勉強会
  2. 2. 流れ mermaid is 何? mermaidプラグインについて ちょっと使ってみた感想
  3. 3. mermaid is 何 ‐> markdownのような簡単なコードで図形を生成できるスクリプ ト言語です GitHub‐> https://github.com/knsv/mermaid ドキュメント‐> https://mermaidjs.github.io/ ※11/18時点でGitHub Star14,544﴾MongoDBが12,615﴿
  4. 4. mermaidの主要3機能 フローチャート シーケンス図 ガントチャート をテキストで記述することができます
  5. 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. 6. こんなフローチャートが生成されます
  7. 7. フローチャートで、出来ることざっくりまとめ グラフの方向変更﴾上から下、左から右、その逆) 図形の種類変更﴾四角、丸四角、丸、ひし形) 図形のスタイル変更﴾色、囲み先の太さなど﴿ 連結の線の種類変更﴾直線、矢印、点線など﴿ 線にテキストを付与 サブグラフ(複数図形の囲み﴿ マウスオーバでポップアップ
  8. 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. 9. こうなります
  10. 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. 11. こうなります
  12. 12. ガントチャート https://mermaidjs.github.io/gantt.html
  13. 13. ガントチャートはredmineの機能を使え ばいいと思いますよ... "Easy Gantt"とかもありますよね
  14. 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. 15. mermaidプラグインのインストールは超簡単です 1. git cloneする cd <redmineのホーム> git clone https://github.com/taikii/redmine_mermaid_macro.git   plugins/redmine_mermaid_macro 2. redmineをリスタートする 以上
  16. 16. ちょっと使ってみた感想 インフラエンジニアな私は、フローチャートを構成図として使え らいいなって思ったが...
  17. 17. こんな図が
  18. 18. mermaidだとこうなった
  19. 19. 初見はちょっと抵抗感があるし、複雑な構成には向いていなさそ うという印象をうけたが、やはり コードで書けるメリットは大きい! バージョン管理が楽 差分チェックが簡単 (書いていると﴿機器やサーバ間の接続が明確になる ぜひ皆様もお試しくださいませ! ご清聴ありがとうございましたm ﴾ _ _ ﴿ m

×