Visual Paradigm AI チャットボットを使用すると、アプリケーション、そのユーザー、および外部システムとの相互作用に関する自然言語の説明から C4 システムコンテキスト図を作成することが可能になります。ただし、AI によって生成された図は、生成後も編集可能で保守可能である場合に最も有用です。

このガイドでは、C4-PlantUML を使用して食品配送プラットフォームのコンテキスト図を生成するエンドツーエンドのワークフローを示します。AI によって生成された図から編集可能な PlantUML コードへ移行し、VPasCode でモデルを洗練させ、Visual Paradigm Online で視覚的に編集を続ける方法を学びます。このアプローチは、AI 支援モデリングの速度、コードとしての図の柔軟性、およびグラフィカルな図エディタの利便性を組み合わせたものです。

Visual Paradigm は、自然言語によるアーキテクチャ記述を編集可能な C4 コンテキスト図に変換するための実用的なワークフローを提供します：

1. Visual Paradigm AI チャットボットでシステムを記述する。

   

2. C4 システムコンテキスト図を生成し、確認する。

3. 結果を C4-PlantUML として VPasCode で開く。

   

4. PlantUML コードを編集して図を変更する。

   

5. 必要に応じて、結果を Visual Paradigm Online に送信する。

   

6. ドラッグ＆ドロップの図エディタを使用して、図を視覚的に変更する。

これにより、2 つの編集パスが提供されます：

• コードベースの編集：VPasCode および C4-PlantUML

• GUI ベースの編集：Visual Paradigm Online 図エディタ

Visual Paradigm の AI チャットボットは、C4 システムコンテキスト、コンテナ、コンポーネント、およびデプロイメント図をサポートしています。また、要素の追加、削除、名前の変更、再接続などの自然言語コマンドを通じて、生成された図を洗練させることもできます。

1. C4 コンテキスト図を理解する

C4 コンテキスト図は、ソフトウェアシステムの最高レベルのビューです。それは以下を示します：

• 対象となるシステム

• 人間のユーザーと組織的なアクター

• 外部ソフトウェアシステム

• これらの要素間の重要な関係

• 各関係がどのように機能するかについての短い説明

通常、内部サービス、データベース、クラス、API、またはインフラストラクチャの詳細は表示されません。これらはより低レベルの C4 図に属します。

例えば、オンライン食品配送プラットフォームのコンテキスト図には以下が含まれる可能性があります：

• 顧客

• レストランマネージャー

• 配送ドライバー

• 決済プロバイダー

• 地図および位置情報サービス

• 通知サービス

• フードデリバリープラットフォーム

中央システムは視覚的な焦点として維持されるべきです。外部の人物やシステムは、その周囲に配置されるべきです。

2. 優れたAIプロンプトを準備する

生成される図の品質は、チャットボットに提供されるアーキテクチャ記述に大きく依存します。

有用なプロンプトは以下を指定します：

• システム名

• システムの目的

• 使用する人々

• 通信する外部システム

• それらの間の関係

• 希望するC4図のレベル

• 希望する出力形式

• 含めるべきでないもの

プロンプトの例

オンラインフードデリバリープラットフォームのためのC4システムコンテキスト図を作成してください。

対象システム:
フードデリバリープラットフォーム — 顧客がレストランを検索し、注文を行い、支払いを行い、配送を追跡できるようにします。

人物:
1. 顧客 — レストランを検索し、注文を行い、支払いを行い、配送を追跡します。
2. レストランマネージャー — メニューを管理し、注文を受け付け、注文ステータスを更新します。
3. 配送ドライバー — 配送ジョブを受け付け、配送の進捗状況を更新します。
4. 運用管理者 — プラットフォームのアクティビティを監視し、サポート問題を処理します。

外部システム:
1. 決済プロバイダー — 顧客の支払いを承認し、決済を行います。
2. 地図および位置情報サービス — 住所、ルート、配送場所を提供します。
3. 通知サービス — メール、SMS、プッシュ通知を送信します。

関係:
- 顧客はフードデリバリープラットフォームを使用して、レストランを検索し、注文を行い、支払いを行い、配送を追跡します。
- レストランマネージャーはフードデリバリープラットフォームを使用して、メニューを管理し、注文を処理します。
- 配送ドライバーはフードデリバリープラットフォームを使用して、配送ジョブを受け取り、配送ステータスを更新します。
- 運用管理者はフードデリバリープラットフォームを使用して、運用を監視し、問題を解決します。
- フードデリバリープラットフォームは決済プロバイダーを使用して、支払いを承認し、決済を行います。
- フードデリバリープラットフォームは地図および位置情報サービスを使用して、ルートを計算し、場所を追跡します。
- フードデリバリープラットフォームは通知サービスを使用して、通知を送信します。

