vis.jsでWebブラウザにネットワーク図を書く

JavaScript

プログラムの構造を解析し表現できるものを探していて、Webブラウザにネットワーク図を簡単に書けるものを見つけました。

色々と試してみたのですが vis.js が良さそうです。サンプルを動かしてみましたが、こんな感じでWebブラウザに表示されます。

 

サンプルコードはこんな感じです。Thymeleafを使用しています。

sample.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>sample</title>
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
</head>
<body>
  <h2>Analyze Graph</h2>
  <div id="network" class="network-graph mb-3"></div>
</body>
<script src="/script.js" th:src="@{/script.js}"></script>
</html>

 

script.js
// create an array with nodes
var nodes = new vis.DataSet([
{ id: 1, label: "Node 1" },
{ id: 2, label: "Node 2" },
{ id: 3, label: "Node 3" },
{ id: 4, label: "Node 4" },
{ id: 5, label: "Node 5" },
]);

// create an array with edges
var edges = new vis.DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
{ from: 3, to: 3 },
]);

// create a network
var container = document.getElementById("network");
var data = {
nodes: nodes,
edges: edges,
};
var options = {};
var network = new vis.Network(container, data, options);

ここで要注意なのがjavascriptを呼び出す位置です。

サンプルにはhtmlファイルまでありませんでしたが、普通にhead要素内でjavascriptを呼び出したらエラーになりました。なので、エラーが起きないことを確認できたbody要素の下で呼び出しています。