Kendo UI for Angular
Angular Diagram
- Build flowcharts, org charts and network diagrams in minutes. Bind shapes and connections to live data for dynamic visuals. Apply automatic layouts, in-place editing and export to PDF, SVG or PNG
- Part of the Kendo UI for Angular library along with 110+ professionally-designed components.
- Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
-
Model processes visually in Angular
The Kendo UI for Angular Diagram component helps teams plan, explain and automate complex processes using interactive diagrams. Create and edit shapes, route connections, apply automatic layouts and bind everything to your data to keep visuals accurate and in sync with your app. Built natively for Angular, the Diagram integrates seamlessly with other Kendo UI for Angular components and supports high-performance rendering.
-
Data binding
Generate diagrams from your data models and keep them in sync with updates. Bind shapes and connections to hierarchical or flat data to render org charts, decision trees or network maps with minimal code.
See the Angular Diagram data binding demo.
-
Shapes and customization
Use ready-made rectangles, circles, images and text shapes or define custom SVG visuals. Control size, styling, content and even provide a visual function for fully custom rendering of each node.
See the Angular Diagram shapes demo.
-
Connections and routing
Represent relationships with polyline or cascading connections and fine-tune caps, labels and stroke styling. Connect via named connectors on each shape and control selection and editing behavior.
See the Angular Diagram connections demo.
-
Automatic layouts
Apply tree, layered, force-directed or radial layouts to arrange shapes and route lines for a clean result. Configure spacing, grids and separation to match the structure of your data.
See the Angular Diagram layouts demo.
-
Editing and manipulation
Enable intuitive drag, resize and connect operations with shape-level or global permissions. Let users add, move or remove elements while you stay in control of what is editable.
See the Angular Diagram editing demo.
-
Export to PDF, SVG or PNG
Export any diagram to PDF, image or SVG using the Kendo Drawing API with options for paper size, orientation and quality. Preserve scale correctly with built-in export helpers.
See the Angular Diagram export demo.
-
Events and interactivity
Respond to user intent with a rich event set for drag, select, zoom, pan and content changes. Build tailored behaviors and analytics by subscribing to the events you need.
See the Angular Diagram events demo.
-
Workflow diagram
Illustrate multi-step processes with decision points, loops and handoffs using the built-in workflow diagram sample. Start from the example then adapt shapes, connections and layout to your scenario.
Get Started with Kendo UI for Angular
