de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

AI を活用したシステム設計:VPasCode における PlantUML および C4 モデルの生成

現代のソフトウェアアーキテクチャでは、精度を損なうことなく迅速な設計反復が求められます。エンタープライズアーキテクトやシステムデザイナーは、技術文書全体の一貫性を保つために、ドメイン固有言語(DSL)を頻繁に利用しています。しかし、手動で詳細な視覚モデルを作成することは、C4 アーキテクチャコンテナや多層シーケンスフローなどの詳細な視覚モデルを、迅速な設計スプリント中に手動で作成することは、大きな摩擦を生じることがよくあります。

Visual Paradigm のVPasCodeこの課題に直接取り組んでいます。高度なコードとしての図作成ツールとして機能し、このプラットフォームはテキストベースの編集キャンバスと、技術的可視化に特化した対話型 AI エンジンを組み合わせています。これにより、エンタープライズチームは自然言語による指示を通じて、複雑なエンタープライズモデルの作成、リファクタリング、維持管理を行うことができます。

「AI C4 & PLANTUML MODELS!」および「数秒でアーキテクチャをリファクタリング」という太字テキストを含む動的な記事のサムネイル。これは、自然言語による AI コマンドを使用して、C4 コンテナ図内の単一の予約データベースが 2 つのデータベース(予約とゲスト)に分割される様子を視覚的に示しています。

自然言語プロンプトによる技術アーキテクチャの変革

ドラッグ&ドロップスイートで図形を一つずつ作成するのではなく、ソフトウェアアーキテクトはAI 搭載の PlantUML ツールを利用して、高レベルのシステム記述を構造化されたスクリプトに変換できます。VPasCode はこれらの平易な英語によるプロンプスを処理し、PlantUML、Mermaid、Graphviz、C4 レイアウトなど、多様な可視化標準に準拠した構文が有効なスクリプトを出力します。

VPasCode は多くの言語の可視化をサポートしています

マルチフォーマットエンジンを通じて、AI 図生成ツールは、関係、コンポーネント、境界を自動的に構造化します。アーキテクトは基盤となるコードに対する完全なガバナンスを維持できるため、Git リポジトリや Visual Paradigm OpenDocs などの企業向け技術文書システムへのシームレスな統合が可能になります。

VPasCode の上部ツールバーで AI 生成を開始する

C4 を生成するには、システムコンテキストを入力し、生成したい C4 ダイアグラムの種類をプロンプトに含めてください。

Visual Paradigm VPasCode の AI 図生成ツールを使用して C4 コンテナ図を生成するには

以下は、ホテルルーム予約システム用に生成された C4 コンテナ図です:

ホテル予約システムの生成された C4 コンテナ図と、その PlantUML ソースコードを表示する VPasCode インターフェース。

@startuml Hotel 

title 予約システム - コンテナ図
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
skinparam vpDiagramType C4modelContainerDiagram
skinparam linetype ortho
skinparam defaultFontSize 14
skinparam defaultFontColor #333333

Person(customer, "顧客", "ホテルの予約を検索、予約、管理するゲスト")
Person(admin, "ホテル管理者", "部屋、在庫、価格、予約を管理するスタッフ")
System_Ext(paymentGateway, "決済ゲートウェイ", "カード決済を処理する外部サービス")

Container_Boundary(hotelSystem, "ホテル予約システム") {
    Container(webApp, "Web アプリケーション", "React シングルページアプリケーション", "顧客向けの予約インターフェースと管理パネルを提供")
    Container(mobileApp, "モバイルアプリケーション", "React Native", "顧客向けのネイティブモバイル予約体験を提供")
    Container(api, "予約 API", "Java/Spring Boot (REST)", "予約ロジック、可用性チェック、価格設定、予約状態を処理")
    ContainerDb(db, "予約データベース", "PostgreSQL", "部屋、料金、ゲストプロファイル、予約を保存")
    ContainerQueue(queue, "通知キュー", "Redis Pub/Sub", "確認と通知配信のための非同期メッセージをバッファリング")
    Container(emailSvc, "通知サービス", "Node.js", "予約確認とリマインダーをゲストに送信")
}

Rel(customer, webApp, "HTTPS を通じて予約を検索、予約、管理")
Rel(customer, mobileApp, "HTTPS を通じて予約を検索、予約、管理")
Rel(admin, webApp, "部屋、価格、予約を管理")
Rel(webApp, api, "REST JSON/HTTPS を使用", "REST")
Rel(mobileApp, api, "REST JSON/HTTPS を使用", "REST")
Rel(api, db, "予約の読み取りと書き込み", "JDBC")
Rel(api, queue, "確認イベントを公開", "Pub/Sub")
Rel(queue, emailSvc, "通知イベントを消費", "Pub/Sub")
Rel(emailSvc, customer, "確認メールを送信", "SMTP")
Rel(api, paymentGateway, "決済請求を送信", "REST/HTTPS")
Rel(paymentGateway, customer, "カード決済の承認と決済")

LAYOUT_WITH_LEGEND()

title ホテル予約システム - コンテナ図

@enduml

AI による修正を通じた C4 モデルおよび PlantUML のリファクタリング

ソフトウェアシステムが進化するにつれて、技術設計図を一行ずつ更新するのは退屈になることがあります。VPasCode は対話型のAI によるコード修正ツールとして機能し、作成者がターゲットを絞ったリファクタリング指示を直接エディタに渡すことを可能にします。

VPasCode を使用して AI で C4 コンテナ図(PlantUML コード)を変更するには

指示を入力してください。この場合、AI に予約データベースを 2 つに分割するよう依頼しています。

予約データベースを部屋とゲストレコードに分割する VPasCode AI 変更ダイアログ。

プラットフォームが処理する一般的なアーキテクチャのリファクタリングリクエストには以下が含まれます:

  • 高レベルのクラスまたはシーケンスビューを、細粒度の C4 コンテナモデルに変換します。
  • 既存のシステムシーケンスモデルにフォールバックルートまたはエラー処理フローを挿入します。
  • データベース操作とマイクロサービスを専用のサブクラスターにグループ化します。

ビジュアルコード差分比較による精度の確保

複雑なインフラストラクチャモデル全体で技術的な正確性を維持するため、透明性が不可欠です。VPasCode には、組み込みのビジュアルコード差分検査ウィンドウが用意されています。既存の図を変更する際、エンジニアは「詳細を表示」をクリックし、変更を適用する前に、行ごとのスクリプト調整を横並びのグラフィカル比較と併せて評価することができます。

AI が要求通り図コードを変更し、差分を報告しました

さらに、手動編集によって構文の問題が発生した場合、プラットフォームに統合されたAI によるエラー修正ツール」が自動的に無効な構文を修復し、根本原因を説明することで、ドキュメントの保守性をスムーズに保ちます。自動で無効な構文を修復し、根本原因を説明することで、ドキュメントの保守性をスムーズに保ちます。

エンタープライズシステム設計者にとっての主な利点

  • 迅速なプロトタイピング:ホワイトボード上の初期アイデアから、数秒で完全に準拠した PlantUML または C4 アーキテクチャ仕様へ移行できます。
  • ロックインゼロ:クリーンで標準的なテキスト出力により、図は完全にポータブル、編集可能、バージョン管理可能のままです。
  • 柔軟なマルチフォーマットビジュアル:単一の Web プラットフォーム内で、ERD、UML、マインドマップ、ガントチャート、DBML をサポートします。

AI 支援アーキテクチャモデリングを実際に体験するには、無料のVPasCode 図エディタ」をブラウザで直接起動してください。ブラウザで直接起動してください。