mxGraph Reloaded Examples

• Basic
• Backgrounds
• Connections
• Drag-and-drop/copy-paste
• Editing
• Effects
• Events
• Icons/Images
• Labels
• Layout
• Miscellaneous
• Shapes/stencils
• Styles
• Toolbars
• XML/JSON
• Zoom/offpage

Auto layout

This example demonstrates running and animating a layout algorithm after every change to a graph.

Collapse

This example demonstrates changing the style of a cell based on its collapsed state.

Constituent

This example demonstrates using cells as parts of other cells.

Folding

This example demonstrates using a layout to implement a nested group structure.

Groups

This example demonstrates using cells as parts of other cells.

Handles

This example demonstrates using mxHandle to change custom styles interactively.

Layers

This example demonstrates using multiple layers to contain cells.

Orgchart

Radial Tree (Hierarchical) Layout

This example demonstrates the use of the hierarchical and organic layouts. Note that the hierarchical layout requires another script tag in the head of the page.

Swimlanes

This example demonstrates using swimlanes for pools and lanes and adding cells and edges between them. This also demonstrates using the stack layout as an automatic layout.

Tree

This example demonstrates folding of subtrees in a acyclic graph (tree).