1. Overview & Key Concepts

Virtual WAN Topology Lab (vwan-simulator.com) is a local-first, explainable Azure Virtual WAN routing simulator. Everything runs locally in your browser without requiring Azure credentials.

1. 概要と主な概念

Virtual WAN トポロジ ラボ (vwan-simulator.com) は、ローカル ファーストで動作する説明可能な Azure Virtual WAN ルーティング シミュレーターです。Azure の資格情報は一切不要で、すべての計算と可視化がブラウザー内で完結します。

2. Step-by-Step Instructions

Building or Editing a Topology

1. Add nodes from the toolbar: Click + Hub, + VNet, + Site, or + ER location in the workspace toolbar, or right-click blank canvas.
2. Arrange the canvas: Drag any node to reposition it, drag blank canvas to pan, or switch between Layered topology and Network constellation views.
3. Right-click any node or link for context actions:
   • Hubs: Edit hub preference (ExpressRoute, VPN, ASPath), enable Secured Virtual Hub Routing Intent, inspect the BGP table / Learned routes / Advertised routes / Firewall routes, or click Highlight preferred routes.
   • Spoke VNets: Attach a BGP NVA, attach downstream standalone Azure VNets or downstream on-premises sites behind the NVA, or configure spoke connection route maps.
   • On-premises Sites: Connect to hubs via ExpressRoute, VPN (BGP or Static), or SD-WAN; add site-to-site WAN links; or configure site route maps and static routing tables. Adding an ExpressRoute connection automatically creates an ExpressRoute peering location between the hub and site.
4. Clear highlights & warning icons: Whenever path highlights or diagnostic warning/error icons are shown on the canvas, click Clear highlights & icons in the bottom-left corner of the canvas to reset the view.
5. Import or Export JSON: Use Export JSON in the top bar to save a portable topology file, or Import JSON to load any of the attached sample files below.

2. 基本的な使い方（ステップバイステップ）

トポロジの作成と編集

1. ツールバーからノードを追加: ワークスペース ツールバーの + ハブ、+ VNet、+ サイト、+ ER ピアリングの場所 をクリックするか、キャンバスの空白部分を右クリックします。
2. キャンバスの配置と表示切替: ノードをドラッグして位置を調整したり、空白部分をドラッグしてパン移動したり、階層型トポロジ (Layered topology) と ネットワーク配置図 (Network constellation) を切り替えたりできます。
3. ノードやリンクを右クリックしてコンテキスト メニューを表示:
   • 仮想ハブ: ハブのルーティングの優先順位（ExpressRoute、VPN、ASPath）の編集、セキュリティで保護された仮想ハブのルーティング インテントの有効化、BGP テーブル / 学習したルート / アドバタイズしたルート / ファイアウォールのルートを表示 の確認、または 優先ルートを強調表示 を実行できます。
   • スポーク VNet: BGP NVA を追加 したり、NVA 配下のダウンストリーム VNet やオンプレミス サイトを追加したり、スポーク接続のルート マップを構成したりできます。
   • オンプレミス サイト: ExpressRoute、VPN（BGP または静的）、SD-WAN でハブに接続したり、サイト間 WAN リンクを追加したり、ルート マップや静的ルーティングを構成したりできます。ExpressRoute 接続を追加すると、ハブとサイトの間に ExpressRoute ピアリングの場所が自動的に作成されます。
4. 強調表示と警告アイコンのクリア: キャンバス上にパス強調表示やルーティング診断の警告アイコンが表示されている場合は、キャンバス左下の 強調表示とアイコンをクリア (Clear highlights & icons) をクリックすると一括で消去できます。
5. JSON のインポート / エクスポート: 上部バーの JSON をエクスポート (Export JSON) でトポロジを JSON ファイルとして保存し、JSON をインポート (Import JSON) で保存済みファイルや以下のサンプル JSON を読み込めます。

3. Sample Topology JSON Files

You can download any sample JSON file below and import it via Import JSON, or click Open in Simulator to launch it directly in your browser:

