# Diagram Editor

The [KendoReact Diagram](https://www.telerik.com/kendo-react-ui-develop/components/diagram) Editor adds a main toolbar and contextual toolbars to a Diagram. Use the editor to let users perform rich-text editing, insert and format shapes, connections, and text directly on the canvas.

When hovering over the Diagram, the default editor displays a main toolbar above the component for undo, redo, selection, panning, text insertion, and shape insertion actions.

The following example demonstrates the Diagram Editor with a patient intake workflow. Select a shape or connection to open its toolbar. Double-click shape or connection text to edit it.

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

## Using the Diagram Editor

The Diagram Editor provides a main toolbar for canvas actions and contextual toolbars for selected shapes, connections, and text.

The following table summarizes the actions available in each default editing context.

<table>
    <colgroup>
        <col style="width: 22%" />
        <col style="width: 78%" />
    </colgroup>
    <thead>
        <tr>
            <th>Editing context</th>
            <th>Available actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="/diagram/api/shapeoptions"><code>Shape</code></a></td>
            <td>Select a shape to open its toolbar. Change its type, fill, border width, border color, or border style; change its stacking order; rotate, duplicate, or delete it.</td>
        </tr>
        <tr>
            <td><a href="/diagram/api/connectionoptions"><code>Connection</code></a></td>
            <td>Select a connection to open its toolbar. Change its line color, width, style, route type, or start and end caps; edit its label or delete it.</td>
        </tr>
        <tr>
            <td>Text</td>
            <td>Double-click shape or connection text to open the rich-text editor. The content uses <a href="/diagram/api/shaperichtextcontent"><code>ShapeRichTextContent</code></a> or <a href="/diagram/api/connectionrichtextcontent"><code>ConnectionRichTextContent</code></a>. Change its color, font family, font size, bold, italic, underline, or alignment. Shape text also supports vertical alignment.</td>
        </tr>
    </tbody>
</table>

## Configuring the Diagram Editor

The Diagram renders its editor through the [`DiagramEditor`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/diagrameditor) component. To add the editor to a Diagram, place the [`DiagramEditor`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/diagrameditor) as a child of the [`Diagram`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/diagram):

```tsx App.tsx
import { Diagram, DiagramEditor } from '@progress/kendo-react-diagram';
import { shapes, connections } from './data';

const App = () => (
    <Diagram shapes={shapes} connections={connections} style={{ height: 500 }}>
        <DiagramEditor />
    </Diagram>
);

export default App;
```

```tsx data.ts
import type { ConnectionOptions, ShapeOptions } from '@progress/kendo-react-diagram';

export const shapes: ShapeOptions[] = [
    { id: 'start', x: 100, y: 100, content: { text: 'Start' } },
    { id: 'process', x: 300, y: 100, content: { text: 'Process' } }
];

export const connections: ConnectionOptions[] = [{ from: 'start', to: 'process' }];
```

### Customizing Toolbars

The Diagram Editor provides a main toolbar and contextual toolbars for shapes, connections, and text. Use the [`toolbars`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/diagrameditorprops#toolbars) prop to configure each of these toolbars.

Set a toolbar option in `toolbars` to `false` to hide that toolbar, `true` to show its defaults, or provide an options object to customize its controls.

The following table summarizes the configuration options for each toolbar:

<table>
    <colgroup>
        <col style="width: 18%" />
        <col style="width: 20%" />
        <col style="width: 62%" />
    </colgroup>
    <thead>
        <tr>
            <th>Toolbar</th>
            <th>Configuration property</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Main</td>
            <td><a href="/diagram/api/maintoolbaroptions"><code>diagram</code></a></td>
            <td><a href="/diagram/api/maintoolbaroptions#tools"><code>tools</code></a> specifies controls, and <a href="/diagram/api/maintoolbaroptions#position"><code>position</code></a> places the toolbar at the top or bottom of the Diagram.</td>
        </tr>
        <tr>
            <td>Shape</td>
            <td><a href="/diagram/api/shapetoolbaroptions"><code>shape</code></a></td>
            <td><a href="/diagram/api/shapetoolbaroptions#tools"><code>tools</code></a> specifies shape editing controls.</td>
        </tr>
        <tr>
            <td>Connection</td>
            <td><a href="/diagram/api/connectiontoolbaroptions"><code>connection</code></a></td>
            <td><a href="/diagram/api/connectiontoolbaroptions#tools"><code>tools</code></a> specifies connection editing controls.</td>
        </tr>
        <tr>
            <td>Text</td>
            <td><a href="/diagram/api/texttoolbaroptions"><code>text</code></a></td>
            <td><a href="/diagram/api/texttoolbaroptions#tools"><code>tools</code></a> specifies text formatting controls, while <a href="/diagram/api/texttoolbaroptions#fontnames"><code>fontNames</code></a> and <a href="/diagram/api/texttoolbaroptions#fontsizes"><code>fontSizes</code></a> define the available font families and font sizes.</td>
        </tr>
    </tbody>
</table>

Use the following demo to compare toolbar visibility, placement, and preset tool sets. Select a shape or connection to open its contextual toolbar, or double-click a label to edit text.

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

The **Component Properties** configurator in the above example demonstrates predefined toolbar presets. To specify the desired individual controls or add separators, configure the [`toolbars`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/diagrameditorprops#toolbars) input directly.

You can add a `'separator'` in a toolbar's `tools` array to divide groups of controls. The supported identifiers are listed in the [`ToolbarTools`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/toolbartools) API reference. The following snippet shows how to configure a bottom main toolbar with separators, a focused shape toolbar, no connection toolbar, and limited font choices:

```tsx App.tsx
import { Diagram, DiagramEditor } from '@progress/kendo-react-diagram';
import { shapes, connections } from './data';
import { toolbars } from './editor-config';

const App = () => (
    <Diagram shapes={shapes} connections={connections} style={{ height: 500 }}>
        <DiagramEditor toolbars={toolbars} />
    </Diagram>
);

export default App;
```

```tsx editor-config.ts
import type { DiagramEditorProps, FontSizeItem, FontTypeItem } from '@progress/kendo-react-diagram';

const fontTypes: FontTypeItem[] = [
    { text: 'Arial', value: 'Arial, sans-serif' },
    { text: 'Georgia', value: 'Georgia, serif' }
];

const fontSizes: FontSizeItem[] = [
    { text: '14', value: '14px' },
    { text: '18', value: '18px' },
    { text: '24', value: '24px' }
];

export const toolbars: DiagramEditorProps['toolbars'] = {
    diagram: {
        position: 'bottom',
        tools: ['undo', 'redo', 'separator', 'select', 'pan', 'text', 'shape']
    },
    shape: {
        tools: ['backColor', 'borderColor', 'separator', 'duplicate', 'delete']
    },
    connection: false,
    text: {
        tools: ['fontType', 'fontSize', 'separator', 'bold', 'italic', 'underline', 'align'],
        fontNames: fontTypes,
        fontSizes
    }
};
```

### Limiting Available Shapes

Use the [`shapes`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/diagrameditorprops#shapes) prop on `DiagramEditor` to limit the flowchart shape types available from the main toolbar and shape toolbar. The following example defines three [`FlowchartShapeType`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/flowchartshapetype) values and applies them to the editor:

```tsx App.tsx
import { Diagram, DiagramEditor } from '@progress/kendo-react-diagram';
import { shapes, connections } from './data';
import { availableShapes } from './editor-shapes';

const App = () => (
    <Diagram shapes={shapes} connections={connections}>
        <DiagramEditor shapes={availableShapes} />
    </Diagram>
);

export default App;
```

```tsx editor-shapes.ts
import { FlowchartShapeType } from '@progress/kendo-react-diagram';

export const availableShapes = [FlowchartShapeType.Terminator, FlowchartShapeType.Process, FlowchartShapeType.Decision];
```

### Customizing Text Options

Set [`fontTypes`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/diagrameditorprops#fonttypes) and [`fontSizes`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/diagrameditorprops#fontsizes) on `DiagramEditor` to provide shared font family and size choices for the text toolbar. The text toolbar's [`fontNames`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/texttoolbaroptions#fontnames) and [`fontSizes`](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/texttoolbaroptions#fontsizes) options can override the corresponding shared choices.

The following example defines shared font lists, then limits the text toolbar to two fonts and two sizes:

```tsx App.tsx
import { Diagram, DiagramEditor } from '@progress/kendo-react-diagram';
import { shapes, connections } from './data';
import { fontTypes, fontSizes, toolbars } from './text-editor-config';

const App = () => (
    <Diagram shapes={shapes} connections={connections}>
        <DiagramEditor fontTypes={fontTypes} fontSizes={fontSizes} toolbars={toolbars} />
    </Diagram>
);

export default App;
```

```tsx text-editor-config.ts
import type { DiagramEditorProps, FontSizeItem, FontTypeItem } from '@progress/kendo-react-diagram';

export const fontTypes: FontTypeItem[] = [
    { text: 'Arial', value: 'Arial, sans-serif' },
    { text: 'Georgia', value: 'Georgia, serif' },
    { text: 'Courier New', value: '"Courier New", monospace' }
];

export const fontSizes: FontSizeItem[] = [
    { text: '14', value: '14px' },
    { text: '18', value: '18px' },
    { text: '24', value: '24px' }
];

export const toolbars: DiagramEditorProps['toolbars'] = {
    text: {
        tools: ['fontType', 'fontSize', 'separator', 'bold', 'italic'],
        fontNames: fontTypes.slice(0, 2),
        fontSizes: fontSizes.slice(1)
    }
};
```

## Suggested Links

* [Diagram Shapes](https://www.telerik.com/kendo-react-ui-develop/components/diagram/shapes)
* [Diagram Connections](https://www.telerik.com/kendo-react-ui-develop/components/diagram/connections)
* [Workflow Diagrams](https://www.telerik.com/kendo-react-ui-develop/components/diagram/workflow)
* [Diagram Events](https://www.telerik.com/kendo-react-ui-develop/components/diagram/events)
* [Diagram Editor API](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/diagrameditor)