Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What are the problem?

posted at

updated at

Organization

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

はじめに

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

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

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

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

erd-er.png

シンプルで良い感じです。
また、リリース後に

  • カナが要らなくなったので削除
  • 注文をキャンセルできるようにする

のような変更があった場合、色を変えて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

erd-er-diff.png

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

plantuml-er.png

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

番外辺ですが、途中からプロジェクトに入ったなど新規の設計フェーズではないなら使うツールも変わります。

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

mermaid-flowchart.png

plantuml

正式にはアクティビティ図ですが、plantumlを利用して流れを図式化する事もできます。

@startuml
:購入リクエスト;
if (在庫があるか) then (Yes)
  if (決済完了したか) then (Yes)
    :完了;
    kill
  else (No)
    :エラー表示;
    kill
  endif
else (No)
  :エラー表示;
  kill
endif
@enduml

plantuml-flowchart.png

シーケンス図

認証フローなど、システム間の通信の動作などを図式化したい時にシーケンス図を作ります。

mermaid

mermaid sequence diagramを利用して作成できます。
簡単な例ですが、これもシンプルで書きやすいです。

sequenceDiagram

Alice->>Bob: 公開鍵要求
Bob->>Alice: 公開鍵
Alice->>Alice: 公開鍵でデータを暗号化
Alice->>Bob: 暗号化したデータ
Bob->>Bob: 暗号化したデータを秘密鍵で複合化

mermaid-sequence.png

plantuml

plantumlでも作成できます。
使い勝手はmermaidとあまり差はないので好みで選んで良いと思います。

@startuml
Alice --> Bob: 公開鍵要求
Bob --> Alice: 公開鍵
Alice --> Alice: 公開鍵でデータを暗号化
Alice --> Bob: 暗号化したデータ
Bob --> Bob: 暗号化したデータを秘密鍵で複合化
@enduml

plantuml-sequence.png

他にも

mermaidは他にもクラス図状態遷移図ガントチャート円グラフなどに対応しています。
plantumlはもっと多くて、それ以外にもユースケース図オブジェクト図コンポーネント図タイミング図、変わった物だとワイヤーフレームまでかなり多くの範囲をカバーしています。

所感

クオリティや柔軟性を重視するならdraw.ioGoogle図形描画などを使ったりしますし、使用しているツールなどに付属する図形吐き出し機能があるのであればその方が簡単で綺麗にできると思います。
作成時間や更新の手間と必要なクオリティを考慮して適切なツールを選ぶといいでしょう。

後半はほぼmermaidとplantumlの紹介みたいになってしまいましたが、どれもそれぞれ良いところがあります。
markdownのシンタックスハイライトに対応してたり、live editorがあるので気になる方は試してみてはいかがでしょうか。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
9
Help us understand the problem. What are the problem?