はじめに

最近設計する事が多いのですが、自分の脳内整理用だったり、認識合わせ用によく図を作っています。
スピードが必要だったり、変更が加わる物なので楽に更新できるこんな感じの要件で選定しています。

設計時に書ける事
コードで手早く書ける事
クオリティや柔軟性は重視しない

それぞれのシーンで個人的に使ってるツールを紹介します。

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があるので気になる方は試してみてはいかがでしょうか。

設計時に使う図形描画系ツールの紹介

はじめに

ER図

erd

plantuml

設計フェーズではないなら

tbls

Mysql Workbench

フローチャート

mermaid

plantuml

シーケンス図

mermaid

plantuml

他にも

所感