クリーンなC4システムコンテキスト図を生成してください。内部コンテナ、コンポーネント、データベース、クラス、またはデプロイメントインフラストラクチャは表示しないでください。簡潔な関係ラベルを使用してください。

内部詳細を除外するという明示的な指示は重要です。これがないと、AIジェネレーターはコンテキストレベルとコンテナレベルの情報を混在させた図を生成する可能性があります。

3. Visual Paradigm AIチャットボットで図を生成する

Visual Paradigm AIチャットボットを開き、新しい会話または図生成セッションを開始します。

インターフェースおよびサブスクリプションエディションによっては、チャットボットが図タイプのセレクターを提供する場合があります。以下を選択してください：

• C4モデル

• システムコンテキスト図

その後、プロンプトを入力します。

Visual Paradigmの一般的なチャットボットワークフローは以下の通りです：

1. 図を記述する。

2. AIに初期モデルを生成させる。

3. 結果を確認する。

4. 自然言語コマンドでそれを洗練させる。

5. エクスポートするか、他のVisual Paradigmツールで編集を続ける。

最初の結果を確認する

図に以下の要素が含まれているか確認する:

• 中央システムがちょうど 1 つあること

• 必要なすべての人物

• 関連するすべての外部システム

• 正しい関係の方向

• 簡潔な関係の説明

• 不要な内部サービスやデータベースがないこと

• 一貫した命名

• 読みやすいレイアウト

生成された図は出発点であり、アーキテクチャレビューの代わりではありません。

4. 会話を通じて図を洗練させる

チャットボットは通常の言語を使用して図を修正できます。

要素を追加する

顧客の問題を調査し、返金処理を行うためにフードデリバリープラットフォームを使用するカスタマーサポートエージェントを追加する。

外部システムを追加する

不審な支払いを評価するためにフードデリバリープラットフォームが使用する外部の不正検出サービスを追加する。

要素の名前を変更する

「通知サービス」を「メッセージングおよび通知サービス」に名前を変更する。

関係を変更する

配達ドライバーとフードデリバリープラットフォームとの関係を以下に変更する:
「配達割り当てを受け取り、配達状況の更新を送信する。」

要素を削除する

図から運用管理者を削除する。

レイアウトを改善する

図を再配置し、人物が上部に、外部システムが下部に表示され、フードデリバリープラットフォームは中央に残るようにする。

図を簡素化する

これを厳格な C4 システムコンテキスト図に簡素化する。実装の詳細、データベース、API、マイクロサービス、および内部コンポーネントを削除する。

整合性レビューを依頼する

図を、欠落している関係、曖昧なラベル、重複するシステム、および C4 コンテキスト図に属さない要素についてレビューする。

AI チャットボットのドキュメントでは、この反復アプローチについて説明しており、支払いゲートの追加、要素の名前変更、関係の変更、および図のリファクタリングに関するコマンドも含まれています。

パート 1: コード編集のために VPasCode で図を開く

5.「VPasCode で開く」または「VPasCode で編集」を使用する

図を生成して改良した後、以下のようなラベルのアクションを使用してください:

• VPasCode で開く

• VPasCode で編集

• コードを開く

• 編集用のコードを生成

正確なボタンラベルは、現在のインターフェースによって異なる場合があります。

これにより、図のコードが VPasCode に転送され、ライブレンダリングされたプレビューを見ながらテキストとして図を編集できます。Visual Paradigm は VPasCode を、PlantUML、C4 モデル、Mermaid、Graphviz、およびその他の構文形式をサポートするブラウザベースのコードとしての図エディタと説明しています。

生成されたコードは通常、C4-PlantUML を使用し、以下を含める必要があります:

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
...
@enduml

生成されたスクリプトは、異なる include URL または内部でサポートされているライブラリバージョンを使用する場合があります。変更する特別な理由がない限り、VPasCode が生成する include をそのまま維持してください。

6. C4-PlantUML の構造を理解する

一般的な C4-PlantUML コンテキスト図には、以下の部分が含まれます:

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

LAYOUT_LEFT_RIGHT()

Person(customer, "顧客", "食事を注文し、配送を追跡します。")
System(platform, "フードデリバリープラットフォーム", "顧客が食事を注文し、配送を追跡できるようにします。")
System_Ext(payment, "決済プロバイダー", "決済を承認し、決済を処理します。")

Rel(customer, platform, "注文を置き、配送を追跡します")
Rel(platform, payment, "決済を承認し、決済を処理します")

