JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://lambot.blob.core.windows.net/github/diagramflowjs/diagramflow.js"></script>
 
    <a target="github" href="http://github.com/luisalvesmartins">Github source</a>
    <div style="position:relative;width:800px;height:500px">
    <canvas id="myCanvas" width="100" height="100" tabindex="1"></canvas>
    </div>
    <div id="divSelectedNode"></div>

JavaScript

var img = new Image();
img.onload = function() {
  model.draw()
}
img.src = "https://picsum.photos/100/100";

var Figures = {
  Rectangle: function(ctx, node) {
    ctx.beginPath();
    ctx.fillStyle = node.fillStyle;
    ctx.strokeStyle = "blue";
    ctx.fillRect(node.x, node.y, node.w, node.h);
    ctx.fillStyle = "black";
    ctx.font = "10px Verdana";
    ctx.textBaseline = "top";
    node.textfill(ctx);
  },
  Circle: function(ctx, node) {
    ctx.beginPath();
    ctx.fillStyle = node.fillStyle;
    ctx.ellipse(node.x + node.w / 2, node.y + node.h / 2, node.w / 2, node.h / 2, 0, 0, 2 * Math.PI);
    ctx.fill();
    node.textfill(ctx);
  },
  Diamond: function(ctx, node) {
    ctx.beginPath();
    ctx.fillStyle = node.fillStyle;
    ctx.moveTo(node.x, node.y + node.h / 2);
    ctx.lineTo(node.x + node.w / 2, node.y);
    ctx.lineTo(node.x + node.w, node.y + node.h / 2);
    ctx.lineTo(node.x + node.w / 2, node.y + node.h);
    ctx.fill();
    node.textfill(ctx);
  },
  Icon: function(ctx, node) {
    ctx.beginPath();
    ctx.fillStyle = node.fillStyle;
    ctx.strokeStyle = "blue";
    ctx.fillRect(node.x, node.y, node.w, node.h);
    ctx.drawImage(img, node.x - 24, node.y - 10, 150, 116);
    ctx.fillStyle = "black";
    ctx.textAlign = "left"
    ctx.fillText(node.text, node.x + 5, node.y + 85)
    ctx.stroke();
  }
}

var anchors = model.defaultAnchors("Rectangle");
model.addNode(new model.node(10, 10, 100, 100, anchors, "動く四角", "green", "Rectangle"));
anchors = model.defaultAnchors("Circle");
model.addNode(new model.node(30, 140, 100, 100, anchors, "動かせる丸", "white", "Circle"));
anchors = model.defaultAnchors("Rectangle");
model.addNode(new model.node(250, 80, 150, 150, anchors, "リサイズ出来るダイヤ", "yellow", "Diamond"));
model.addNode(new model.node(350, 250, 150, 100, anchors, "ドラッグで移動する長方形", "Cyan", "Rectangle"));
model.addNode(new model.node(500, 50, 100, 100, anchors, "画像もOK", "white", "Icon"));

model.addLink(new model.link(1, 2, 7, 3,...