diff --git a/utils/stc/src/main/resources/stc.js b/utils/stc/src/main/resources/stc.js
index fed4272..215fd6e 100644
--- a/utils/stc/src/main/resources/stc.js
+++ b/utils/stc/src/main/resources/stc.js
@@ -15,4 +15,134 @@
  */
 (function () {
 
+    var ws, flow,
+        nodes = [],
+        links = [],
+        nodeIndexes = {};
+
+    var width = 2400,
+        height = 2400;
+
+    var color = d3.scale.category20();
+
+    var force = d3.layout.force()
+        .charge(-820)
+        .linkDistance(50)
+        .size([width, height]);
+
+    // Process flow graph layout
+    function createNode(n) {
+        nodeIndexes[n.name] = nodes.push(n) - 1;
+    }
+
+    function createLink(e) {
+        e.source = nodeIndexes[e.src];
+        e.target = nodeIndexes[e.dst];
+        links.push(e);
+    }
+
+    // Returns the newly computed bounding box of the rectangle
+    function adjustRectToFitText(n) {
+        var text = n.select('text'),
+            box = text.node().getBBox();
+
+        text.attr('text-anchor', 'left')
+            .attr('y', 2)
+            .attr('x', 4);
+
+        // add padding
+        box.x -= 4;
+        box.width += 8;
+        box.y -= 2;
+        box.height += 4;
+
+        n.select("rect").attr(box);
+    }
+
+    function processFlow() {
+        var svg = d3.select("body").append("svg")
+            .attr("width", width)
+            .attr("height", height);
+
+        flow.steps.forEach(createNode);
+        flow.requirements.forEach(createLink);
+
+        force
+            .nodes(nodes)
+            .links(links)
+            .start();
+
+        var link = svg.selectAll(".link")
+            .data(links)
+          .enter().append("line")
+            .attr("class", "link")
+            .style("stroke-width", function(d) { return d.isSoft ? 1 : 2; });
+
+        var node = svg.selectAll(".node")
+            .data(nodes)
+          .enter().append("g")
+            .attr("class", "node")
+            .call(force.drag);
+
+        node.append("rect")
+            .attr({ rx: 5, ry:5, width:180, height:18 })
+            .style("fill", function(d) { return color(d.group); });
+
+        node.append("text").text( function(d) { return d.name; })
+            .attr({ dy:"1.1em", width:100, height:16, x:4, y:2 });
+
+        node.append("title")
+            .text(function(d) { return d.name; });
+
+        force.on("tick", function() {
+            link.attr("x1", function(d) { return d.source.x; })
+                .attr("y1", function(d) { return d.source.y; })
+                .attr("x2", function(d) { return d.target.x; })
+                .attr("y2", function(d) { return d.target.y; });
+
+            node.attr("transform", function(d) { return "translate(" + (d.x - 180/2) + "," + (d.y - 18/2) + ")"; });
+        });
+    }
+
+
+    // Web socket callbacks
+
+    function handleOpen() {
+        console.log('WebSocket open');
+    }
+
+    // Handles the specified (incoming) message using handler bindings.
+    function handleMessage(msg) {
+        console.log('rx: ', msg);
+        evt = JSON.parse(msg.data);
+        if (evt.event === 'progress') {
+
+        } else if (evt.event === 'log') {
+
+        } else if (evt.event === 'flow') {
+            flow = evt.payload;
+            processFlow();
+        }
+    }
+
+    function handleClose() {
+        console.log('WebSocket closed');
+    }
+
+    if (false) {
+        d3.json("data.json", function (error, data) {
+            flow = data;
+            processFlow();
+        });
+        return;
+    }
+
+    // Open the web-socket
+    ws = new WebSocket(document.location.href.replace('http:', 'ws:'));
+    if (ws) {
+        ws.onopen = handleOpen;
+        ws.onmessage = handleMessage;
+        ws.onclose = handleClose;
+    }
+
 })();
\ No newline at end of file