@enduml

主要な要素タイプ

最初の引数は内部識別子です。2番目は表示名です。3番目は説明です。

7. VPasCodeで図を編集する

VPasCodeは通常以下を表示します:

• エディターペイン内のソースコード

• プレビューペイン内のレンダリングされた図

• エクスポート、共有、コピー、または結果を別のVisual Paradigm製品で開くためのアクション

VPasCodeはライブレンダリングを提供し、直接コード編集をサポートします。また、コードをエディターに貼り付けたときにサポートされている図の形式を検出することもできます。

例：改善されたC4-PlantUMLコード

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

title 食品デリバリープラットフォーム — システムコンテキスト

LAYOUT_LEFT_RIGHT()
SHOW_LEGEND()

Person(customer, "顧客",
  "レストランを検索し、注文し、支払いを行い、配送を追跡します。")

Person(restaurantManager, "レストラン管理者",
  "メニューを管理し、注文を受け付け、注文ステータスを更新します。")

Person(deliveryDriver, "配送ドライバー",
  "配送割り当てを受け取り、配送の進捗を更新します。")

Person(operationsAdmin, "運用管理者",
  "プラットフォームの運用を監視し、サポート問題を処理します。")

System(platform, "食品デリバリープラットフォーム",
  "食品の注文、支払い、レストラン管理、配送追跡を可能にします。")

System_Ext(paymentProvider, "決済プロバイダー",
  "顧客の支払いを承認し、決済を行います。")

System_Ext(mapService, "地図および位置情報サービス",
  "住所、ルート、位置データを提供します。")

System_Ext(notificationService, "通知サービス",
  "メール、SMS、プッシュ通知を送信します。")

Rel(customer, platform,
  "レストランを検索し、注文し、支払いを行い、配送を追跡します")

Rel(restaurantManager, platform,
  "メニューを管理し、レストランの注文を処理します")

Rel(deliveryDriver, platform,
  "配送ジョブを受け取り、配送ステータスを提出します")

Rel(operationsAdmin, platform,
  "運用を監視し、サポート問題を処理します")

Rel(platform, paymentProvider,
  "支払いを承認し、決済を行います")

Rel(platform, mapService,
  "ルートを計算し、配送場所を追跡します")

Rel(platform, notificationService,
  "注文、支払い、配送の通知を送信します")

@enduml

8. 共通のコードレベルの変更を行う

システム名を変更する

System(platform, "食事デリバリープラットフォーム",
  "食品の注文と配送を調整します。")

新しい人物を追加する

Person(customerSupport, "カスタマーサポート担当者",
  "顧客の問題を調査し、返金処理を行います。")

Rel(customerSupport, platform,
  "問題を調査し、返金を処理します")

新しい外部システムを追加する

System_Ext(fraudService, "不正検出サービス",
  "疑わしい支払い活動を評価します。")

Rel(platform, fraudService,
  "支払い取引の不正リスクをチェックします")

関係の方向を変更する

Rel(paymentProvider, platform,
  "支払い承認および決済結果を返す")

関係の方向を使用して、主要な依存関係または相互作用を表します。方向がアーキテクチャ上重要でない場合は、一貫した規約を選択し、図全体に適用してください。

レイアウトを変更

C4-PlantUML は、以下のようなレイアウトヒントをサポートしています:

LAYOUT_LEFT_RIGHT()

または:

LAYOUT_TOP_DOWN()

方向ヒントを使用して配置にも影響を与えることができます:

Lay_R(customer, platform)
Lay_D(platform, paymentProvider)

レイアウトヒントは控えめに使用してください。手動制約が多すぎると、図の保守が困難になる可能性があります。

9. VPasCode AI 支援機能を使用する

一部の VPasCode エディションでは、AI を活用した図の修正やコードエラーの修正が提供されています。このツールは、以下のような指示を受け付けることができます：

プラットフォームと決済プロバイダーの間に外部の不正検出サービスを追加する。

または：

PlantUML の構文エラーを修正し、現在の図の構造を維持する。

VPasCode は、AI を活用した図の修正、エラー診断、翻訳機能もサポートしていると文書化されていますが、利用可否はエディションやサブスクリプションによって異なる場合があります。

10. PlantUML 図を検証する

図を Visual Paradigm Online に送信する前に、構文とアーキテクチャの両方を検証してください。

構文チェックリスト

• スクリプトは以下で始まります：@startuml.

• スクリプトは以下で終わります：@enduml.

• C4-PlantUML ライブラリが含まれています。

• すべての関係は、既存の識別子を参照しています。

