Shape type attributes

Edit online

The table explains commonly used shape types, attributes, and attribute description. You can refer the description when you add a shape in UI type definition.

Shape type	Properties and description	Attributes and description		Default or Possible values
Rectangle	Fill: Color that you want to fill inside the outline of the rectangle. By default, all shapes are created with `Null` filling.	Solid color: Fills entire shape with single solid color.		Color values: `black, silver, gray, white,maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue,teal,` and `aqua` Valid CSS color code: `#FF0000` or `#f00`
		Linear gradient: Defines a smooth transition between a set of colors (so-called “stops”) on a line.	Start X: Defines the X component of a starting point of a radial gradient.	Default value is `0`.
			Start Y: Defines the Y component of a starting point of a linear gradient.	Default value is `0`.
			End X: Defines the X component of an end point of a linear gradient.	Default value is `100`.
			End Y: Defines the Y component of an end point of a linear gradient.	Default value is `100`.
			Color	Color values:`black, silver, gray, white,maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue,teal,` and `aqua` Valid CSS color code: `#FF0000` or `#f00`
			Offset: A number from 0 to 1, which defines a position of a color on a line.	0 corresponds to (x1, y1) point. 1 corresponds to (x2, y2) point. 0.5 is directly in the middle of a line.
		Radial gradient: Defines a smooth transition between stops on a circle.	Center X: Defines the X component of a center of a radial gradient.	Default value is `0`.
			Center Y: Defines the Y component of a center of a radial gradient.	Default value is `0`.
			Radius: Defines the radius of a radial gradient.
			Color: Defines an array of stops in the same way as a linear gradient object. 0 corresponds to the center. 1 corresponds to the circle’s border.	Valid CSS color code: `#FF0000` or `#f00`
		Pattern: Defines an infinite tiling of an image.	X: Defines the X component of an offset of a reference rectangle for an image.	Default value is `0`.
			Y: Defines the Y component of an offset of a reference rectangle for an image.	Default value is `0`.
			Width: Defines the width of a reference rectangle.	Default value is `0`.
			Height: Defines the height of a reference rectangle.	Default value is `0`.
			Image URL: Defines an URL of an image to be filled. An image fits into the defined reference rectangle by using scaling.	For more information, see Adding image parameter in UI type and Managing the allowlist for uploading images.
	Stroke : Color that you want to apply to outline of the rectangle. By default, all shapes are created with `Null` stroke.	Color: Defines a color of an outline.		SVG color value (string) Color values:`black, silver, gray, white,maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue,teal,` and `aqua` Valid CSS color code: `#FF0000` or `#f00`
		Style: Defines style for the stroke. Most of values define dash pattern.	Solid or None
			Short dash
			Short dot
			Short dash dot
			Short dash dot dot
			Dot
			Dash
			Long dash
			Dash dot
			Long dash dot
			Long dash dot dot
		Width: Defines a width of a stroke in pixels. It should be a positive number.		Default value is `1`.
		Cap: Defines shape of opening and closing of a line.	Butt	Default value is `Butt`. The stroke style is `Short Dash Dot`.
			Round	The stroke style is `Short Dash Dot`.
			Square	The stroke style is `Short Dash Dot`.
		Join: Defines a shape of joints.	Round	Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius of the rounded corners is equal to the line width.
		Join: Defines a shape of joints.	Bevel	Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
	X: Integer value of the X-coordinate of a rectangle in pixels.			Default value is `0`.
	Y: Integer value of the Y-coordinate of a rectangle in pixels.			Default value is `0`.
	Width: Integer value of the width of the rectangle in pixels.			Default value is `100`.
	Height: Integer value of the height of the rectangle in pixels.			Default value is `100`.
	Radius: Integer value of the radius of rectangle corner. When you increase the radius of rectangle, the shape of corner becomes curvy.
Ellipse	Fill: Color that you want to fill inside the outline of an ellipse. By default, all shapes are created with `Null` filling.	Refer properties and description of Rectangle shape.	Refer attributes and description of Rectangle shape.	Refer default values of Rectangle shape type attributes.
	Stroke: Color that you want to apply to outline of an ellipse.	Refer properties and description of Rectangle shape.	Refer attributes and description of Rectangle shape.	Refer default values of Rectangle shape type attributes.
	Center X: Integer value of the X-coordinate of the center of an ellipse.			Default value is `0`.
	Center Y: Integer value of the Y-coordinate of the center of an ellipse.			Default value is `0`.
	Horizontal radii: Integer value of the radius of the horizontal curve of an ellipse. Coordinates of a center in pixels.			Default value is `200, 100`.
	Vertical radii: Integer value of the radius of the vertical curve of an ellipse. Coordinates of a center in pixels.			Default value is `0, 0`.
Circle	Fill: Color that you want to fill inside the outline of an ellipse. By default, all shapes are created with `Null` filling.	Refer properties and description of Rectangle shape.	Refer attributes and description of Rectangle shape.	Refer default values of Rectangle shape type attributes.
	Stroke: Color that you want to apply to outline of an ellipse.	Refer properties and description of Rectangle shape.	Refer attributes and description of Rectangle shape.	Refer default values of Rectangle shape type attributes.
	Center X: Integer value of the X-coordinate of the center of a circle.			Default value is `0`.
	Center Y: Integer value of the Y-coordinate of the center of a circle.			Default value is `0`.
	Radius: Radius of circle in pixels.			Default value is `100`.
