ネットワーク図がない現場へ｜Ciscoのshow runからネットワーク構成図を自動生成するツールを作った

【PR】本記事にはアフィリエイト広告が含まれています。

ネットワークの保守を引き継いだとき、こんな状況に出会ったことはありませんか？

  • 機器のコンフィグは取れる。interface の description もちゃんと書いてある
  • でも、最新のネットワーク図がない（あっても何年も前のもので、実機と合っていない）

description に To CORE-SW2 Te1/0/1 と書いてあるなら、どの機器のどのポートがどこにつながっているかは、コンフィグを読めば分かります。ただ、それを10台、50台、100台分読んで、手で図に起こすのはかなりつらい作業です。

そこで、Cisco の show running-config を貼り付けるだけで、ネットワーク構成図を自動で描くツールを作りました。

👉 CFG→NET — Cisco Config ネットワーク図ジェネレーター（GitHub）

こういうのもあるよ、くらいの気持ちで紹介させてください。

どんなツール？

ひとことで言うと、コンフィグ → 図 の変換ツールです。

項目 内容
入力 Cisco IOS / IOS-XE の show running-config（複数台まとめてOK）
出力 論理図・物理図・L3図・一覧表（PNG / SVG / CSV / JSON）
動作環境 HTMLファイル1つ。ブラウザで開くだけ（Chrome / Edge 推奨）
インストール 不要。ビルドも依存ライブラリもなし
外部通信 なし。コンフィグはブラウザの外に出ない
ライセンス MIT

実際の保守案件で「コンフィグはあるが構成図がない」ときのために作ったもので、100台規模の実環境のデータで検証しています。

コンフィグには IP アドレスや ACL など、外に出したくない情報がたくさん含まれます。このツールはサーバにアップロードせず、手元のブラウザの中だけで処理するので、お客さまの環境のコンフィグでも使いやすいと思います。

「サンプル読込」を押したところ。左のテキストエリアにコンフィグを貼り付けると、右側に論理図が描かれる

仕組み：descriptionから接続を推定する

ポイントは、interface の description から対向の機器とポートを読み取るところです。

interface TenGigabitEthernet1/0/1
 description To CORE-SW2 Te1/0/1 (Po1)
 switchport mode trunk
 channel-group 1 mode active

この description から「CORE-SW1 の Te1/0/1 は、CORE-SW2 の Te1/0/1 につながっている」と判断して、図に線を引きます。

現場のdescriptionの「ゆれ」に対応

実際の現場の description は、きれいに統一されていないことがほとんどです。そこで、よくあるゆれに対応しています。

よくある状況 ツールの動き
書き方がバラバラ（Gi / GigabitEthernet / G / GE / Te / Fa など） 主な表記をまとめて解釈
スタック番号を省略している（G0/27 と書いてあるが、実際は Gi1/0/27） 実在するポートに合わせて補正
Port-channel のメンバーポートの description が間違っている Port-channel 側の description が正しければ、メンバー同士を番号順に対応付ける
古い description が残っていて矛盾している 「お互いに指し合っているペア」を優先し、「1ポートにケーブル1本」として古い情報によるゴーストの線を消す
ホスト名の書き間違い つながらなかった接続を一覧にして、似た名前の候補を表示。ワンクリックで接続できる

description が書かれていない接続は、show cdp neighbors detail の出力を貼れば、そこからも接続を拾えます。それでも分からないところは、画面から手で追加できます。

接続タブ。descriptionから推定した接続が一覧で表示され、手で追加・編集もできる

4つのビュー

貼り付けたコンフィグから、次の4つの図や表を作れます。

論理図

機器と機器の接続を描いた、いわゆる「ネットワーク構成図」です。VLAN、Port-channel、スタック構成、HSRP / VRRP、STP のルートなども読み取って表示します。冒頭の画面の右側が、この論理図です。

物理図

機器ごとに「本社3F サーバ室 Rack-A」のような設置場所を入れると、場所ごとに枠でまとめて表示します。

光ファイバ・UTP・DAC は、線の色と種類で区別します。最初はインターフェース名から判断しますが（Te 系は光、Gi 系は UTP）、show interface status を貼ると Type 列（1000BaseSX など）を見て、実際に挿さっているモジュールに合わせて更新します。

