JavaScript/jQuery Diagram - Overview

DevExtreme Diagram is an interactive component that allows you to create, edit, and display diagrams. You can use the Diagram component to visualize processes and relationships within an organization. DevExtreme Diagram supports exporting in raster and vector image formats.

This overview highlights Diagram elements, key features, and what to explore next.

Elements

Diagram elements

  1. Toolbar
  2. Toolbox
  3. View Toolbar
  4. Diagram Page
  5. Shape
  6. Connector
  7. Properties Panel
  8. Properties Panel Button

You can use the DevExtreme Diagram component to create and edit a variety of diagrams, including:

  • Business process diagrams
  • Company structure charts
  • UML and entity-relationship (ER) diagrams
  • Business process model and notation (BPMN) flowcharts
  • Software architecture/component diagrams

Key Features

  • Configurable Diagram Creation and Editing
    The Diagram component allows users to create and edit diagrams. You can configure editing permissions and enable/disable certain actions such as shape deletion, resizing and adding. The component also supports custom permission logic implemented in the edit request handler.

  • Data Binding
    DevExtreme Diagram can load and display diagrams from different data source types. The component supports two-way data binding and integrates with DevExtreme DataSource push services. Diagram accepts data in the following structures:

  • Automatic Layouts
    You can bind Diagram to a data source that does not specify node coordinates. Configure an automatic layout type and choose a diagram orientation to generate diagram layouts.

  • Built-In Shape Types
    The Diagram component ships with 40 resizable shape types. These include shapes that contain images, flowchart shapes, and container shapes.

  • Custom Shapes
    You can configure custom shape text and connection points, as well as add inner and background images.

  • Connector Customization
    You can customize node connectors and arrange them as needed. You can add points and text, specify a line style, and lock specific connectors.

  • Interaction Functionality
    DevExtreme Diagram includes user interaction features such as zoom and pan, snap to grid, and undo/redo.

  • Export
    You can export diagrams as raster and vector image files. The component can export files in the following formats:

    • JPG
    • PNG
    • SVG

  • Adaptability and RTL
    The component adapts its layout to fit screens of all sizes, including portrait orientation screens. Diagram also ships with right-to-left (RTL) representation support.

  • Keyboard Navigation
    DevExtreme Diagram supports keyboard navigation.

  • Customization
    You can customize the component appearance and configure diagram visual settings such as page size and grid visibility. You can also toggle Diagram tools as needed or enable readOnly to hide all tools.

Explore More