Transit UML というオンラインツールをリリースしました。無料で使えます。
Transit UML - Create Screen Tansition Diagrams using PlantUML
なにこれ
PlantUML の State Diagram の記法を利用すると、テキストとして画面遷移図を作成することができます。
このツールは、PlantUML の記法で作成した画面遷移図を複数の View に分割して管理・出力するためのものです。
なんのために
画面遷移図って、どうしてますか。
エクセル図形や diagrams.net でゴリゴリ作ると差分管理しづらいしメンテだるいし、やはりここはエンジニアらしくプレーンテキストで管理したい。
となると、Markdown エディタでの対応も多い PlantUML が良い。
State Diagram（状態遷移図）を使って画面遷移図を描くとこんな感じ。
hide empty description
skinparam state {
BackgroundColor<<MODAL>> orange
BackgroundColor<<GLOBAL>> #cccccc
}
state "スプラッシュ" as splash
state "ログイン" as login
state "サインアップ" as signup
state "パスワードリマインド" as reminder<<MODAL>>
state "メインメニュー" as main
state "ヘッダ" as header<<GLOBAL>>
state "メール送信" as sendmail
state "利用規約" as terms<<MODAL>>
[*] --> splash
splash --> login: 未ログイン
splash --> main: ログイン済
login --> main: ログイン
login --> signup: 新規登録
login --> reminder: パスワード再設定
signup --> sendmail: 登録
signup --> terms: 規約に同意する
sendmail --> login
header --> login: ログアウト
うむ良い感じだ、と思いきや、画面と遷移ルートが増えるにつれ、だんだんカオスになっていきます。
こうなると次は、見やすいサイズに分割して見れるようにしたい。
アカウント登録とログイン周りだけ、とか、レポート機能関係だけ、とか。
しかしこれ、まともにやると絶対嫌になりますよね。分割しても各遷移図で重複する範囲が出てくるし、そのときにあっちこっちに同じことを書くのは二重管理になる。
つまり、 全体構成を一元管理 しつつ、 必要に応じて分割出力 したい。
他にうまく画面遷移図を作れるツールはないかと思って調べると、たとえば UI Flows という記法とそれを使うguiflowsっていうツールがあったりしたが、根本的にこの点を解決してくれるものではなかったので、作りました。
使い方
- UML 欄で全体構成を作成
- UMLは、全体を以下の順に3セクションにまとめて記述する必要があります
- ヘッダ：
hide empty descriptionなど（省略可） - state 定義：
state foo - 経路定義：
foo --> bar
- ヘッダ：
Reload UMLで View 選択欄に反映
- UMLは、全体を以下の順に3セクションにまとめて記述する必要があります
- View 選択欄で View を追加・選択
- States 欄で、この View に含める State を選択
Sync with linksを選択した場合、Links での選択経路に含まれる State が自動で選択される
- Links 欄で、この View に含める遷移経路を選択
- Preview 欄に、選択中の View の遷移図と UML が出力される
- その他
- Export > Markdown で、 GitLab Wiki など、PlantUML 対応の Markdown で使用できる形で全 View を一括出力できる
- Export > Project でエクスポートしておいて、Import > Project で次回利用が可能
- Coverage から、全 View における各 Link の出現回数を確認できる
以上
まだまだ不便な点はありますが、とりあえず自分で使いたかった用途では使える形になったので公開しました。
現状、UMLの描画は PlantUML Web Server を使ってやってますが、ローカルサーバを使えるようにできたらいいかなとは思ってますー。