• 識別子には、構文を壊す可能性のあるスペースや句読点は含まれていません。

• 引用符はバランスが取れています。

• 説明は過度に長くありません。

• プレビューはエラーなしでレンダリングされます。

C4 モデリングチェックリスト

• 明確に特定された関心のあるシステムが 1 つあります。

• ユーザーはソフトウェアシステムではなく、人としてモデル化されています。

• 外部アプリケーションは外部システムとしてモデル化されています。

• 内部コンテナはコンテキスト図には含まれません。

• 関係は意味のある相互作用を記述します。

• この図はソースコードを読まなくても理解できます。

• 用語はプロジェクトのアーキテクチャドキュメントと一致しています。

望ましくないシステムコンテキスト図の要素の例

Container(api, "Order API", "Java", "Processes orders")
ContainerDb(database, "Order Database", "PostgreSQL", "Stores orders")

これらはコンテナレベルの要素です。これらは通常、システムコンテキスト図ではなく、C4 コンテナ図に属します。

パート 2: 図を Visual Paradigm Online に送信

11. 「VP Online で編集」または「VP Online 図で編集」を使用

コードバージョンが正しいことを確認した後、以下のようなラベルの付いたアクションを選択してください:

• VP Online で編集

• VP Online 図で編集

• オンラインで開く

• VP Online にエクスポート

正確なラベルはインターフェースのバージョンによって異なる場合があります。

Visual Paradigm のエコシステムは、生成された図を AI チャットボットから VPasCode に移動してコードレベルで洗練させ、その後、従来の図編集のために Visual Paradigm Online に移動するように設計されています。

オンライン図エディタは、以下のような場合に便利です:

• 図形を手動で移動

• 要素のサイズを変更

• コネクタを調整

• 色とフォントを変更

• メモまたは注釈を追加

• タイトルまたは凡例を追加

• プレゼンテーションの書式を適用

• 図の要素を正確に整列

• 共有またはエクスポート用に図を準備する

12. Visual Paradigm Online の GUI を使用して図を修正する

図が Visual Paradigm Online で開かれたら：

要素を移動する

人々と外部システムを、中央システムの周りに明確な配置になるようにドラッグします。

一般的なレイアウトは次の通りです：

• 左側または上部に人々

• 中央にメインシステム

• 右側または下部に外部システム

テキストを編集する

要素をダブルクリックするか、仕様パネルを選択して以下を変更します：

• 名前

• 説明

• ステレオタイプ

• 関係ラベル

名前は短く、説明は有益に保ってください。

関係を編集する

コネクタを選択して以下を行います：

• 方向を変更する

• 関係ラベルを編集する

• 別の要素に再接続する

• 経路を調整する

• 線のスタイルまたは外観を変更する

要素を追加する

図パレットを使用して以下を追加します：

• 人物

• 外部人物

• システム

• 外部システム

• 関係

• 注記

• 境界

コンテキストレベルに属する要素のみを追加してください。

書式を適用

以下を調整することで可読性を向上させることができます：

• フォントサイズ

• 塗りつぶし色

• 枠線の色

• 線の太さ

• 図形のサイズ

• アライメント

• 間隔

• コネクタの経路

意味を伝える手段として色のみを使用しないようにしてください。明確なラベルも併用してください。

13. 推奨されるプレゼンテーションレイアウト

クリーンなコンテキスト図では、以下のような配置が考えられます：

より大きな図の場合：

• メインシステムは中央に配置してください。

• 人々は片側にグループ化してください。

• 外部ソフトウェアシステムは別の側にグループ化してください。

• 関係線の交差を避けてください。

• 関係ラベルは可能であれば水平に保ってください。

• 段落ではなく、短いラベルを使用してください。

• 中央システムの周りに十分な余白を残してください。

パート 3：コード編集と GUI 編集の選択

VPasCode は PlantUML を通じて C4 モデルをサポートし、ライブプレビューを提供しますが、Visual Paradigm Online は従来の視覚的な図編集ワークフローを提供します。

パート 4：推奨されるエンドツーエンドのワークフロー

クイックワークフロー

1. Visual Paradigm AI チャットボットを開く。

2. C4 システムコンテキスト図を選択する。

3. システム、ユーザー、および外部システムを記述する。

4. 図を生成する。

5. チャットボットに内部実装の詳細を削除するよう依頼する。

6. 名前、関係、およびスコープを確認する。

7. 選択 VPasCode で開く.

8. C4-PlantUML ソースを編集する。

9. 結果をレンダリングして検証する。

10. 選択 VP Online で編集.

