JavaScript Diagram Library

DHTMLX Diagram library allows building any JavaScript diagrams in a few lines of code. It makes it easier to visualize complex data in a neat hierarchical structure via automatic layout and live editors.

DHTMLX Diagram Library Features

• Live Diagram, Org chart, and Mindmap editors for a quick diagram arrangement
• Group work with multiple objects (select, copy, move, delete)
• Aligning and distributing multiple items at once
• Simple creation of custom figures
• Ability to add partner and assistant shapes
• Intuitive drag-n-drop behavior
• Cross-browser support
• Search feature
• Filtering shapes
• Template change while zooming
• Export to PDF and PNG
• Data import/export in JSON format
• High performance with large datasets
• Editable and non-editable modes
• 2 auto layout (auto-placement) modes : Orthogonal and Radial
• Expanding and collapsing branches
• Localization for Org chart and Diagram editors
• Convenient API
• Easy customization according to your needs
• Creating swimlanes and groups
• Snap lines
• Configurable Toolbar and shape toolbar
• Inline editing
• Touch support
• Keyboard navigation

How to Use JavaScript Diagram Editors

Smart diagram editor

• Create flowcharts, decision trees, UML diagrams, etc. on the fly.
• Choose from a variety of built-in figures or add your own custom ones.
• Style elements by changing their size, color, and text decoration.
• Save effort using the built-in auto-layout algorithm to put your diagram in order.

Editor for organization charts

• Build org charts with a hierarchical layout to show who's on your team.
• Apply styling options immediately, undo the undesired steps, or reset your chart any time.
• Add images to the cards of your team members to make your chart look more vivid.

Editor for making clear mindmaps

• Create mindmaps to visualize various ideas and concepts.
• Add any desirable number of child shapes. You can drag a child item from one parent shape to another.
• Style a shape by modifying options in the right panel or copy a shape's style and apply it to the chosen items using keyboard shortcuts.
• Add custom shapes and set custom properties to style them via the Shapebar.