Shape type attributes and description

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 Attribute Description
Rectangle Fill Color that you want to fill inside the outline of the rectangle.
Stroke Color that you want to apply to outline of the rectangle.
X Integer value of the x-coordinate of a rectangle.
Y Integer value of the y-coordinate of a rectangle.
Width Integer value of the width of the rectangle.
Height Integer value of the height of the rectangle.
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.
Stroke Color that you want to apply to outline of an ellipse.
Center X Integer value of the x-coordinate of the center of an ellipse.
Center Y Integer value of the y-coordinate of the center of an ellipse.
Horizontal radii Integer value of the radius of the horizontal curve of an ellipse.
Vertical radii Integer value of the radius of the vertical curve of an ellipse.
Image X Integer value of the x-coordinate of an image.
Y Integer value of the y-coordinate of an image.
Width Integer value of the width of an image.
Height Integer value of the height of an image.
Image URL Web address of an image.
Text Fill Color that you want to fill inside the outline of the text.
Stroke Color that you want to apply to outline of the text.
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. For example, ${summary}.
Alignment Defines the direction for alignment of the text. You can enter values such as start, middle, and end. These values make multiple language support easier. For example, English is a left-to-right (ltr) language and Arabic is a right-to-left (rtl) language.
Remember: The alignment of the text is relative to the value of the x-coordinate of the text.

start: The rendered characters are aligned such that the start of the text string is at the initial current text position. It aligns the text in “left” in ltr and “right” in rtl manner.

middle: The rendered characters are aligned such that the middle of the text string is at the current text position.

end: The rendered characters are aligned such that the end of the text string is at the initial current text position. It aligns the text in “right” in ltr and “left” in rtl manner.
Decoration Applies decoration to the text. You can enter values such as underline, overline, and line-through.
Rotated Rotates the text. If you want to rotate the text, enter auto. Otherwise, leave the field blank.
Kerning Adjusts the space between characters in the text. You can enter values such as auto, none, or normal.

auto: Applies kerning to the text according to font type.

none: Does not apply kerning to the text as the kerning information that is stored in the font is disabled.

normal: Applies kerning to the text based on kerning information stored in the font.

Note: Kerning does not work on small fonts as it affects the readability of text.
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 the text.
Stroke Color that you want to apply to outline of the text.
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 may 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.
Alignment Defines the direction for alignment of the text. You can enter values such as start, middle, and end. These values make multiple language support easier. For example, English is a left-to-right (ltr) language and Arabic is a right-to-left (rtl) language.
Remember: The alignment of the text is relative to the value of the x-coordinate of the text.

start: The rendered characters are aligned such that the start of the text string is at the initial current text position. It aligns the text in “left” in ltr and “right” in rtl manner.

middle: The rendered characters are aligned such that the middle of the text string is at the current text position.

end: The rendered characters are aligned such that the end of the text string is at the initial current text position. It aligns the text in “right” in ltr and “left” in rtl manner.
Decoration Applies decoration to the text. You can enter values such as underline, overline, and line-through.
Rotated Rotates the text. If you want to rotate the text, enter auto. Otherwise, leave the field blank.
Kerning Adjusts the space between characters in the text. You can enter values such as auto, none, or normal.

auto: Applies kerning to the text according to font type.

none: Does not apply kerning to the text as the kerning information that is stored in the font is disabled.

normal: Applies kerning to the text based on kerning information stored in the font.

Note: Kerning does not work on small fonts as it affects the readability of text.
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 (Path) Fill Color that you want to fill inside the outline of the text.
Stroke Color that you want to apply to outline of the text.
Path The path on which the text should be rendered. There are 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. For example, ${summary}.
Alignment Defines the direction for alignment of the text. You can enter values such as start, middle, and end. These values make multiple language support easier. For example, English is a left-to-right (ltr) language and Arabic is a right-to-left (rtl) language.
Remember: The alignment of the text is relative to the value of the x-coordinate of the text.

start: The rendered characters are aligned such that the start of the text string is at the initial current text position. It aligns the text in “left” in ltr and “right” in rtl manner.

middle: The rendered characters are aligned such that the middle of the text string is at the current text position.

end: The rendered characters are aligned such that the end of the text string is at the initial current text position. It aligns the text in “right” in ltr and “left” in rtl manner.
Decoration Applies decoration to the text. You can enter values such as underline, overline, and line-through.
Rotated Rotates the text. If you want to rotate the text, enter auto. Otherwise, leave the field blank.
Kerning Adjusts the space between characters in the text. You can enter values such as auto, none, or normal.

auto: Applies kerning to the text according to font type.

none: Does not apply kerning to the text as the kerning information that is stored in the font is disabled.

normal: Applies kerning to the text based on kerning information stored in the font.

Note: Kerning does not work on small fonts as it affects the readability of text.
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.