JSFiddle - React, Tailwind, and code Playground

by Goin

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
    <head>
        <meta charset="UTF-8"/>
        <title>Example1 jquery.graphviz.js</title>
    <head>
    <body>
        <svg height="388pt" style="width: 100%;" viewBox="0.00 0.00 627.00 388.00" width="627pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g class="graph" id="graph0" transform="scale(1 1) rotate(0) translate(4 384)">
                <title>Europe countries</title>
                <polygon points="-4,4 -4,-384 623,-384 623,4 -4,4" style="fill:white;stroke:white;"/>
                <!-- Netherlands -->
                <g class="node" id="node1" style="position: relative;">
                    <title>Netherlands</title>
                    <ellipse cx="69" cy="-18" rx="68.9883" ry="18" style="fill:none;stroke:black;"/>
                    <text style="font-family:Times New Roman;font-size:14.00;" text-anchor="middle" x="69" y="-13.9">
                        Netherlands
                    </text>
                </g>
                <!-- Italy -->
                <g class="node" id="node2" style="position: relative;">
                    <title>Italy</title>
                    <ellipse cx="137" cy="-182" rx="32.157" ry="18" style="fill:none;stroke:black;"/>
                    <text style="font-family:Times New Roman;font-size:14.00;" text-anchor="middle" x="137" y="-177.9">
                        Italy
                    </text>
                </g>
                <!-- Belgium -->
                <g class="node" id="node6" style="position: relative;">
                    <title>Belgium</title>
                    <ellipse cx="137" cy="-92" rx="50.0315" ry="18" style="fill:none;stroke:black;"/>
                    <text style="font-family:Times New Roman;font-size:14.00;" text-anchor="middle" x="137" y="-87.9">
          ...

CSS

g.node,
g.edge {
    cursor: pointer;
}

JavaScript

$.fn.graphviz = function () {
        var arrow = "->";
        function getTitleOfNode(nodeItem) {
            return $(nodeItem).children("title").text();
        }
        function getNode(nodeTitle) {
            var title = $("g.node title").filter(function (idx) {
                return this.textContent.trim() === nodeTitle;
            });
            return title.parent();
        }
        function getEdges(nodeTitle, io) {
            if (io && io === "input") {
                nodeTitle = nodeTitle + arrow;
            } else if (io && io === "output") {
                nodeTitle = arrow + nodeTitle;
            }
            var titles = $("g.edge title").filter(function (idx) {
                return this.textContent.indexOf(nodeTitle) !== -1;
            });
            return titles.parent();
        }
        function getEdge(nodeTitleSource, nodeTitleDestination) {
            var title = nodeTitleSource + arrow + nodeTitleDestination;
            var titles = $("g.edge title").filter(function (idx) {
                return this.textContent.indexOf(title) !== -1;
            });
            return titles.parent();
        }
        function moveTextNode(textItem, ix, iy) {
            textItem.x.baseVal.getItem(0).value = textItem.x.baseVal.getItem(0).value + ix;
            textItem.y.baseVal.getItem(0).value = textItem.y.baseVal.getItem(0).value + iy;
        }
        function moveNode(nodeTitle, ix, iy) {
            var nodeItem = getNode(nodeTitle);
            var children = $(nodeItem.children());
            var text = children.filter("text")[0];
            if (text) {
                moveTextNode(text, ix, iy);
            }
            var ellipse = children.filter("ellipse")[0];
            ellipse.cx.baseVal.value = ellipse.cx.baseVal.value + ix;
            ellipse.cy.baseVal.value = ellipse.cy.baseVal.value + iy;
        }
        function movePath(pathItem, ix, iy, io) {
            //...