Edited at

フロー図(UMLシーケンス図)もコードで書いて管理したい(atom + mermaid.js)

More than 1 year has passed since last update.


フロー図(シーケンス図)もコードで書いて管理したい(atom + mermaid.js)


前置き


目的


運用ドキュメントも Infrastructure as Code で


  • 1. エクセルでがんばってフロー図書いた

  • 2. 「あそこはこう変えて、ここはこう変えてね。よろしく。」

  • 3. 図形をドラッグ・アンド・ドロップして…キーーーー


GUI めんどくさい!



コードベースのメリット


  • git などでバージョン管理(差分管理)できる

  • 変更もエディタ上で文字列編集することで可能


結論


コードベースでシーケンス図書けるツールあります


atom + mermaid.js



atom


mermaid.js


環境


  • MacOS Sierra

  • Atom 1.13.0 x64


インストール方法


  • atom が導入済みであれば + install するだけ


使いかた

%% Example of sequence diagram

sequenceDiagram
participant 依頼者
participant 運用担当
participant リーダー
依頼者->>+運用担当: よさげなサーバーこさえてよ!
運用担当-->>-依頼者: そんな簡単に出来るかぼけぇ!!!
activate 依頼者
依頼者->>+運用担当: そんなこと言わずに
deactivate 依頼者
運用担当-->>+リーダー: 下々がこんなこと言ってます
リーダー->>-運用担当: 仕方ない、やってやれ
運用担当-->>-依頼者: いいって、ほらよ


おわり