What's new

If you are updating Diagram from an older version, check Migration to Newer Version for details.

Version 6.0.4

Released on October 1, 2024

Fixes

• Diagram Editor. Calling the destructor() method throws an error

Version 6.0.3

Released on August 28, 2024

Fixes

• Diagram Editor. Applying different locales for calendar, combobox, colorpicker, form, timepicker of Editbar
• Diagram Editor. Adding Diagram Editor in a Layout cell
• Diagram Editor. The shapeToolbar property is not optional for the default mode
• Diagram Editor. Incorrect hover behavior when a custom shape has a preview image

Version 6.0.2

Released on July 16, 2024

Fixes

• Diagram. Autoplacement. A shape hides under another shape

Version 6.0.1

Released on June 24, 2024

Fixes

• Diagram Editor. Memory leak
• Diagram Editor. Script error when clicking on vertical and horizontal distribute via Toolbar
• Diagram. Types issue when calling the getSubHeaderCellId() method

Version 6.0

Released on May 16, 2024

Breaking changes

The new update introduces significant changes in the structure and functionality of Diagram and Diagram Editor. Check the Migration article to keep in step with the latest version.

New functionality

• Restructuring of Diagram Editor: providing the ability to interact with its parts and manage their visibility with the view property that includes the following configurations:
  • Toolbar - a top part of Diagram Editor that helps users to control the editing process (see API overview)
  • Shapebar - (former Left panel) a part of Diagram Editor that renders previews of Diagram items (see API overview)
  • Editbar - (former Right panel) a part of Diagram Editor that allows users to edit Diagram items (see API overview). You can perform the following actions:
    • sets of predefined Basic controls and Complex controls
    • adjustable configuration of Basic controls and Complex controls depending on the provided conditions
    • dynamic management of the Editbar panel depending on the provided conditions (Example)
    • creation of custom controls (Example)
    • creation of HTML content (Example)
• Diagram Editor. The Copy manager API added
• Diagram Editor. The ability to show/hide Shapebar, Editbar and Toolbar
• Diagram Editor. The destructor() method is added
• Diagram Editor. The ability to hide the connection points
• Diagram Editor. The ability to hide the resize points
• Diagram Editor. The ability to hide the grid
• The upgrade of the Selection API with the ability of multiple selection
• The titles of lines are declared as separate objects defined as lineTitles with their own configuration properties
• Supporting new themes: Dark, Light High Contrast and Dark High Contrast (Example)
• Diagram Editor. The ability to customize the Shapebar items' color scheme by redefining the CSS variables and using the custom ones

Updates

• Diagram Editor. Locales are updated
• Diagram Editor. The Hotkeys list is extended
• Diagram Editor. The behavior of Shapebar items when they are pulled to the grid and their appearance are improved
• Diagram Editor. The callback function of zoomIn / zoomOut events is called with the step parameter
• Diagram Editor. The functionality of the magnetic configuration option is extended
• Diagram Editor. The move events of the Editor object are updated: afterGroupMove, afterItemCatch, afterItemMove, afterLineTitleMove, afterShapeMove, beforeGroupMove, beforeItemCatch, beforeItemMove, beforeLineTitleMove, beforeShapeMove, groupMoveEnd, itemMoveEnd, itemTarget, lineTitleMoveEnd, shapeMoveEnd
• The ability to work with line titles via the DataCollection API

Deprecated API

• Properties

  • The controls property of Diagram Editor is deprecated and no longer supported
  • The editMode property of Diagram Editor is deprecated and no longer supported
  • The gapPreview property of Diagram Editor is deprecated and no longer supported
  • The reservedWidth property of Diagram Editor is deprecated and no longer supported
  • The scalePreview property of Diagram Editor is deprecated and no longer supported
  • The shapeBarWidth property of Diagram Editor is deprecated and no longer supported
  • The shapeSections property of Diagram Editor is deprecated and no longer supported
  • The title property of Line data is deprecated and no longer supported

