@progress/kendo-angular-diagrams
Version:
Kendo UI Angular diagrams component
59 lines (43 loc) • 7.74 kB
Markdown
<a href="https://www.telerik.com/kendo-angular-ui/components/diagrams" target="_blank">
<img width="631" src="https://demos.telerik.com/kendo-angular-ui/assets/banner/npm-banner.svg" alt="Kendo UI for Angular Diagram">
</a>
## Kendo UI for Angular Diagram Component
> * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)—a commercial UI library.
> * To use this package, you must install a license key file, whether you are on a paid license or a 30-day free trial. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or start a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
> * Adding a valid license key file ensures a seamless experience during the trial period—no watermarks, no warnings, and full access to all components and features.
> * Trial users can register for a free license key file. Without it, your trial may be interrupted by visual indicators or functionality limitations.
> * Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
> * Learn more: https://www.telerik.com/kendo-angular-ui/components/licensing
>
> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui) and speed up your development process!
The [Kendo UI for Angular Diagram](https://www.telerik.com/kendo-angular-ui/components/diagrams) 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. This Diagram Component is built on Angular from the ground up, by a company with a long history of making enterprise-ready components, resulting in a highly performant and customizable solution.
## Key Features
Among the many features which the Kendo UI for Angular Diagram delivers are:
* Workflow Diagram—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...](https://www.telerik.com/kendo-angular-ui/components/diagrams/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...](https://www.telerik.com/kendo-angular-ui/components/diagrams/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...](https://www.telerik.com/kendo-angular-ui/components/diagrams/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 diagrams without manual positioning. Each layout type offers extensive configuration options for fine-tuning the arrangement. [Read more about Diagram layouts...](https://www.telerik.com/kendo-angular-ui/components/diagrams/layouts)
* 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...](https://www.telerik.com/kendo-angular-ui/components/diagrams/data-binding)
* 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...](https://www.telerik.com/kendo-angular-ui/components/diagrams/events)
* 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.
* Export Options—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...](https://www.telerik.com/kendo-angular-ui/components/diagrams/pdf-export)
* Zoom and Navigation—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.
* Styling—Our components are designed to look great out of the box, but we understand that every application is different. That's why the [Progress Design System Kit](https://www.telerik.com/design-system) provides resources to help you customize the look and feel of your Kendo UI for Angular Diagram component. If time is of the essence, our [ThemeBuilder application](https://www.telerik.com/themebuilder) can help you quickly and seamlessly modify the component's appearance.
## Support Options
For any issues you might encounter while working with the Kendo UI for Angular Diagram, you have the following support channels available:
* Industry-leading technical support—Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-center/contact-us/technical-support).
* Product forums—The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
* Feedback portal—The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
## Resources
* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
* [Getting Started with the Kendo UI for Angular Diagram](https://www.telerik.com/kendo-angular-ui/components/diagrams/installation/getting-started)
* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
* [Blogs](http://www.telerik.com/blogs/kendo-ui)
* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
## Questions and Feedback
* [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
* [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
* [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
* [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
*Copyright © 2025 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
*Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*