Diagram EditorPremium
The KendoReact 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.
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.
| Editing context | Available actions |
|---|---|
Shape | 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. |
Connection | 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. |
| Text | Double-click shape or connection text to open the rich-text editor. The content uses ShapeRichTextContent or ConnectionRichTextContent. Change its color, font family, font size, bold, italic, underline, or alignment. Shape text also supports vertical alignment. |
Configuring the Diagram Editor
The Diagram renders its editor through the DiagramEditor component. To add the editor to a Diagram, place the DiagramEditor as a child of the Diagram:
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;Customizing Toolbars
The Diagram Editor provides a main toolbar and contextual toolbars for shapes, connections, and text. Use the 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:
| Toolbar | Configuration property | Options |
|---|---|---|
| Main | diagram | tools specifies controls, and position places the toolbar at the top or bottom of the Diagram. |
| Shape | shape | tools specifies shape editing controls. |
| Connection | connection | tools specifies connection editing controls. |
| Text | text | tools specifies text formatting controls, while fontNames and fontSizes define the available font families and font sizes. |
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.
The Component Properties configurator in the above example demonstrates predefined toolbar presets. To specify the desired individual controls or add separators, configure the 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 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:
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;Limiting Available Shapes
Use the shapes prop on DiagramEditor to limit the flowchart shape types available from the main toolbar and shape toolbar. The following example defines three FlowchartShapeType values and applies them to the editor:
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;Customizing Text Options
Set fontTypes and fontSizes on DiagramEditor to provide shared font family and size choices for the text toolbar. The text toolbar's fontNames and 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:
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;