VPasCode ディープダイブ：Mermaid、PlantUML、AI を1つのプラットフォームで統合

技術文書の世界では、「図をコードで記述する」（Diagram as Code）という手法は、かつては開発者の中での限定的な実践から、業界標準的なアプローチへと進化しました。しかし、フローチャート、シーケンス図、C4モデル、インフラ構成図など、さまざまな図の種類を扱うチームにとっては、ツールの分散化が大きな課題でした。Visual Paradigmの VPasCode は、AI機能を搭載し、ドキュメントワークフローとシームレスに統合された、ブラウザベースの1つのプラットフォーム上で、3つの主要なテキストから図を生成するエンジンを統合することで、この課題に直接対応しています。

このガイドでは、VPasCodeの主要機能を検証し、サポートされている構文を用いた実際の例を示し、ライブドキュメント用の広範なOpenDocsエコシステムとの連携方法を紹介します。

VPasCodeが他と異なる点は何か？

VPasCodeは、 統合された図をコードで記述するプラットフォーム であり、1つのインターフェースでMermaid.js、PlantUML、Graphvizをサポートしています。図の種類に応じてツールを切り替えるのではなく、チームは1つのエディタを標準化でき、各構文を自動検出・レンダリングできます。

主な機能の概要

対応エンジン：何が作れるか？

VPasCodeは、3つの主要なオープンソースのテキストから図を生成するエンジンをサポートしています：

Mermaid.js 対応

Mermaidは、現代的なMarkdown風の図に最適です。VPasCodeは以下の機能をサポートしています：

• フローチャートとマインドマップ

• シーケンス図とクラス図

• エンティティ関係図（ERD）

• C4モデル

• ガントチャート、タイムライン、カンバンボード

• ユーザーの旅路とGitグラフ

PlantUMLのサポート

PlantUMLは堅牢なソフトウェア設計図の作成に優れています：

• UMLクラス図、シーケンス図、ユースケース図

• C4モデルとArchiMate

• アクティビティ図とステート図

• コンポーネント図とデプロイメント図

• ERD（チーン記法を含む）

• ネットワークレイアウトとWBS

Graphvizのサポート

GraphvizはDOT言語を使用して、複雑なネットワークトポロジーや依存関係構造を処理します：

• 有向グラフと標準グラフ

• 組織図

• クラスタ図

• データフローダイアグラム

現実的な例：Mermaidの実用例

ここでは、現実世界のドキュメント作成ニーズを反映した実用的なMermaidの例を紹介します。これらはすべてVPasCodeと互換性があります。

1. マイクロサービスアーキテクチャのフローチャート

この図は、APIゲートウェイ、サービスメッシュ、データベースレイヤーを経由する典型的なクラウドネイティブなリクエストフローを示しています：

flowchart TB
    Client[Web/Mobileクライアント] -->|HTTPS| Gateway[APIゲートウェイ]
    
    subgraph Services[マイクロサービスレイヤー]
        direction LR
        Auth[認証サービス]
        Order[注文サービス]
        Payment[支払いサービス]
        Inventory[在庫サービス]
    end
    
    subgraph Data[データレイヤー]
        AuthDB[(認証DB)]
        OrderDB[(注文DB)]
        PaymentDB[(支払いDB)]
        InventoryDB[(在庫DB)]
    end
    
    Gateway --> Auth
    Gateway --> Order
    Gateway --> Payment
    Gateway --> Inventory
    
    Auth --> AuthDB
    Order --> OrderDB
    Payment --> PaymentDB
    Inventory --> InventoryDB
    
    Order <--> Inventory
    Payment -->|Webhook| Notification[通知サービス]
    
    classDef gateway fill:#e1f5fe,stroke:#01579b
    classDef service fill:#f3e5f5,stroke:#4a148c
    classDef db fill:#e8f5e9,stroke:#1b5e20
    
    class Gateway gateway
    class Auth,Order,Payment,Inventory,Notification service
    class AuthDB,OrderDB,PaymentDB,InventoryDB db

ユースケース：新規チームメンバー向けのアーキテクチャドキュメント、またはシステム設計レビュー用。

2. ユーザー認証シーケンス図

このシーケンス図は、トークン発行とエラー処理を含むログインフローを捉えています：

