All docs
V20.2
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.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.

Diagram Tools

The Diagram widget allows you to customize its UI tools with the following options.

Diagram control data toolbox

View Demo

JavaScript
  $(function() {
        var diagram = $("#diagram").dxDiagram({
              contextMenu: {
                    enabled: true,
                    commands: ["bringToFront","sendToBack", "lock", "unlock"]
              },
              contextToolbox: {
                    enabled: true,
                    category: "flowchart"
                    shapeIconsPerRow: 5,
                    width: 200
              },
              historyToolbar: {
                    visible: false
              },
              mainToolbar: {
                    visible: true,
                    commands: ["undo","redo","separator","fontName","fontSize","separator","bold","italic","underline","separator",
                    "fontColor","lineColor","fillColor","separator"]
              },
              propertiesPanel: {
                    visibility: 'visible',
                    tabs: [{
                          groups: [ { title: "Page Properties", commands: ["pageSize", "pageOrientation", "pageColor"] } ]
                    }]
              },
              toolbox: {
                    visibility: 'visible',
                    groups: ["general", { category: "flowchart", title: "Flowchart", expanded: true }]
                    showSearch: false,
                    shapeIconsPerRow: 4,
                    width: 220
              },
              viewToolbar: {
                    visible: true
              },
        }).dxDiagram("instance");
  });