LoginSignup
33

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-03-07

フロー図(シーケンス図)もコードで書いて管理したい(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 するだけ

Screenshot 2017-03-08 02.18.22.png

使いかた

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

Screenshot 2017-03-08 02.27.00.png

おわり

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
33