What’s New in Syncfusion EJ2 Diagram – 2025 Volume 2 Update

TL;DR: Developers often face challenges with complex diagram layouts and manual creation, hindering. The Syncfusion^® 2025 Volume 2 release addresses this with powerful new features like container support for structured layouts, automatic UML sequence diagram generation, Mermaid syntax import/export for streamlined workflows, and significant performance improvements, enabling users to build more intelligent and interactive diagrams with greater ease and efficiency.

Are you looking to elevate your application’s visual capabilities and streamline your JavaScript diagramming workflow? The Syncfusion^® JavaScript Diagram Library 2025 Volume 2 release is packed with powerful new features and performance enhancements designed to simplify complex layouts and boost productivity . In this release, we’re excited to introduce intelligent container support, automatic UML sequence diagram generation, Mermaid syntax integration, and more tools that empower developers to build smarter, more interactive diagrams with ease.

Let’s explore the new features and updates in the 2025 Volume 2 release of Syncfusion^® JavaScript Diagram Library.

Container support

This feature allows users to group multiple nodes and connectors, providing a structured layout to manage complex diagrams. Containers support dragging, resizing, and customization, including headers and text styling. They help maintain an organized layout without permanently merging elements, making them ideal for workflows, BPMN diagrams, and system designs. Effortlessly manage grouped elements while ensuring clarity and flexibility in your diagrams.

A container can be created and added to the diagram programmatically or interactively. To create a container, you have to define the container object and add it to the nodes collection of the diagram.

Adding children to a container

To add child elements to a container, define the child nodes and assign their IDs to the container’s children property. When child nodes are added to a container, they become part of its structure while remaining individually editable. The following code illustrates how to create a container with children.

// Define a collection of nodes used in the diagram var nodes = [ // First rectangle node { id: 'node1', // Margin from the left and top margin: { left: 50, top: 30 }, width: 100, height: 100, style: { fill: 'white', strokeColor: '#2546BB', strokeWidth: 1 }, shape: { type: 'Basic', shape: 'Rectangle', cornerRadius: 4 }, annotations: [{ content: 'Node 1' }] }, // Second rectangle node { id: 'node2', // Margin from the left and top margin: { left: 200, top: 130 }, width: 100, height: 100, style: { fill: 'white', strokeColor: '#2546BB', strokeWidth: 1 }, shape: { type: 'Basic', shape: 'Rectangle', cornerRadius: 4 }, annotations: [{ content: 'Node 2' }] }, // Container node configuration to contain node1 and node2 { id: 'container', width: 350, height: 280, // Width and height of the container offsetX: 250, offsetY: 250, // Position of the container shape: { // Define the type as a container type: 'Container', // Includes node1 and node2 as children children: ['node1', 'node2'], }, // Style properties for the container style: { fill: '#E9EEFF', strokeColor: '#2546BB', strokeWidth: 1 } }, ]; // Initialize the Diagram var diagram = new ej.diagrams.Diagram({ width: '100%', height: '500px', nodes: nodes, }, '#element'); diagram.select([diagram.getObject('container')]); 

Container header

Containers can include descriptive text to identify their purpose or contents through the header property. This feature enhances diagram readability by providing clear labels for grouped elements. The header’s visual presentation is fully customizable using the Style property.

The following code example explains how to define a container header and its customization:

