メインコンテンツまでスキップ

図について記す

状況によって使い分ける構成図

図作成ツールについて比較

図の種類について記載がある。

  • Draw.io
  • PlantUML
  • Mermaid

plantUML完全ガイド

参考URL

PlantUML とは

以下のような図をテキストで素早く描くためのオープンソースプロジェクト。
PlantUMLは**DSL(ドメイン特化言語)**でUMLの図を描く

VS Codeでの見方

Option + D で見ることができる。

PlantUML 必用なもの

PlantUMLの実行には、Javaの実行環境が必要。

使い方ガイド
使い方ガイド(基本の書き方)


ここからは各図について説明する ※大事なのは全部を使うのが正解というわけではなく、そのプロジェクトに応じて使うものとのこと。

各図についての参考

ステレオタイプ

クラス図などで、モデル要素の意味を拡張するもの。ギルメットによるラベル表記と、アイコン表記がある。

UML(Unified modeling Language)

共有することの難しさを毎日感じてる場合、UML図を記載するとはかどる可能性がある このような記法を統一したものをUMLという

シーケンス図 / Sequence diagram ユースケース図 / Usecase diagram クラス図 / Class diagram アクティビティ図 / Activity diagram コンポーネント図 / Component diagram 状態遷移図 / State diagram オブジェクト図 / Object diagram

名前説明
クラス図クラスの定義、関連付けなどのクラス構造をあらわす
オブジェクト図インスタンス(オブジェクト)の具体的な関係をあらわす
パッケージ図クラスなどがどのようにグループ分けされているかをあらわす
コンポーネント図処理を構成する複数のクラスを1つのコンポーネントとみなし、その内部構造と相互関係をあらわす
複合構造図複数クラスを内包するクラスやコンポーネントの内部構造をあらわす
配置図システムを構成する物理的な構造をあらわす
ユースケース図利用者や外部システムからの要求に対してシステムがどのような振る舞いをするかをあらわす
アクティビティ図システム実行時における一連の処理の流れや状態遷移をあらわす。フローチャート
状態マシン図イベントによって起こるオブジェクトの状態遷移をあらわす
シーケンス図オブジェクト間のやりとりを時系列にそってあらわす
コミュニケーション図オブジェクト間の関連とそこで行われるメッセージのやりとりをあらわす
相互作用概要図ユースケース図やシーケンス図を構成要素としてより大枠の処理の流れをあらわす
タイミング図オブジェクトの状態遷移を時系列であらわす

UML は大きく 振る舞い図(Behavior) と 構造図(Structure) に分類される

PlantUML Cheat Sheet

 種類がBehavior

ユースケース図

PlantUML: Use Case ユースケース図は、要求される機能を表現します。

ステートチャート図

PlantUML: State オブジェクトの状態を表現 ステートチャート図はシステムの動的性質をモデル化するために使用されます。イベントが発生したときにオブジェクトすべての可能な状態を記述します。そのため、このもっとも重要な目的は、オブジェクト動作の開始から終了までのライフタイムをモデル化すること

アクティビティ図

PlantUML: Activity プロセスの状態を表現 アクティビティ図はシステム実行時における一連の処理の流れや状態遷移をあらわす。フローチャートのようなもの

シーケンス図

PlantUML: Sequence

シーケンス図はオブジェクト間のやりとりを時系列にそってあらわすもの

オブジェクトごと上から下へ時系列になっています。矢印は形の違いで意味がある。 ツールとして一番有名なのはdrawio


種類がStructure

構造図は、システムの静的な構造や実装の物理的な要素を表現する

クラス図(Class)

PlantUML: Class 論理的なビューを表現

オブジェクト図(Object)

PlantUML: Object 論理的なビューを表現

コンポーネント図(Component)

参考URL PlantUML: Component コンポーネントの依存関係を表現 ※UML2.0においてコンポーネントという用語は、システムの他の部分とインターフェースを介した接続が可能な独立したシステムやサブシステムを示すクラスのモジュールを指す。

パッケージ図(Component)

PlantUML: Component パッケージの依存関係を表現

配置図(Component)

システムの物理的な配置を表現


ER図(Entity Relationship)

ER図は実体関連モデルDBの関連モデル ER図基本 TypeORMからER図を生成