Image: An image is a shape that represents a resolution-independent color bitmap data. By changing width and height parameters, you can stretch or shrink an image isotopically.	X: Integer value of the X-coordinate of an image in pixels.			Default value is `0`.
	Y: Integer value of the Y-coordinate of an image in pixels.			Default value is `0`.
	Width: Integer value of the width of an image in pixels.
	Height: Integer value of the height of an image in pixels.
	Image URL: Value of node attribute. You can add URL value that points to `GIF`, `JPG`, or `PNG` file. The URL must be in the allowlist. For more information, see Adding image parameter in UI type and Managing the allowlist for uploading images.
Text: A shape that anchors a text string to a point.	Fill: Color that you want to fill inside the outline of an ellipse. By default, all shapes are created with `Null` filling.	Refer properties and description of Rectangle shape.	Refer attributes and description of Rectangle shape.	Refer default values of Rectangle shape type attributes.
	Stroke: Color that you want to apply to outline of an ellipse.	Refer properties and description of Rectangle shape.	Refer attributes and description of Rectangle shape.	Refer default values of Rectangle shape type attributes.
	X: Integer value of the X-coordinate of the text. X-Coordinate of a text anchor.			Default value is `0`.
	Y: Integer value of the Y-coordinate of an image. Y-Coordinate of a text anchor.			Default value is `0`.
	Text: Specifies the text that you want to add to the node. For example, `${summary}`. A string of characters that you want to show aligned to the anchor position.			Default value is `""`.
	Alignment: Defines the direction for alignment of the text. An alignment of a text in regard to the anchor position. Remember: The alignment of the text is relative to the value of the x-coordinate of the text.			start: A text's baseline starts at the anchor. Default value of the Alignment attribute. middle: A text's baseline is centered at the anchor point. end: A text's baseline ends at the anchor point.
	Decoration: Applies decoration to the text. A hint on how to render optional elements of a text.			None: Text is not decorated. The default value of Decoration attribute. Underline: Text is underlined. Overline: Text has a line. line-through: Text has a line through the middle.
	Rotated: A boolean value to rotate the text.			False: All glyphs are not rotated. The default value. True: All glyphs are rotated 90 degrees counter-clockwise. This mode is useful for vertically arranged text.
	Kerning: A boolean value that adjusts the space between characters in the text. Note: Kerning does not work on small fonts as it affects the readability of text.			True: The default value that indicates the kerning is on. False: Kerning is off.
	Font	Family: Specifies the font family of the text. For example, Arial, sans-serif.
		Size: Specifies font size of the text. For example, 18 px.
		Weight: Specifies the weight of the font (the degree of blackness or stroke thickness). Note: Some fonts are not available in all weights. These values can be normal and bold. You can specify integers values such as 100, 200,…,900.
		Style: Specifies style of the text. You can enter values such as normal, italic, or oblique.
		Variant: Specifies whether the text is displayed in a small-caps font. If you want to display the text in small-caps font, enter `small-caps`. Otherwise, enter `normal` or leave the field blank.
Text (Multiline)	Fill: Color that you want to fill inside the outline of an ellipse. By default, all shapes are created with `Null` filling.	Refer properties and description of Rectangle shape.	Refer attributes and description of Rectangle shape.	Refer default values of Rectangle shape type attributes.
	Stroke: Color that you want to apply to outline of an ellipse.	Refer properties and description of Rectangle shape.	Refer attributes and description of Rectangle shape.	Refer default values of Rectangle shape type attributes.
	Width: Sets the width of the text.
	Word wrap: Breaks long words and wrap onto the next line.
	Word wrap (Break word): To prevent the text overflow, word might be broken at arbitrary points and wrap onto the next line.
	X: Integer value of the X-coordinate of the text.
	Y: Integer value of the Y-coordinate of an image.
	Text: Specifies the text that you want to add to the node. Stores large amount of text, user inputs.			Default value is `""`.
	Alignment: Defines the direction for alignment of the text. An alignment of a text in regard to the anchor position. Remember: The alignment of the text is relative to the value of the x-coordinate of the text.			Refer default values of Text shape type attributes.
	Decoration: Applies decoration to the text. You can enter values such as underline, overline, and line-through.			Refer default values of Text shape type attributes.
	Rotated: : Rotates the text. If you want to rotate the text, enter `auto`. Otherwise, leave the field blank.			Refer default values of Text shape type attributes.
	Kerning: A boolean value that adjusts the space between characters in the text. Note: Kerning does not work on small fonts as it affects the readability of text.			Refer default values of Text shape type attributes.
	Font	Refer font attributes and description of Text shape.		Refer default or possible values of Text shape type attributes.
