実際の動作を見る
コンポーネント図の例
同じツールに4つの依頼。以下の図はすべて実際に生成されたものです。
入力する内容
チェックアウトUIがチェックアウトオーケストレーターを呼び出すコンポーネント図。オーケストレーターはカート、料金計算、決済、在庫、注文の各コンポーネントを利用し、注文コンポーネントはレシートコンポーネントにデータを送信する。
次に試す決済前に不正検知コンポーネントを追加料金計算の横にプロモーションコンポーネントを追加
制御システムのブロック図 · Ogata / standard controls textbook convention · schematex-blockdiagram
生成された図
コンポーネント図とは
コンポーネント図は、ソフトウェアシステムの主要な構成要素と、それらの間の依存関係を示します。各要素に、リクエスト処理、ビジネスロジック、永続化、レンダリング、外部プロバイダー連携などの明確な責務を割り当てます。
システム境界が決まった後、クラスレベルの詳細が必要になる前に使用します。優れたコンポーネント図は、どのコンポーネントが責務を持ち、他のコンポーネントと連携するためにどのインターフェースを使うのかを明確にします。
- Standard
- Ogata / standard controls textbook convention
- Engine
- schematex-blockdiagram
- Editable
- Double-click text, drag nodes
- Export
- SVG · PNG · PDF
利用者
コンポーネント図を使う人
アーキテクチャレビューにおけるコンポーネントの責務と依存関係の境界。
実装可能な単位に分割したチェックアウト、レポート、通知のワークフロー。
システムを変更する前に理解しておくべきサービスとアダプターの簡潔な全体像。
使い方
3ステップでコンポーネント図を作成する方法
01
説明する
まずは1段落で十分です。
“チェックアウトUIがチェックアウトオーケストレーターを呼び出すコンポーネント図。オーケストレーターはカート、料金計算、決済、在庫、注文の各コンポーネントを利用し、注文コンポーネントはレシートコンポーネントにデータを送信する。”
02
図を確認
最適なエンジンで描画します。
03
変更点を伝える
編集のたびにバージョンを保存します。
決済前に不正検知コンポーネントを追加
V2 · DRAWN FROM V1, NOTHING RETYPEDよくある質問
よくある質問
コンポーネント図とは何ですか？
コンポーネント図は、インターフェース、依存関係、連携を含む、ソフトウェアシステムの主要コンポーネント間の構造的な関係を示します。
コンポーネント図はいつ使いますか？
アーキテクチャ設計、システムドキュメントの作成、またはソフトウェアシステムやサービス内の責務についてチームで合意する必要があるときに使用します。
コンポーネント図には何を含めますか？
意味のある責務を持つコンポーネント、提供または要求するインターフェース、データストア、重要な外部サービスを含めます。主要な構造が分かりにくくなる細かなヘルパーは避けます。
コンポーネント間の関係はどう示しますか？
インターフェースに依存するコンポーネントから、そのインターフェースを提供するコンポーネントまたは外部サービスへ、方向付きの接続線を引きます。依存関係が明らかでない場合は、接続線にラベルを付けます。
関連ツール