• Methods

  • The getId() method of the Selection object of Diagram is deprecated and no longer supported
  • The getSubId() method of the Selection object of Diagram is deprecated and no longer supported
  • The setViewMode() method of Diagram Editor is deprecated and no longer supported

• Events

  • The following events of Diagram Editor are deprecated and no longer supported, since there are no corresponding buttons in the toolbar: resetButton, applyButton, visibility, exportData, importData, autoLayout
  • The changeGridStep event of Diagram Editor is deprecated and no longer supported

Fixes

• Diagram Editor. Fix a console error caused by clicking the "Import data" button for a second time after data import and not selecting a file
• Diagram Editor. Fix blocking of a new shape adding
• Diagram Editor. Fix copying of lines while selecting elements manually
• Diagram Editor. Fix dragging when the root shape is close to the child one in the mindmap/org modes
• Diagram Editor. Fix incorrect selection behavior that required an additional click for selecting a shape with the Shift key
• Diagram Editor. Fix moving a group and a swimlane together
• Diagram Editor. Fix removing of unused lines/connectors
• Diagram Editor. Fix the ability to move items of different parents to the target item (for the org/mindmap modes)
• Diagram Editor. Fix the ability to set default values for the Shapebar elements
• Diagram Editor. Fix the appearance of connectors on hovering moved items above any shape
• Diagram Editor. Fix the impossibility to remove selected items via menu in the mindmap/org modes
• Diagram Editor. Fix the issue with data import working just once
• Diagram Editor. Improve performance during the connector movement
• Diagram Editor. Limit the recording of actions during the connector movement in the historyManager
• Diagram Editor. Optimize the logic of searching for the nearest connector
• Fix the localization with complex widgets

Version 5.0.3

Released on July 12, 2023

Fixes

• Fix the issue when calling of the autoPlace() method after data parsing caused an error

Version 5.0.2

Released on May 30, 2023

Fixes

• Diagram Editor. Fix the issue with custom points not moving during a multi select move
• Diagram Editor. Fix the impossibility to link a shape to itself
• Fix the problem with exporting a default diagram without exportStyles
• Fix the issue with the promiz.js library that caused an error with the setImmediate() method definition on importing the sources
• Fix path formation of the URL in the Export object
• Types for export are added

Version 5.0.1

Released on January 19, 2023

Fixes

• Diagram Editor. Fix the issue which caused lines not always being drawn in their places if data was exported and then loaded again
  • Now it is possible to define the coordinates for lines in the default mode (new points property of the line object)
• Diagram Editor. Fix the issue with dragging of shapes in the grid after changing the zoom level
• Fix the error thrown after clicking on the "Auto layout" button in the absence of shapes
• Fix the issue with display of default settings after creation of lines via the editor
• Fix the issue with scale of Diagram/Diagram Editor appeared when auto-placing shapes in the "radial" mode

Version 5.0

Released on September 7, 2022

Review of release on the blog

Breaking changes

The new release introduces some changes to the lineGap property. Check the Migration article to keep in step with the latest version.

New functionality

Diagram

• Radial algorithm of auto-placement of shapes:
  • the placemode parameter is added to the autoplacement property
  • the placemode parameter is added to the autoPlace() method
• The ability to set tooltips for toolbar icons:
  • the tooltip parameter of the icon object is added to the toolbar property

Diagram Editor

• Radial algorithm of auto-placement of shapes:
  • the placemode parameter is added to the autoplacement property
  • the Auto Layout button of Toolbar now provides two options for shapes' auto-placement: Orthogonal and Radial
• Snap lines for arrangement of shapes in the grid area with greater precision
• The ability to configure snap lines via the new magnetic property
• The ability to copy and paste styles of an item(s) via Alt (Option) + Ctrl (Cmd) + С => Alt (Option) + Ctrl (Cmd) + V (see the example)
• The ability to align and distribute multiple items
• Now tooltips will appear when you hover over controls in the personal toolbar of items
• Extended list of locale options for localization of tooltips in the per-item toolbar
• The ability to set tooltips for custom toolbar icons:
  • the tooltip parameter of the icon object is added to the shapeToolbar property