var nodes = [ { id: 'node1', margin: { left: 50, top: 30 }, width: 100, height: 100, style: { fill: '#357BD2', strokeColor: 'white' }, annotations: [{ content: 'Node 1', style: { color: 'white', fontFamily: 'Arial' } }], }, { id: 'node2', margin: { left: 200, top: 130 }, width: 100, height: 100, style: { fill: '#357BD2', strokeColor: 'white' }, annotations: [{ content: 'Node 2', style: { color: 'white', fontFamily: 'Arial' } }], }, // Container Node { id: 'container', // Container Size width: 350, height: 300, // Container Position offsetX: 250, offsetY: 250, // Define Shape shape: { // Set type as Container type: 'Container', // Define header for container header: { annotation: { content: 'Container Title', // Style of container title text style: { fontSize: 18, bold: true, color: 'white' }, }, // Height of container header height: 40, // Style of container header style: { fill: '#3c63ac', strokeColor: '#30518f' }, }, // children of the container children: ['node1', 'node2'], }, // style of container style: { fill: 'white', strokeColor: '#30518f', strokeDashArray: '4 4' }, }, ]; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '500px', nodes: nodes, }, '#element'); 

Note: For more details, refer to the container user guide documentation, and try our online demo at this link.

Automatic port creation support

The Diagram component allows you to dynamically create ports on nodes or connectors by clicking and dragging the mouse while holding the Control (Ctrl) key. This feature is disabled by default and can be enabled using the DiagramConstraints _. AutomaticPortCreation _ constraint.

You can also remove a port using the same Ctrl + Click interaction, but only if the port is not currently connected to any connector.

The following example shows how to enable automatic port creation:

/** * Enabling automatic port creation */ var diagram = new ej.diagrams.Diagram( { constraints: ej.diagrams.DiagramConstraints.Default | ej.diagrams.DiagramConstraints.AutomaticPortCreation, }); diagram.appendTo('#diagram'); 

Note: For more details, refer to the automatic port creation user guide documentation.

Support to restrict object dragging on the negative axis

The JavaScript Diagram component includes a built-in option to restrict user interactions within the negative axis region, areas defined by negative X or Y coordinates. By enabling the RestrictNegativeAxisDragDrop constraint, the following interactions are prevented:

• Dragging: Diagram elements cannot be dragged into areas with negative coordinates.
• Resizing: The size of diagram objects cannot be adjusted to extend into the negative axis.
• Dropping symbols: Symbols from the palette cannot be dropped in the negative region.

The following example shows how to restrict the interactions at the negative axis in the diagram canvas.

/** * Prevent diagram interactions in the negative region */ var diagram = new ej.diagrams.Diagram( { constraints: ej.diagrams.DiagramConstraints.Default | ej.diagrams.DiagramConstraints.RestrictNegativeAxisDragDrop, }); diagram.appendTo('#diagram'); 

Note: For more details, refer to the restrict interaction in negative axis area user guide documentation.

Automatic generation of UML sequence diagrams from model data

The UML Sequence diagram visually represents how a set of objects interact in a process over time. This feature easily generates these diagrams automatically from model data, streamlining the visualization of interactions between objects in a system. It dynamically creates actors/objects with lifelines, messages, and activation boxes based on the provided data, reducing manual effort and ensuring accuracy.

The following code snippets illustrate creating a simple UML sequence diagram using model data.

// Define the sequence diagram model const sequenceModel: any = { spaceBetweenParticipants: 250, participants: [ { id: "User", content: "User", isActor: true }, { id: "Transaction", content: "Transaction", activationBoxes: [ { id: "act1", startMessageID: 'msg1', endMessageID: 'msg4' } ] }, { id: "FraudDetectionSystem", content: "Fraud Detection System", activationBoxes: [ { id: "act2", startMessageID: 'msg2', endMessageID: 'msg3' }, { id: "act3", startMessageID: 'msg5', endMessageID: 'msg6' } ] } ], messages: [ { id: 'msg1', content: "Initiate Transaction", fromParticipantID: "User", toParticipantID: "Transaction", type: ej.diagrams.UmlSequenceMessageType.Synchronous }, { id: 'msg2', content: "Send Transaction Data", fromParticipantID: "Transaction", toParticipantID: "FraudDetectionSystem", type: ej.diagrams.UmlSequenceMessageType.Synchronous }, { id: 'msg3', content: "Validate Transaction", fromParticipantID: "FraudDetectionSystem", toParticipantID: "Transaction", type: ej.diagrams.UmlSequenceMessageType.Reply }, { id: 'msg4', content: "Transaction Approved", fromParticipantID: "Transaction", toParticipantID: "User", type: ej.diagrams.UmlSequenceMessageType.Asynchronous }, { id: 'msg5', content: "Flag Transaction", fromParticipantID: "Transaction", toParticipantID: "FraudDetectionSystem", type: ej.diagrams.UmlSequenceMessageType.Synchronous }, { id: 'msg6', content: "Fraud Detected", fromParticipantID: "FraudDetectionSystem", toParticipantID: "User", type: ej.diagrams.UmlSequenceMessageType.Reply }, { id: 'msg7', content: "Cancel Transaction", fromParticipantID: "User", toParticipantID: "Transaction", type: ej.diagrams.UmlSequenceMessageType.Synchronous }, { id: 'msg8', content: "Complete Transaction", fromParticipantID: "User", toParticipantID: "Transaction", type: ej.diagrams.UmlSequenceMessageType.Synchronous } ], fragments: [ { id: 1, type: ej.diagrams.UmlSequenceFragmentType.Alternative, conditions: [ { content: "Fraud Detected", messageIds: ['msg5', 'msg6', 'msg7'] }, { content: "No Fraud Detected", messageIds: ['msg8'] } ] } ] }; const diagram = new Diagram({ width: '100%', height: '700px', tool: DiagramTools.ZoomPan, model: sequenceModel, }); 

Note: For more details, refer to the UML sequence Diagram elements user guide documentation, and try our online demo from this link.

Import and export UML sequence diagrams in Mermaid syntax

The Mermaid’s syntax is a markdown-inspired text-based language designed to define diagrams through simple, readable commands. This feature allows users to create UML Sequence diagrams from Mermaid syntax and export them back.

Key features

• Create UML sequence diagrams from Mermaid syntax: Easily visualize complex ideas and workflows directly from the text, eliminating the need to draw each element manually.
• Export diagrams to Mermaid syntax: You can share, edit, and reuse your diagrams across various platforms by exporting them to Mermaid format.

How do you use Mermaid syntax in the JavaScript Diagram?

You can access this functionality through the following methods in the JavaScript Diagram:

1. SaveDiagramAsMermaid method

The saveDiagramAsMermaid() method converts the current diagram into Mermaid’s text format for easy sharing. Refer to the following code example.

// Define the model for the UML Sequence Diagram var umlSequenceDiagramModel = { // Defines the participants involved in the sequence diagram participants: [ { id: "User", content: "User", isActor: true, }, // User as an actor { id: "System", content: "System", isActor: false, showDestructionMarker: true, }, // System participant { id: "Logger", content: "Logger", isActor: false, showDestructionMarker: true, }, // Logger participant { id: "SessionManager", content: "SessionManager", isActor: false, } // SessionManager participant ], // Define messages exchanged between participants messages: [ // User sends login request to System via Synchronous message { id: "MSG1", content: "Login Request", fromParticipantID: "User", toParticipantID: "System", type: ej.diagrams.UmlSequenceMessageType.Synchronous }, // System replies to User with login response via Reply message { id: "MSG2", content: "Login Response", fromParticipantID: "System", toParticipantID: "User", type: ej.diagrams.UmlSequenceMessageType.Reply }, // System sends a log event to the Logger via an Asynchronous message { id: "MSG3", content: "Log Event", fromParticipantID: "System", toParticipantID: "Logger", type: ej.diagrams.UmlSequenceMessageType.Asynchronous }, // System requests SessionManager to create a session via Create message { id: "MSG4", content: "Create Session", fromParticipantID: "System", toParticipantID: "SessionManager", type: ej.diagrams.UmlSequenceMessageType.Create }, // System requests SessionManager to delete session via Delete message { id: "MSG5", content: "Delete Session", fromParticipantID: "System", toParticipantID: "SessionManager", type: ej.diagrams.UmlSequenceMessageType.Delete }, // System validates inputs itself via Self message { id: "MSG6", content: "Validate Inputs", fromParticipantID: "System", toParticipantID: "System", type: ej.diagrams.UmlSequenceMessageType.Self } ], }; // Initializes diagram control var diagram = new ej.diagrams.Diagram( { width: '100%', height: '700px', // Specifies the model for the diagram model: umlSequenceDiagramModel, snapSettings: {constraints: ej.diagrams.SnapConstraints.None} }, '#element' ); //returns the serialized Mermaid string of the Diagram let data = diagram.saveDiagramAsMermaid(); 

2. LoadDiagramFromMermaid method

The loadDiagramFromMermaid method generates a diagram from Mermaid’s text data, automatically creating the necessary nodes and connectors.

The following code example demonstrates how to load a diagram using Mermaid’s text data.

(document.getElementById('loadMermaidFlowchart')).onclick = function () { // load the mermaid flowchart data to the diagram //parameter: mermaidFlowchartData - mermaid format string data for flowchart diagram.loadDiagramFromMermaid(mermaidFlowchartData); }; 

Users can also use AI assistants to generate Mermaid syntax for these diagrams and directly import it into the JavaScript Diagram component.

This functionality streamlines diagram creation and enhances collaboration using a widely recognized syntax format.

Note: For more details, refer to the importing and exporting Diagrams using Mermaid Syntax user guide documentation, and also try our online demo at this link.

Performance improvement

The JavaScript Diagram component now renders significantly faster while initially loading with a basic type of nodes containing annotations and connectors. The following benchmarks show the performance improvement percentages for various quantities of basic type nodes, connectors, and annotations during initial loading:

FAQS

Q1: What is container support, and why is it useful?

Containers let you group nodes and connectors for better layout control. You can move, resize, and style them easily, which is excellent for workflows, BPMN, and system diagrams.

Q2: How does automatic port creation work?

Hold Ctrl and drag to create ports on nodes or connectors. You can also remove unconnected ports the same way. This feature is off by default but can be enabled via a setting.

Q3: Can I stop elements from being dragged into negative coordinates?

Yes! Enable the RestrictNegativeAxisDragDrop setting to prevent dragging, resizing, or dropping elements into areas with negative X or Y values.

Q4: How does UML sequence diagram generation work?

You can now automatically generate UML sequence diagrams from model data. It creates actors, lifelines, messages, and activation boxes, saving time and reducing errors.

Q5: What’s the benefit of Mermaid syntax support?

You can now import and export UML sequence diagrams using Mermaid syntax, a simple text-based format. This support is great for collaboration and works well with AI tools.

Q6: Has performance improved in this release?

Yes! Diagram rendering is now up to 92% faster, especially when loading large diagrams with thousands of nodes and connectors.

Conclusion

Thank you for reading! With the 2025 Volume 2 release, the JavaScript Diagram Library becomes even more powerful and developer-friendly. From automatic port creation to seamless Mermaid syntax support, these enhancements are built to save time and boost productivity. We encourage you to dive into these new features today and discover how Syncfusion^® empowers you to build more intelligent and interactive diagrams with ease. For a complete overview of all the new features in this release, check out our Release Notes and What’s New pages. Try these features, and don’t forget to share your thoughts in the comments!

If you’re an existing Syncfusion^® user, you can download the latest version of Essential Studio^® from the license and downloads page. For those new to Syncfusion^®, we offer a 30-day free trial so you can experience these exciting features firsthand.

Need help? Feel free to reach out via our support forum, support portal, or feedback portal. We’re always here to assist you!

Related Blogs

• Syncfusion Essential Studio® 2025 Volume 2 Is Here!
• What’s New in Essential JS 2: 2025 Volume 2
• AI-Assisted Mind Mapping: Create Interactive Diagrams with OpenAI and Angular
• AI-Powered Text-to-Flowchart Converter Using OpenAI and Angular Diagram Library

This article was originally published at Syncfusion.com.