dhtmlxDiagram 1.0 is Out: Use Robust JavaScript Org Charts

| Comments (7)

The story of our JavaScript organization chart library begins today. Meet dhtmlxDiagram, our brand new js component, that will allow you to add interactive diagrams such as organization charts to your applications.

Org Charts

Under the first release, dhtmlxDiagram 1.0 features the ability to build organization charts of any complexity. An organizational chart represents the most natural way of displaying the hierarchical structure of an organization. You can use it to show the structure of a company, business, or project team. View samples

javascript org chart

Such diagrams may have different purposes. You can use them as management tools that help to define the area of responsibility for each team member, as a personnel directory, etc.

Organizational charts display work responsibilities in an intuitive way which allows improving the work of communication lines and helps each member of the organization understand how their work fits into the overall scheme.

What makes dhtmlxDiagram so good?

  • All dhtmlx libraries provide extensive JavaScript API for flexible configuration and dhtmlxDiagram is not an exception.
  • 3 predefined types of nodes: text, image, or any other custom HTML and SVG element. You also have the ability to create custom nodes based on your needs.
  • Provide a custom and unique look and feel for your org chart through CSS.
  • You can enable vertical mode to provide a compact view for your diagram.
  • vertical diagrams js org chart

  • Being a 100% JavaScript library, dhtmlxDiagram can be used with any server side without any limitations.
  • Our JavaScript Organization chart will be perfectly rendered in all modern web browsers.

Find out more

What’s New in the Next Updates?

The next 3 updates have significantly enlarged our JavaScript diagramming library. New types of js diagrams with a wide range of shapes and connectors were added:

Besides, our dev team has designed special live editors, which can be easily initialized, so that end users can edit different diagram types on the fly. Editors can be used by the example of a small application with a preview mode allowing to build diagrams from scratch and view the changes made to diagrams on the fly. There’re separate live editors for JavaScript org charts and all other diagram types. On top of all, dhtmlxDiagram has become much more customizable with brand new options for configuring each and every diagram element.

Ready to start?

With dhtmlxDiagram, you can use different types of organizational charts, flowcharts, decision trees and other diagrams to create a visual representation that better reflects the structure of your company, helps you illustrate its processes and workflows and make better decisions.

Stay tuned!


  1. Solomon Thuo October 2, 2017 at 1:00 pm

    This is wonderful!

  2. Greg October 2, 2017 at 5:19 pm

    Is this component compatible with responsive design?

    • Aras Kairys (DHTMLX team) October 2, 2017 at 5:57 pm

      Hi Greg,
      dhtmlxDiagram can adjust itself to different screen sizes. You can also use scale functionality to fit content event on small screen devices.

  3. Terry October 2, 2017 at 5:47 pm

    Is same view is exists on Internet Explorer 11 and MS Edge ?

    • Aras Kairys (DHTMLX team) October 2, 2017 at 6:32 pm

      Hi Terry,
      Diagram widget works well on both IE11 and IEEdge.

  4. Rakesh July 11, 2018 at 12:14 am

    I need to use diagram with Angular 5. I couldn’t find any typedef or sample projects.

    • Liudas Kairys (DHTMLX team) July 12, 2018 at 12:04 pm

      Hi Rakesh,
      You can use dhtmlxDiagram with Angular 5, though unfortunately, we don’t have any guide for this at the moment.
      Please check these guides for dhtmlxGantt and dhtmlxScheduler, the approach is similar: https://dhtmlx.com/blog/tag/angular/

Leave a Reply