How to Add and Remove Nodes in Vue Diagram?

In Syncfusion® Vue Diagram, nodes can be dynamically added or removed at runtime by utilizing the public methods add and remove. The add method takes a node object as a parameter, allowing you to specify which node to insert into the diagram. Similarly, the remove method facilitates the deletion of nodes from the diagram.

mounted: function() {
    // Initialize diagram instance and checkbox instances
   diagramInstance = this.$refs.diagramObject.ej2Instances;
   addButtonInstance = this.$refs.addButton.ej2Instances.element;
   deleteButtonInstance = this.$refs.deleteButton.ej2Instances.element;
   addButtonInstance.onclick = (args) => {
     diagramInstance.add(node);
   }
   deleteButtonInstance.onclick = (args) => {
     let removeNode = diagramInstance.nodes[0];
     diagramInstance.select([removeNode]);
     diagramInstance.remove();
   }
 } 

When a node is added or removed, the diagram’s nodes collection is modified, which triggers the collectionChange event. The collectionChange event is triggered twice during the process—once in the “changing” state when the modification is about to occur, and again in the “changed” state once the action has been completed. These two states allow you to take custom actions before or after the node is added or removed, providing greater control over the diagram’s behavior during dynamic modifications. For example, you can log state changes to the console to track when nodes are being added or removed, or perform specific actions, such as updating related data structures or triggering additional workflows in response to the event.

return {
    // Diagram properties
     width: "100%",
     height: "645px",
     nodes: nodes,
     collectionChange: (args) => {
       console.log(args.state);
     },
   }; 

Refer to the working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed learning how to add and remove nodes in Vue Diagram.

You can refer to our Vue Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our Vue Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page.
If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!