• Improved design of Grid area. Now the distance between points in the grid area depends on the value of the grid step

Fixes

• Fix the issue which caused a loading icon not to disappear from the right panel of Editor after loading a file

Version 4.2

Released on March 3, 2022

Review of release on the blog

New functionality

• Touch support
• The ability to specify the default setting for lines via the lineConfig property of Diagram
• The ability to specify the default settings for new lines created in the editor via the lineConfig property of Diagram Editor
• The ability to add default sets of org shapes, groups, swimlanes in the necessary order when configuring sections in the left panel of the editor

Updates

• The defaultLinkType property of Diagram is deprecated. Check the Migration article
• The shapeSections property of Diagram Editor is updated. Check the Migration article
• Now it is possible to define the default configurations not only for shapes of the particular types but also for lines:
  • the defaults property of Diagram is updated
  • the defaults property of Diagram Editor is updated
• The documentation for Modes of connecting shapes has been updated

Version 4.1

Released on December 7, 2021

Review of release on the blog

New functionality

• The ability to add partner shapes in the org chart mode
• The ability to add assistant shapes in the org chart mode
• The ability to add titles to lines in the default mode
• The ability to drag and drop shapes from one parent to another in Editor in org chart and mind map modes. The shapes are dragged with their children items
• The ability to style target items in Editor in org chart and mindmap modes

API

• New events of the Diagram object: emptyAreaDblClick, emptyAreaMouseDown, lineTitleClick, lineTitleDblClick, lineTitleMouseDown
• New Shape properties specific for the org chart mode: assistant, partner, catchItem, giveItem
• New Shape properties specific for the mindmap mode: catchItem, giveItem
• New Line properties specific for the default mode: title
• New methods of the Editor object: setViewMode(), zoomIn(), zoomOut()
• New events of the Editor object: beforeLineTitleMove, afterLineTitleMove, lineTitleMoveEnd, itemTarget, beforeItemCatch, afterItemCatch
• New properties of the Editor object: itemsDraggable
• New HistoryManager methods: add(), disable(), enable(), isRedo(), redo(), reset(), undo()
• New HistoryManager properties: disabled, saveDelay
• New Selection method: getSubId()

Updates

• Updated events of InlineEditor: subHeaderId parameter has been changed to subId
• Updated events of Selection API: subId parameter has been added
• The default type of the shape in the default mode has been changed to "rectangle"

Fixes

• The performance has been improved for all types of diagrams
• Fix of the incorrect work of undo/redo buttons in Toolbar of Editor

Version 4.0.1

Released on September 16, 2021

Fixes

• Fix the display of connectors when rotating the shape
• Fix the minified styles of the diagram
• Fix the work of the algorithm when adding new items into the diagram editor in the org chart/mindmap modes
• Fix the work of the right panel of the editor when working with styles of the text

Version 4.0

Released on September 7, 2021

Review of release on the blog

New functionality

• New diagram items are added: Groups, Swimlanes
• New sections in the left panel of the Diagram Editor are added: Groups, Swimlanes
• New sidebar options are added to the right panel of the editor for Groups, Swimlanes
• The ability to edit Groups and Swimlanes via UI
• Extended list of locale options
• The ability to operate the cells of a swimlane via CellManager API
• The ability to edit the text of an item by double-clicking on it
• DHTMLX Diagram with Angular demo is added
• DHTMLX Diagram with React demo is added
• DHTMLX Diagram with Vue.js demo is added
• The ability to add identical items with different styles and settings to the left panel of the editor

API

