We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Can we add our own custom shapes and custom styles?

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

If yes , please share some documentation

3 Replies

SG Shyam G Syncfusion Team November 11, 2019 06:43 AM UTC

Hi SaiSravya, 

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


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


Regards, 
Shyam G 



SA SaiSravya November 13, 2019 05:38 AM UTC

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

Attachment: path_d9eaf48d.rar


SG Shyam G Syncfusion Team November 14, 2019 04:41 AM UTC

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' 
      } 
    } 
  ] 
 
 
 
Regards, 
Shyam G 


Loader.
Live Chat Icon For mobile
Up arrow icon