自然言語のプロンプトから、オンラインの「コードとしてのダイアグラム」ツールを使用して、PlantUML、Mermaid、Graphviz のダイアグラムを瞬時に生成できます。例えばVPasCode。簡単なプロンプトを入力するだけで—例えば「OAuth2 ユーザーログインフローのシーケンス図を作成する」—と入力するだけで、組み込みの AI が基盤となる DSL コードを自動的に生成し、数秒でライブ表示かつ編集可能なダイアグラムを描画します。
従来の「コードとしてのダイアグラム」ツールの課題
PlantUML や Mermaid などのテキストからダイアグラムへの変換用ドメイン固有言語（DSL）は、開発者、アーキテクト、エンジニアリングチームにとって素晴らしいツールです。これにより、ダイアグラムを Git リポジトリに保存し、バージョン変更を追跡し、面倒な手動での形状配置を避けることができます。
ただし、これらのスクリプトを手動で記述するには学習コストがかかります：
- 異なる形式（PlantUML、Mermaid、Graphviz）ごとの特定の構文ルールを暗記すること。
- 矢印や括弧の配置が誤っている場合に、意味不明な構文エラーのトラブルシューティングを行うこと。
- 単純なシーケンスや分岐を追加するだけで、ドキュメントを検索するのに時間を浪費すること。
生成 AI の最近の進歩により、これらのスクリプトを最初から行単位で記述する必要はなくなりました。最新の「コードとしてのダイアグラム」エディタを使用すれば、コードを自動で記述してくれるだけでなく、出力結果を完全に編集可能かつバージョン管理可能に保つことができます。
ステップバイステップ：AI を活用した PlantUML および Mermaid ダイアグラムの生成
手順を追うには、無料のVPasCode ダイアグラムエディタをウェブブラウザで開いてください。インストールや初期設定は不要です。
ステップ 1：AI 生成ダイアログを開く
VPasCode エディタの上部ツールバーに移動し、AI 生成ボタンをクリックしてください。これでプロンプトウィンドウが起動します。
ステップ 2：フォーマットを選択する（または自動検出を使用）
VPasCode には、ダイアログの上部にスマートなフォーマット選択コンボボックスが備わっています。以下のように使用できます：
- 自動検出のままにする（デフォルト）：プロンプトに基づいて AI が最適な可視化フォーマットを選択させます。
- 手動で選択： チームが特定のツールにのみ依存している場合は、特定のフォーマットを選択してください:
- PlantUML: シーケンス、クラス、アクティビティ、コンポーネント、ステート、C4 モデル、ERD、WBS、ガント図など
- Mermaid: フローチャート、シーケンス、マインドマップ、ERD、ステート、Git グラフ、ユーザージャーニーなど
- Graphviz / Markmap / ECharts: 複雑なグラフネットワーク、動的なマインドマップ、またはデータチャートの場合。
ステップ 3: 自然言語のプロンプトを入力
フォーマットセレクター下のテキストボックスに、可視化したいシステム、プロセス、またはアーキテクチャワークフローを記述してください。一般的でも詳細でも、お好みの程度で構いません。
プロンプトの例:
- 「AI PlantUML ツールマイクロサービスユーザー認証フロー（JWT トークン、リフレッシュトークン、データベース検証を含む）を示すシーケンス図を生成してください。」
- 「支払い承認、在庫確認、および失敗時のロールバックブランチを含む電子商取引注文処理システムを表す Mermaid フローチャートを作成してください。」
- 「クラウドベースのビデオストリーミングアーキテクチャのための C4 コンテナ図を作成してください。」
ステップ 4: 「AI 生成」をクリックし、ライブ図を確認
左側のコードエディタパネル上部にある「AI 生成」ボタンをクリックしてください。VPasCode は正確な DSL スクリプトを左側のコードパネルに直接記述し、右側のプレビューウィンドウにライブ視覚モデルを即座にレンダリングします。
AI を使用した既存図の修正
図の生成は戦いの半分です。システムアーキテクチャが進化すると、コードを手動で編集するのは依然として時間がかかります。VPasCode は組み込みの「AI 図コード修正」でこれを解決します。.
- 左側のコードエディタパネル上部にある「AI」ボタンをクリックし、「修正」.
- を選択してください。自然言語で指示を入力してください（例：「支払い確認後にメール通知サービスを追加」 または 「このシーケンス図を高レベルのステップに簡略化してください」).
- クリック AI 修正。図のスクリプトは自動的に更新されます。
- オプションとして 詳細を表示して、保存前に正確な変更を確認するための並列コード差分表示および視覚比較ページを開きます。
これらの新機能の詳細については、当社の完全な VPasCode AI 機能リリース発表.
なぜ VPasCode が最高のオンライン図-as-コードツールなのか
| 機能 | 従来のツール | VPasCode エディタ |
|---|---|---|
| 作成方法 | 手動のドラッグ＆ドロップまたは手動のスクリプトコーディング | 即時 AI プロンプトからコード生成 |
| フォーマットサポート | 単一フォーマット（PlantUML のみ、または Mermaid のみ） | マルチ DSL（PlantUML、Mermaid、Graphviz、D2、Markmap、ECharts、SQL） |
| フォーマット検出 | 手動切り替えが必要 | 貼り付けまたは生成時の自動フォーマット検出 |
| リファクタリングと編集 | 手動コード編集 | 自然言語による AI 修正と視覚的コード差分表示 |
| エクスポートオプション | 基本 PNG | 高解像度 PNG、スケーラブルベクター SVG、PDF、およびライブ共有 URL |
よくある質問（FAQ）
1. AI PlantUML ツールとは何ですか？
AI PlantUML ツールを使用すると、自然言語で指示（ソフトウェアアーキテクチャやシーケンスフローの説明など）を入力でき、そのテキストを自動的に有効な PlantUML スクリプトコードに変換し、生成された図を即座にレンダリングします。
2. オンラインの図-as-コードエディタとして VPasCode を利用するには、有料ですか？
いいえ、コアとなる VPasCode プラットフォーム（コード編集、自動フォーマット検出、リアルタイム視覚レンダリング、リンク共有、SVG/PNG エクスポートを含む）は無料で利用できます。プレミアム AI 機能やドキュメント統合は、Visual Paradigm のサブスクリプションプランで利用可能です。
3. AI が生成したコードをエクスポートして、自分の IDE や Git リポジトリで使用することはできますか？
はい！VPasCode はクリーンで標準的な DSL コード（PlantUML、Mermaid、Graphviz など）を生成します。コードをエディタから直接コピーして、GitHub/GitLab リポジトリやドキュメントページにコミットできます。
今日から AI で図の生成を始めよう
空白キャンバスでの摩擦を解消し、複雑な DSL 構文との格闘を終わらせましょう。VPasCode 図エディタにアクセスして、数秒でアイデアをクリーンでプロフェッショナルな図に変えましょう！
完全な機能セットを探索するには、VPasCode 概要ページ.