• New CellManager API methods: add(), getCellId(), getCellIndex(), getSubHeaderCellId(), getSubHeaderCellIndex(), getSubHeaderType(), move(), remove(), resetSwimlane(), setSwimlane(), validation()
• New CellManager API events: afterCellsAdd, afterCellsMove, afterCellsRemove, afterCellsValidation, beforeCellsAdd, beforeCellsMove, beforeCellsRemove, beforeCellsValidation
• New events of the Diagram object: afterSubmenuOpen, beforeSubmenuOpen, groupClick, groupDblClick, groupHeaderClick, groupHeaderDblClick, groupMouseDown, itemClick, itemDblClick, itemMouseDown, itemMouseOut, itemMouseOver, lineDblClick, lineMouseDown
• New events of the Editor object: shapeMoveEnd, beforeItemMove, afterItemMove, itemMoveEnd, beforeGroupMove, afterGroupMove, groupMoveEnd
• New methods of DataCollection: eachChild(), eachParent(), getRoot(), getRoots()
• New events of InlineEditor: afterEditorClose, afterEditorEditing, afterEditorOpen, beforeEditorClose, beforeEditorEditing, beforeEditorOpen
• New "editable" and "fixed" configuration attributes of the shape object

Updates

• Improved keyboard navigation
• Redesigned shapes
• Updated events of the Editor object: beforeShapeMove and afterShapeMove
• Upgraded structure of Shape Collection API

Fixes

• Fix the incorrect work of TypeScript type definitions in the editor
• Fix the issue which caused the toolbar button pressed in the editor, which is placed inside the HTML form, to trigger the form sending
• Now it is possible to resize an element only when the angle of its rotation is equal either to 0 or 360 degrees.
• Significant optimization of Diagram styles

Version 3.1

Released on April 15, 2021

New functionality

• TypeScript Support
• New mindmap mode (type:"mindmap") of DHTMLX Diagram is added
• The ability to configure the direction of the child shapes relative to the root shape in the mindmap mode of Diagram via the typeConfig configuration property of the diagram object
• The ability to add custom event handlers for custom shapes via the "eventHandlers" attribute of the addShape() method
• The ability to customize the personal toolbars for editing items in the grid area via the shapeToolbar property of the Editor object
• New events of the Editor object: BeforeShapeIconClick and AfterShapeIconClick, BeforeShapeMove and AfterShapeMove
• The ability to cancel sending CSS styles to the export service via the exportStyles configuration option of the diagram object

Updates

• The type configuration property of the diagram object is updated: new "default" and "mindmap" values are added
• The collapseItem() and expandItem() methods are updated: the second "dir" parameter is added
• The beforeCollapse, afterCollapse, beforeExpand and afterExpand events are updated: the second "dir" parameter is added

Fixes

• Fix the issue with the selection module for all types of DHTMLX Diagram
• Fix the issue with the scroll of the diagram, which is initialized in the default mode, when applying the "showItem()" method to the scaled diagram
• Fix the incorrect work of DOM Parser with HTML templates
• Fix the issue that caused the root shape to be collapsed after collapsing any child shape
• Fix the issue with formatting the shape text
• Fix the issue that appeared after adding long text into the textarea field of the right panel of the editor
• Fix the issue with adding special chars to the text of custom shapes
• Fix the issue with warnings shown in the console for custom shapes
• Fix the script error thrown after deleting the root shape in the editor
• Fix the issue with the error shown in the console after applying the "Auto Layout" button in the editor when the editor is not configured
• Fix the issue that caused the type of the shape outline not to be applied after its changing in the default mode of the editor
• Fix the issue with tracking the shape parameters in the right panel of the editor which is initialized in the default mode
• Fix the issue with removing focus from the shape in the default mode of the editor
• Fix the issue with setting connectors between the shapes in the necessary order when the editor is initialized in the default mode
• Fix the incorrect work of the "Ctrl+A" combination in the org chart mode of the editor
• Fix the issue that caused the shapes to be pasted without connectors when the connected shapes are copied
• Now there is no the ability to remove the root shape from the editor using keyboard navigation when the editor is initialized in the org chart mode

Version 3.0.4

Released on January 27, 2021

Fixes

• Fix the incorrect behavior of the shape selected in the Editor, which is initialized in the default mode, when working with the input field on the page
• Fix the issue that caused a collapsed/expanded item not to work with its parent
• Fix the incorrect work of the showItem() method when the child item is hidden

Version 3.0.3

Released on December 23, 2020

Fixes

• Fix issue with the Diagram export service

Version 3.0.2

Released on July 14, 2020

Fixes