3. サンプル JSON ファイル一覧

以下のサンプル JSON ファイルをダウンロードして JSON をインポート (Import JSON) から読み込むか、シミュレーターで開く をクリックしてブラウザーで直接開くことができます。

4. Example 1: Hub Routing Preferences (ExpressRoute vs VPN vs ASPath)

In this scenario, Dublin Campus (10.50.0.0/16, ASN 65050) is dual-connected to two Virtual WAN hubs via both an ExpressRoute location (with an outbound route map prepending 65050 65050, making the ExpressRoute AS path 3 hops long) and a BGP S2S VPN connection (1 hop).

• West Europe Hub (ER Preference) prefers the ExpressRoute path to 10.50.0.0/16 despite its longer 3-hop AS path because the hub's routing preference is set to ExpressRoute.
• North Europe Hub (ASPath Preference) prefers the BGP S2S VPN path because its routing preference is set to ASPath and 1 hop beats 3 hops.

4. サンプル 1: ハブのルーティングの優先順位 (ExpressRoute / VPN / ASPath)

このシナリオでは、Dublin Campus（10.50.0.0/16、ASN 65050）が ExpressRoute ピアリングの場所（アウトバウンド ルート マップで 65050 65050 をプリペンドし、AS パス長が 3 ホップ）と BGP S2S VPN（AS パス長 1 ホップ）の両方で 2 つの Virtual WAN ハブに二重接続されています。

• West Europe Hub (ER Preference) はハブのルーティングの優先順位が ExpressRoute に設定されているため、AS パスが 3 ホップであっても 10.50.0.0/16 への経路として ExpressRoute を優先します。
• North Europe Hub (ASPath Preference) はハブのルーティングの優先順位が ASPath に設定されているため、AS パスが短い（1 ホップの）BGP S2S VPN を優先します。

5. Example 2: Secured Virtual Hub & Azure Firewall Routing Intent

This example demonstrates a Secured Virtual Hub (East US Secured Hub) with both Private traffic (10.0.0.0/8, 172.16.0.0/12) and Internet traffic (0.0.0.0/0) Routing Intent enabled:

• All spoke-to-spoke and spoke-to-branch traffic matching the private prefixes is steered through Azure Firewall inside the Secured Hub.
• Boston Retail Branch connects over a Static S2S VPN with Propagate Default Route (0.0.0.0/0) enabled, learning the Secured Hub's firewall-backed default route.

5. サンプル 2: セキュリティで保護された仮想ハブと Azure Firewall ルーティング インテント

このサンプルでは、East US Secured Hub において プライベート トラフィック（10.0.0.0/8、172.16.0.0/12）と インターネット トラフィック（0.0.0.0/0）の両方のルーティング インテントを有効化した セキュリティで保護された仮想ハブ (Secured Virtual Hub) をモデル化しています。

• プライベート プレフィックスに一致するすべてのスポーク間およびスポーク・ブランチ間トラフィックは、Secured Hub 内の Azure Firewall を経由します。
• Boston Retail Branch は 既定ルートの伝達 (0.0.0.0/0) を有効にした 静的 S2S VPN で接続されており、Secured Hub の Azure Firewall を次ホップとする既定ルートを学習します。

6. Example 3: Spoke BGP NVA Transit to Downstream VNet & Partner Site

Virtual WAN hubs can peer via BGP with a Network Virtual Appliance (NVA) deployed inside a spoke VNet. In this example:

• Transit NVA Spoke (10.10.0.0/16) hosts a BGP NVA (10.10.0.4, ASN 65100) peered with Central US Hub.
• Behind the NVA sits a standalone Azure VNet (AI Shared Services VNet, 10.99.0.0/16) that is peered only to the NVA spoke, plus an on-premises partner site (Chicago Partner Enclave, 172.30.0.0/16).

6. サンプル 3: スポーク BGP NVA によるダウンストリーム VNet・パートナー サイトへのトランジット

