Code (HTML)

@{
    ViewBag.Title = "Index";
}

<script src="MicrosoftAjax.js" type="text/javascript"></script>
<script src="MindFusion.Diagramming.js" type="text/javascript"></script>
<script src="Tutorial1.js" type="text/javascript"></script>

<h2>Index</h2>

<!-- The Diagram component is bound to the canvas element below -->
<div style="width:900px; height:500px; overflow:auto; border: 1px solid;">

<canvas id="diagram" width="2100" height="2100">
    This page requires a browser that supports HTML 5 Canvas element.
</canvas>

</div> 

Code (Javascript)

var Diagram = MindFusion.Diagramming.Diagram;
var DiagramLink = MindFusion.Diagramming.DiagramLink;
var ShapeNode = MindFusion.Diagramming.ShapeNode;

var Rect = MindFusion.Drawing.Rect;
var LayeredLayout = MindFusion.Graphs.LayeredLayout;

var diagram;

Sys.Application.add_load(function (sender, args) {
    // create a Diagram component that wraps the "diagram" canvas
    diagram = $create(Diagram, null, null, null, $get("diagram"));
});

var request = new Sys.Net.WebRequest();
request.set_url("TextFile1.txt");
request.set_httpVerb("GET");
request.add_completed(onResponse);
request.invoke();

function onResponse(executor, eventArgs) {
    if (executor.get_responseAvailable) {
        var json = executor.get_responseData();
        var graph = Sys.Serialization.JavaScriptSerializer.deserialize(json);
        buildDiagram(graph);
    }
}

function buildDiagram(graph) {
    var nodeMap = [];
    var bounds = new Rect(0, 0, 18, 8);

    // load node data
    var nodes = graph.nodes;
    Array.forEach(nodes, function (node) {
        var diagramNode = diagram.getFactory().createShapeNode(bounds);
        nodeMap[node.id] = diagramNode;
        diagramNode.setText(node.name);
        diagramNode.setBrush("LightCyan");
    });

    // load link data
    var links = graph.links;
    Array.forEach(links, function (link) {
        diagram.getFactory().createDiagramLink(
            nodeMap[link.origin],
            nodeMap[link.target]);
    });
}

// arrange the graph
var layout = new LayeredLayout();
layout.nodeDistance = 10;
layout.layerDistance = 10;
diagram.arrange(layout);