Draw.io Integrationのチップス
海洋ロボコンをやってた人です。
今回はVScodeの拡張機能であるDraw.io Integratinのチップスとして、学んだことを備忘録として記載しておきます。
背景として、UMLモデリングを学ぶことで
-
設計の可視化:
ソフトウェアアーキテクチャやデザインを視覚化し、理解しやすくなる。 -
コミュニケーションの促進: チームメンバーやステークホルダー間でのコミュニケーションの助けになる。
-
変更管理: システムの変更や追加要件が生じた場合、UMLを使用して変更の影響を評価し、変更を迅速かつ効果的に実施できる。
-
再利用性の向上: クラスやコンポーネントのモデリングにより、ソフトウェアの再利用が容易になる。
-
テストとデバッグの効率向上: シーケンス図やアクティビティ図を使用してシステムの挙動を理解し、効果的なテストケースを設計できる。
などの利点があり、UMLでソフトウェア開発を行う企業がUML仕様の標準化活動に賛同していることから、ソフトウェアスタンダードとなっています。
そのため、ソフトウェア開発をする人はUMLの習得と適切に描く/読める必要があると感じました。
上記に伴い、UML記述が可能なDraw.io Integrationを使ってみたので、まとめることにしたのが経緯になります。
Draw.io Integrationのチップス
Draw.ioIntegrationoはUMLなどを編集、作成をVScode上で可能にした拡張機能です。
拡張機能は「Draw.io Integration」を選択肢、インストールします。
作成するファイル名は「ファイル名.drawio.png」または「ファイル名.drawio.svg」とします。
このような拡張子にすることで、Draw.ioでの編集とpng/svgとしての閲覧が可能になるため、UMLのレビュー効率増加が期待できます。
背景色は Extentions > Draw.io IntegrationのExtension Settings > atlas / kennedyと好きなテーマを選んで変更可能です。
Style/Text/Arrange機能
Shapeをクリック選択すると、右側のパネルでレイアウトを編集できる機能があります。
- Style
Shapeの色、枠線、透明度を編集できる。
Lineを選択した状態で、Styleパネルを選択すると、Lineの始端/終端(Start/End)のレイアウトを変更することもできる。
- Text
TextのPosition、フォントサイズ、Boidなどを編集できる。
Shapeをシングルクリックではなく、ダブルクリックすると文字列全体を選択できる。
- Arrange
Shapeの位置、回転、スケールなど微調整できる。
ショートカット
| 名所 | ショートカットキー | 図形名 |
|---|---|---|
| Rectangle | D | 長方形の図形 |
| Rhombus | R | ひし形の図形 |
| Line | C | 線 |
| Note | S | ノート |
| Text | A | テキスト |
| --- | Ctrl + A | 図形全選択 |
| --- | Ctrl + G | 選択範囲をグルーピング |
| --- | Ctrl + Shift + G | グリッドON / OFF |
UML：(Unified Modeling Language)
UMLとは、ソフトウェアを形式化するための統一的なモデリング言語で、1977年にOMG (Object Management Group)によってバージョン1.0が発表され、現在の最新バージョンは2.5である。
対象を複数の視点で表現するため、UMLには多くの図の定義がされており、UMLを使用すれば、システム開発の上流から下流まで様々な視点のモデルを表現することができる。
代表例として、昨今のソフトウェア開発で頻繁に利用される図は
システムが提供する機能（振る舞い）を表現するユースケース図、静的な構造を表現するクラス図、動的な構造を表現する相互作用図（シーケンス図、コミュニケーション図） やステートマシン図がある。
以下、UMLについて学んだことと、それをDrwa.ioで描いたので、そちらについて記載します。
開発プロセス
開発プロセスとして要求分析 > システム分析 > アーキテクチャ設計 > 詳細設計 > 実装 > テストという流れを取ることが多く、V字モデル、ウォータフォールモデルなどがある。
開発モデルについては、以下が非常に勉強になります。
開発モデル」とは？開発モデルの種類とそれぞれのメリット・デメリットについて比較！
V字モデルを意識したコミュニケーションで、ささやかな幸せを感じることができるかもしれないお話
要求分析
構築システムに対しての要求を分析し、システムで実現する要件を明確にすること。
要求分析の成果物としては「ユースケースモデル」になる。
アーキテクチャ設計
要求分析で整理した機能要求 / 非機能要求を実現するため、システムの全体方針を検討する。
Webアプリケーション開発におけるアーキテクチャ入門
によると、「レイヤ」「DTO（Data Transfer Object）」「MVC（Model・View・Controller）」「トランザクションスクリプト」「DAO（Data Access Object）」などの代表例がある。
レイヤパターンは、システム全体をレイヤに分割しており、「パッケージ図」で表現される。
DAOパターンは、データとのやり取り/IFを提供するデザインパターンで「クラス図」などで表現される。
UML図の種類 (構造図)
初めに、UML図の種類は以下を参考に、13種類ほど存在します。
UMLとは？書き方とクラス図・シーケンス図など10種の図を解説
各用途によって使いどころが異なるため、目的に合わせた図でUMLを描くことが求められますね。
また、UML図を大きく分けると、システム構造を示す構造図、システムの振る舞いを示す振る舞い図の2種類に分類することができます。
なので、まずはシステム構造を示す構造図を示します。
クラス図：Class Diagram
システム内のクラスやその関係を表現するための図で、それに関する情報や振る舞いを示す。
クラス図は抽象的な表現で示しているため、一般にシステム開発のアウトプットとして作成するのはクラス図になります。
最上段にクラス名、中段以降は可視性 属性名: 型 = 初期値と記述する。
可視性(visibility)はシステム内のアクセス可能範囲を定義する要素で、以下の定義になります。
| 記号 | 表現 |
|---|---|
| + | public |
| - | private |
| # | protected |
具体例としては以下のようなイメージ。
クラス図をDraw.ioで描く際、検索窓にclassと打ち込み、「Class2」の図形を利用。
クラス図の書き方は東京大学大学院の機械系演習科目 「実践的シミュレーションソフトウェア開発演習」の自習用教材（以下、東大自主教材と呼ぶ）のクラス図/class diagramsも非常に勉強になります。
オブジェクト図：Object Diagram
クラス図の実体であり、特定の状態や瞬間におけるクラスのインスタンスやオブジェクトの関連性を示すために使用される。
オブジェクト図はオブジェクト名: クラス名と記述し、下線が付きます。
オブジェクト図とクラス図の違いについては、オブジェクト図とクラス図の違いなどの資料を参照するとより理解が深まると思います。
具体例としては以下のようなイメージ。
オブジェクト図をDraw.ioで描く際、「Object」の図形を利用。
パッケージ図：Package Diagram
複数のモデル要素をパッケージでグルーピングし、大きな視点によりシステムを分割する。
これにより、システム全体の構造を俯瞰することができる。
パッケージ図を構成する主なモデル要素は「パッケージ」と「依存関係」。
パッケージ間の依存関係は点線で結ぶ。
パッケージ図の書き方については、以下が非常に勉強になります。
パッケージ図をDraw.ioで描く際、「package」の図形を利用。
コンポーネント図：Component Diagram
再利用性の高いソフトウェアは多くのコンポの組み合わせで成り立っている。
コンポーネント図では、コンポーネント自体の入れ子構造や、コンポーネント間の繋がりを表現できる。
UML図の種類 (振る舞い図)
システムの振る舞いを示す振る舞い図を以下に示します。
ユースケース図：Use Case Diagram
システム化対象の機能と、その機能に関する外部要素を可視化。
ユースケース図を活用することで、システムが提供するサービスの全体像を利害関係者間で確認することができる。
ユースケース図で洗い出した機能は、分析工程(構造や振る舞いの検討)を開始するための基点となる。
誰が（アクターの候補）、何をするのか（ユースケースの候補）という視点でユースケースの要求分析を進める。
また、最初から完璧なユースケース図は作れないので、PJを進める中で打ち上がってくる要求や、レビューを通じて改善する認識で進める。
-
「ユースケース」
検討対処のシステムがアクターに対して提供する機能/振る舞いのこと。
ユースケース名は動詞で表現する。 -
「アクター」
検討対象のシステムの利用者のこと。ユーザだけでなくHWや外部システムといった人以外の要素も含む。 -
「包含(ほうがん)」
一つのユースケースが別のユースケースを含んでいることを示す関係。
これにより、一つのユースケースが他のユースケースの機能を再利用できる。ヘッダーファイルのようなイメージ。 -
「拡張」
ベースのユースケースに対して、条件付きで他のユースケースを利用することを示す関係。
-
「汎化」
ユースケース間の「is - a」の関係を表現したもので、複数のユースケースやアクター間の共通の機能や特性を表現するための関係。
通常、一つのユースケースやアクターが他のユースケースやアクターから派生していることを示す。 -
使用する工程
要求分析
具体例としては以下のようなイメージ。
ユースケース図をDraw.ioで描く際、「General」パネルを利用した。
シーケンス図：Sequence Diagram
オブジェクトの相互作用を示すUMLモデルで、ライフライン(LifeLine)がオブジェクトの存続期間を表し、相互作用においてメッセージの流れや時間的な順序を視覚的に表現できる。
-
使用する工程
アーキテクチャ設計、詳細設計など
シーケンス図にはライフライン / 実行仕様 / 停止 / メッセージの4種類が存在する。
| 種類 | 表現 | 意味 |
|---|---|---|
| ライフライン | オブジェクト名： クラス名 | オブジェクトトクラスの表現 |
| 実行仕様 | □ | ライフラインでの処理実行 |
| 停止 | × | ライフラインの破棄 |
| メッセージ | ➡ | 同期（Synchronous Message） |
| メッセージ | → | 非同期 （Asynchronous Message） |
| メッセージ | ⇢ | 応答 (Reply Message) |
| メッセージ | ➻ | ファウンド (Found Message) |
同期は「頭に塗りつぶされた三角形」。
非同期は「頭に矢印がついた実線」。
応答は「頭に矢印がついた破線」でライフラインから送り手への戻り値を表す。
ファウンドは「送信側を黒丸とした頭に矢印がついた実線」で図にない送り手から送信されたことを表す。
具体例としては以下のようなイメージ。
シーケンス図をDraw.ioで描く際、「LifeLine」の図形を利用。
また、こちらはROS 2 Design: Actionsを参考に記述。
また、結合フラグメントを使用することで、シーケンス図中にループ(Loop)、オルタナティブ(Alternatives)、オプション(Option)などを追記することができます。
シーケンス図の書き方は東大自主教材のシーケンス図/Sequence Diagramsも非常に勉強になります。
コミュニケーション図：Communication Diagram
システム内のオブジェクトが相互にやり取りする振る舞い / メッセージをライフライン上に矢印で表現する図。
シーケンス図は時系列で相互作用を表現するのに対し、コミュニケーション図ではライフラインのつながりを強調して表現するという点で異なります。
長方形のライフライン(LifeLine)は役割名：分類子名で記述され、ライフライン間のやり取りを表現する実線はシーケンス番号: メッセージ名で記述されます。
-
使用する工程
アーキテクチャ設計、詳細設計など
コミュニケーション図の書き方については、以下が非常に勉強になります。
コミュニケーション図をDraw.ioで描く際、「frame」の図形を利用。
上記はHow to Create a UML Communication Diagramを参考に記述しています。
ステートマシン図：State Machine Diagram
システムやクラスの「状態」と「遷移」を表現するための図。
アクティビティ図：Activity Diagram
システムの流れを、アクションなどを用いて「意味のある一連の流れ」としてまとめる。
業務フローの記述、処理の分岐や並列処理、処理の同期などを表現できる。
UML共通要素
-
ノート
モデル要素にコメントを追加する表現
-
フレーム
可視化対象の図を矩形で囲み、種類と名称を表現。
-
ステレオタイプ
あるモデル要素のグループを意味づけによって分類できる。ギュメ<< >>で括って表現。
-
メタ属性
{abstract} というメタ属性を追加することで、対象のクラスが抽象クラスであることを表現。
-
制約
モデル要素に対して制約（条件や制限など）を付加することができる。
ex: 年齢 {値は20以上}
Discussion