# Diagram Editor

The [Kendo UI for Angular Diagram](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams) 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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/diagrams/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="/diagrams/api/shape"><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="/diagrams/api/connection"><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><a href="/diagrams/rich-text">Text</a></td>
            <td>Double-click shape or connection text to open the rich-text editor. The content uses <a href="/diagrams/api/shaperichtextcontent"><code>ShapeRichTextContent</code></a> or <a href="/diagrams/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>

The Diagram Editor modifies rich-text content in place. For details, see the [Rich Text Content article](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/rich-text).

## Configuring the Diagram Editor

The Diagram renders its editor through the [`<kendo-diagram-editor>`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/diagrameditorcomponent) component. To add the editor to a Diagram, follow these steps:

1. Define the [`<kendo-diagram>`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/diagramcomponent) element in your template:

   ```html
   <kendo-diagram></kendo-diagram>
   ```

2. Add the [`<kendo-diagram-editor>`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/diagrameditorcomponent) selector as a child of the Diagram element:

   ```html
   <kendo-diagram>
       <kendo-diagram-editor></kendo-diagram-editor>
   </kendo-diagram>
   ```

### Customizing Toolbars

The Diagram Editor provides a main toolbar and contextual toolbars for shapes, connections, and text. Set the [`toolbars`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/diagrameditorcomponent#toolbars) input to a [`DiagramEditorToolbarsOptions`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/diagrameditortoolbarsoptions) object to configure each of these toolbars.

Each object property in the [`DiagramEditorToolbarsOptions`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/diagrameditortoolbarsoptions) object controls one toolbar. You can set a property to `false` to hide its toolbar, `true` to show its defaults, or use an additional options object to customize it.

The following table lists the options available 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="/diagrams/api/diagrameditortoolbarsoptions#diagram"><code>diagram</code></a></td>
            <td><a href="/diagrams/api/maintoolbaroptions#tools"><code>tools</code></a>&mdash;specifies the controls; <a href="/diagrams/api/maintoolbaroptions#position"><code>position</code></a>&mdash;sets the top or bottom placement.</td>
        </tr>
        <tr>
            <td>Shape</td>
            <td><a href="/diagrams/api/diagrameditortoolbarsoptions#shape"><code>shape</code></a></td>
            <td><a href="/diagrams/api/shapetoolbaroptions#tools"><code>tools</code></a>&mdash;specifies the controls.</td>
        </tr>
        <tr>
            <td>Connection</td>
            <td><a href="/diagrams/api/diagrameditortoolbarsoptions#connection"><code>connection</code></a></td>
            <td><a href="/diagrams/api/connectiontoolbaroptions#tools"><code>tools</code></a>&mdash;specifies the connection toolbar controls.</td>
        </tr>
        <tr>
            <td>Text</td>
            <td><a href="/diagrams/api/diagrameditortoolbarsoptions#text"><code>text</code></a></td>
            <td><a href="/diagrams/api/texttoolbaroptions#tools"><code>tools</code></a>&mdash;specifies the controls; <a href="/diagrams/api/texttoolbaroptions#fontnames"><code>fontNames</code></a>&mdash;sets the available font families; <a href="/diagrams/api/texttoolbaroptions#fontsizes"><code>fontSizes</code></a>&mdash;sets the available 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-angular-ui/demos/diagrams/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-angular-ui-develop/components/diagrams/api/diagrameditorcomponent#toolbars) input directly.

You can add a `'separator'` in the [`tools`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/maintoolbaroptions#tools) array of a toolbar to divide tool groups. The following snippet shows how to configure a bottom main toolbar with separators, a focused shape toolbar, no connection toolbar, and limited font choices:

```typescript TypeScript
public fontTypes: FontTypeItem[] = [
    { text: 'Arial', value: 'Arial, sans-serif' },
    { text: 'Georgia', value: 'Georgia, serif' }
];

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

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

```html HTML
<kendo-diagram>
    <kendo-diagram-editor [toolbars]="toolbars"></kendo-diagram-editor>
</kendo-diagram>
```

### Limiting Available Shapes

Use the `<kendo-diagram-editor>`'s [`shapes`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/diagrameditorcomponent#shapes) input to limit flowchart shapes in the main toolbar and shape toolbar. The following example offers three [`FlowchartShapeType`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/flowchartshapetype) values:

```html HTML
<kendo-diagram>
    <kendo-diagram-editor [shapes]="availableShapes"></kendo-diagram-editor>
</kendo-diagram>
```

```typescript TypeScript
public availableShapes: FlowchartShapeType[] = [
    FlowchartShapeType.Terminator,
    FlowchartShapeType.Process,
    FlowchartShapeType.Decision
];
```

### Customizing Text Options

Set the [`fontTypes`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/diagrameditorcomponent#fonttypes) and [`fontSizes`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/diagrameditorcomponent#fontsizes) properties of the `<kendo-diagram-editor>` component to define shared text appearance options. The [`text`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/diagrameditortoolbarsoptions#text) toolbar's [`fontNames`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/texttoolbaroptions#fontnames) and [`fontSizes`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/texttoolbaroptions#fontsizes) options override the corresponding shared choices.

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

```html HTML
<kendo-diagram>
    <kendo-diagram-editor
        [fontTypes]="fontTypes"
        [fontSizes]="fontSizes"
        [toolbars]="toolbars"
    ></kendo-diagram-editor>
</kendo-diagram>
```

```typescript TypeScript
public fontTypes: FontTypeItem[] = [
    { text: 'Arial', value: 'Arial, sans-serif' },
    { text: 'Georgia', value: 'Georgia, serif' },
    { text: 'Courier New', value: '"Courier New", monospace' }
];

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

public toolbars: DiagramEditorToolbarsOptions = {
    text: {
        fontNames: this.fontTypes.slice(0, 2),
        fontSizes: this.fontSizes.slice(1)
    }
};
```

## Suggested Links

* [Diagram Shapes](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/shapes)
* [Diagram Connections](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/connections)
* [Rich Text Content](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/rich-text)
* [Diagram Keyboard Navigation](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/keyboard-navigation)
* [DiagramComponent API Reference](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/diagramcomponent)