How to use a shape I created in diagram.

Question

I'd like to use a shape I created as follows in diagram.

May I know the following questions?

1. Can I draw the shapes as above in diagram? I expected the similar function to that of Paint application in windows.

2. Can I use local picture file? I can use png file that is referred in documentation as follows. But I cannot use local png file.

Aravind Ravi · Answer

Hi Thin,

Please find the response for queries in below table

Can I draw the shapes as above in diagram? I expected the
  similar function to that of Paint application in windows.

By using the Path type node, you can able to add your own
  shapes in the diagram. The Path node is a commonly used basic shape that
  allows visually to represent the geometrical information. To create a path
  node, specify the shape as path. The path property of node allows you to
  define the path to be drawn. Please refer to below documentation for how to
  add path node in the diagram
   
  UG Link: https://ej2.syncfusion.com/react/documentation/diagram/shapes/#path

Can I use local picture file? I can use png file that is
  referred in documentation as follows. But I cannot use local png file.

Yes, you can able to store your image in the assets folder
  and referred to the image node. Please refer to the below code snippet

import Arrow1 from
    "./assets/arrow1.png";  
     
    let nodes = [{
        // Position of the node
        offsetX: 250,
        offsetY: 250,
        // Size of the node
        width: 100,
        height: 100,
        // sets the type of the shape as
    image
        shape: {
            type:
    'Image',
            source: Arrow1
        },
        //Customizes the appearances such as
    text, font, fill, and stroke.
        style: {
            fill: 'none'
        }
    }];

RegardsAravind Ravi

Thin Sapal Yu · Answer

Dear AravindThank you for the information.I'd like to know the detail how to draw highlighted part of path type node.

Aravind Ravi · Answer

Hi Thin,

As we said earlier, by using the path type node you can add your own custom
shapes in the diagram. For the custom shapes you need to create your own path
and set its as data to the path node. We do not have any path converter tool in
the diagram. Please refer to the below sample for how to add flow shape in
diagramSample: https://ej2.syncfusion.com/react/demos/#/bootstrap5/diagram/logic-circuitRegardsAravind Ravi

Thin Sapal Yu · Answer

Dear Aravind

Thank you for the information.I have a question about the data of the path.I'm not sure the format of the data like this.
        shape: {
            type:'Path', data: 'M49.5,76.5h-28v-56h28c15.5,0,28,12.5,28,28v0C77.5,64,65,76.5,49.5,76.5z M83.5,48.5h16 M1.5,32.5h20   M1.5,65.5h20 M80.5,45.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S82.2,45.5,80.5,45.5z'When you want to add the shapes below, how do you create the path of data above.

Shyam G · Answer

Hi Thin,We have created a sample by rendering nodes as path data similar to your image and provided the sample link below.sample: https://stackblitz.com/edit/react-w1pjd2?file=index.js Regards,Shyam G

Thin Sapal Yu · Answer

Hi ShyamThank you for the sample link.I'd like to know what to do when I want to use custom shape using path type.Can I ask support to provide path data based on the image I provided like this one?And I'd like to know about supported image format.Your example is using png file.What image format can I use for shapes of image type? (such as svg, jpg and so on)

Aravind Ravi · Answer

Hi Thin,In the diagram, when you want to add path data you can use
the path type node. If you want to add image in the diagram means then by using
the image type node we can able to add image in the diagram. You can able to
add png, jpg type images in the diagram. For more information about how to add
image in the diagram, please refer to the below UG LinkUG Link: https://ej2.syncfusion.com/react/documentation/diagram/shapes/#imageRegardsAravind Ravi

Thin Sapal Yu · Answer

Dear ShyamI'd like to know how you've created the sample for custom shape on link below.I cannot understand the value of path node.Can you explain the details about square?sample: https://stackblitz.com/edit/react-w1pjd2?file=index.jslet square =  'M34.413 47.411 C 33.755 48.755,33.858 324.854,34.517 325.401 C 35.343 326.087,365.523 326.359,368.482 325.676 L 370.357 325.243 370.357 186.890 L 370.357 48.537 369.375 47.673 L 368.393 46.808 201.556 46.797 C 43.012 46.786,34.704 46.817,34.413 47.411 M352.393 63.200 C 354.825 64.683,354.662 60.532,354.558 118.295 C 354.457 174.859,354.576 171.571,352.592 172.475 C 351.398 173.019,52.749 173.015,51.732 172.471 C 49.940 171.512,50.000 173.417,50.000 117.643 C 50.000 59.425,49.803 63.869,52.424 62.911 C 54.590 62.119,351.089 62.404,352.393 63.200 M351.829 189.341 C 354.714 190.205,354.464 184.480,354.464 249.724 L 354.464 307.841 353.474 308.831 L 352.484 309.821 203.831 309.926 C 122.072 309.984,54.331 309.932,53.294 309.810 C 49.851 309.406,50.179 315.732,50.179 249.623 C 50.179 185.023,49.978 189.934,52.644 189.334 C 54.947 188.816,350.099 188.823,351.829 189.341';

Shyam G · Answer

Hi Thin,We create a path by using Path commands. The value in path node is the position of drawing a path from start to end. Please look into the below link to know more about path commands.link: https://www.w3schools.com/graphics/svg_path.aspRegards,Shyam G