Hi,
As I said earlier, the OrgChart sample assumes table nodes with (3,4) cells grid and will be difficult to customize if you don't need the table features.
To use ShapeNodes, call the diagram Factory's createShapeNode method, set the text, then call risizeToFitText. Add the links between nodes and then arrange the diagram with the TreeLayout.
Information and tutorials on how to use JsDiagram can be found in the chm file supplied with the package and online at
https://www.mindfusion.eu/onlinehelp/jsdiagram/index.htm - namely in the
Programming Interface Overview and
Tutorials topics.
A simple example on how to add shape nodes to the diagram and arrange them using the tree layout:
var Alignment = MindFusion.Diagramming.Alignment;
var FitSize = MindFusion.Diagramming.FitSize;
var Rect = MindFusion.Drawing.Rect;
//...
var shapeNode1 = diagram.getFactory().createShapeNode(new Rect(0, 0, 10, 5));
shapeNode1.setText("Hello from ShapeNode 1!");
shapeNode1.resizeToFitText(FitSize.Ratio);
var shapeNode2 = diagram.getFactory().createShapeNode(new Rect(0, 0, 10, 5));
shapeNode2.setText("Hello from ShapeNode 2!");
shapeNode2.resizeToFitText(FitSize.Ratio);
var shapeNode3 = diagram.getFactory().createShapeNode(new Rect(0, 0, 10, 5));
shapeNode3.setText("Hello from ShapeNode 3!");
shapeNode3.resizeToFitText(FitSize.Ratio);
diagram.getFactory().createDiagramLink(shapeNode1, shapeNode2);
diagram.getFactory().createDiagramLink(shapeNode1, shapeNode3);
var layout = new MindFusion.Graphs.TreeLayout();
layout.direction = MindFusion.Graphs.LayoutDirection.TopToBottom;
layout.linkType = MindFusion.Graphs.TreeLayoutLinkType.Cascading;
diagram.arrange(layout);
Regards,
Lyubo