JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
        <svg id="svg-canvas" width=500 height=1000>
            <g transform="translate(40, 30)" />
        </svg>

CSS

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;
    cursor: pointer;
}
.node {
    cursor: pointer;
}

JavaScript

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

//adding nodes and edges

g.setNode(0, {
    label: "dads dad",
});
g.setNode(1, {
    label: "dads ma",
});
g.setNode(2, {
    label: "dads parents marriage",
});
g.setNode(3, {
    label: "dad",
});
g.setNode(4, {
    label: "mom",
});
g.setNode(5, {
    label: "parents marriage",
});
g.setNode(6, {
    label: "moms dad",
});
g.setNode(7, {
    label: "moms ma",
});
g.setNode(8, {
    label: "moms parents marriage",
});
g.setNode(9, {
    label: "me",
});
g.setNode(10, {
    label: "wife",
});
g.setNode(11, {
    label: "my marriage",
});
g.setNode(12, {
    label: "child1",
});
g.setNode(13, {
    label: "child2",
});
g.setNode(14, {
    label: "child3",
});
g.setNode(15, {
    label: "child4",
});
g.setNode(16, {
    label: "childschild",
});
g.setNode(17, {
    label: "childs child child",
});
g.setNode(18, {
    label: "childs child bro)))ппц",
});


g.setEdge(0, 2);
g.setEdge(1, 2);
g.setEdge(2, 3);

g.setEdge(3, 5);
g.setEdge(4, 5);
g.setEdge(5, 9);

g.setEdge(6, 8);
g.setEdge(7, 8);
g.setEdge(8, 10);

g.setEdge(9, 11);
g.setEdge(10, 11);
g.setEdge(11, 12);
g.setEdge(11, 13);
g.setEdge(11, 14);
g.setEdge(11, 15);

g.setEdge(13, 16);
g.setEdge(16, 17);
g.setEdge(16, 18);


// Round the corners of the nodes
g.nodes().forEach(function (v) {
    var node = g.node(v);
    node.rx = node.ry = 5;
});

//makes the lines smooth
g.edges().forEach(function (e) {
    var edge = g.edge(e.v, e.w);
    edge.lineInterpolate = 'basis';
});

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

// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
    inner = svg.append("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);

// Run...