Templates

The Diagram widget allows you to create templates for shapes and their presentation in the toolbox.

IMPORTANT
Template content must be presented as SVG elements.

Shape Template

Use the following options to create a shape template:

  • The customShapeTemplate option defines a common template for all shapes in the widget.
  • The template option defines a template for an individual shape.

View Demo

jQuery
index.js
$(function() {
    var diagram = $("#diagram").dxDiagram({
        customShapeTemplate: function(item, $container) {
            var employee = item.dataItem;
            var $content = $("<svg class='template'>" +
                "<text class='template-name' x='50%' y='20%'>" + (employee ? employee.Full_Name : "Employee's Name") + "</text>" +
                "<text class='template-title' x='50%' y='45%'>" + (employee ? employee.Title : "Employee's Title") + "</text>" +
                "<text class='template-button' id='employee-edit' x='40%' y='85%'>Edit</text>" +
                "<text class='template-button' id='employee-delete' x='62%' y='85%'>Delete</text>" +
                "</svg >");
            $container.append($content);
            $content.find("#employee-edit").click(function() { editEmployee(employee); });
            $content.find("#employee-delete").click(function() { deleteEmployee(employee); });
        },
        ...
Angular
app.component.html
<dx-diagram id="diagram" #diagram customShapeTemplate="customShapeTemplate">
    <svg *dxTemplate="let item of 'customShapeTemplate'" class="template">
        <text class="template-name" x="50%" y="20%">{{item.dataItem ? item.dataItem.Full_Name : "Employee's Name"}}</text>
        <text class="template-title" x="50%" y="45%">{{item.dataItem ? item.dataItem.Title : "Employee's Title"}}</text>
        <text class="template-button" x="40%" y="85%" (click)="editEmployee(item.dataItem)">Edit</text>
        <text class="template-button" x="62%" y="85%" (click)="deleteEmployee(item.dataItem)">Delete</text>
    </svg>
    ...
Vue
App.vue
CustomShapeTemplate.vue
<DxDiagram
  id="diagram"
  ref="diagram"
  custom-shape-template="CustomShapeTemplate"
>
  <template #CustomShapeTemplate="{ data }">
    <CustomShapeTemplate
      :employee="data.dataItem"
      :edit-employee="editEmployee"
      :delete-employee="deleteEmployee"
    />
  </template>
  ...
<template>
<svg class="template">
    <text
    class="template-name"
    x="50%"
    y="20%"
    >
    {{ employeeName }}
    </text>
    <text
    class="template-title"
    x="50%"
    y="45%"
    >
    {{ employeeTitle }}
    </text>
    <text
    class="template-button"
    x="40%"
    y="85%"
    @click="editEmployeeFunc"
    >
    Edit
    </text>
    <text
    class="template-button"
    x="62%"
    y="85%"
    @click="deleteEmployeeFunc"
    >
    Delete
    </text>
</svg>
</template>
...
React
App.js
CustomShapeTemplate.js
import Diagram, { CustomShape, ContextToolbox, PropertiesPanel, Group, Tab, Toolbox, Nodes, AutoLayout } from 'devextreme-react/diagram';
import CustomShapeTemplate from './CustomShapeTemplate.js';

class App extends React.Component {
constructor(props) {
    this.diagramRef = React.createRef();
    this.customShapeTemplate = this.customShapeTemplate.bind(this);
    ...
}

render() {
    return (
    <div id="container">
        <Diagram id="diagram" ref={this.diagramRef} customShapeRender={this.customShapeTemplate}>
        ...
export default function CustomShapeTemplate(employee, editEmployee, deleteEmployee) {
    var employeeName = employee ? employee.Full_Name : 'Employee\'s Name';
    var employeeTitle = employee ? employee.Title : 'Employee\'s Title';
    return (
        <svg className="template">
        <text className="template-name" x="50%" y="20%">{employeeName}</text>
        <text className="template-title" x="50%" y="45%">{employeeTitle}</text>
        <text className="template-button" x="40%" y="85%" onClick={editEmployee}>Edit</text>
        <text className="template-button" x="62%" y="85%" onClick={deleteEmployee}>Delete</text>
        </svg>
    );
}
ASP.NET Core Controls
CustomShapesWithTemplatesWithEditing.cshtml
@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .CustomShapeTemplate(@<text>
        <svg class="template">
            <text class="template-name" x="50%" y="20%"><%- dataItem ? dataItem.FullName : "Employee's Name" %></text>
            <text class="template-title" x="50%" y="45%"><%- dataItem ? dataItem.Title : "Employee's Title" %></text>
            <text class="template-button" x="40%" y="85%" onclick="editEmployee(<%- dataItem && JSON.stringify(dataItem) %>)">Edit</text>
            <text class="template-button" x="62%" y="85%" onclick="deleteEmployee(<%- dataItem && JSON.stringify(dataItem) %>)">Delete</text>
        </svg>
        </text>)
    ...
ASP.NET MVC Controls
CustomShapesWithTemplatesWithEditing.cshtml
@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .CustomShapeTemplate(@<text>
        <svg class="template">
            <text class="template-name" x="50%" y="20%"><%- dataItem ? dataItem.FullName : "Employee's Name" %></text>
            <text class="template-title" x="50%" y="45%"><%- dataItem ? dataItem.Title : "Employee's Title" %></text>
            <text class="template-button" x="40%" y="85%" onclick="editEmployee(<%- dataItem && JSON.stringify(dataItem) %>)">Edit</text>
            <text class="template-button" x="62%" y="85%" onclick="deleteEmployee(<%- dataItem && JSON.stringify(dataItem) %>)">Delete</text>
        </svg>
        </text>)
        ...

Diagram - Shape Template

Toolbox Shape Template

Use the following options to create a template for a shape in the toolbox:

View Demo

jQuery
index.js
$(function() {
    var diagram = $("#diagram").dxDiagram({
        customShapeToolboxTemplate: function(item, $container) {
            var employee = item.dataItem;
            var $content = $("<svg class='template'>" +
                "<text class='template-name' x='50%' y='40%'>New</text>" +
                "<text class='template-title' x='50%' y='70%'>Employee</text>" +
                "</svg >");
            $container.append($content);
        },
        ...
Angular
app.component.html
<dx-diagram id="diagram" #diagram customShapeToolboxTemplate="customShapeToolboxTemplate">
    <svg *dxTemplate="let item of 'customShapeToolboxTemplate'" class="template">
        <text class="template-name" x="50%" y="40%">New</text>
        <text class="template-title" x="50%" y="70%">Employee</text>
    </svg>
    ...
Vue
App.vue
CustomShapeToolboxTemplate.vue
<DxDiagram
  id="diagram"
  ref="diagram"
  custom-shape-toolbox-template="CustomShapeToolboxTemplate"
>
  <template #CustomShapeToolboxTemplate="{ data }">
    <CustomShapeToolboxTemplate/>
  </template>
  ...
<template>
<svg class="template">
    <text
    class="template-name"
    x="50%"
    y="40%"
    >
    New
    </text>
    <text
    class="template-title"
    x="50%"
    y="70%"
    >
    Employee
    </text>
</svg>
</template>
    ...
React
App.js
CustomShapeToolboxTemplate.js
import Diagram, { CustomShape, ContextToolbox, PropertiesPanel, Group, Tab, Toolbox, Nodes, AutoLayout } from 'devextreme-react/diagram';
import CustomShapeToolboxTemplate from './CustomShapeToolboxTemplate.js';

class App extends React.Component {
constructor(props) {
    this.diagramRef = React.createRef();
    this.customShapeToolboxTemplate = this.customShapeToolboxTemplate.bind(this);
    ...
}

render() {
    return (
    <div id="container">
        <Diagram id="diagram" ref={this.diagramRef} customShapeToolboxRender={this.customShapeToolboxTemplate}>
        ...
export default function CustomShapeToolboxTemplate() {
return (
    <svg className="template">
    <text className="template-name" x="50%" y="40%">New</text>
    <text className="template-title" x="50%" y="70%">Employee</text>
    </svg>
);
}
ASP.NET Core Controls
CustomShapesWithTemplatesWithEditing.cshtml
@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .CustomShapeToolboxTemplate(@<text>
        <svg class="template">
            <text class="template-name" x="50%" y="40%">New</text>
            <text class="template-title" x="50%" y="70%">Employee</text>
        </svg>
    </text>)
    ...
ASP.NET MVC Controls
CustomShapesWithTemplatesWithEditing.cshtml
@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .CustomShapeToolboxTemplate(@<text>
        <svg class="template">
            <text class="template-name" x="50%" y="40%">New</text>
            <text class="template-title" x="50%" y="70%">Employee</text>
        </svg>
    </text>)
        ...

Diagram - Toolbox Shape Template