ネットワーク図を自動で綺麗に書きたい

ネットワーク図を自動で綺麗に書きたい

ネットワーク図をVisioやExcelで書くのは大変。
文書の管理も大変。運用管理ツールなどですでに接続状態はもってるのになぁ・・・といった時に朗報です。

vis.jsという素晴らしいツールがあります!

vis.jsを使えば、JSONデータでホスト(node)と、その接続(edge)を渡すだけで綺麗に自動でホストを配置してネットワークを書いてくれるのです。

以下サンプルです。オプションでかなり色々なカスタマイズが可能です。とりあえずぷよぷよするのをなくしたければ、optionsのphysicsのenabledをfalseにすると動かした位置に止まるようになります。nodeにx,yの座標を入れれば固定位置に置くこともできるので、CoreL3などは固定してしまってもよいかもしれませんね。



JavaScriptでcanvasを使わないでネットワーク図を書いてみるよ

ドラッグアンドドロップの動作後のアクションに、AjaxでサーバサイドとAPI通信させてDB連携などして位置情報を保管共有できれば、いいな。
結線や線の削除をする動作を入れたり、オブジェクトの作成・削除を入れたり。
各線に両端のポート名を入れたり。
監視システムと連動させて、ネットワーク異常時に線を赤くしたり。
線や、オブジェクトにカーソルを合わせたら、統計情報のAPIをつついてhichartのようなグラフを表示したり。
色々とやりたいことが膨らんでくる!

論理ネットワーク図(IPやVLANが分かる図)と、物理結線図(装置やポートが分かる図)の両方を切り替えてみたり。
物理的な支障箇所と、論理的な影響箇所が一目でわかる仕組みが欲しいな。

まだまだ先は長そうだけど、コツコツつくってみるかな。

サーバサイドは、Mojoliciousが拡張性があって、とっつきやすそうなのでフレームワークに使ってみるかな。

 

 


ネットワーク図?フロー図?状態遷移図?

JavaScriptでネットワークや、データフロー、状態遷移を表現できる図かけたらいいなぁと思っていた所、いいのがありました!

状態遷移図等々
http://jsplumb.org/demo/statemachine/dom.html

ラック搭載図
https://github.com/izawa/rackplan.js

シーケンス図
http://bramp.github.io/js-sequence-diagrams/