Angular Diagram Overview
The Kendo UI for Angular Diagram enables you to create interactive diagrams, flowcharts, organizational charts, mind maps, and other visual representations of data and processes. The component provides rich functionality for building, editing, and visualizing complex hierarchical and network structures.
The Diagram component is built from the ground up and specifically for Angular, so that you get a high-performance control which integrates tightly with your application and with the rest of the Kendo UI for Angular components.
Start Free Trial
Angular Diagram Example
Diagram Elements
The Diagram component UI consists of the following elements:
- Shapes are the Diagram nodes (vertices). Shapes can display text and images.
- Connectors are the 5 dots that appear on the Shape boundaries and center on hover. Users can grab a connector and drag it to another shape to create a new connection.
- Connections are the links (edges) between Diagram shapes. Normally, a connection links two Diagram shapes, but a connection can also exist without related shapes.
- Caps are the connection ends. The connections are directional, so each connection has a start cap and end cap. Note the difference between caps and connectors: although they can overlap visually, connectors belong to a shape, while caps belong to a connection.
- Selection handles are the additional visual elements that appear at both ends of a connection when it is selected. The handles appear on top of the caps and connectors.
- Components are groups (subgraphs) of connected shapes within the same Diagram that are not linked to each other. The Diagram provides dedicated settings for such scenarios.
Angular Diagram Key Features
The Kendo UI for Angular Diagram component delivers a range of handy and developer-friendly features whose number and further development are not limited by the list in this section. The Kendo UI for Angular team constantly invests efforts to improve the performance and add more value to the existing Diagram library as well as develop new features to it.
Workflow Diagram
The Kendo UI for Angular Diagram component allows you to create workflow diagrams that visually represent a sequence of steps or processes. Workflow diagrams are useful for illustrating the flow of tasks, decisions, and actions in a process, making it easier to understand complex workflows. Read more about Workflow Diagram...
Shapes and Customization
Create and customize shapes to represent your data visually. The component supports various shape types including circles, rectangles, images, and custom SVG shapes. Customize shape appearance with styles, colors, and text content. Read more about Diagram shapes...
Connections and Relationships
Connect shapes to visualize relationships and data flow through flexible connection options. The component supports different connection types including cascading and polyline connections, with customizable routing, styling, and interactive behavior. Read more about Diagram connections...
Automatic Layouts
Organize your Diagram automatically with built-in layout algorithms. Choose from tree, layered, force-directed, and radial layouts to create professional-looking Diagram without manual positioning. Each layout type offers extensive configuration options for fine-tuning the arrangement. Read more about Diagram layouts...
Zoom
The Diagram allows users to zoom the graph in and out for better perception. The zoom feature supports both mouse wheel and pinch gestures, providing a smooth user experience. You can also programmatically control the zoom level and set limits to prevent excessive zooming.
Interactive Events
Respond to user interactions with a comprehensive set of events covering shape manipulation, connection changes, navigation, and selection. The event system enables you to build dynamic and responsive diagram applications. Read more about Diagram events...
Export Diagram
Export your Diagram to various formats including PDF, SVG, and PNG. The export feature provides options for customizing the output, such as page size, orientation, and quality. Read more about Diagram export...
Editing and Manipulation
Enable users to create, modify, and delete diagram elements through intuitive drag-and-drop interactions. Control editing permissions per shape or globally, and provide tools for connecting, resizing, and repositioning elements. Read more about the editing of the Diagram shapes and connections in the Diagram Shapes and Diagram Connections articles.
Data Binding
Bind diagram shapes and connections to your data models for dynamic diagram generation. Support for hierarchical data structures makes it easy to create organizational charts, decision trees, and other data-driven visualizations. Read more about Diagram data binding...
Trial Version of Kendo UI for Angular
The Kendo UI for Angular Diagram is part of the Kendo UI for Angular library. Kendo UI for Angular offers a 30-day trial with a full-featured version of the library—no restrictions! What’s more, you are eligible for full technical support during your trial period in case you have any questions. Sign up for a free 30-day trial of Kendo UI for Angular.
Support Options
For any questions about the use of the Kendo UI for Angular Diagram, or any of the other components, there are several support options available:
- Kendo UI license holders and anyone in an active trial can take advantage of the Kendo UI for Angular outstanding customer support delivered by the actual developers who built the library. To submit a support ticket, use the Kendo UI support system.
- The Kendo UI for Angular forums are part of the free support you can get from the community and from the Kendo UI team on all kinds of general issues.
- The Kendo UI for Angular feedback portal and the Kendo UI for Angular roadmap provide information on the features under discussion and also the planned ones for release.
- Kendo UI for Angular uses GitHub Issues as its bug tracker where you can submit any related reports. Also, check out the closed list.
- Naturally, the Kendo UI for Angular team is active on StackOverflow where you can find a wealth of questions and answers.
- Need something unique that is tailor-made for your project? Progress offers its Progress Services group that can work with you to create any customized solution that you might need.