Upgrade to Pro — share decks privately, control downloads, hide ads and more …

構成管理DB からネットワーク図を自動生成する

構成管理DB からネットワーク図を自動生成する

JANOG41 の発表資料です。

net-hengeというOSSプロジェクトを通じて、「構成管理DB から自動でネットワーク図を描く」というチャレンジを行なっています。

ネットワークは日々変化しますが、ネットワーク図の更新が面倒ではありませんか?このデバイスはあのデバイスとつながっている。このレベルの接続情報の集まりから、オートレイアウトでネットワーク図を描きます。必要なのは接続情報が入ったJSONとJavaScriptファイルのみ。ブラウザですぐ閲覧できます。

PowerPointなし!コピーしてドラッグして位置調整...とか一切なし!の世界を目指しています。このセッションでは、inet-henge でどのようなネットワーク図が描けるかを紹介します。

https://github.com/codeout/inet-henge

Shintaro Kojima

January 26, 2018
Tweet

More Decks by Shintaro Kojima

Other Decks in Technology

Transcript

  1. ⼊⼒する情報 A B { "nodes": [ { "name": "A" },

    { "name": "B" } ], "links": [ { "source": "A", "target": "B" } ] } "ͱ#͕ͭͳ͕͍ͬͯΔ 8
  2. 出⼒サンプル ⼊⼒ { "nodes": [ { "name": "A" }, {

    "name": "B" } ], "links": [ { "source": "A", "target": "B" } ] } 10
  3. 3ノード ⼊⼒ { "nodes": [ { "name": "A" }, {

    "name": "B" }, { "name": "C" } ], "links": [ { "source": "A", "target": "B" }, { "source": "B", "target": "C" }, { "source": "C", "target": "A" } ] } 11
  4. POP名による
 グルーピング ⼊⼒ # json { "nodes": [ { "name":

    "POP1-A" }, { "name": "POP1-B" }, { "name": "POP2-C" } ], "links": [ { "source": "POP1-A", "target": "POP1-B" }, { "source": "POP1-B", "target": "POP2-C" }, { "source": "POP2-C", "target": "POP1-A" } ] } # html <script> var diagram = new Diagram( '#diagram', 'index.json', {pop: /^([^\s-]+)-/} ); diagram.init('loopback', 'interface'); </script> 12
  5. アイコンと メタデータ ⼊⼒ { "nodes": [ { "name": "POP1-A", "icon":

    "./images/router.png" }, { "name": "POP1-B", "icon": "./images/router.png" }, ... ], "links": [ { "source": "POP1-A", "target": "POP1-B", "meta": { "interface": { "source": "ge-0/0/0", "target": "Te0/0/0/0" }} }, ... ] } 13