sequenceDiagram
    actor User
    participant Frontend as フロントエンドアプリ
    participant Auth as 認証サービス
    participant DB as ユーザーデータベース
    participant Cache as Redisキャッシュ
    
    User->>Frontend: 資格情報の入力（メールアドレス/パスワード）
    Frontend->>Auth: POST /api/v1/login
    
    Auth->>DB: メールアドレスでユーザーを照会
    DB-->>Auth: ユーザーレコードの返信（ハッシュ化されたパスワード）
    
    alt 有効な資格情報
        Auth->>Cache: セッショントークンを保存
        Cache-->>Auth: セッション作成完了
        Auth-->>Frontend: 200 OK + JWTトークン
        Frontend-->>User: ダッシュボードにリダイレクト
    else 無効な資格情報
        Auth-->>Frontend: 401 Unauthorized
        Frontend-->>User: エラーメッセージを表示
        Note right of User: "無効なメールアドレスまたはパスワード"
    end

ユースケース: APIドキュメント、セキュリティレビュー、またはバックエンドエンジニアのオンボーディング用。

3. CI/CDパイプラインフローチャート

この例は、条件付きステージを持つデプロイパイプラインをモデル化しています：

flowchart LR
    subgraph CI[継続的インテグレーション]
        Lint[Lint & テスト] --> Build[アーティファクトのビルド]
        Build --> Scan[セキュリティスキャン]
    end
    
    subgraph CD[継続的デプロイ]
        DeployStaging[ステージング環境にデプロイ] -->|自動化| RunTests[統合テスト]
        RunTests -->|成功| Approval[手動承認]
        Approval -->|承認| DeployProd[本番環境にデプロイ]
        RunTests -->|失敗| Rollback[以前のバージョンにロールバック]
    end
    
    Scan -->|成功| DeployStaging
    Scan -->|失敗| Alert[チームにアラート]
    
    classDef ci fill:#e3f2fd,stroke:#1565c0
    classDef cd fill:#fff3e0,stroke:#e65100
    classDef decision fill:#ffebee,stroke:#c62828
    
    class Lint,Build,Scan ci
    class DeployStaging,RunTests,DeployProd,Rollback cd
    class Approval,Alert decision

ユースケース: DevOpsドキュメント、ランブック、リリースプロセスガイド用。

AIチャットボット統合：プロンプトから図まで

VPasCodeの最も強力な機能の一つは、Visual ParadigmのAIチャットボットとの統合です。これにより、「白紙のページ」問題を解消する2段階のワークフローが実現されます。

ステージ1：AIによるアイデア出し

自然言語でシステムを説明できます。AIは初期の図構造を生成します。たとえば：

プロンプト: 「顧客、配達ドライバー、レストランオーナーを含む食品配達アプリのユースケース図を作成してください。」

AIはあなたの意図を解釈し、アクター、ユースケース、関係性を含む、基盤となるPlantUMLまたはMermaidコードを生成します。

ステージ2：VPasCodeでの精緻化

重要なリンクは、「VPasCodeで開く」ボタンです。これにより、AIが生成した論理がコードエディタにエクスポートされ、以下のように操作できます：

• スタイルを調整（skinparam linetype ortho, 左から右への方向)

• 手動で関係性とステレオタイプを定義する

• AIが見逃した特定の要素を追加する

• 企業のブランディングと一貫したフォーマットを適用する

このハイブリッドアプローチは、Visual Paradigmが「AI生成の最後の1マイル問題」と呼ぶ課題を解決します。AIは90％完成したドラフトを提供し、VPasCodeにより最終的な10％を完璧に仕上げることができます。

AIによるエラー修正：構文のストレスを解消

図をコードとして採用する際の主な障壁の一つは構文デバッグです。1つの誤って配置された文字が図のレンダリングを妨げる可能性があります。VPasCodeのAIコードエラー修正機能は、スムーズなワークフローでこの問題に対処します：

1. 即時検出：構文エラーが発生した場合（例：無効な接続演算子）、VPasCodeは「図の生成に失敗しました」というアラートを表示し、具体的な行番号を提示します。

2. ワンクリック修正：インターフェースに「AIで修正」とラベルされたボタンがエラー通知に表示されます。

3. AI処理：モーダルウィンドウがAIがエラーを分析中であり、有効な構文パターンと照合していることを確認します。

4. 自動修正：問題のあるコードが正しい構文に置き換えられ、図が即座にレンダリングされます。

これにより認知負荷が軽減され、あらゆるスキルレベルのユーザーが、すべての構文ルールを暗記せずに図をコードとして扱うことができます。

例：AI修正前後

破損したMermaid構文（行11）：

flowchart LR
    A[開始] -->|処理| B[タスク]
    B ---> C[終了]

（無効な演算子 --->)

AI修正後:

flowchart LR
    A[開始] -->|処理| B[タスク]
    B --> C[終了]

