Vue Diagram - Diagram Tools

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

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"
              },
              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 }]
              },
              viewToolbar: {
                    visible: true
              },
        }).dxDiagram("instance");
  });