autioch/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Graphs</title>
  <style type="text/css">
    body {margin:0}
    canvas {display:block;background:#eee}
  </style>
</head>
<body>
  <script type="text/javascript">
    var data = [{
      "id": "a",
      "label": "Element A",
      "x": 160,
      "y": 77,
      "links": ["b", "c"]
    }, {
      "id": "b",
      "label": "Function B",
      "x": 410,
      "y": 219,
      "links": ["a", "c"]
    }, {
      "id": "c",
      "label": "Block C",
      "x": 126,
      "y": 386,
      "links": ["a", "d"]
    }, {
      "id": "d",
      "label": "Modifier D",
      "x": 418,
      "y": 535,
      "links": []
    }];

    var currentItem, request, dragOffsetX, dragOffsetY;
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    document.body.appendChild(canvas);

    function canvasDraw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.font = "20pt Arial";
      context.textAlign = "center";
      context.textBaseline = "middle";
      context.strokeStyle = '#393';
      data.forEach(item => item.links.forEach(linkId => drawLink(linkId, item)));
      context.strokeStyle = '#444';
      data.forEach(item => context.fillText(item.label, item.x, item.y));
      request = null;
    }

    function drawLink(linkId, item) {
      var linked = data.find(search => search.id === linkId);
      context.beginPath();
      context.moveTo(item.x, item.y);
      context.lineTo(linked.x, linked.y);
      context.stroke();
    }

    function requestAnimation() {
      request && cancelAnimationFrame(request);
      request = requestAnimationFrame(canvasDraw);
    }

    function onMouseDown(ev) {
      currentItem = data.find(item => (ev.pageX - 50 < item.x) && (item.x < ev.pageX + 50) && (ev.pageY - 25 < item.y) && (item.y < ev.pageY + 25));
      if (currentItem) {
        dragOffsetX = ev.pageX - currentItem.x;
        dragOffsetY = ev.pageY - currentItem.y;
        window.onmousemove = onMouseMove;
        window.onmouseup = () => (window.onmousemove = null);
      }
    }

    function onMouseMove(ev) {
      currentItem.x = ev.pageX - dragOffsetX;
      currentItem.y = ev.pageY - dragOffsetY;
      requestAnimation();
    }

    function canvasResize() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      requestAnimation();
    }

    window.onresize = canvasResize;
    window.onmousedown = onMouseDown;
    window.dataSerialize = JSON.stringify.bind(JSON, data);
    canvasResize();
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Graphs</title>
	<style type="text/css">
	body {margin:0}
	canvas {display:block;background:#eee}
	</style>
	</head>
	<body>
	<script type="text/javascript">
	var data = [{
	"id": "a",
	"label": "Element A",
	"x": 160,
	"y": 77,
	"links": ["b", "c"]
	}, {
	"id": "b",
	"label": "Function B",
	"x": 410,
	"y": 219,
	"links": ["a", "c"]
	}, {
	"id": "c",
	"label": "Block C",
	"x": 126,
	"y": 386,
	"links": ["a", "d"]
	}, {
	"id": "d",
	"label": "Modifier D",
	"x": 418,
	"y": 535,
	"links": []
	}];

	var currentItem, request, dragOffsetX, dragOffsetY;
	var canvas = document.createElement('canvas');
	var context = canvas.getContext('2d');
	document.body.appendChild(canvas);

	function canvasDraw() {
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.font = "20pt Arial";
	context.textAlign = "center";
	context.textBaseline = "middle";
	context.strokeStyle = '#393';
	data.forEach(item => item.links.forEach(linkId => drawLink(linkId, item)));
	context.strokeStyle = '#444';
	data.forEach(item => context.fillText(item.label, item.x, item.y));
	request = null;
	}

	function drawLink(linkId, item) {
	var linked = data.find(search => search.id === linkId);
	context.beginPath();
	context.moveTo(item.x, item.y);
	context.lineTo(linked.x, linked.y);
	context.stroke();
	}

	function requestAnimation() {
	request && cancelAnimationFrame(request);
	request = requestAnimationFrame(canvasDraw);
	}

	function onMouseDown(ev) {
	currentItem = data.find(item => (ev.pageX - 50 < item.x) && (item.x < ev.pageX + 50) && (ev.pageY - 25 < item.y) && (item.y < ev.pageY + 25));
	if (currentItem) {
	dragOffsetX = ev.pageX - currentItem.x;
	dragOffsetY = ev.pageY - currentItem.y;
	window.onmousemove = onMouseMove;
	window.onmouseup = () => (window.onmousemove = null);
	}
	}

	function onMouseMove(ev) {
	currentItem.x = ev.pageX - dragOffsetX;
	currentItem.y = ev.pageY - dragOffsetY;
	requestAnimation();
	}

	function canvasResize() {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	requestAnimation();
	}

	window.onresize = canvasResize;
	window.onmousedown = onMouseDown;
	window.dataSerialize = JSON.stringify.bind(JSON, data);
	canvasResize();
	</script>
	</body>
	</html>