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.
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
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
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.
Angular
Vue.js
React
TypeScript
