Hi,

There is no built-in support for loading from XML files at this time in the JavaScript-only library. If your web site runs on ASP.NET, you could use our NetDiagram or MvcDiagram server components and call their LoadFromXml method. The diagram content is then automatically serialized to JSON and sent to the client-side component, implemented by same diagramming.js file.

I hope that helps,
Stoyan

If you need to load only ShapeNodes, you could read most important properties from XML as shown below. Let me know if you need a specific property added. We'll try to add full XML support for next release.

var Rect = MindFusion.Drawing.Rect;
var Point = MindFusion.Drawing.Point;

function loadFromXml(diagram, fileName)
{
	var xhr = new XMLHttpRequest();
	xhr.onload = function ()
	{
		var doc = xhr.responseXML.documentElement;
		var nodeMap = [];

		var nodes = doc.getElementsByTagName("Nodes")[0];
		var element = nodes.firstElementChild;
		while (element != null)
		{
			var node = diagram.getFactory().createShapeNode(0, 0, 10, 10);
			nodeMap[readAttribute(element, "Id")] = node;

			for (var i = 0; i < element.childNodes.length; i++)
			{
				var child = element.childNodes[i];
				if (child.nodeType != 1)
					continue;

				switch (child.nodeName)
				{
					case "Bounds":
						node.setBounds(readRectValue(child));
						break;
					case "Text":
						node.setText(readStringValue(child));
						break;
					case "Shape":
						node.setShape(readShapeValue(child));
						break;
				}
			}
			element = element.nextElementSibling;
		}

		var links = doc.getElementsByTagName("Links")[0];
		var element = links.firstElementChild;
		while (element != null)
		{
			var originElement = element.getElementsByTagName("Origin")[0];
			var destElement = element.getElementsByTagName("Destination")[0];
			var origin = nodeMap[readAttribute(originElement, "Id")];
			var destination = nodeMap[readAttribute(destElement, "Id")];

			var link = diagram.getFactory().createDiagramLink(origin, destination);

			var shapeElement = element.getElementsByTagName("Shape")[0];
			var linkShape = parseFloat(readStringValue(shapeElement));
			link.setShape(linkShape);

			for (var i = 0; i < element.childNodes.length; i++)
			{
				var child = element.childNodes[i];
				if (child.nodeType != 1)
					continue;
				switch (child.nodeName)
				{
					case "Points":
						link.setControlPoints(readPoints(child));
						break;
					case "Text":
						link.setText(readStringValue(child));
						break;
				}
			}
			element = element.nextElementSibling;
		}
	}
	xhr.onerror = function ()
	{
		alert("Error while getting XML.");
	}
	xhr.open("GET", fileName);
	xhr.responseType = "document";
	xhr.send();
}

function readStringValue(element)
{
	if (element.childNodes.length == 0)
		return "";
	return element.childNodes[0].nodeValue;
}

function readRectValue(element)
{
	var value = element.childNodes[0].nodeValue;
	var coords = value.split(",");
	for (var i = 0; i < coords.length; i++)
		coords[i] = parseFloat(coords[i]);
	return Rect.fromArgs(coords);
}

function readPointValue(element)
{
	var value = element.childNodes[0].nodeValue;
	var coords = value.split(",");
	for (var i = 0; i < coords.length; i++)
		coords[i] = parseFloat(coords[i]);
	return new Point(coords[0], coords[1]);
}

function readShapeValue(element)
{
	return element.attributes.getNamedItem("Id").value || "RoundRect";
}

function readAttribute(element, attrName)
{
	return element.attributes.getNamedItem(attrName).value;
}

function readPoints(element)
{
	var children = element.getElementsByTagName("Point");
	var points = [];
	for (var i = 0; i < children.length; i++)
		points.push(readPointValue(children[i]));
	return points;
} 

I hope that helps,
Stoyan