style.css

body {
    max-width: 800px;
    margin: 50px auto;
    font-family: sans-serif;
}

.item-circle-wrap text {
  font-size: 30px;
  z-index: 100;
opacity: 0; pointer-events: none}
.item-circle-wrap:hover text {opacity: 1}

.value-group {cursor: pointer}
.value-group text{
  font-size: 20px;
  text-shadow: 0 0 5px white;
  font-weight: bold;
  opacity: 0; pointer-events: none}
.value-group:hover text {opacity: 1}
.value-group:hover path {
  stroke-width: 5;
  stroke: #77f;
}
.value-group circle.recv {
  fill: #f55;
  pointer-events: none;
  opacity: 0;
}
.value-group:hover circle.recv {
  opacity: 1;
}
.group-name{opacity: 0}
.group-line {
  stroke: #ddf;
  stroke-width: 2px;
}

.connection {
  stroke: #aaa;
  stroke-width: 3px;
}
.connection-async {
  stroke: #faa;
  stroke-dasharray: 10 3;
}

.value {
  fill: #aaa;
}
.value-end {
  fill: #303F9F;
}
.value-start {
  fill: #4DD0E1;
}
.value-start.value-end {
  fill: #999;
}