VPasCode は、テキストベースのコードから図を作成・表示するためのブラウザベースのワークスペースです。PlantUML、Mermaid、Graphviz、D2 を含む図記法言語をサポートし、コード編集、リアルタイムレンダリング、AI 支援ツールを一つの場所で統合しています。図の記述スクリプトを作成または生成すると、VPasCode がそれを視覚的な図としてレンダリングします。
1. 図の作成を開始する
-
Web ブラウザで VPasCode を開きます。
-
空のエディターから始めるか、既存の図スクリプトを貼り付けます。
-
PlantUML の場合、通常次の記述を含めてください。
@startumlおよび@endumlマーカーを含めてください。VPasCode は PlantUML 構文を検出し、対応するレンダラーを自動的に有効にします。 -
作業中にレンダリングされた図を確認してください。
2. AI を使用して図を生成する
AI アシスタントを使用して、自然言語での説明を図のコードに変換します。含めたい要素と関係について具体的に記述してください。
例えば、以下のように依頼できます。
ユーザーログイン認証のためのシーケンス図を作成してください。ユーザー、Web アプリ、認証サービス、データベースを含めてください。
生成されたコードとそのレンダリング結果を確認してください。重要な参加者、ステップ、または関係が欠けている場合は、プロンプトを調整してください。
3. 既存のコードを改良する
最初から作り直すのではなく、自然言語の指示を使用して、すでに持っている図を修正します。変更したい内容とその場所を記述してください。
例えば：
注文送信ステップの直後に決済ゲートウェイの確認を追加してください。
その後、更新されたコードと図を確認し、変更が意図したワークフローに合致していることを確認してください。
4. エラーを修正する
図が期待通りにレンダリングされない場合は、AI コードエラー修正ツールを使用して、構文の問題を診断・修正してください。このツールは、タイプミス、括弧の欠落、トークンの不整合などの問題を特定し、修正を加えて、何が間違っていたかを説明します。
修正を適用した後、コードとレンダリングされた図の両方を確認し、結果が正しいことを確認してください。
5. 図のテキストを翻訳する
AI 図翻訳ツールを使用して、図内のテキスト（ラベル、クラスのプロパティ、メッセージの説明など）を翻訳します。これにより、国際的なチーム向けに図を準備することができます。
文脈の中で翻訳された用語を確認してください。特に、変更すべきではない技術用語や固有名詞には注意してください。
6. テーマを適用する
エディターでテーマを選択して、図のビジュアルスタイルを調整します。利用可能なオプションには、Visual Paradigm のクラシックテーマやクラシックな代替テーマが含まれます。テーマ設定により、適切なスキンパラメータが自動的に適用されます。
エクスポートする前に、結果の読みやすさと一貫性を確認してください。
7. エクスポートと共有
図の用途に合ったエクスポート形式を選択してください：
| 形式 | 用途 |
|---|---|
| SVG | スケーラブルなウェブドキュメントや技術的なウィキ |
| PNG | チャットアプリ、バグトラッカー、プレゼンテーション |
| 正式文書および印刷用 |
図を共有するには、プラットフォームで生成された直接URLまたはQRコードを使用してください。
実用的なワークフロー
-
モデル化したいシステム、プロセス、またはアーキテクチャを記述してください。
-
AIで初期の図コードを生成するか、既存のスクリプトを貼り付けてください。
-
ライブレンダリングを確認し、特定の指示で図を洗練させてください。
-
構文の問題でレンダリングできない場合は、エラー修正機能を使用してください。
-
必要に応じてラベルを翻訳するか、テーマを適用してください。
-
ドキュメントやプレゼンテーションに適した形式でエクスポートしてください。
-
URLまたはQRコードを使用して図を共有してください。
