VPasCodeは、Visual Paradigmのブラウザベースの「コードとしての図」エディタです。図の構文、データ、またはサポートされているソースコードなどのテキストを入力または貼り付けると、ツールが視覚的なプレビューを生成します。複数のフォーマットを1つのワークスペースに統合することで、ローカルの図描画エンジンをインストールすることなく、図の作成と改良が可能になります。
主な機能
| 機能 | 機能の説明 |
|---|---|
| コードエディタとリアルタイムプレビュー | テキストを編集すると、ワークスペース内で描画された図がリアルタイムで更新されます。 |
| フォーマット検出 | 貼り付けたコンテンツからサポートされているフォーマットを自動的に検出するため、手動での設定が不要になります。 |
| 複数の図描画エンジン | PlantUML、Mermaid、Graphviz、D2に加え、追加のチャートやテキスト可視化フォーマットも利用できます。 |
| データとコードの可視化 | サポートされているデータ、スキーマ、プログラミングファイルを視覚的な表現に変換します。 |
| AIアシスタント | プロンプトから図を生成したり、既存の図を修正したり、構文エラーを修正したり、ラベルを翻訳したりできます。 |
| スタイル設定 | テーマを選択してプレゼンテーションを調整できます。PlantUMLにはテーマ選択インターフェースも含まれています。 |
| エクスポートと共有 | 図をSVGまたはPNG形式でエクスポートし、共有可能なリンクを作成できます。 |
| 製品との統合 | 図面作業を VPasCode と Visual Paradigm の他のツールおよびドキュメントワークフロー間で移動します。 |
これらの機能は、Visual Paradigm の VPasCode 機能ページで説明されています。特定の AI およびストレージ機能の利用可否は、プランまたはアドオンによって異なる場合があります。
サポートされているフォーマットとそれぞれの用途
-
PlantUML:シーケンス、クラス、アクティビティ、デプロイメント、ユースケース、ステート、コンポーネント、ERD、C4 スタイルの図面を含む UML およびソフトウェアアーキテクチャ図。テーマセレクターを使用すれば、テーマ構文を覚えることなくスタイルを適用できます。
-
Mermaid:テキストベースのドキュメント作成および開発ワークフローに自然に組み込める図面。
-
Graphviz (DOT):関係性と自動レイアウトが中心となるグラフおよびネットワークスタイルの可視化。
-
D2:プラットフォームがサポートするもう一つのコードベースの図面オプション。
-
データとスキーマ:機能ページには、データ関係の可視化に使用される SQL、JSON、YAML、XML、CSV などのフォーマットがリストされています。
-
コード:機能ページには、コードの可視化に使用される Java、TypeScript、Python、Go、Rust などのソースファイルがリストされています。
-
ECharts と Markmap:チャートには ECharts を、Markdown スタイルのテキストをマインドマップに変換するには Markmap を使用します。
利用可能な正確なフォーマットと図面タイプは、機能やワークフローによって異なる場合があります。特定のプロジェクトを開始する際は、エディターのフォーマットオプションを確認してください。
はじめに
-
ブラウザで VPasCode エディターを開きます。この製品は、ローカルインストールを必要としないものとして提供されています。
-
サポートされている例から始めるか、既存の図コード、データ、またはソーステキストを貼り付けてください。
-
可能な限りエディタにフォーマットを検出させます。検出できない場合は、ワークスペースで適切なエンジンまたはフォーマットを選択してください。
-
編集しながらプレビューを確認してください。図がレンダリングされない場合は、コードを変更する前にエラーメッセージと指定された行を確認してください。
-
ソースで図の構造とスタイルを調整してください。PlantUML の場合、見た目を変更したい場合はテーマコントロールを試してください。
-
完成した結果を SVG または PNG としてエクスポートするか、レビュー用の共有リンクを作成してください。
AI 機能
VPasCode の AI ツールは、図作成のいくつかの段階をサポートできます：
-
生成：図を平易な言葉で記述する（例：ログインシーケンスや注文承認ワークフロー）ことで、生成されたスクリプトをドラフトとして使用します。
-
変更：アシスタントに既存の図の一部を追加、削除、拡張、または簡略化するように依頼します。
-
構文の修正：AI の支援を使用して、サポートされている図スクリプト内のエラーを診断し、修正します。
-
翻訳：周囲の図構造を維持したまま、図のラベルとコメントを翻訳します。
-
建築図の画像を変換：機能ページでは、建築図の画像のインポートと、AI を使用して編集可能な PlantUML C4 コードの生成についても説明しています。出力は出発点として扱ってください。画像の解釈は詳細を見落としたり誤読したりする可能性があるため、参照と比較してください。
AI によって生成された出力は、技術文書として使用する前にレビューする必要があります。コンポーネント、接続、ラベル、および方向性が、記述しようとするシステムと一致しているか確認してください。一部の AI 機能は有料アドオンとしてリストされているため、無料エディタにすべての機能が含まれているとは限りません。
編集、スタイル設定、共有、およびエクスポート
コアとなるワークフローはテキストファーストです：ソースを編集し、ライブレンダリングを確認し、図が明確に伝わるまでコードを調整します。自動フォーマットやテーマオプションを使用すると、スクリプトや図を扱いやすくなります。Visual Paradigm では SVG と PNG のエクスポート、および共有可能なウェブリンクがリストされていますが、PDF エクスポートの利用可否については製品ページによって異なります。そのため、PDF がサポートされていると信頼するのではなく、現在使用しているエディタのエクスポートメニューを確認してください。
共有リンクは迅速なレビューに役立ちます。持続的なチームワークフローにおいては、ソーススクリプトもプロジェクトリポジトリに保管してください。テキストベースの形式により、変更の追跡やコードと並行した図の編集レビューが実用的になります。
統合とワークフロー
VPasCode は、より広範な Visual Paradigm ワークフローの一部として位置づけられています。AI チャットボットを使用して初期図を探索し、スクリプトを洗練させて VPasCode でプレビューし、作業を Visual Paradigm Desktop に持ち込んでより詳細なモデリングを行い、OpenDocs を通じて図を公開できます。機能ページでは、図を技術ドキュメントと連携させる方法についても説明しています。
ベストプラクティス
-
対象読者と目的に合わせて形式を選択してください。チームがすでに理解し、維持できる構文を使用してください。
-
小さく始めてください。まず主要なアクター、サービス、またはプロセスステップを構築し、その後詳細を追加してください。
-
明確な名前と関係性を使用してください。ラベルと接続が曖昧でない場合のみ、図は有用です。
-
AI の出力を注意深く確認してください。図が正しくレンダリングされるかどうかだけでなく、技術的な意味内容を確認してください。
-
ソーステキストをプロジェクトと一緒に保管してください。これにより、エクスポートされた画像のみを頼りにするよりも、レビューと変更の追跡が容易になります。
-
タスクに合わせてエクスポートしてください。スケーラブルなベクター出力が必要な場合は SVG が有用です。一般的なドキュメントやプレゼンテーションワークフローには PNG が便利です。
総合評価
VPasCode の主な強みは、ライブプレビュー、AI 支援、エクスポートおよび共有機能を備えたブラウザエディタ内で、複数のテキストから図への変換形式を統合している点です。編集可能なテキストベースの図を好む開発者、アーキテクト、技術ライターにとって適しています。このアプローチに伴うトレードオフとして、構文の編集に慣れている必要があり、AI の出力は確認が必要であり、利用可能な形式と有料機能は、アカウントごとにエディタで確認する必要があります。