長い事てきとうなライブラリがないか探していたのですが、cytoscape.jsが良さそうなので、おうちのネットワーク図を書いてみました。
細い線は100Mで太い線は1Gです。
index.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="cytoscape.min.js"></script>
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div id="cy"></div>
<input type="button" value="Save as PNG" id="download"/>
<script src="custom.js"></script>
</body>
</html>
custom.css
#cy {
width: 100%;
height: 90%;
display: block;
}
custom.js
var cy = cytoscape({
container: $('#cy'),
elements: [
{
data: { id: 'modem' }
},
{
data: { id: 'fw' }
},
{
data: { id: 'nas' }
},
{
data: { id: 'db120' }
},
{
data: { id: 'c1k' }
},
{
data: { id: 'mt' }
},
{
data: { id: 'gps1' }
},
{
data: { id: 'gps2' }
},
{
data: { id: 'jjy1' }
},
{
data: { id: 'jjy2' }
},
{
data: { id: 'macmini' }
},
{
data: { id: 'oumon' }
},
{
data: { id: 'wifi' }
},
{
data: { id: 'amd64' }
},
{
data: { id: 'ms' }
},
{
data: { id: 'ryzen' }
},
{
data: { id: 'e0', source: 'fw', target: 'modem', 'speed': 5 }
},
{
data: { id: 'e1', source: 'fw', target: 'nas', 'speed': 5 }
},
{
data: { id: 'e2', source: 'nas', target: 'db120', 'speed': 5 }
},
{
data: { id: 'e3', source: 'nas', target: 'mt', 'speed': 2 }
},
{
data: { id: 'e4', source: 'mt', target: 'gps1', 'speed': 2 }
},
{
data: { id: 'e5', source: 'mt', target: 'gps2', 'speed': 2 }
},
{
data: { id: 'e6', source: 'mt', target: 'jjy1', 'speed': 2 }
},
{
data: { id: 'e7', source: 'mt', target: 'jjy2', 'speed': 2 }
},
{
data: { id: 'e8', source: 'macmini', target: 'db120', 'speed': 5 }
},
{
data: { id: 'e9', source: 'oumon', target: 'db120', 'speed': 2 }
},
{
data: { id: 'e10', source: 'wifi', target: 'nas', 'speed': 2 }
},
{
data: { id: 'e11', source: 'amd64', target: 'fw', 'speed': 5 }
},
{
data: { id: 'e12', source: 'ms', target: 'fw', 'speed': 5 }
},
{
data: { id: 'e13', source: 'ryzen', target: 'fw', 'speed': 5 }
},
{
data: { id: 'e14', source: 'c1k', target: 'db120', 'speed': 5 }
},
],
style: [
{
selector: 'node',
style: {
// 'shape': 'rectangle',
'text-valign': 'center',
'color': 'white', 'text-outline-width': 2,
//, 'text-outline-color': 'green', 'background-color': 'green' 'color': 'white', 'text-outline-width': 2, 'text-outline-color': 'green', 'background-color': 'green',
'label': 'data(id)'
}
},
/*
style: {
'background-color': '#666',
'label': 'data(id)'
}
},
*/
{
selector: 'edge',
style: {
'width': 'data(speed)',
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
}
}
],
layout: {
name: 'cose',
animate: false
}
});
$('#download').on("click", function(ev) {
var a = document.createElement('a');
//var blob = new Blob([content], {'type': contentType});
var option = {
output: "blob"
};
var blob = new Blob([
window.cy.png(option)
], {'type': 'application/octet-stream'});
a.href = window.URL.createObjectURL(blob);
a.download = "ouchi_network.png";
a.click();
});