JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
<script src="http://d3js.org/d3.v3.js"></script>
<svg width=800 height=1000><g/></svg>

CSS

/* This sets the color for "TK" nodes to a light blue green. */
g.type-TK > rect {
  fill: #00ffd0;
}

text {
  font-weight: 300;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
  font-size: 14px;
}

.node rect {
  stroke: #999;
  fill: #fff;
  stroke-width: 1.5px;
}

.edgePath path {
  stroke: #333;
  stroke-width: 1.5px;
}

svg {
    border: 1px solid #999;
}
}

JavaScript

// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});

// States and transitions from RFC 793
var nodeNames = [ "H.01", "H.02", "S.01", "S.02", "Trouble"];

// Automatically label each of the nodes
nodeNames.forEach(function(name) { g.setNode(name, { label: name }); });

// Set up the edges
g.setEdge("H.01",     "H.02",     { label: "r231" });
g.setEdge("H.02",     "Trouble",  { label: "for giggles" });
g.setEdge("S.01",     "S.02",     { label: "has a <a href='javascript:void(0)' onclick='alert(1234)'>button</a>", labelType:"html" });
g.setEdge("S.02",     "Trouble",  { label: "we'll do this one live!" });

// Set some general styles
g.nodes().forEach(function(v) {
  var node = g.node(v);
  node.rx = node.ry = 5;
});

// Add some custom colors based on state
g.node('Trouble').style = "fill: #f77";
g.node('S.01').style = "fill: #7f7";

var svg = d3.select("svg");
var inner = svg.select("g");

// Set up zoom support
var zoom = d3.behavior.zoom().on("zoom", function() {
      inner.attr("transform", "translate(" + d3.event.translate + ")" +
                                  "scale(" + d3.event.scale + ")");
    });
svg.call(zoom);

// Create the renderer
var render = new dagreD3.render();

// Run the renderer. This is what draws the final graph.
render(inner, g);

// Center the graph
var initialScale = 0.75;
zoom
  .translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
  .scale(initialScale)
  .event(svg);
svg.attr('height', g.graph().height * initialScale + 40);