Features of JsDiagram
Overview   Features   Online Demo   Download   Forum   Online Help   Buy  

With JsDiagram all the features that you need to create great diagrams with JavaScript are at your fingertips. No need to waste time coding and debugging - you get the right functionality - tested and proven - right away.

The component

The library is written 100% in JavaScript and uses the HTML5 Canvas for drawing. JsDiagram depends on the Microsoft Ajax® library for type system implementation and browser independence.



A sample diagram

Diagram items

Choose among various predefined node shapes or create your own. Connect the nodes with links and customize them - straight lines or curves, set the link shapes, their color and position. You can even add labels or set images as background for the nodes. The component also supports table nodes and containers.

User interaction

With JSDiagram users can create, resize, select, move and modify nodes and links as they wish. You can allow or permit any action or customize how the control response to a certain action - like pressing the 'Del' key for example. The control also supports grid alignment. The control supports user-interaction nodes and collapse and expand of branches in hierarchical trees. There is also attaching and grouping of items.

The API

Any diagram element can be accessed programmatically. There are methods for changing the appearance of the items, for controlling the allowed actions performed by the user and many events. The API is documented in details, various samples and tutorials are provided to help you get started. When running under iOS Safari web browser, the control handles one- and two-finger touch events for item creating, modification, diagram scroll and zoom.



Layered layout
Layouts

Automatic layouts let you give your diagrams a different and accomplished look with just a mouse click. You can choose among four automatic layouts and numerous properties that help you tailor them according to your needs.

Appearance

You can place text at diagram links and both images and text in diagram nodes. Both links and nodes can be painted with a pen and brush according to your taste. The background of the diagram is also customizable.

Components

The Diagram component is the main component for the tool. There all the drawing and user interaction takes place. At your disposal is also an overview control, which gives you a preview of the whole diagram and is ideal for large flowcharts. We have also provided a tree view control for you to create a hierarchical tree-like charts.



The Overview control
   
 
   
Forums: FlowChart.NET, WpfDiagram, DiagramLite, JsDiagram, MasterChart, WebChart, Planner.NET, WpfPlanner, Reporting, ReportingLite
© MindFusion Ltd. 2012