Automatic Layout for UML Class Diagrams

Question

Hello SyncFusion Community!I am looking for a solution to dynamically render UML Class Diagrams from various datasets. I have looked at your forum posts related to UML and Vue.js and saw that you mentioned not having support for automatic layout in 2019. Link to related post below:https://www.syncfusion.com/forums/144536/uml-class-diagram-add-attributes I was wondering if support has been added for automatic layout in UML Class Diagrams?Thank you,Anthony.

Sivakumar Sekar · Answer

Hi Anthony,  

We have created a sample for the automatic layout using UML diagram. Diagram provides support to auto-arrange the nodes in the diagram area that is referred as Layout. The hierarchical tree layout arranges nodes in a tree-like structure, where the nodes in the hierarchical layout may have multiple parents. There is no need to specify the layout root. To arrange the nodes in a hierarchical structure, specify the layout type as hierarchical tree. Please refer to the below code snippet  





nodes: [node1, node2, node3], 
      connectors: [connector, connector1], 
      snapSettings: { 
        constraints: 0, 
      }, 
      layout: { 
        type: "HierarchicalTree", 
        verticalSpacing: 30, 
        horizontalSpacing: 40, 
        enableAnimation: true, 
      }, 

We have attached a sample for your reference. Please find the sample in the below link  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Class-diagram-Layout1975148820  

Regards  Sivakumar