• Fix issue with importing data from JSON to the Editor which is initialized in the org chart mode
• Fix the incorrect work of the addShape() method while configuring the right panel of the editor
• Improved behavior of the historyManager control of the toolbar in the Editor

Version 3.0.1

Released on May 29, 2020

Fixes

• Fix issue with the autoPlace() method
• Fix issue with PNG/PDF export modules

Version 3.0

Released on May 12, 2020

Breaking changes

The new update introduces some changes and improvements. Check the Migration article to keep in step with the latest version.

New functionality

• New autoPlace() method and autoplacement property are added for auto-arranging connected shapes in the hierarchical structure
• Ability to set the default configuration of a shape via the defaults property when initializing Diagram or Diagram Editor
• The addShape() method for creating custom shapes in Diagram and Diagram Editor is added
• New properties of the Editor object: controls, defaults, shapeSections, shapeBarWidth, scalePreview, scale, gapPreview
• The Grid Step sidebar option is added to the right panel of the Editor
• Ability to hide/show any toolbar buttons of the Editor as well as the Grid Step sidebar option via the controls property of the Editor object
• Ability to configure sidebar options for editing attributes of the custom shapes in the right panel of the editor via the properties attribute of the addShape() method
• Ability to customize sections in the left panel of the Editor
• Possibility to customize the appearance of shapes rendered in the left panel of the Editor via the preview property of the shape object
• Ability to select, copy, paste, delete, move several shapes in the Editor
• Ability to select and delete several connector lines in the editor which is initialized in the default mode
• Ability to import data from a JSON file to the Editor via the "Import Data" button of the toolbar
• The destructor() method is added

Updates

• Ability to use custom HTML templates in IE
• Diagram Editor UI was updated and improved
• Ability to connect shapes from center to center
• A set of hotkeys is updated for the Editor
• The ability to set a connector line to the text shape in the editor which is initialized in the default mode
• Auto-fit of the content width of the text shape is added

Version 2.2.1

Released on December 30, 2019

Fixes

• Issue with IE support for the image loader in Diagram editor

Version 2.2

Released on November 27, 2019

New functionality

• Ability to create custom shapes via using SVG and HTML templates
• Ability to build diagrams with different types of shapes
• The ability to export data from the Diagram Editor to the JSON format via the Export data button of the toolbar
• The showExport option and exportData event are added into Diagram Editor

Fixes

• Fix the issue with exporting a diagram into the PDF and PNG formats
• Fix incorrect work of the mouse events
• Fix the issue with deleting child shapes from the diagram which is initialized in the org chart mode
• Fix incorrect work of the right and left panels in Diagram Editor
• Fix the issue with auto-generating of the unique id's of shapes and connectors

Version 2.1.1

Released on October 11, 2019

Fixes

• Issues with an img-card in IE

Version 2.1

Released on May 22, 2017

New functionality

• Handy Diagram editor for building clear-cut diagrams
• Enriched set of configuration options for shapes and lines
• Greater possibilities for customizing Diagrams

Updates

• Hotkeys are added for editing Diagram in the editor
• New event emptyAreaClick is added
• The lineGap configuration option is added

Version 2.0

Released on February 15, 2017

Breaking changes

The API structure was totally reorganized and improved to simplify work with it. Follow the Migration article to learn all the changes.

New functionality

• Ability to create different diagrams and stylize them
• Variety of shapes and lines
• Export to PDF format
• Export to PNG format

Updates

• Ability to find necessary shapes
• Ability to filter shapes by specified criteria
• Ability to add a toolbar with icons for shapes to simplify interaction with them
• Enhanced performance
• Ability to adjust to any HTML container and built-in auto-sizing

Version 1.1

Released on December 5, 2017

New functionality

• Using Editor in the org chart mode
• Ability to save and restore the state
• Extended customization possibilities

Updates

• Extended API: new methods, properties and events

Version 1.0

Released on September 29, 2017

Initial functionality

• Organogram mode
• Vertical and horizontal autoplacement strategies
• Loading data from JSON
• API to manage data and branch state