Netoviz

Netoviz (Network Topology Visualizer) is a tool to visualize network topology data that based on RFC8345.

See also Netomox (Network topology modeling toolbox), the tool to construct RFC8345 based network topology data.

Demo

Live demo

A live demo (with limited functions) can be viewed at the following URI,

• https://netoviz.herokuapp.com/

All-in-one docker image.

There is netoviz docker container on Docker Hub. You can run it with docker and use it via http://localhost:3000.

docker pull netoviz/allinone
docker run -p3000:3000 --name nv-allinone netoviz/allinone

If you change the port number to access it, set -p option.

docker run -p3005:3000 --name nv-allinone netoviz/allinone
             ^^^^

Demo movie

Links

Blog

• Batfish を使ってネットワーク構成を可視化してみよう (1) - Qiita
• Batfish を使ってネットワーク構成を可視化してみよう (2) - Qiita
• Batfish を使ってネットワーク構成を可視化してみよう (3) - Qiita
• モデルベースのNW図で差分を可視化する - Qiita
• ネットワーク構成図のレイアウト処理を考えてみる (1) - Qiita
• ネットワーク構成図のレイアウト処理を考えてみる (2) - Qiita
• Batfish を使ってネットワーク構成を可視化してみよう・改 - Qiita

Slide

• 「ネットワーク図」のモデル化とモデルを起点にした自動化の可能性 / onic2018 - Speaker Deck
• ここまでできる! 設定ファイルからのネットワーク構成可視化 / npstudy17 - Speaker Deck

Installation

Environment setup

This application depends on:

• Node.js (v10.x or later)
• NPM (v6.x or later)

Project setup

This application depends on:

• D3.js (v4 or later)
• Nuxt.js

npm install [--legacy-peer-deps]

Run Netoviz

Netoviz server (development mode)

npm run dev

Netoviz server (production mode)

Build (compile and minify) script for production,

npm run build

and run the application.

npm run start

All-in-one docker container

Build all-in-one container. (See detail: Dockerfile for all-in-one container. NOTICE: It copies current sources/packages and rebuild netoviz.)

docker build -t netoviz/allinone .
# or
npm run docker-build

Run.

docker run -p3000:3000 --name nv-allinone netoviz/allinone

Debug.

docker run -it netoviz/allinone /bin/sh

Development

Document

Generate documents with JSDoc.

npm run doc

Directory

• libraries
  • fig/: UML class diagram
  • lib/diagram: Visualizer library
  • server/graph: RFC8345 data model and data convert library
• static/model: Topology data files (json)
  • Each topology data files are generated by Netomox. (see. netomox-examples)
• server: API Server

Application URI

Application (see pages)

• Diagram
  • /model/:network/:snapshot/:modelFile[?visualizer=:visualizer]

REST API

Server (JSON API) (see server/api.js)

• Topology data handling
  • GET /api/models (return topology model list)
  • POST /api/graph/:graphName/:network/:snapshot/:jsonName
    • to save layout (for nested-graph)
  • GET /api/graph/:graphName/:network/:snapshot/:jsonName
    • return diagram data converted from RFC8345-based topology model.

Format, Lints and fixes files

prettier

npm run format

eslint

npm run lint
npm run lint:fix