About this sample

This sample demonstrates the auxilliary controls available with JsDiagram: NodeListView, Overview and ZoomControl. The NodeListView implements a list-box control that contains DiagramNode objects and allows dragging them to the DiagramView control. The Overview provides a scaled-down view of the DiagramView content and lets the user scroll the bound view. The ZoomControl lets users zoom and pan the target DiagramView interactively.

About JsDiagram

JsDiagram is fully interactive flow diagramming control for the web. The diagram tool is written 100% in JavaScript and uses the HTML5 Canvas element for drawing. The component can use either jQuery or Microsoft Ajax library for browser independence layer and type system implementation. The package includes miscellaneous UI controls such as Overview providing scaled down view of the drawing, and NodeListView displaying a palette of diagram elements.

Features

Interactive zooming, scrolling, and panning
Hundreds of built-in shapes and the ability to define custom shapes
Table nodes with collapsible rows and spanning cells
Many ready-to-use layouts, including tree, layered, fractal, and more
Automatic link routing
Lane grid
Hierarchical grouping of diagram elements
Undo and redo support
Styles and themes
Node effects
Overview, NodeListView, Zoom controls