# Kendo UI for Angular Diagram Manual Setup

The manual setup approach provides greater visibility and better control over the files and references installed in your Angular application.

> If you already followed the installation steps in the [Getting Started](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/installation/manual-setup) page, you can skip the manual setup approach demonstrated in this article.

You can install the required [peer dependencies](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/installation/dependencies-and-utils#kendo-angular-diagram-dependencies) and a Kendo UI theme by running separate commands for each step and importing the desired Diagram components and directives in your standalone component.

1. Install the Diagram package together with its dependencies by running the following command:

   ```sh
   npm install --save @progress/kendo-angular-diagrams @progress/kendo-angular-common @progress/kendo-angular-buttons @progress/kendo-angular-dialog @progress/kendo-angular-dropdowns @progress/kendo-angular-editor @progress/kendo-angular-icons @progress/kendo-angular-inputs @progress/kendo-angular-l10n @progress/kendo-angular-popup @progress/kendo-angular-toolbar @progress/kendo-drawing @progress/kendo-licensing
   ```

2. Import the required components and directives:

   To add the Diagram component, import the `KENDO_DIAGRAM` utility array in your standalone component.

   ```ts
   import { Component } from '@angular/core';
   import { KENDO_DIAGRAM } from '@progress/kendo-angular-Diagram';

   @Component({
       standalone: true,
       selector: 'my-app',
       imports: [KENDO_DIAGRAM]
   })
   ```

3. The next step is to style the components by installing one of the [available Kendo UI themes](https://www.telerik.com/kendo-angular-ui-develop/components/styling).

   1. To start using a theme, install its package through NPM.

   * Meridian theme

     ```sh
     npm install --save @progress/kendo-theme-meridian
     ```

   * Bootstrap theme

     ```sh
     npm install --save @progress/kendo-theme-bootstrap
     ```

   * Material theme

     ```sh
     npm install --save @progress/kendo-theme-material
     ```

   * Fluent theme

     ```sh
     npm install --save @progress/kendo-theme-fluent
     ```

   * Default theme

     ```sh
     npm install --save @progress/kendo-theme-default
     ```

   2. After the theme package is installed, reference it in your project. You can include a Kendo UI theme in your project in one of the following ways:

      * By using an [external (CDN) link](https://www.telerik.com/design-system/docs/themes/get-started/installation/#using-external-cdn-link).
      * By using a [precompiled CSS file](https://www.telerik.com/kendo-angular-ui-develop/components/styling#using-precompiled-css).
      * By compiling the theme from the [SCSS source files](https://www.telerik.com/kendo-angular-ui-develop/components/styling#using-scss-source-files).

## Learning Resources

* [Diagram Overview](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams)
* [Diagram Shapes](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/shapes)
* [Diagram Editor](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/diagram-editor)
* [Diagram Connections](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/connections)
* [Diagram Layouts](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/layouts)
* [API Reference of the Angular Diagram](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api)
* [Get Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started)
* [Using Kendo UI for Angular with Angular CLI](https://www.telerik.com/kendo-angular-ui-develop/components/installation/angular-cli)
* [Styling Overview](https://www.telerik.com/kendo-angular-ui-develop/components/styling)
* [Theme Builder](https://www.telerik.com/kendo-angular-ui-develop/components/styling/theme-builder)
* [Customizing the Themes](https://www.telerik.com/kendo-angular-ui-develop/components/styling/custom-themes)
* [Activating Your License Key](https://www.telerik.com/kendo-angular-ui-develop/components/licensing)
* [Video Courses](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started/video-onboarding)