Upcoming version of the library adds a CompositeNode class that makes it easier to add custom graphics primitives to nodes. Appearance of composite nodes is defined by a tree of layout panels and child components. Unlike MindFusion's desktop diagram libraries, node templates are specified using JSON notation instead of XML. The custom OrgChartNode from tutorial 3 can now be defined declaratively as below.

var OrgChartNode = CompositeNode.classFromTemplate("OrgChartNode",
{
	component: "GridPanel",
	rowDefinitions: ["*"],
	columnDefinitions: ["22", "*"],
	children:
	[
		{
			component: "Rect",
			name: "Background",
			pen: "black",
			brush: "white",
			columnSpan: 2
		},
		{
			component: "Image",
			name: "Image",
			autoProperty: true,
			location: "icon4.png",
			margin: "1",
			imageAlign: "Fit"
		},
		{
			component: "StackPanel",
			orientation: "Vertical",
			gridColumn: 1,
			margin: "1",
			verticalAlignment: "Near",
			children:
			[
				{
					component: "Text",
					name: "Title",
					autoProperty: true,
					text: "title",
					font: "Arial bold"
				},
				{
					component: "Text",
					name: "FullName",
					autoProperty: true,
					text: "full name",
					pen: "blue",
					padding: "1,0,1,0"
				},
				{
					component: "Text",
					name: "Details",
					autoProperty: true,
					text: "details",
					font: "Arial 3"
				}
			]
		}
	]
}); 

Objects from the MindFusion.Drawing namespace now double as CompositeNode components. Apart from JSON templates, the visual tree can also be created by adding panels and drawing objects programmatically starting from CompositeNode.root.

Panel classes include:
~ SimplePanel, laying out its children to overlap each other, taking up all available space (useful for background graphics or images);
~ StackPanel, laying out its children side by side, either horizontally or vertically;
~ GridPanel, laying out its children in rows and columns, where children in same cell overlap. Rows and columns can be either set to a fixed size, auto-size to their child preferred size, or take up all space remaining unoccupied by other rows and columns.

Named components (with specified name value) can be accessed by calling node.getComponent(name) method. Components whose autoProperty attribute is enabled will have a pair of get/set property methods generated automatically by classFromTemplate method. The auto-properties from above template can be used as below.

var node1 = new OrgChartNode(diagram);
node1.setBounds(new Rect(25, 15, 60, 25));
node1.setTitle("CEO");
node1.setFullName("John Smith");
node1.setDetails(
    "Our beloved leader. \r\n" +
    "The CEO of this great corporation.");
node1.setImage("ceo.png");
diagram.addItem(node1); 

Auto properties are also automatically serialized in JSON format, cloned by node.clone() method and saved/restored by undo commands.

If anyone is interested in trying the preview build, please download this archive containing updated script files and sample project:
https://mindfusion.eu/_beta/jsdiag31.zip

Any comments, questions and general feedback are welcome.