<

JavaScript UML Diagram

A UML class diagram is a graphical representation of the structure and relationships of classes in a system. Simply put, UML diagrams help to visualize any kind of complex system and are particularly useful during the software development process and when analyzing existing software apps. On this page, you'll find UML diagram examples built with DHTMLX Diagram and learn about their key features and integrations with React, Angular, and Vue.js.

Open a demo on desktop
This UML class diagram is built with the DHTMLX Diagram library.
Get a 30-day trial to test this demo and 20+ others in your projects free of charge.
Get free trial
Contents
Contents
This UML class diagram is built with the DHTMLX Diagram library.
Get a 30-day trial to test this demo and 20+ others in your projects free of charge.
Get free trial

What Is a UML Diagram and How to Create UML Diagram Types
with DHTMLX

UML diagrams are a way to depict complex systems and software using Unified Modeling Language (UML). Using a standardized method for writing a system model, a UML diagram converts thousands of lines of code into a visual reference that’s easier to digest.

UML class diagrams help keep track of relationships and hierarchies between key code components. Generally, software engineers and non-technical stakeholders use a proper UML diagram tool to tidy up a bunch of code, stay in the know about the ongoing project, and navigate through the endless complexities inherent in software development, thereby avoiding confusion.

DHTMLX Diagram JavaScript library allows drawing UML class diagrams with ease and configuring them to your project requirements with the help of a feature-rich API and CSS. DHTMLX Diagram is a pure JavaScript library you can integrate and use with any technical stack, including React, Angular, Vue.js, and TypeScript.

DHTMLX UML Class Diagrams Key Features

Built-in diagram shapes
Built-in diagram shapes

You can create a UML diagram of any scale and complexity using ready-made graphic elements specific to this diagram type. Our JavaScript library can be used for drawing UML class diagrams with different shape types and connectors, so you’re free to make clear and consistent project code schemes through unique node combinations.

Auto-placement algorithms

Our JavaScript UML diagram library supports auto-layout modes you can set to arrange shapes and connectors accurately with a single click. You are provided with 2 built-in smart algorithms:

  • orthogonal, which places UML diagram shapes along vertical and horizontal lines;
  • radial, which arranges shapes around the relative central node.

It’s also possible to configure the auto-placement settings via UML diagram API, e.g. set the direct or edges mode of connecting shapes, modify the distance between unconnected diagrams, etc.

Custom UML diagram shapes and templates
Custom UML diagram shapes and templates

If the default diagram shapes do not cover your needs, you can add new custom elements. For example, a custom shape for a JS UML class diagram may contain a title and body text as a bulleted list, while also being rendered with custom fill and stroke formatting. DHTMLX Diagram allows setting custom HTML and SVG templates.

Adding event handlers for custom shapes

In addition to creating custom JS/HTML UML diagram shapes, you can add handlers to the events that have taken place when the user interacts with them. It can be done by adding event handlers to HTML elements of the shape template via the addShape() method.

Filtering

You have the option to set filtering for your JS UML diagram via the filter() method of the data collection. The method will render only the filtered elements, by hiding the rest.

Scrolling and zooming

By default, the component size is set automatically to fit the content. However, you can configure it to take the size of the HTML container and render horizontal and vertical scrolls.

Moreover, to improve navigation and provide end-users with more efficient management of large UML class diagrams, you can set the zoom-in and -out features. You can also attach a slider to diagrams, thus allowing your users to switch between different zoom levels.

Export to PDF/PNG

DHTMLX Diagram library supports exporting to PDF and PNG formats. Online export services are available by default. However, you can get a local export module and install it on your server. You'll also receive all updates and fixes to the export service and free technical support within a year.

Localization

You can translate the interface of the Diagram editor to a desired language. Then, you have to provide the corresponding locale settings and correct labeling for a particular country via the API.

Touch support

Using DHTMLX Diagram, your end-users can read and edit UML diagrams on various devices thanks to touch support. Standard touch gestures such as tapping, double-tapping, pressing, holding, and dragging enable users to interact seamlessly with every element of a responsive JavaScript/HTML UML diagram.

JS UML Diagram Library Integrations

Integrating the DHTMLX UML class diagram in JavaScript into any web app is a seamless process. You can use code snippets and ready-made demos on GitHub to integrate UML diagrams with Angular, Vue.js, and React as well as use the library with TypeScript.

Live demo
Using DHTMLX UML diagram with
GitHub demo
Using DHTMLX UML diagram with
Guide
TypeScript support
JavaScript UML Class Diagram Examples
Take your data visualization to the next level with DHTMLX Diagram
Download the DHTMLX trial version and evaluate it free of charge for 30 days benefiting from the official technical support of our team.
NO credit card required