Virtual WAN ハブは、スポーク VNet 内にデプロイされたネットワーク仮想アプライアンス (NVA) と BGP ピアリングを構成できます。このサンプルの構成は以下のとおりです。

• Transit NVA Spoke（10.10.0.0/16）内の BGP NVA（10.10.0.4、ASN 65100）が Central US Hub と BGP ピアリングしています。
• NVA の背後には、NVA スポークにのみ VNet ピアリングされたスタンドアロン Azure VNet（AI Shared Services VNet、10.99.0.0/16）と、オンプレミスのパートナー拠点（Chicago Partner Enclave、172.30.0.0/16）が接続されています。

7. Example 4: 3-Hub All-Features Enterprise Showcase (with Asymmetric Routing)

This comprehensive 3-hub topology exercises every capability of the simulator across West Europe Hub (Secured, ExpressRoute preference), East US Hub (VPN preference), and Japan East Hub (Secured, ASPath preference), including an intentional asymmetric routing issue between Azure and Amsterdam Core DC (10.100.0.0/16):

• Forward path (Azure → Amsterdam Core DC): West Europe Hub has preference: "ExpressRoute", so traffic from EMEA ERP Spoke (10.10.0.0/16) to Amsterdam Core DC (10.100.0.0/16) exits over ExpressRoute via Equinix AM5 Amsterdam.
• Return path (Amsterdam Core DC → Azure): An outbound route map on West Europe Hub's ExpressRoute link prepends 64496 64496 to routes advertised over ExpressRoute. Consequently, Amsterdam Core DC sees a 1-hop AS path over its BGP VPN backup link (65515) vs. a 3-hop AS path over ExpressRoute (65515 64496 64496) and sends return traffic back over BGP VPN.

7. サンプル 4: 3 ハブ全機能ショーケース（非対称ルーティングを含む）

この 3 ハブ構成のエンタープライズ トポロジは、West Europe Hub（Secured、ExpressRoute 優先）、East US Hub（VPN 優先）、Japan East Hub（Secured、ASPath 優先）にまたがり、シミュレーターの全機能を網羅しています。さらに、Azure スポークと Amsterdam Core DC（10.100.0.0/16）の間に意図的な 非対称ルーティング が組み込まれています。

• 往路（Azure → Amsterdam Core DC）: West Europe Hub のルーティングの優先順位は ExpressRoute のため、EMEA ERP Spoke（10.10.0.0/16）から Amsterdam Core DC（10.100.0.0/16）への通信は Equinix AM5 Amsterdam 経由の ExpressRoute を通ります。
• 復路（Amsterdam Core DC → Azure）: West Europe Hub の ExpressRoute リンクに適用されたアウトバウンド ルート マップが 64496 64496 をプリペンドするため、Amsterdam Core DC から見ると ExpressRoute 経由は 3 ホップ（65515 64496 64496）、バックアップの BGP VPN 経由は 1 ホップ（65515）となり、復路トラフィックは BGP VPN を通って戻ります。

8. Effective Routes, Path Explorer & Automated Routing Diagnostics

Inspecting BGP, Learned, and Advertised Routes

Right-click any Virtual Hub, Site, or ExpressRoute Location and choose BGP table, Learned routes, or Advertised routes. Clicking any prefix row highlights its winning path on the canvas and explains why it won over competing candidates.

8. 有効なルート、パス エクスプローラー、自動ルーティング診断

BGP テーブル、学習したルート、アドバタイズしたルートの確認

任意の仮想ハブ、サイト、または ExpressRoute ピアリングの場所を右クリックし、BGP テーブル (BGP table)、学習したルート (Learned routes)、または アドバタイズしたルート (Advertised routes) を選択します。任意のプレフィックス行をクリックすると、採用された優先経路がキャンバス上で強調表示され、他の候補ルートより優先された理由が表示されます。

Automated Routing Check & Asymmetric Path Detection