OpenDocsパイプライン：コードから生きているドキュメントへ

VPasCodeとOpenDocsの統合により、Visual Paradigmが呼ぶ「生きているドキュメント」ワークフローが生まれます。静的な画像をエクスポートするのではなく、図はバージョン履歴を保持し、双方向同期を維持するパイプラインを通じて送信されます。

5段階のワークフロー

1. VPasCodeでドラフト作成：エンジニアはブラウザベースのエディタで図の構文を記述または編集する。

2. パイプラインへ送信：任意の文脈ノート（例：「TLS 1.3準拠の更新」）を添えて「OpenDocsパイプラインへ送信」をクリックする。

3. OpenDocsに挿入：技術文書作成者はパイプラインペインにアクセスし、ワンクリックで図をライブドキュメントに挿入する。

4. 直接編集：埋め込まれた図の鉛筆アイコンをクリックすると、元のソースがVPasCodeで開かれ、修正が可能になる。

5. 自動同期更新：変更が即座に伝播され、ファイルの再アップロードなしにバージョンエラーが解消される。

測定可能な影響

SaaSプロバイダーであるNovaStreamの事例研究では、このパイプラインを導入した後、顕著な改善が見られた。

Graphvizの例：インフラ構成ドキュメント

インフラチーム向けに、VPasCodeのGraphvizサポートにより、クラウドアーキテクチャをプログラムで表現できます。以下に現実的な例を示します：

digraph EnterpriseCloud {
  compound=true;
  node [fontname="Helvetica,Arial,sans-serif" fontsize=11 shape=box style="filled,rounded" fillcolor="#E3F2FD" fontcolor="#1565C0"];

  subgraph cluster_vpc_prod {
    label="本番VPC"; style="dashed"; fillcolor="#FFF3E0";

    subgraph cluster_k8s {
      label="Kubernetesクラスタ"; style="rounded"; fillcolor="#E8F5E9";
      pod1 [label="APIサービスn(Pod 1)"];
      pod2 [label="APIサービスn(Pod 2)"];
      db_master [label="PostgreSQLnマスター"];
      db_replica [label="PostgreSQLnレプリカ"];
    }

    lb [label="アプリケーションロードバランサー" fillcolor="#FFF9C4"];
  }

  vpn [label="IPSec VPNゲートウェイ" shape="hexagon" fillcolor="#FFCCBC"];

  vpn -> lb [label="暗号化されたトラフィック"];
  lb -> pod1 [label="プロキシトラフィック" lhead=cluster_k8s];
  lb -> pod2 [label="プロキシトラフィック" lhead=cluster_k8s];
  pod1 -> db_master [label="書き込み"];
  pod2 -> db_replica [label="読み取り"];
  db_master -> db_replica [label="非同期レプリケーション" style="dashed"];
}

主な機能:

• サブグラフ：階層的なクラウド境界（VPC、Kubernetes名前空間）をモデル化

• グローバルスタイル：グラフレベルで定義された一貫した色と形状

• Compound=true：エッジを個々のノードではなく、クラスタの境界に向けます

VPasCodeの使い始め

VPasCodeは、以下の通り利用可能です無料トライアルリアルタイムプレビュー、URL共有、SVG/PNGエクスポートが可能。プレミアムプランでは、コードエラー修正や言語翻訳を含むAI機能が利用可能になります。

クイックスタート手順

1. VPasCodeにアクセス（ブラウザベース、インストール不要）

2. 構文を選択：Mermaid、PlantUML、またはGraphviz

3. コードを書く左ペインにコードを記述し、リアルタイムでプレビューを確認

4. OpenDocsパイプラインに送信ドキュメントに埋め込むため

5. Gitにコミットアプリケーションコードと一緒に

概要

VPasCodeは、図をコードで表現するツールの重要な進化を示しており、次のようにしています：

• 統合することにより一つのプラットフォームで3つの主要な構文を統合

• AI駆動の生成とエラー修正により、作成を加速AI駆動の生成とエラー修正による作成の加速

• OpenDocsパイプラインにより、ドキュメントのずれを排除OpenDocsパイプラインによるドキュメントのずれの排除

• バージョン管理とGitネイティブなワークフローを可能にバージョン管理とGitネイティブなワークフローの有効化

Mermaidでマイクロサービスをドキュメント化する場合、PlantUMLでシステムアーキテクチャをモデル化する場合、またはGraphvizでクラウドインフラをマッピングする場合でも、VPasCodeはコードと明確さの間のギャップを埋める単一のインターフェースを提供します。