JSFiddle - React, Tailwind, and code Playground

by Claudio

HTML

<script src="http://gojs.net/latest/release/go.js"></script>
<script src="http://googledrive.com/host/0B4Kp1WFSaSXKakMzRlA4TE9yWDA"></script>
<body onload="init()">
<div>
	<div style="display: inline-block; vertical-align: top; padding: 5px; width:100%">
		<div id="myDiagram" style="border: solid 1px gray; height: 720px"></div>
	</div>

</div>

</body>

JavaScript

function init() {

    var $ = go.GraphObject.make;

    go.Shape.defineFigureGenerator("LaneBorders", function(shape, w, h) {
        return new go.Geometry()
            .add(new go.PathFigure(0, 0, false)
                 .add(new go.PathSegment(go.PathSegment.Line, 0, h))
                 .add(new go.PathSegment(go.PathSegment.Line, w, h))
                 .add(new go.PathSegment(go.PathSegment.Line, w, 0))
            );
    });

    go.Shape.defineFigureGenerator("LaneLabelBorders", function(shape, w, h) {
        return new go.Geometry()
            .add(new go.PathFigure(w, h, false)
                 .add(new go.PathSegment(go.PathSegment.Line, 0, h))
            );
    });

    myDiagram =
      	$(go.Diagram, "myDiagram",{
    			allowDrop: true,
    			resizingTool: new LaneResizingTool(),

                layout: $(PoolLayout, { spacing: new go.Size(0, 0) }),
    			mouseDragOver: function(e) {
    				if (!e.diagram.selection.all(function(n) { return n instanceof go.Group; })) {
    					e.diagram.currentCursor = 'not-allowed';
    				}
    			},
    			"commandHandler.copiesGroupKey": true,
    			// automatically re-layout the swim lanes after dragging the selection
    			"SelectionMoved": relayoutDiagram, // this DiagramEvent listener is
    			"SelectionCopied": relayoutDiagram, // defined above

    			"animationManager.isEnabled": false,
    			"toolManager.mouseWheelBehavior": go.ToolManager.WheelNone
                ,initialContentAlignment: go.Spot.Center
    			,padding: 0,
    			"undoManager.isEnabled": true
        });

	myDiagram.add( // header
		$(go.Part, "Horizontal", {
				movable: false,
				deletable: false,
				selectable: false,
				position: new go.Point(0,0),
				// defaultAlignment: go.Spot.TopLeft
			},
			$(go.Panel,"Horizontal",
				$(go.Shape, "Rectangle", {
					fill: "red",
					width: MINLENGTH-1,
					height: 36
				})
			)
		)
	);

	myDiagram.add(
		$(go.Part, "Horizontal", { // footer
				movable:...