All docs
V21.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Diagram Tools

The Diagram UI component allows you to customize its UI tools with the following properties.

Diagram control data toolbox

View Demo

jQuery
index.js
  $(function() {
  var diagram = $("#diagram").dxDiagram({
        contextMenu: {
              enabled: true,
              commands: ["bringToFront","sendToBack", "lock", "unlock"]
        },
        contextToolbox: {
              enabled: true,
              category: "flowchart",
              shapeIconsPerRow: 5,
              width: 200
        },
        propertiesPanel: {
              visibility: 'visible',
              tabs: [{
                    groups: [ { title: "Page Properties", commands: ["pageSize", "pageOrientation", "pageColor"] } ]
              }]
        },
        historyToolbar: {
              visible: false
        },
        viewToolbar: {
              visible: true,
              commands: ["zoomLevel", "fullScreen", "units", 
                    {name: "sayHello", text: "Say Hello", icon: "blockquote"},
                    {name: "export", icon: "export", items: ["exportSvg","exportPng","exportJpg"]}]
        },
        mainToolbar: {
              visible: true,
              commands: [
              { name: "undo" },
              { name: "redo" },
              { name: "separator" },
              { name: "fontName" },
              { name: "fontSize" },
              { name: "separator" },
              { name: "bold" },
              { name: "italic" },
              { name: "underline" },
              { name: "separator" },
              { name: "fontColor" },
              { name: "lineColor" },
              { name: "fillColor" },
              { name: "separator" },
              { name: "clear", icon: "clearsquare", text: "Clear Diagram" }
              ]
        },
        toolbox: {
              visibility: 'visible',
              groups: [
              "general", { category: "flowchart", title: "Flowchart", expanded: true }
              ],
              showSearch: false,
              shapeIconsPerRow: 4,
              width: 220
        },
        onCustomCommand: function(e) {
              if(e.name === "clear") {
              var result = DevExpress.ui.dialog.confirm(
                    "Are you sure you want to clear the diagram? This action cannot be undone.", "Warning");
              result.done(
                    function(dialogResult) {
                          if(dialogResult) {
                          e.component.import("");
                          }
                    }
              );}
              else if (e.name == "sayHello")
              alert("Hello!")
        }
  }).dxDiagram("instance");
  ...
Angular
app.component.html
app.component.ts
app.module.ts
  <dx-diagram #diagram id="diagram" (onCustomCommand)="onCustomCommand($event)">
  <dxo-context-menu [enabled]="true" [commands]='["bringToFront", "sendToBack", "lock", "unlock"]'>
  </dxo-context-menu>
  <dxo-context-toolbox [enabled]="true" category="flowchart" [width]="200" [shapeIconsPerRow]="5">
  </dxo-context-toolbox>
  <dxo-properties-panel visibility="visible">
        <dxi-tab>
              <dxi-group title="Page Properties" [commands]='["pageSize","pageOrientation","pageColor"]'></dxi-group>
        </dxi-tab>
  </dxo-properties-panel>
  <dxo-history-toolbar [visible]="false">
  </dxo-history-toolbar>
  <dxo-view-toolbar [visible]="true">
        <dxi-command name="zoomLevel"></dxi-command>
        <dxi-command name="fullScreen"></dxi-command>
        <dxi-command name="units"></dxi-command>
        <dxi-command name="sayHello" icon="blockquote" text="Say Hello"></dxi-command> 
        <dxi-command name="export" icon="export" [items] = '["exportSvg","exportPng","exportJpg"]'></dxi-command>  
  </dxo-view-toolbar>
  <dxo-main-toolbar [visible]="true">
        <dxi-command name="undo"></dxi-command>
        <dxi-command name="redo"></dxi-command>
        <dxi-command name="separator"></dxi-command>
        <dxi-command name="fontName"></dxi-command>
        <dxi-command name="fontSize"></dxi-command>
        <dxi-command name="separator"></dxi-command>
        <dxi-command name="bold"></dxi-command>
        <dxi-command name="italic"></dxi-command>
        <dxi-command name="underline"></dxi-command>
        <dxi-command name="separator"></dxi-command>
        <dxi-command name="fontColor"></dxi-command>
        <dxi-command name="lineColor"></dxi-command>
        <dxi-command name="fillColor"></dxi-command>
        <dxi-command name="separator"></dxi-command>
        <dxi-command name="clear" icon="clearsquare" text="Clear Diagram"></dxi-command>
  </dxo-main-toolbar>
  <dxo-toolbox visibility="visible" [showSearch]="false" [shapeIconsPerRow]="4" [width]="220">
        <dxi-group category="general" title="General"></dxi-group>
        <dxi-group category="flowchart" title="Flowchart" [expanded]="true"></dxi-group>
  </dxo-toolbox>
  </dx-diagram>
  import { confirm } from 'devextreme/ui/dialog';

  @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
  })
  export class AppComponent {
        // ...
        onCustomCommand(e) {
              if(e.name === "clear") {
                    let result = confirm("Are you sure you want to clear the diagram? This action cannot be undone.", "Warning");
                    result.then(
                    function(dialogResult) {
                          if(dialogResult) {
                                e.component.import("");
                          }
                    }
                    );
              }
              else if (e.name == "sayHello")
                    alert("Hello!")
        }
  }
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';

  import { DxDiagramModule } from 'devextreme-angular';

  @NgModule({
        declarations: [
              AppComponent
        ],
        imports: [
              BrowserModule,
              DxDiagramModule
        ],
        providers: [ ],
        bootstrap: [AppComponent]
  })
  export class AppModule { }
