tjuh ,a rnda aicj0b - janog...rndb gkb 6 sng...
TRANSCRIPT
![Page 1: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/1.jpg)
rn D a
2 4 4iDm 5 67 @
![Page 2: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/2.jpg)
rn D a
問題:更新が面倒くさい !
2
![Page 3: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/3.jpg)
3
![Page 4: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/4.jpg)
4
![Page 5: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/5.jpg)
5
![Page 6: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/6.jpg)
rn D B GK B
6
![Page 7: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/7.jpg)
S NG
• 自動でネットワーク図を描くチャレンジ • 入力 = 「デバイス1 と デバイス2 がつながっている」レベルの接続情報の集まり
• 「位置情報なし」縛り
codeout/inet-henge
7
![Page 8: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/8.jpg)
A B
{
"nodes": [
{ "name": "A" },
{ "name": "B" }
],
"links": [
{ "source": "A", "target": "B" }
]
}
A と B がつながっている
8
![Page 9: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/9.jpg)
G N1. 構成管理DB から JSON を書き出す
2. HTML + Javascript と一緒に、Web サーバーにのせる
3. ブラウザでアクセスする。以上! "
参考: https://github.com/codeout/inet-henge デモ: https://inet-henge.herokuapp.com/
9
![Page 10: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/10.jpg)
{
"nodes": [
{ "name": "A" },
{ "name": "B" }
],
"links": [
{ "source": "A", "target": "B" }
]
}
10
![Page 11: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/11.jpg)
D
{
"nodes": [
{ "name": "A" },
{ "name": "B" },
{ "name": "C" }
],
"links": [
{ "source": "A", "target": "B" },
{ "source": "B", "target": "C" },
{ "source": "C", "target": "A" }
]
}11
![Page 12: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/12.jpg)
101 V h Dt h
# 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
![Page 13: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/13.jpg)
cdi SoD
{
"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
![Page 14: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/14.jpg)
2 /7 u jD
https://www.interop.jp/2017/images/shownet/shownet_topology.pdf
JSON
注) 比較のため 回転しています14
![Page 15: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/15.jpg)
GG """
美しさで 手書きに勝てないが、 実用に耐える
15
![Page 16: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/16.jpg)
D dce VPG
アルゴリズムによる描画。基本的なアイデアは
• D3.js の force layout に制約を加える
• 制約 = 似たノードは近いところに配置
16
![Page 17: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/17.jpg)
N D S B「似たノード」=「共通のノードにつながっている」
• 対向ノード集合のジャッカード距離をノード間の距離に採用
• 例: ③ は [ ①, ④, ⑤ ] に、④ は [ ②, ③, ⑥ ] につながっている。 ③ ! ④ の距離は、[ ①, ④, ⑤ ] ! [ ②, ③, ⑥ ]のジャッカード距離
0.8
0.671
17
![Page 18: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/18.jpg)
ow
https://inet-henge.herokuapp.com/
• # 注目ポイント • リロードで配置が変わらない • ズームすると細かい情報を表示
18
![Page 19: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/19.jpg)
23 n
CSS によるスタイリングが可能
19
![Page 20: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/20.jpg)
S
• 自動でネットワーク図を描くチャレンジ • 「位置情報なし」縛り • D3.js ベースの SVG を出力 • そこそこいけるはず。ぜひ使ってみてください!
codeout/inet-henge
20
![Page 21: tjuh ,A rnDa aicj0B - JANOG...rnDB GKB 6 SNG •自動でネットワーク図を描くチャレンジ •入力 = 「デバイス1 と デバイス2 がつながっている ... 2.HTML](https://reader035.vdocuments.pub/reader035/viewer/2022070922/5fba3832d09e8a597f38a745/html5/thumbnails/21.jpg)
O a
• 使ってみてくれる方 • ご意見、不具合報告をしてくれる方 • パッチを送ってくれる方 みなさんのご協力をお待ちしています!
21