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

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>
  • );
  • }
  • }