はじめに
最近設計する事が多いのですが、自分の脳内整理用だったり、認識合わせ用によく図を作っています。
スピードが必要だったり、変更が加わる物なので楽に更新できるこんな感じの要件で選定しています。
- 設計時に書ける事
- コードで手早く書ける事
- クオリティや柔軟性は重視しない
それぞれのシーンで個人的に使ってるツールを紹介します。
ER図
ER図はデータベースの構造を図にした物です。
APIを設計時に、どのようなデータを保持していて、APIで何ができるか、何ができないか、できないなら何を追加するべきかを図をみながら判断しやすくなります。
erd
いろいろなツールで作成できますが、書きやすくカラム毎に色も変更できるので私はerdを利用しています。
これはerdでユーザーが商品を注文するサンプルです。
title {label: "example", size: "20"}
[users] {bgcolor: "#ffffff", label: "ユーザー"}
*id
name {label: "名前"}
created_at {label: "作成日時"}
updated_at {label: "更新日時"}
[goods] {bgcolor: "#ffffff", label: "商品"}
*id
name {label: "名前"}
created_at {label: "作成日時"}
updated_at {label: "更新日時"}
[orders] {bgcolor: "#ffffff", label: "注文"}
*id
+users_id {label: "ユーザーID"}
+goods_id {label: "商品ID"}
created_at {label: "作成日時"}
updated_at {label: "更新日時"}
users 1--* orders
goods 1--* orders
シンプルで良い感じです。
また、リリース後に
- カナが要らなくなったので削除
- 注文をキャンセルできるようにする
のような変更があった場合、色を変えてdiffのような表現ができるので説明がしやすくなります。
title {label: "example", size: "20"}
[users] {bgcolor: "#ffffff", label: "ユーザー"}
*id
name {label: "名前"}
kana {label: "カナ", bgcolor: "#ffeeee"}
created_at {label: "作成日時"}
updated_at {label: "更新日時"}
[goods] {bgcolor: "#ffffff", label: "商品"}
*id
name {label: "名前"}
created_at {label: "作成日時"}
updated_at {label: "更新日時"}
[orders] {bgcolor: "#ffffff", label: "注文"}
*id
+users_id {label: "ユーザーID"}
+goods_id {label: "商品ID"}
created_at {label: "作成日時"}
updated_at {label: "更新日時"}
deleted_at {label: "削除日時", bgcolor: "#eeffee"}
users 1--* orders
goods 1--* orders
plantuml
また、plantumlでもER図を作成できます。
定義によっては配置が変わったりする若干のクセがあるように感じましたが、メジャーなツールだし腐らないのでこれも良いかなと思います。
@startuml
entity "orders 注文" as orders {
* id
--
+users_id: ユーザーID
+goods_id: 商品ID
--
created_at 作成日時
updated_at 更新日時
}
entity "users ユーザー" as users {
* id
--
name 名前
created_at 作成日時
updated_at 更新日時
}
entity "goods 商品" as goods {
* id
--
name 名前
created_at 作成日時
updated_at 更新日時
}
goods ||..|{ orders
users ||..|{ orders
@enduml
設計フェーズではないなら
番外辺ですが、途中からプロジェクトに入ったなど新規の設計フェーズではないなら使うツールも変わります。
tbls
ワンコマンドで実DBに接続してER図を生成してくれるtblsを使って作ります。
システム概要把握のために一番最初にやるかもしれません。
*github k1LoW/tbls https://github.com/k1LoW/tbls より引用
Mysql Workbench
もう少し綺麗な図が欲しい場合はMysql WorkbenchでER図を自動生成後、
エディタで位置を整えたりする事で綺麗なER図ができます。
*Mysql Workbench公式 https://www.mysql.com/jp/products/workbench/design/ より引用
フローチャート
複雑なシステムを設計する際に、流れを図式化できるフローチャートを作って説明する事ができます。
mermaid
私はmermaid flowchatを利用しています。
シンプルで書きやすいです。
graph TD
Buy[購入リクエスト]
IfStockExists{在庫があるか}
IfPaymentSuccess{決済完了したか}
ShowError[エラー表示]
Complete[完了]
Buy --> IfStockExists
IfStockExists -->|Yes| IfPaymentSuccess
IfStockExists -->|No| ShowError
IfPaymentSuccess -->|Yes| Complete
IfPaymentSuccess -->|No| ShowError
plantuml
正式にはアクティビティ図ですが、plantumlを利用して流れを図式化する事もできます。
@startuml
:購入リクエスト;
if (在庫があるか) then (Yes)
if (決済完了したか) then (Yes)
:完了;
kill
else (No)
:エラー表示;
kill
endif
else (No)
:エラー表示;
kill
endif
@enduml
シーケンス図
認証フローなど、システム間の通信の動作などを図式化したい時にシーケンス図を作ります。
mermaid
mermaid sequence diagramを利用して作成できます。
簡単な例ですが、これもシンプルで書きやすいです。
sequenceDiagram
Alice->>Bob: 公開鍵要求
Bob->>Alice: 公開鍵
Alice->>Alice: 公開鍵でデータを暗号化
Alice->>Bob: 暗号化したデータ
Bob->>Bob: 暗号化したデータを秘密鍵で複合化
plantuml
plantumlでも作成できます。
使い勝手はmermaidとあまり差はないので好みで選んで良いと思います。
@startuml
Alice --> Bob: 公開鍵要求
Bob --> Alice: 公開鍵
Alice --> Alice: 公開鍵でデータを暗号化
Alice --> Bob: 暗号化したデータ
Bob --> Bob: 暗号化したデータを秘密鍵で複合化
@enduml
他にも
mermaidは他にもクラス図、状態遷移図、ガントチャート、円グラフなどに対応しています。
plantumlはもっと多くて、それ以外にもユースケース図、オブジェクト図、コンポーネント図、タイミング図、変わった物だとワイヤーフレームまでかなり多くの範囲をカバーしています。
所感
クオリティや柔軟性を重視するならdraw.ioやGoogle図形描画などを使ったりしますし、使用しているツールなどに付属する図形吐き出し機能があるのであればその方が簡単で綺麗にできると思います。
作成時間や更新の手間と必要なクオリティを考慮して適切なツールを選ぶといいでしょう。
後半はほぼmermaidとplantumlの紹介みたいになってしまいましたが、どれもそれぞれ良いところがあります。
markdownのシンタックスハイライトに対応してたり、live editorがあるので気になる方は試してみてはいかがでしょうか。