視覚化機能

NetBox から取得したデータは、リンクの太さ・色・線種、ノードのスタイル、グループ化といったダイアグラムの見た目に反映されます。

帯域幅の可視化

リンク速度は NetBox インターフェースの speed フィールド（kbps）から自動検出され、リンクの rateBps に設定されます。レンダラーは速度を対数スケールで連続的に線の太さへ変換します — 1G リンクは細い線、10G は明らかに太く、100G のトランクは幅のある「パイプ」として描画されます。

両端に速度がある場合はソース側の値が優先され、速度が取れないリンクはデフォルトの太さになります。

VLAN の可視化

VLAN 情報は各インターフェースの tagged_vlans と untagged_vlan から収集され、リンクに設定されます:

両端インターフェースの VLAN をマージして link.vlan に設定
各 VLAN ID には getVlanColor(vid) による決定的な色が割り当てられる

ケーブルタイプの色分け

colorByCableType: true（デフォルト）のとき、NetBox のケーブルタイプに応じて色と線種が適用されます。光ファイバー・銅線は実線、DAC/AOC は破線で描画されます:

ケーブルタイプ	色	線種
`smf`, `smf-os1`（シングルモード）	黄	実線
`smf-os2`	アンバー	実線
`mmf-om3`	緑	実線
`mmf-om4`	シアン	実線
`cat5e`	グレー	実線
`cat6`	青	実線
`cat6a`	紫	実線
`cat7`	ピンク	実線
`cat8`	ローズ	実線
`dac-passive`	オレンジ	破線
`dac-active`	赤	破線
`aoc`	ピンク	破線

NetBox 側でケーブルに色が明示的に設定されている場合は、タイプ別マッピングよりそちらが優先されます。ケーブルのラベルと長さはリンクラベルとして表示されます。

デバイスステータスの可視化

colorByStatus: true を指定すると、NetBox のデバイスステータスがノードのスタイルに反映されます:

ステータス	スタイル
`active`	デフォルト
`planned`	グレー破線枠・半透明
`staged`	黄背景・アンバー枠
`failed`	赤背景・赤枠
`offline`	グレー背景・半透明
`inventory`	青背景・破線枠
`decommissioning`	オレンジ背景・破線枠

グループ化オプション

コンバーターの groupBy オプションで、デバイスをどうサブグラフにまとめるかを指定します:

値	説明
`tag`	NetBox タグでグループ化（デフォルト）。タグは `DEFAULT_TAG_MAPPING` で階層レベルに対応
`site`	サイトでグループ化
`location`	ロケーションでグループ化（なければサイトにフォールバック）
`prefix`	プライマリ IP の /16 ネットワークでグループ化
`none`	グループ化なし

仮想マシン

VM を含めた場合（convertToNetworkGraphWithVMs + includeVMs: true）:

VM は破線枠のサーバーノードとして描画される
ラベルには VM 名・プライマリ IP・スペック（vCPU / メモリ）が表示される
groupVMsByCluster: true でクラスタごとの破線サブグラフに入る

凡例

legend オプションでダイアグラムに凡例を表示できます:

// シンプルに有効化
const graph = convertToNetworkGraph(devices, interfaces, cables, {
  legend: true,
})

// カスタマイズ
const graph = convertToNetworkGraph(devices, interfaces, cables, {
  legend: {
    enabled: true,
    position: 'top-right',
    showDeviceTypes: true,
    showBandwidth: true,
    showCableTypes: true,
    showVlans: false,
  },
})

凡例オプション

設定	説明	デフォルト
`enabled`	凡例を表示	`true`
`position`	`top-left`, `top-right`, `bottom-left`, `bottom-right`	`top-right`
`showDeviceTypes`	デバイスタイプのアイコンを表示	`true`
`showBandwidth`	帯域幅インジケーターを表示	`true`
`showCableTypes`	ケーブルタイプの色を表示	`true`
`showVlans`	VLAN の色を表示	`false`

階層出力

マルチサイトのネットワークは convertToHierarchicalYaml で階層 YAML に分割できます:

import { convertToHierarchicalYaml } from 'shumoku-plugin-netbox'

const result = convertToHierarchicalYaml(deviceResp, interfaceResp, cableResp, {
  hierarchyDepth: 'location', // 'site' | 'location' | 'rack'
  fileBasePath: './',
})

console.log(result.main)       // main.yaml の内容
console.log(result.files)      // Map<locationId, yamlContent>
console.log(result.crossLinks) // ロケーションをまたぐケーブルのリスト

階層の深さ

`hierarchyDepth`	説明
`site`	サイトごとにファイル分割
`location`	ロケーションごと（デフォルト）
`rack`	ラックごと（最も細かい）

出力例

# main.yaml
name: "Network Overview"
description: "Hierarchical network topology"

settings:
  direction: TB

subgraphs:
  - id: tokyo-dc
    label: "Tokyo Dc"
    file: "./tokyo-dc.yaml"
    style:
      fill: "accent-blue"
  - id: osaka-dc
    label: "Osaka Dc"
    file: "./osaka-dc.yaml"
    style:
      fill: "accent-green"

links:
  # サイトをまたぐリンクはデバイスを直接参照する
  - from:
      node: tokyo-router
      port: wan1
    to:
      node: osaka-router
      port: wan1

目次