Name: JavaScript UML Class Diagram - DHTMLX Diagram
Rating: 4.8 (34 reviews)

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

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 30+ 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

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. Besides, creating an HTML template can be implemented either in ES5 or in ES6+ formats.

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.

JavaScript UML Diagram

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

DHTMLX UML Class Diagrams Key Features

JavaScript UML Diagram

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

DHTMLX UML Class Diagrams Key Features

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