Vue
App.vue
  <template>
  <DxDiagram
        id="diagram"
        ref="diagram"
        @custom-command="onCustomCommand"
  >
        <DxContextMenu
              :enabled="true"
              :commands="['bringToFront', 'sendToBack' , 'lock' , 'unlock' ]"
        />
        <DxContextToolbox
              :enabled="true"
              :category="'flowchart'"
              :shape-icons-per-row="5"
              :width="200"
        />
        <DxPropertiesPanel
              :visibility="'visible'"
        >
              <DxTab>
                    <DxGroup
                          :title="'Page Properties'"
                          :commands="['pageSize', 'pageOrientation' , 'pageColor' ]"
                    />
              </DxTab>
        </DxPropertiesPanel>
        <DxHistoryToolbar
              :visible="false"
        />
        <DxViewToolbar
              :visible="true"
        >
              <DxCommand
                    :name="'zoomLevel'"
              />
              <DxCommand
                    :name="'fullScreen'"
              />
              <DxCommand
                    :name="'units'"
              />
              <DxCommand
                    :name="'sayHello'"
                    :icon="'blockquote'"
                    :text="'Say Hello'"
              />
              <DxCommand
                    :name="'export'"
                    :icon="'export'"
                    :items="['exportSvg','exportPng','exportJpg']"
              />
              </DxViewToolbar>
        <DxMainToolbar
              :visible="true"
        >
              <DxCommand
                    :name="'undo'"
              />
              <DxCommand
                    :name="'redo'"
              />
              <DxCommand
                    :name="'separator'"
              />
              <DxCommand
                    :name="'fontName'"
              />
              <DxCommand
                    :name="'fontSize'"
              />
              <DxCommand
                    :name="'separator'"
              />
              <DxCommand
                    :name="'bold'"
              />
              <DxCommand
                    :name="'italic'"
              />
              <DxCommand
                    :name="'underline'"
              />
              <DxCommand
                    :name="'separator'"
              />
              <DxCommand
                    :name="'fontColor'"
              />
              <DxCommand
                    :name="'lineColor'"
              />
              <DxCommand
                    :name="'fillColor'"
              />
              <DxCommand
                    :name="'separator'"
              />
              <DxCommand
                    :name="'clear'"
                    :icon="'clearsquare'"
                    :text="'Clear Diagram'"
              />
        </DxMainToolbar>
        <DxToolbox
              :visibility="'visible'"
              :show-search="false"
              :shape-icons-per-row="4"
              :width="220"
        >
              <DxGroup
                    :category="'general'"
                    :title="'General'"
              />
              <DxGroup
                    :category="'flowchart'"
                    :title="'Flowchart'"
                    :expanded="true"
              />
        </DxToolbox>
  </DxDiagram>
  </template>
  <script>
  import { DxDiagram, DxContextMenu, DxContextToolbox, DxPropertiesPanel, DxGroup, DxTab, 
  DxHistoryToolbar, DxViewToolbar, DxMainToolbar, DxCommand, DxToolbox } from 'devextreme-vue/diagram';
  import { confirm } from 'devextreme/ui/dialog';
  import 'whatwg-fetch';
  export default {
  components: {
        DxDiagram, DxContextMenu, DxContextToolbox, DxPropertiesPanel, DxGroup, DxTab, 
        DxHistoryToolbar, DxViewToolbar, DxMainToolbar, DxCommand, DxToolbox
  },
  mounted() {
        var diagram = this.$refs['diagram'].instance;
        fetch('data/diagram-flow.json')
              .then(function(response) {
                    return response.json();
              })
              .then(function(json) {
                    diagram.import(JSON.stringify(json));
              })
              .catch(function() {
                    throw 'Data Loading Error';
              });
  },
  methods: {
        onCustomCommand(e) {
              if(e.name === 'clear') {
                    var result = confirm('Are you sure you want to clear the diagram? 
                    This action cannot be undone.', 'Warning');
                    result.then(
                          function(dialogResult) {
                                if(dialogResult) {
                                e.component.import('');
                                }
                          }
                    );
              }
              else if (e.name == "sayHello")
                    alert("Hello!")
        }
  }
  };
  </script>
React
App.js
  // ...
  import { confirm } from 'devextreme/ui/dialog';
  // ...
  class App extends React.Component {
        // ...
        onCustomCommand(e) {
              if(e.name === 'clear') {
                    var result = confirm('Are you sure you want to clear the diagram? 
                          This action cannot be undone.', 'Warning');
                    result.then(
                          function(dialogResult) {
                                if(dialogResult) {
                                      e.component.import('');
                                }
                          }
                    );
              }
              else if (e.name == "sayHello")
                    alert("Hello!") 
        }

        render() {
              return (
                    <Diagram id="diagram" ref={this.diagramRef} onCustomCommand={this.onCustomCommand}>
                          <ContextMenu enabled={true} commands={['bringToFront', 'sendToBack', 'lock', 'unlock']} />
                          <ContextToolbox enabled={true} category="flowchart" shapeIconsPerRow={5} width={200} />
                          <PropertiesPanel visibility="visible">
                                <Tab>
                                      <Group title="Page Properties" commands={['pageSize', 'pageOrientation', 'pageColor']} />
                                </Tab>
                          </PropertiesPanel>
                          <HistoryToolbar visible={false} />
                          <ViewToolbar visible={true}>
                                <Command name="zoomLevel" />
                                <Command name="fullScreen" />
                                <Command name="units" />
                                <Command name="sayHello" icon="blockquote" text="Say Hello" />
                                <Command name="export" icon="export" items = {["exportSvg","exportPng","exportJpg"]} />
                          </ViewToolbar>
                          <MainToolbar visible={true}>
                                <Command name="undo" />
                                <Command name="redo" />
                                <Command name="separator" />
                                <Command name="fontName" />
                                <Command name="fontSize" />
                                <Command name="separator" />
                                <Command name="bold" />
                                <Command name="italic" />
                                <Command name="underline" />
                                <Command name="separator" />
                                <Command name="fontColor" />
                                <Command name="lineColor" />
                                <Command name="fillColor" />
                                <Command name="separator" />
                                <Command name="clear" icon="clearsquare" text="Clear Diagram" />
                          </MainToolbar>
                          <Toolbox visibility="visible" showSearch={false} shapeIconsPerRow={4} width={220}>
                                <Group category="general" title="General" />
                                <Group category="flowchart" title="Flowchart" expanded={true} />
                          </Toolbox>
                    </Diagram>
              );
        }
  }
ASP.NET Core Controls
Diagram.cshtml
  @(Html.DevExtreme().Diagram()
        .ID("diagram")
        .ContextMenu(cm => cm
              .Enabled(true)
              .Commands(new[] {
                    DiagramCommand.BringToFront,
                    DiagramCommand.SendToBack,
                    DiagramCommand.Lock,
                    DiagramCommand.Unlock
              })
        )
        .ContextToolbox(ct => ct
              .Enabled(true)
              .Category(DiagramShapeCategory.Flowchart)
              .ShapeIconsPerRow(5)
              .Width(200)
        )
        .PropertiesPanel(pp => pp
              .Visibility(DiagramPanelVisibility.Visible)
              .Tabs(t => {
                    t.Add()
                    .Groups(g => {
                          g.Add()
                                .Title("Page Properties")
                                .Commands(new[] { DiagramCommand.PageSize, DiagramCommand.PageOrientation, 
                                      DiagramCommand.PageColor });
                    });
              })
        )
        .HistoryToolbar(tb => tb
              .Visible(false)
        )
        .ViewToolbar(tb => tb
              .Visible(true)
              .Commands(cmds => {
                    cmds.Add().Name(DiagramCommand.ZoomLevel);
                    cmds.Add().Name(DiagramCommand.FullScreen);
                    cmds.Add().Name(DiagramCommand.Units);
                    cmds.Add().Name("sayHello").Text("Say Hello").Icon("blockquote");
                    cmds.Add().Name("export").Icon("export").Items(items => {
                          items.Add().Name(DiagramCommand.ExportSvg);
                          items.Add().Name(DiagramCommand.ExportPng);
                          items.Add().Name(DiagramCommand.ExportJpg);
                    });
              })
        )
        .MainToolbar(tb => tb
              .Visible(true)
              .Commands(cmds => {
                    cmds.Add().Name(DiagramCommand.Undo);
                    cmds.Add().Name(DiagramCommand.Redo);
                    cmds.Add().Name(DiagramCommand.Separator);
                    cmds.Add().Name(DiagramCommand.FontName);
                    cmds.Add().Name(DiagramCommand.FontSize);
                    cmds.Add().Name(DiagramCommand.Separator);
                    cmds.Add().Name(DiagramCommand.Bold);
                    cmds.Add().Name(DiagramCommand.Italic);
                    cmds.Add().Name(DiagramCommand.Underline);
                    cmds.Add().Name(DiagramCommand.Separator);
                    cmds.Add().Name(DiagramCommand.FontColor);
                    cmds.Add().Name(DiagramCommand.LineColor);
                    cmds.Add().Name(DiagramCommand.FillColor);
                    cmds.Add().Name(DiagramCommand.Separator);
                    cmds.Add().Name("clear").Text("Clear Diagram").Icon("clearsquare");
              })
        )
        .Toolbox(tb => tb
              .Visibility(DiagramPanelVisibility.Visible)
              .Groups(g => {
                    g.Add().Category(DiagramShapeCategory.General).Title("General");
                    g.Add().Category(DiagramShapeCategory.Flowchart).Title("Flowchart").Expanded(true);
              })
              .ShowSearch(false)
              .ShapeIconsPerRow(4)
              .Width(220)
        )
        .OnCustomCommand(@<text>
              function(e) {
                    if(e.name === "clear") {
                          var result = DevExpress.ui.dialog.confirm("Are you sure you want to clear the diagram? 
                                This action cannot be undone.", "Warning");
                          result.done(
                                function(dialogResult) {
                                      if(dialogResult) {
                                            e.component.import("");
                                      }
                                }
                          );
                    }
              else if (e.name == "sayHello")
                    alert("Hello!")
              }
        </text>)
  )
ASP.NET MVC Controls
Diagram.cshtml
  @(Html.DevExtreme().Diagram()
        .ID("diagram")
        .ContextMenu(cm => cm
              .Enabled(true)
              .Commands(new[] {
                    DiagramCommand.BringToFront,
                    DiagramCommand.SendToBack,
                    DiagramCommand.Lock,
                    DiagramCommand.Unlock
              })
        )
        .ContextToolbox(ct => ct
              .Enabled(true)
              .Category(DiagramShapeCategory.Flowchart)
              .ShapeIconsPerRow(5)
              .Width(200)
        )
        .PropertiesPanel(pp => pp
              .Visibility(DiagramPanelVisibility.Visible)
              .Tabs(t => {
                    t.Add()
                    .Groups(g => {
                          g.Add()
                                .Title("Page Properties")
                                .Commands(new[] { DiagramCommand.PageSize, DiagramCommand.PageOrientation, 
                                      DiagramCommand.PageColor });
                    });
              })
        )
        .HistoryToolbar(tb => tb
              .Visible(false)
        )
        .ViewToolbar(tb => tb
              .Visible(true)
              .Commands(cmds => {
                    cmds.Add().Name(DiagramCommand.ZoomLevel);
                    cmds.Add().Name(DiagramCommand.FullScreen);
                    cmds.Add().Name(DiagramCommand.Units);
                    cmds.Add().Name("sayHello").Text("Say Hello").Icon("blockquote");
                    cmds.Add().Name("export").Icon("export").Items(items => {
                          items.Add().Name(DiagramCommand.ExportSvg);
                          items.Add().Name(DiagramCommand.ExportPng);
                          items.Add().Name(DiagramCommand.ExportJpg);
                    });
              })
        )
        .MainToolbar(tb => tb
              .Visible(true)
              .Commands(cmds => {
                    cmds.Add().Name(DiagramCommand.Undo);
                    cmds.Add().Name(DiagramCommand.Redo);
                    cmds.Add().Name(DiagramCommand.Separator);
                    cmds.Add().Name(DiagramCommand.FontName);
                    cmds.Add().Name(DiagramCommand.FontSize);
                    cmds.Add().Name(DiagramCommand.Separator);
                    cmds.Add().Name(DiagramCommand.Bold);
                    cmds.Add().Name(DiagramCommand.Italic);
                    cmds.Add().Name(DiagramCommand.Underline);
                    cmds.Add().Name(DiagramCommand.Separator);
                    cmds.Add().Name(DiagramCommand.FontColor);
                    cmds.Add().Name(DiagramCommand.LineColor);
                    cmds.Add().Name(DiagramCommand.FillColor);
                    cmds.Add().Name(DiagramCommand.Separator);
                    cmds.Add().Name("clear").Text("Clear Diagram").Icon("clearsquare");
              })
        )
        .Toolbox(tb => tb
              .Visibility(DiagramPanelVisibility.Visible)
              .Groups(g => {
                    g.Add().Category(DiagramShapeCategory.General).Title("General");
                    g.Add().Category(DiagramShapeCategory.Flowchart).Title("Flowchart").Expanded(true);
              })
              .ShowSearch(false)
              .ShapeIconsPerRow(4)
              .Width(220)
        )
        .OnCustomCommand(@<text>
              function(e) {
                    if(e.name === "clear") {
                          var result = DevExpress.ui.dialog.confirm("Are you sure you want to clear the diagram? 
                                This action cannot be undone.", "Warning");
                          result.done(
                                function(dialogResult) {
                                      if(dialogResult) {
                                            e.component.import("");
                                      }
                                }
                          );
                    }
              else if (e.name == "sayHello")
                    alert("Hello!")
              }
        </text>)
  )