<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Network Diagram</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
overflow: hidden;
background: #fafafa;
}
#diagram {
width: 100vw;
height: 100vh;
}
.node {
cursor: pointer;
}
.node rect {
fill: #667eea;
stroke: #fff;
stroke-width: 3px;
}
.node:hover rect {
fill: #764ba2;
}
.node-label {
font-size: 14px;
font-weight: bold;
fill: #fff;
text-anchor: middle;
dominant-baseline: central;
pointer-events: none;
}
.node-id {
font-size: 10px;
fill: #333;
text-anchor: middle;
pointer-events: none;
}
.link {
fill: none;
stroke: #9ca3af;
stroke-width: 2px;
}
.link-label {
font-size: 11px;
fill: #666;
text-anchor: middle;
pointer-events: none;
}
.arrow {
fill: #9ca3af;
}
</style>
</head>
<body>
<svg id="diagram"></svg>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="app.js"></script>
</body>
</html>