Text (Path)	Fill: Color that you want to fill inside the outline of an ellipse. By default, all shapes are created with `Null` filling.	Refer properties and description of Rectangle shape.	Refer attributes and description of Rectangle shape.	Refer default values of Rectangle shape type attributes.
	Stroke: Color that you want to apply to outline of an ellipse.	Refer properties and description of Rectangle shape.	Refer attributes and description of Rectangle shape.	Refer default values of Rectangle shape type attributes.
	Path: The path on which the text is rendered. You can specify various path commands such as `Move`, `Line`,`Horizontal Line`, and `Vertical Line`. You can specify values for these commands to apply the text path.
	Text: Specifies the text that you want to add to the node. Stores large amount of text, user inputs.			Default value is `""`.
	Alignment: Defines the direction for alignment of the text. An alignment of a text in regard to the anchor position. Remember: The alignment of the text is relative to the value of the x-coordinate of the text.			Refer default values of Text shape type attributes.
	Decoration: Applies decoration to the text. You can enter values such as underline, overline, and line-through.			Refer default values of Text shape type attributes.
	Rotated: : Rotates the text. If you want to rotate the text, enter `auto`. Otherwise, leave the field blank.			Refer default values of Text shape type attributes.
	Kerning: A boolean value that adjusts the space between characters in the text. Note: Kerning does not work on small fonts as it affects the readability of text.			Refer default values of Text shape type attributes.
	Font	Refer font attributes and description of Text shape.		Refer default or possible values of Text shape type attributes.
Line: A Line is a basic shape that connects two points.	Fill: Color that you want to fill inside the outline of an ellipse. By default, all shapes are created with `Null` filling.	Refer properties and description of Rectangle shape.	Refer attributes and description of Rectangle shape.	Refer default values of Rectangle shape type attributes.
	Stroke: Color that you want to apply to outline of an ellipse.	Refer properties and description of Rectangle shape.	Refer attributes and description of Rectangle shape.	Refer default values of Rectangle shape type attributes.
	Start x: X- coordinate of a start point in pixels.			The default value is `0`.
	Start y: Y- coordinate of a start point in pixels			The default value is `0`.
	End x: X- coordinate of an end point in pixels.			The default value is `100`.
	End y: Y- coordinate of an end point in pixels.			The default value is `100`.
Polyline: A Polyline is a basic shape, which can be used to represent polylines and polygons. Typically, a polyline is an unfilled polygon. A polyline can be "open" and "closed". The latter means that the first and the last points are the same. When you fill open polyline, an edge connecting the first and the last points is assumed.	Fill: Color that you want to fill inside the outline of an ellipse. By default, all shapes are created with `Null` filling.	Refer properties and description of Rectangle shape.	Refer attributes and description of Rectangle shape.	Refer default values of Rectangle shape type attributes.
	Stroke: Color that you want to apply to outline of an ellipse.	Refer properties and description of Rectangle shape.	Refer attributes and description of Rectangle shape.	Refer default values of Rectangle shape type attributes.
	Points: An array of two dimensional coordinates in pixels.			Default value is `[]`. For example: `[{"x":0,"y":0},{"x":0,"y":100},{"x":100,"y":100},{"x":100,"y":0}, {"x":0,"y":0}]`
Path: A Path is the most versatile geometric shape, which can emulate all other geometric shapes.	Fill: Color that you want to fill inside the outline of an ellipse. By default, all shapes are created with `Null` filling.	Refer properties and description of Rectangle shape.	Refer attributes and description of Rectangle shape.	Refer default values of Rectangle shape type attributes.
	Stroke: Color that you want to apply to outline of an ellipse.	Refer properties and description of Rectangle shape.	Refer attributes and description of Rectangle shape.	Refer default values of Rectangle shape type attributes.
	Path: A string, which represents a path encoded in the SVG path language. A path can be open or closed. The latter means that the first and the last points are the same. When you fill open paths, a straight line connecting the first and the last points is assumed.	Move (x,y)	Starts new segment abandoning the previous segment, if any. It takes a coordinate as a parameter.	Default value is `""`.
		Line (x,y)	Draws a straight line from the last point to the argument (coordinate).
		Horizontal line (x)	Draws a straight horizontal line from the last point using the argument (a number) as X position.
		Vertical line (y)	Draws a straight vertical line from the last point using the argument (a number) as Y position.
		Cubic bezier curve (x1, y1, x2, y2, x, y)	Draws a cubic Bézier curve from the last point using arguments (two control points, and a final coordinate).
		Smooth cubic bezier curve (x2, y2, x, y)	Draws a cubic Bezier curve from the last point using arguments. The difference between this method and curveTo() is that it accepts only one control point, which serves as the second control point. The first control is assumed to reflect the second control point of the previous curve command.
		Quadratic cubic bezier curve (x1, y1, x, y)	Draws a quadratic Bezier curve from the last point using arguments (a control point, and a final point).
		Smooth quadratic cubic bezier curve (x, y)	Draws a quadratic Bézier curve from the last point using arguments. The difference between this method and qCurveTo() is that it uses the reflected control point of the previous curve command.
		Elliptical arc (rx, ry, x_axis_rotation, large_arc_flag, sweep_flag, x, y)	Draws an elliptic arc from the last point by using arguments.
		Close (z)	Closes the segment.