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

JANOG41 の発表資料です。

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

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

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

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

Transcript

1. 構成管理DB から ネットワーク図を ⾃動⽣成する Shintaro Kojima コーダンス / @codeout
2. ネットワーク図の話をします ໰୊
 ߋ৽͕໘౗͍͘͞
   2
3. 作図で悩む 3
4. 間違う 4
5. 忘れる 5
6. ネットワーク図？ ないけど？ 6
7. なんとかしたい w ࣗಈͰωοτϫʔΫਤΛඳ͘νϟϨϯδ
   w ೖྗ
   
   ʮσόΠε
   ͱ
   σόΠε
   ͕ͭͳ͕͍ͬͯΔʯ Ϩϕϧͷ઀ଓ৘ใͷू·Γ
   w ʮҐஔ৘ใͳ͠ʯറΓ codeout/inet-henge 7
8. ⼊⼒する情報 A B { "nodes": [ { "name": "A" }, { "name": "B" } ], "links": [ { "source": "A", "target": "B" } ] } "
   ͱ
   #
   ͕ͭͳ͕͍ͬͯΔ 8
9. 使いかた  ߏ੒؅ཧ%#
   ͔Β
   +40/
   Λॻ͖ग़͢
    )5.-
   
   +BWBTDSJQU
   ͱҰॹʹɺ8FC
   αʔόʔʹͷͤΔ
    ϒϥ΢βͰΞΫηε͢ΔɻҎ্ʂ
   
   ࢀߟ
   https://github.com/codeout/inet-henge
   σϞ
   https://inet-henge.herokuapp.com/ 9
10. 出⼒サンプル ⼊⼒ { "nodes": [ { "name": "A" }, { "name": "B" } ], "links": [ { "source": "A", "target": "B" } ] } 10
11. 3ノード ⼊⼒ { "nodes": [ { "name": "A" }, { "name": "B" }, { "name": "C" } ], "links": [ { "source": "A", "target": "B" }, { "source": "B", "target": "C" }, { "source": "C", "target": "A" } ] } 11
12. 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
13. アイコンと メタデータ ⼊⼒ { "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
14. ShowNet 2017 トポロジー https://www.interop.jp/2017/images/shownet/shownet_topology.pdf +40/ ஫
    ൺֱͷͨΊ
    ճస͍ͯ͠·͢ 14
15. デモ https://inet-henge.herokuapp.com/ w
    ஫໨ϙΠϯτ
    w ϦϩʔυͰ഑ஔ͕มΘΒͳ͍
    w ζʔϜ͢Δͱࡉ͔͍৘ใΛදࣔ 15
16. まとめ w ࣗಈͰωοτϫʔΫਤΛඳ͘νϟϨϯδ
    w ʮҐஔ৘ใͳ͠ʯറΓ
    w %KT
    ϕʔεͷ
    47(
    Λग़ྗ
    w ͍͚ͦͦ͜͜Δ͸ͣɻͥͻ࢖ͬͯΈ͍ͯͩ͘͞ʂ codeout/inet-henge 16
17. ⼿伝ってくれる⽅を募集！！ w ࢖ͬͯΈͯ͘ΕΔํ
    w ͝ҙݟɺෆ۩߹ใࠂΛͯ͘͠ΕΔํ
    w ύονΛૹͬͯ͘ΕΔํ
    Έͳ͞Μͷ͝ڠྗΛ͓଴͍ͪͯ͠·͢ʂ 17