de_DEen_USes_ESfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

エディタ内のコードとしての図：VPasCode における AI 生成の完全ガイド

はじめに

現代のソフトウェア開発では、スピード、精度、そしてコーディングとドキュメントのシームレスな統合が求められています。歴史的に、アーキテクチャ図の作成には、コードエディタと独立したモデリングツールの間でコンテキストを切り替える必要があり、開発者のフローを分断していました。

従来のコンテキスト切り替えと、シームレスなアーキテクチャ図生成のための Visual Paradigm VPasCode AI 統合を比較した図。

Visual Paradigmは、AI 駆動の図生成機能を VPasCode エディタに直接組み込むことで、この摩擦を解消しました。この統合により、開発者は主要なワークスペースから離れることなく、自然言語のプロンプトを使用して図を生成、可視化、および洗練させることができます。図をアプリケーションロジックと同時に生成およびバージョン管理可能なコードとして扱うことで、チームはプロジェクトとリアルタイムで進化していく生きたドキュメントを維持することができます。

主要な概念

コードエディタ内での埋め込み AI 生成、マルチエンジンサポート、およびライブプレビューレンダリングを示す「コードとしての図」ワークフロー図。

  • コードとしての図：ドラッグ＆ドロップインターフェースではなく、テキストベースのスクリプト言語を使用して視覚モデルを定義する実践であり、バージョン管理、共同作業、および自動化を可能にします。

  • 組み込み AI 生成：IDE またはエディタのツールバーに直接統合された人工知能レイヤーで、自然言語による記述を有効な図の構文に変換します。

  • マルチエンジンサポート：単一の統一されたインターフェース内で、さまざまな業界標準エンジン（PlantUML、Mermaid、Graphviz）を使用して図をレンダリングする機能。

  • ライブプレビューレンダリング：左側のコード変更が右側の視覚図に即座に反映される分割ビューワークスペースで、即時フィードバックループを提供します。

  • 自動検出フォーマット：ユーザーのプロンプトを分析して、最も適切な図描画エンジンと構文を自動的に選択するインテリジェントなデフォルト設定。

ステップバイステップ：VPasCode 内での図の生成

VPasCode 環境内で視覚モデルを作成することは、直感的で邪魔にならないように設計されています。このワークフローに従って、エディタから直接図を生成してください：

VPasCode 内で AI 生成ツールを使用して図を生成する方法を示す 4 つのステップからなるワークフロー図。

1. AI 生成ツールにアクセス

VPasCode エディタインターフェースの上部ツールバーに移動します。AI 生成ボタンをクリックします。この操作により、図作成用に特別に設定された統合 AI アシスタントパネルが開き、外部チャットボットや別々のアプリケーションを起動する必要がなくなります。

2. 出力フォーマットを選択

ツールはデフォルトで自動検出に設定されていますが、レンダリングエンジンに対して細かな制御が可能です。プロジェクトに標準化されたドキュメント要件がある場合は、ドロップダウンメニューを使用して特定のフォーマットを指定してください。利用可能なオプションには、PlantUML、Mermaid、Graphviz、Markmap、ECharts があります。自動検出は、プロンプトを最適な構文にインテリジェントにマッチングさせるため、ほとんどのユーザーにとって推奨される最初の選択肢です。

3. 自然言語のプロンプトを作成

提供されたテキスト入力フィールドに、可視化したいシステム、プロセス、またはアーキテクチャを平易な英語で記述してください。必要に応じて具体的にも、高レベルにもしてください。例えば、「ユーザーログインリセットループのフローチャートを生成」と入力することで、AI が有効な図構造を構築するのに十分なコンテキストが提供されます。アクター、ステップ、条件の記述が詳細であればあるほど、初期生成の精度は高くなります。

4. 実行して確認

ボタンをクリックしてくださいAI 生成ボタンをクリックしてリクエストを処理してください。エディタは即座に左ペインに生成された「コードとしての図」スクリプトを埋め込み、同時に右ペインでインタラクティブな視覚モデルをレンダリングします。これで図と対話できるようになり、ズームやパン操作が可能になり、出力を反復的に洗練させるために直接コードを編集することもできます。

サポートされているフォーマットとユースケース

VPasCode は複数の図描画エンジンをサポートしており、それぞれが異なる種類の可視化タスクに最適化されています：

  • PlantUML：シーケンス図、ユースケース図、クラス図、アクティビティ図など、標準的な UML 成果物に最適です。広範なスタイルオプションを提供し、エンタープライズ環境で広く採用されています。

  • Mermaid：Markdown ファイルに埋め込む軽量なドキュメント作成に優れています。フローチャート、マインドマップ、エンティティリレーションシップ（ER）図、ガントチャートに最も適しています。

  • Graphviz：複雑な構造化データ、依存関係グラフ、ネットワークトポロジの可視化に強力です。自動レイアウトアルゴリズムが不可欠な場合に特に有効です。

  • Markmap：Markdown のアウトラインをインタラクティブなマインドマップに変換するために特別に設計されており、ブレインストーミングや知識整理に役立ちます。

  • ECharts：アーキテクチャモデリングではなく、データ可視化と統計チャート作成に焦点を当てています。

結論

VPasCode への AI 生成機能の統合は、開発者が視覚的ドキュメント作成に取り組む方法に大きな転換をもたらします。コード記述と図作成の間の障壁を取り除くことで、チームは開発速度を犠牲にすることなく、アーキテクチャの明確さを維持できます。自然言語によるプロンプト、マルチエンジンサポート、ライブプレビューレンダリングの組み合わせはフィードバックループを生み出し、経験豊富なモデラーから初心者までが「コードとしての図」を利用可能にします。開発ワークフローが自動化と統合をさらに重視する中、エディタに直接知能を組み込んだツールは、高品質で同期されたドキュメントを維持するために不可欠なものになっていきます。

Visual Paradigm 関連の投稿と記事