This sample shows how to arrange the Diagram by using the TreeMapLayout algorithm. Choose different options to assign weights and note how the layout changes.
Dynamically built tree
This sample page shows how to build a tree dynamically and apply the automatic tree layout algorithm.
This sample creates a random graph and arranges it using the LayeredLayout algorithm.
This sample shows all predefined node shapes and their string identifiers.
The NodeListView control
The sample demonstrates how to build a tree by dragging nodes from the NodeListView control.
The FractalLayout algorithm
This sample creates a random graph and arranges it using the FractalLayout algorithm.
This sample shows how to define custom anchor-point patterns and assign them to boxes.
This sample shows how to build table nodes that have multiple cells and use cell spanning and how to connect them.
This sample shows how to build container nodes and how to connect the containers as well their children nodes.
Tutorial: build a diagram dynamically
Demonstrates how to dynamically build a diagram from Json data.
Demonstrates how to dynamically build a diagram from Json data. JSDiagram provides a method to arrange diagram elements in tree-like hierarchies.
Learn how to animate the creation of a flowchart and customize the animation and easing types.
The sample demonstrates how to build a simple Gantt chart using the lane grid provided with the control.
Learn how to create a custom node class that exposes some new properties in addition to the ones defined by DiagramNode.