物理図。設置場所ごとに点線の枠でまとめられ、光ファイバはオレンジ、UTPは青の線で描かれる

L3図

「どのセグメントが、どのルータを通って、どのセグメントとつながっているか」を1枚で表す図です。コンフィグの IP アドレスとサブネットマスクからセグメントを集計し、SVI やルーテッドポートとのつながりを描きます。

管理用の SVI を1つ持っているだけの L2 スイッチは自動で外し、実際にルーティングしている機器だけを表示するので、図がごちゃごちゃしにくくなっています。

L3図。セグメント（サブネット）と、それをつなぐL3スイッチ・ルータの関係が1枚で分かる

一覧表

VLAN・機器・IP アドレスの一覧を表にまとめ、CSV で出力できます。BOM 付きの UTF-8 なので、日本語の Excel でそのまま開けます。

一覧表。VLAN・機器・IPアドレスの一覧を表ごとにCSVで出力できる

使い方

1. まずはサンプルで試す

  1. GitHub から最新版の network-diagram_V2_4.html をダウンロードして、ブラウザで開く
  2. 「サンプル読込」 を押す

コアスイッチ2台、アクセススイッチ2台、ルータ、ファイアウォールのデモ構成が読み込まれ、すぐに図を確認できます。

2. 自分の環境のコンフィグを入れる

  1. 「新規」 を押す
  2. 機器タブに show running-config を貼り付けて 「解析して追加」 を押す

何台分をまとめて貼っても、hostname の行で自動的に分けてくれます。

機器ごとのコンフィグをファイルで保存しているなら、「フォルダから一括取込」 が便利です。フォルダを選ぶだけで、サブフォルダの中まで探して取り込みます。文字コードは UTF-8 と Shift_JIS を自動で判別します。

3. 配置を整えて出力する

自動で配置したあと、機器をドラッグして見やすく並べます。複数選択、整列、元に戻す（Ctrl+Z）など、図を整えるための操作はひととおりそろっています。

整えたら出力します。

形式 使いどころ
PNG PowerPoint に貼る（白背景・2倍の解像度）
SVG 拡大しても粗くならない。大きな構成ならこちらがおすすめ
CSV 一覧表を Excel で使う
JSON 作業データの保存・読み込み

VLAN や機器名で絞り込んだ状態のまま出力できるので、「VLAN 別の図」「拠点別の図」も簡単に作れます。

そのほかの便利な機能

  • 末端の機器も表示できる：show mac address-table と show arp を貼ると、アクセスポートにつながっている PC・サーバ・プリンタ・IP 電話などを、スイッチごと・種類ごとにまとめて表示します
  • Cisco 以外の機器も置ける：サーバ、ファイアウォール、無線 AP、ストレージ、WAN 回線などを手で追加できます。種類ごとに形が変わり、description に名前が書かれていれば接続の推定にも使われます
  • 作業内容の自動保存：ブラウザの localStorage に自動で保存されるので、うっかりブラウザを閉じても続きから作業できます（案件の区切りでは JSON で保存しておくのがおすすめです）

注意点

便利ですが、万能ではありません。

  • 接続の推定は description の書き方しだいです。何も書かれていない接続は、CDP の情報を貼るか、手で追加する必要があります
  • 対応しているのは Cisco IOS / IOS-XE 系の書式です。NX-OS や他社の機器のコンフィグは解析できません（オブジェクトとして手で置くことはできます）
  • L3図は VRF に未対応です。すべてのアドレスを1つのルーティングテーブルとして描きます
  • 末端機器の種類（PC・プリンタなど）は、MAC アドレスのベンダ情報や description からの推測です。違っていたら画面から直せます

まとめ

  • 「コンフィグはあるのに図がない」現場では、description があれば図は自動で作れる
  • Cisco の show running-config を貼るだけで、論理図・物理図・L3図・一覧表を作成
  • HTMLファイル1つ・外部通信なしなので、お客さまのコンフィグでも手元で安全に使える
  • description のゆれや古い情報にも、ある程度対応している

構成図を一から手で描く前に、一度コンフィグを流し込んでみてください。ゼロから描くより、ずっと早く「たたき台」ができるはずです。

👉 CFG→NET — Cisco Config ネットワーク図ジェネレーター（GitHub）