Anchor Points
The sample demonstrates what anchor patterns are, how to create your own anchor patterns or load one of the predefined and how to apply them on diagram nodes.
Animations
The sample teaches you how to use the Animation object to achieve effective diagram rendering. You can test various animation and easing types applied on a flowchart that is built dynamically based on user input.
BPMN Diagram
This is a sample BPMN diagram application. Click on a button to select the connector type. Change the color of nodes with the color picker. Double click on a link or node to add text. Save and load the diagram to/from local storage.
Class Inheritance
TableNodes are used to represent all major classes in the diagram library. The prototype of each class is questioned for a list of the available properties. After the diagram was built, the tree layout is applied to arrange it.
Containers
Container nodes are used to demonstrate how you can group and sort items using the ContainerNode object. Containers can be folded, styled and participate in layout algorithms just like the other ShapeNode types.
Controls
A presentation of the auxiliary controls that go with the diagram library - Overview, NodeListView control and Zoom control.
Database Designer
A database designer application that generates the SQL for updating the database. Users can create and rename tables, link them row to row as well delete them. They can also create, edit and delete table rows.
Decision Tree
The sample demonstrates how to build a step-by-step decision tree with nodes that list available options at each step. Nodes at the last level are arranged with the TreeLayout.
DOM Tree
Build a tree dynamically and let users expand or collapse tree branches. In addition, the sample demonstrates how to apply and customize the tree layout.
Event Sequence Diagram
A typical event sequence diagram, which users can customize with a change of background colour for nodes as well as adding/deleting nodes and connectors.
Flowcharter
A complete ready-to-use diagramming application that initializes with a flowchart built in code. Users can customize the diagram nodes, add / delete nodes and save / load diagram through localSotrage.
Fractal Layout
The fractal layout is used to arrange a randomly generated diagram. This algorithm places child nodes symmetrically around their parent node and the result diagram has fractal-like appearance. Each graph subset looks like a scaled-down version of the whole graph.
Improving Link Legibility
A demonstration of some of the options to position links in such a way that makes them easy to follow.
Lanes
The diagram's lane grid is used to render a Gantt chart where grid columns are painted differently. Each newly created flowchart item is aligned automatically to a lane chosen by the user.
Layered Layout
The layered layout algorithm is applied on a randomly generated graph with large number of nodes. The layout aims to order nodes at similar distance from the root in layers.
Mouse Events
Learn how to implement programmatically pan and zoom in a JavaScript diagram.
Multiple Parents
This sample loads a graph where nodes can have multiple parents. The graph is arranged with the LayeredLayout automatic algorithm. Click on a button to select the connector type. Change the color of nodes with the color picker. Double click on a link or node to add text. Save and load the diagram to/from local storage.
Organizational Chart
An organizational chart that uses custom TableNode-s to represent a hierarchy of employees. The sample offers plenty of user interaction - new nodes can be created, nodes can be rearranged and fields edited.
Pull Links Apart
This sample creates a flowchart and adds a few methods that distribute links connecting the same nodes.
Spanning Cells
Three table nodes with numerous cells and rows demonstrate how you can apply the apabilities of the library to span rows, columns and create links between table rows of your choice.
Stock Shapes
An overview of the stock shapes available with the library. Besides a large set of ready-to-use flowchart node shapes, you can create your own shapes and save them.
SVG Nodes
SvgNode objects are created here to imitate vehicles on a parking place. The background of each node is a SvgImage, the background of the diagram is a png image file.
Tree Layout
Users can drag nodes from the NodeListView control to the left and drop them onto each other. The newly created nodes automatically get arranged using the TreeLayout algorithm. The final result is a graph imitating a tree where each node is a leaf.
TreeMap
The treemap layout uses given weigh value for each node as a guide about the size of each rectangular node it draws. A second criteria determines the coloring of the nodes.
TreeMap Chart for Lithium Production
A TreeMap diagram that reads its data from an XML file and applies the TreeMapLayout. The diagram has a tiled background image, nodes contain text and image and render tooltips.
Tutorial #1
A basic guide on how to build diagram nodes and links from jason data and how to apply the layered layout on the new graph.
Tutorial #2
Here you read information for the flowchart from json data and arrange the newly created diagram with the BorderedTreeLayout.
Tutorial #3
Here a custom node class is used that exposes some new properties in addition to the ones defined by DiagramNode and implements its own drawing logic.