Can we add our own custom shapes and custom styles?

[SaiSravya]

Can we add our own custom shapes and custom styles for the shapes of a flowchart?

If yes , please share some documentation

[Shyam G]

Hi SaiSravya, 

We can create a custom shape using our diagram path node. Please refer to an help documentation below. 

Help documentation: https://ej2.syncfusion.com/angular/documentation/diagram/shapes/#path 

The appearance of the node can be customized by changing its fill, borderColor, borderWidth property. Please refer to an help documentation below. 

Help documentation: https://ej2.syncfusion.com/angular/documentation/diagram/nodes/#appearance 

Regards, 

Shyam G 

[SaiSravya]

Path node is not working for me. Could you please resolve this issue. PFA screen shot

Attachment: path_d9eaf48d.rar

[Shyam G]

Hi SaiSravya, 

 

We have created a sample with path node. Please refer to a code example and sample below. 

 

Code example: 

  

  <ejs-diagram #diagram id="diagram" width="100%" height="700px" [nodes]= "nodes">  

                </ejs-diagram> 

 

 public nodes: NodeModel[] = [ 

    { 

      id: 'path', width:100,height:100,offsetX:200, offsetY:200, 

      // create path node 

      shape: { 

         type: 'Path', 

        data: 'M35.2441,25 L22.7161,49.9937 L22.7161,0.00657536 L35.2441,25 z M22.7167,25 L-0.00131226,25 M35.2441,49.6337 L35.2441,0.368951 M35.2441,25 L49.9981,25' 

      } 

    } 

  ] 

 

 

Sample: https://stackblitz.com/edit/angular-fp7qci-6b5mvn?file=app.component.ts 

 

Regards, 

Shyam G