Search
General Information

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