11. GUI を使用してレイアウトと外観を調整します。

12. 最終図をエクスポートまたは共有します。

責任分担の推奨事項

次のツールを使用してください：AI チャットボット次のために：

• 最初のドラフトの作成

• アーキテクチャの代替案の検討

• 参加者の追加または削除

• 関係記述の言い換え

• 図の抜け漏れを確認する

次のツールを使用してください：VPasCode次のために：

• 多数の要素の名前変更

• 図コードの再利用

• 一貫した構文の適用

• バージョン管理でのコード管理

• 反復可能な構造化変更の実行

• レイアウトディレクティブの修正

• テキストベースの真実の源の作成

次のツールを使用してください：Visual Paradigm Online次のために：

• 最終的な視覚的配置

• プレゼンテーションの書式設定

• 手動コネクタの調整

• 注釈と注記の追加

• ステークホルダー向けの図の作成

パート5：例としての洗練会話

初期リクエスト

フードデリバリープラットフォーム用のC4システムコンテキスト図を作成してください。

洗練1

顧客、レストランマネージャー、配達ドライバー、および運営管理者を人物として追加してください。

洗練2

決済プロバイダー、地図および位置情報サービス、通知サービスを外部システムとして追加してください。

洗練3

すべてのデータベース、API、マイクロサービス、コンテナ、および実装詳細を削除してください。これはレベル1のC4システムコンテキスト図のままにする必要があります。

洗練4

すべての関係ラベルを簡潔な動詞句に書き換え、可能であれば10語以内に抑えてください。

洗練5

図を見直し、欠落している関係や一貫性のない用語を確認してください。「フードデリバリープラットフォーム」を唯一の関心対象システムとして維持してください。

洗練6

図をC4-PlantUMLとして生成し、VPasCodeで編集可能にしてください。

パート6：トラブルシューティング

図に詳細が多すぎる

質問：

これを厳格なC4システムコンテキスト図に簡素化してください。コンテナ、コンポーネント、データベース、API、および技術名を削除してください。

図に交差する線が多すぎる

VPasCodeでは：

• 試してくださいLAYOUT_LEFT_RIGHT() または LAYOUT_TOP_DOWN().

• 限られたLay_ディレクティブを追加してください。

• 関係ラベルを短縮する。

• 表示される関係の数を減らす。

• 最終版を VP Online に移動して手動で配置する。

PlantUML プレビューにエラーが表示されています

確認：

• C4 ライブラリのインクルード

• カンマの欠落

• 閉じられていない括弧

• 誤った識別子

• 未定義の要素を参照する関係

• 不均衡な引用符

• 誤った要素名

関係は、すでに宣言された識別子を参照する必要があります。例：

Person(customer, "Customer", "Places orders")
System(platform, "Food Delivery Platform", "Processes orders")

Rel(customer, platform, "Places orders")

GUI バージョンとコードバージョンが異なります

変換後、2 つのバージョンを別々の編集表現として扱ってください。どちらを真実の源とするかについて意図的な決定を行ってください：

• 使用：VPasCodeを真実の源として使用してください。図がコードとして維持される場合。

• 使用：Visual Paradigm Onlineを真実の源として使用してください。ステークホルダーが頻繁に視覚的に調整する場合。

同期せずに両方の場所で無関係な変更を加えないようにしてください。

生成された図が誤った C4 レベルを使用しています

チャットボットに質問する：

これをC4システムコンテキスト図のみとして再生成してください。人物、対象システム、および外部ソフトウェアシステムを示してください。コンテナやコンポーネントは表示しないでください。

最終品質チェックリスト

図を公開する前に、以下のことを確認してください：

• 図に明確なタイトルがあること。

• 対象システムが明確であること。

• 人物と外部システムが正しく分類されていること。

• 関係に意味のあるラベルが付いていること。

• 内部の実装詳細がコンテキストビューに漏れ出ていないこと。

• 名称に一貫した用語が使用されていること。

• 図が通常のズーム倍率で読みやすいこと。

• 関係線が形状やラベルを隠していないこと。

• PlantUMLソースが正常にレンダリングされていること。

• VP Online版が承認されたアーキテクチャと一致していること。

• 最終図がシステムに精通した人物によってレビューされていること。

最も効果的なワークフローは、迅速なモデリングにAIチャットボットを使用し、正確で再現可能なC4-PlantUML編集にVPasCodeを使用し、最終的な視覚的洗練にVisual Paradigm Onlineを使用することです。これにより、会話による生成、コードとしての図の保守性、GUIベースのプレゼンテーション編集を一つのプロセスに統合できます。