How to draw custom shapes?

[makleo2002]

Introduction

How can I draw shapes from UML and flowcharts myself so that there is one whole shape, and not several separate ones. For example, I want to draw a predefined process (a rectangle with two vertical lines inside). How to do it?

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS, JointJS+

[kumilingus]

Here's our tutorial on how to create custom shapes: https://resources.jointjs.com/tutorial/custom-elements (see the video)

Here are some examples of how to build more complex shapes: https://jsfiddle.net/kumilingus/97dwxqv3/

There are also plenty of examples with source code from which you can copy the shape definition: https://www.jointjs.com/demos

[makleo2002]

And how can such a figure as a "document" be drawn using Path?

[makleo2002]

I tried to draw the "document" element via Path and it turned out to be a polyline, not a curved one
element.attr('body/refD', 'M100 100 L100 0 L0 0 L0 100 Q0 100 20 120 Q20 120 80 80 Q80 80 100 100 ');

[kumilingus]

The Document shape is shown in the example I've shared earlier: https://jsfiddle.net/kumilingus/97dwxqv3/

[makleo2002]

This example is very complicated. I need to figure out how to draw using Path. There is no information about this. I need to draw a lot of such figures.

[kumilingus]

A tutorial on SVG Paths can be found for instance here: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

In JointJS, you can use calc expressions within the d or points attributes to make the SVG path dynamic based on the model's size.

---

I tried to draw the "document" element via Path and it turned out to be a polyline, not a curved one
element.attr('body/refD', 'M100 100 L100 0 L0 0 L0 100 Q0 100 20 120 Q20 120 80 80 Q80 80 100 100 ');

If you want us to help you with this issue, provide us with a code please.