Click Check routing in the workspace toolbar to run an automated pairwise reachability and symmetry audit across all owned prefixes. Only root-cause failures are surfaced on the canvas (cascading downstream symptoms are automatically deduplicated), and you can click Review routing issues to inspect each finding or click Clear highlights & icons in the bottom-left corner to remove all warning icons.

自動ルーティング診断と非対称パスの検出

ワークスペース ツールバーの ルーティングを診断 (Check routing) をクリックすると、すべての所有プレフィックス間の到達性と対称性が自動的に診断されます。連鎖的な派生エラーは自動的に除外され、根本原因のみがキャンバス上に警告アイコンとして表示されます。ルーティングの問題を確認 (Review routing issues) から往路・復路をアニメーション表示でき、左下の 強調表示とアイコンをクリア (Clear highlights & icons) でいつでもアイコンを消去できます。

Interactive Path Explorer

Right-click any node and select Open path explorer (or use Show path to / from) to trace forwarding hop-by-hop between any source and destination prefix, complete with a step-by-step "Why this path?" explanation.

インタラクティブなパス エクスプローラー

任意のノードを右クリックして パス エクスプローラーを開く (Open path explorer)（または 次へのパスを表示 / 次からのパスを表示）を選択すると、任意の送信元と宛先プレフィックス間の転送経路をホップごとに追跡し、各ホップでの選択理由を確認できます。

9. Azure Bicep Export & Live Snapshot Comparison

Click Azure files in the top navigation bar to bridge your modelled topology with real Azure environments:

• Export Azure Bicep template (.bicep): Generate a deployable Bicep template for your Virtual WAN, Virtual Hubs, Secured Hub Firewalls & Routing Intent, and VNet Connections.
• Download Read-Only Azure CLI Collector Script (scripts/collect-azure-vwan.ps1): Capture an existing Azure Virtual WAN's topology and effective routes into a portable JSON bundle from PowerShell 7 or Azure Cloud Shell without giving the web app any Azure credentials:

  Invoke-WebRequest -Uri 'https://raw.githubusercontent.com/erjosito/vwan-visual-topology-feedback/main/scripts/collect-azure-vwan.ps1' -OutFile ./collect-azure-vwan.ps1
  ./collect-azure-vwan.ps1 -VirtualWanId '/subscriptions/SUB/resourceGroups/RG/providers/Microsoft.Network/virtualWans/WAN' -IncludeEffectiveRoutes -OutputFile ./vwan-observation.json

• Compare Observed vs. Simulated Routes: Import an Azure capture bundle to compare live Azure effective route tables against the simulator's predicted routes side by side.

9. Azure Bicep エクスポートと実環境スナップショット比較

上部ナビゲーション バーの Azure ファイル (Azure files) をクリックすると、モデル化したトポロジと実際の Azure 環境を連携できます。

• Azure Bicep テンプレート (.bicep) のエクスポート: Virtual WAN、仮想ハブ、Secured Hub の Azure Firewall とルーティング インテント、および VNet 接続を含むデプロイ可能な Bicep テンプレートを生成します。
• 読み取り専用 Azure CLI 収集スクリプト (scripts/collect-azure-vwan.ps1) のダウンロード: Web アプリに Azure の資格情報を渡すことなく、PowerShell 7 または Azure Cloud Shell から既存の Azure Virtual WAN トポロジと有効なルート テーブルを JSON バンドルとして取得できます。

  Invoke-WebRequest -Uri 'https://raw.githubusercontent.com/erjosito/vwan-visual-topology-feedback/main/scripts/collect-azure-vwan.ps1' -OutFile ./collect-azure-vwan.ps1
  ./collect-azure-vwan.ps1 -VirtualWanId '/subscriptions/SUB/resourceGroups/RG/providers/Microsoft.Network/virtualWans/WAN' -IncludeEffectiveRoutes -OutputFile ./vwan-observation.json

• 実測ルートとシミュレートされたルートの比較: 取得した Azure キャプチャ JSON をインポートし、実際の Azure 有効なルート テーブルとシミュレーターの計算結果を並べて比較できます。