






The JsDiagram Component
- Includes ES6, CommonJs and UMD modules
- Redistribution is royalty free
- Can be purchased with source code
- Is written in JavaScript
- Draws via the HTML5 Canvas element
User Interaction
- Several user interaction modes
- Scrolling and zooming
- Copy and paste support
- Panning
- Automatic scrolling while dragging items with the mouse
- Magnification
- Alignment to grid
- Multiple selection
- Tool-tips
- Docking points can be defined for nodes
- Undo / redo support
- Links can auto-snap to nearest node
Programming
- Model / view architecture
- Programmatic access to the diagram elements
- Rich event set
- Numerous properties for customizing appearance and behavior
- Numerous utility methods
- Builder classes for fluent API
Diagram Elements
- More than 100 predefined node shapes
- Rotation of shapes at arbitrary angles
- Container nodes
- Tables with unlimited number of rows and columns
- Table cells can span several columns and rows
- Display SVG drawings in nodes
- Links can comprise multiple segments
- Link segments can be straight lines or curves
- Display multiple labels per link
- Support for custom node and link types
- Video nodes
- Display hierarchical data in TreeView nodes
- Host HTML contents in nodes
Automatic Layout
- Layered graph layout
- Spring-Embedder graph layout
- Fractal tree layout
- Directional tree layout
- Radial tree layout
- Topological ordering layout
- Flowchart layout
- Orthogonal graph layout
- Automatic link routing
Appearance
- Nodes can display images and text
- Z-order
- Multiple text labels per item
- Various text alignment styles
- Glass visual effects
- Customizable fonts and colors
- Custom painting of nodes
- Shadows
- Transparent nodes
- Invisible nodes
- A background swimlane grid
Behavior
- Lock diagram elements
- Read-only mode supported
- Tables can be scrolled
- Collapse and expand hierarchy branches
- In-place text editing
- Dynamic positioning of links relative to connected nodes
Link Diagram Items
- Nodes to nodes
- Table rows to table rows
- Nodes to table rows
- Unconnected links
Auxiliary Controls
- Overview control
- NodeListView control
- Ruler control
- ZoomControl control
Import and Export
- Export Scalable Vector Graphics (SVG) files
- Printing and print preview
Front-end integration
- React component
- Vue.js component
- Angular component