Angular Diagram - Diagram Tools

The DevExtreme Diagram ships with configurable tool panels and menus. The following image highlights these visual elements:

DevExtreme Diagram tools

To configure Diagram tools, implement the following properties:

jQuery

To specify which commands a tool panel or menu displays, define the element's commands[] array (for instance, mainToolbar.commands[]). To add predefined commands, you can specify a string value within commands[] arrays:

index.js
$("#diagram").dxDiagram({
    mainToolbar: {
        commands: [ 'undo', 'redo', 'fontName', 'fontSize', 'bold', 'italic', 'underline' ],
    },
})
Angular

To specify which commands a tool panel or menu displays, define the element's commands[] array (for instance, mainToolbar.commands[]). To add predefined commands, specify only the name property:

app.component.html
<dx-diagram>
    <dxo-diagram-main-toolbar [visible]="true">
        <dxi-diagram-command name="undo"></dxi-diagram-command>
        <dxi-diagram-command name="redo"></dxi-diagram-command>
        <dxi-diagram-command name="fontName"></dxi-diagram-command>
        <dxi-diagram-command name="fontSize"></dxi-diagram-command>
        <dxi-diagram-command name="bold"></dxi-diagram-command>
        <dxi-diagram-command name="italic"></dxi-diagram-command>
        <dxi-diagram-command name="underline"></dxi-diagram-command>
    </dxo-diagram-main-toolbar>
</dx-diagram>
Vue

To specify which commands a tool panel or menu displays, define the element's commands[] array (for instance, mainToolbar.commands[]). To add predefined commands, specify only the name property:

App.vue
<template>
    <DxDiagram>
        <DxMainToolbar :visible="true">
            <DxCommand name="undo" />
            <DxCommand name="redo" />
            <DxCommand name="fontName" />
            <DxCommand name="fontSize" />
            <DxCommand name="bold" />
            <DxCommand name="italic" />
            <DxCommand name="underline" />
        </DxMainToolbar>
    </DxDiagram>
</template>

<script setup lang="ts">
import { DxDiagram, DxMainToolbar, DxCommand } from 'devextreme-vue/diagram';

</script>
React

To specify which commands a tool panel or menu displays, define the element's commands[] array (for instance, mainToolbar.commands[]). To add predefined commands, specify only the name property:

App.tsx
import { Diagram, MainToolbar, Command } from 'devextreme-react/diagram';

function App() {
    return (
        <Diagram>
            <MainToolbar visible={true}>
                <Command name="undo" />
                <Command name="redo" />
                <Command name="fontName" />
                <Command name="fontSize" />
                <Command name="bold" />
                <Command name="italic" />
                <Command name="underline" />
            </MainToolbar>
        </Diagram>
    )
}

The Diagram component supports custom commands within tool panels and menus. To define a custom command item, specify a string command.name value (different from Command type values) and implement the onCustomCommand handler. You can also specify custom command icons and text. The following code snippet demonstrates a custom command that imports an empty value into the Diagram to clear component content:

jQuery
index.js
$("#diagram").dxDiagram({
    mainToolbar: {
        commands: [{
            name: 'clear',
            icon: 'deletetable'
        }, ... ],
    },
    onCustomCommand(e) {
        if(e.name === 'clear') {
            e.component.import('');
        }
    },
})
Angular
app.component.html
app.component.ts
<dx-diagram (onCustomCommand)="handleCustomCommand($event)">
    <dxo-diagram-main-toolbar [visible]="true">
        <dxi-diagram-command
            name="clear"
            icon="deletetable"
        ></dxi-diagram-command>
    </dxo-diagram-main-toolbar>
</dx-diagram>
import { DxDiagramComponent, type DxDiagramTypes } from 'devextreme-angular/ui/diagram';
// ...
export class AppComponent {
    handleCustomCommand(e: DxDiagramTypes.CustomCommandEvent) {
        if(e.name === 'clear') {
            e.component.import('');
        }
    }
}
Vue
App.vue
<template>
    <DxDiagram @custom-command="handleCustomCommand">
        <DxMainToolbar :visible="true">
            <DxCommand
                name="clear"
                icon="deletetable"
            />
        </DxMainToolbar>
    </DxDiagram>
</template>

<script setup lang="ts">
import { DxDiagram, DxMainToolbar, DxCommand, type DxDiagramTypes } from 'devextreme-vue/diagram'

function handleCustomCommand(e: DxDiagramTypes.CustomCommandEvent) {
    if(e.name === 'clear') {
        e.component.import('');
    }
}
</script>
React
App.tsx
import { Diagram, MainToolbar, Command, type DiagramTypes } from 'devextreme-react/diagram';

function handleCustomCommand(e: DiagramTypes.CustomCommandEvent) {
    if(e.name === 'clear') {
        e.component.import('');
    }
}

function App() {
    return (
        <Diagram onCustomCommand={handleCustomCommand}>
            <MainToolbar visible={true}>
                <Command
                    name="clear"
                    icon="deletetable"
                />
            </MainToolbar>
        </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>)
  )

View Demo