# Diagram Shapes

The [`ShapeOptions`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/shapeoptions) is the main building block of the KendoReact [Diagram](https://www.telerik.com/kendo-react-ui-develop/components/diagram). It represents a single node in the graph. This article describes all Diagram shape customization options.

The following example demonstrates different types of shapes and their properties in action.

[Demo Source](https://demos.telerik.com/kendo-react-ui/diagram/shapes/basic/source.txt)

## Basics

The fundamental settings of the KendoReact Diagram shapes include:

* The Shape [`type`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/shapes#shape-types) determines the overall appearance and content.
* The Shape [`id`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/shapeoptions#id) is required in order to define connections between related shapes.
* The Shape [`content`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/shapeoptions#content) defines the Shape label and text properties.
* The `width` and `height` properties determine the Shape size in pixels. The default values are `100`.

In addition to the above, use the `x` and `y` Shape parameters to define the exact Shape position coordinates. These parameters have effect only when a [predefined Diagram layout](https://www.telerik.com/kendo-react-ui-develop/components/diagram/layouts) is not set.

The following example demonstrates basic Shape usage with position coordinates.

[Demo Source](https://demos.telerik.com/kendo-react-ui/diagram/shapes/overview/source.txt)

## Shape Data Binding

Shapes can be bound to data items in order to visualize hierarchical data structures. The Diagram component supports binding to arrays of objects, where each object represents a Shape.

```tsx
const shapes: ShapeOptions[] = [
    {
        id: 'employee1',
        dataItem: {
            firstName: 'John',
            lastName: 'Doe',
            title: 'Manager',
            department: 'Sales'
        },
        content: {
            text: 'John Doe Manager'
        }
    }
];
```

The following example demonstrates how to bind shapes to data items.

[Demo Source](https://demos.telerik.com/kendo-react-ui/diagram/shapes/data-binding/source.txt)

## Shape Types

The Diagram supports the following basic shape types. The default Shape type is `rectangle`.

* `rectangle` (default)—A standard rectangular Shape.
* `circle`—You can use different `width` and `height` values to define an ellipse.
* `image`—Displays a graphic from a URL or data URI. Use the `source` property to define the image source. Like other Shape types, it also supports text labels.

In addition to these basic geometric Shapes, the Diagram provides specialized Shapes for [Workflow Diagrams](https://www.telerik.com/kendo-react-ui-develop/components/diagram/workflow). For a complete list of flowchart-specific Shapes, see the [`FlowchartShapeType`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/flowchartshapetype) reference.

The following example demonstrates the available shape types.

[Demo Source](https://demos.telerik.com/kendo-react-ui/diagram/shapes/types/source.txt)

## Shape Styling

The following Shape styling options are available:

* Text color and font properties
* Background color (fill) and opacity for the default and hover states
* Rotation angle
* Border (stroke) color, type, width, and opacity

The following example demonstrates the available Shape styling options.

[Demo Source](https://demos.telerik.com/kendo-react-ui/diagram/shapes/styling/source.txt)

## Editable Shapes

By default, the Diagram [`ShapeOptions editable`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/shapeoptions#editable) property allows users to:

* Connect one Shape to other Shapes.
* Drag a Shape to new coordinates.
* Remove the selected Shape(s).

The following example demonstrates the editable [Shape options](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/shapeoptions).

[Demo Source](https://demos.telerik.com/kendo-react-ui/diagram/shapes/editable/source.txt)

To provide toolbar controls for shape formatting, rotation, duplication, and deletion, add the [Diagram Editor](https://www.telerik.com/kendo-react-ui-develop/components/diagram/diagram-editor).

## Changing the Shape Visuals

The Diagram supports a [`visual`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/shapeoptions#visual) function that replaces the default Shape rendering with fully programmatic drawing. Use it when built-in styling is not enough—for example, to render org-chart cards with photos and titles, show network nodes with status indicators, or build data-driven shapes whose appearance reflects underlying values. The function receives the Shape's data item and other properties, so you can drive the visual output directly from your data.

The following example demonstrates how to use a visual function to create custom Shapes in the Diagram.

[Demo Source](https://demos.telerik.com/kendo-react-ui/diagram/shapes/custom-visual/source.txt)

To use a visual function, follow these steps:

1. Create the visual template function that returns a [`Group`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/group) containing the desired visual elements:

   ```tsx
   import { Group, Rectangle, Image, TextBlock } from '@progress/kendo-react-diagram';

   const visualTemplate = (options): Group => {
       const g = new Group();
       // options.dataItem is the shape; its nested dataItem holds your own data.
       const dataItem = options.dataItem.dataItem;

       g.append(new Rectangle({
           width: 250,
           height: 100,
           stroke: { width: 2, color: dataItem.strokeColor },
           fill: { color: dataItem.backgroundColor },
           cornerRadius: 8
       }));

       if (dataItem.image) {
           g.append(new Image({
               source: dataItem.image,
               x: 10, y: 15,
               width: 70, height: 70
           }));
       }

       g.append(new TextBlock({
           text: dataItem.name,
           x: 90, y: 25,
           fontSize: 16,
           fontWeight: 'bold'
       }));

       return g;
   };
   ```

2. Configure the [`ShapeDefaults`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/shapedefaults) with the `visual` function:

   ```tsx
   const shapeDefaults: ShapeDefaults = {
       visual: visualTemplate,
   };
   ```

3. Apply the configuration to the Diagram:

   ```tsx
   <Diagram
       shapes={shapes}
       shapeDefaults={shapeDefaults}
   />
   ```

## Suggested Links

* [Connections](https://www.telerik.com/kendo-react-ui-develop/components/diagram/connections)
* [Layouts](https://www.telerik.com/kendo-react-ui-develop/components/diagram/layouts)
* [Workflow Diagrams](https://www.telerik.com/kendo-react-ui-develop/components/diagram/workflow)
* [`ShapeOptions` API](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/shapeoptions)
* [`ShapeDefaults` API](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/shapedefaults)