JavaScript/jQuery 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");
  • });