This example demonstrates how to use Tailwind CSS in ngDiagram.

diagram.component.ts

import '@angular/compiler';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import {
  initializeModel,
  NgDiagramBackgroundComponent,
  NgDiagramComponent,
  NgDiagramNodeTemplateMap,
  provideNgDiagram,
  type NgDiagramConfig,
} from 'ng-diagram';

import { NodeComponent } from './node/node.component';

enum NodeTemplateType {
  CustomNodeType = 'customNodeType',
}

@Component({
  imports: [NgDiagramComponent, NgDiagramBackgroundComponent],
  providers: [provideNgDiagram()],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div
      class="not-content diagram flex h-[30rem] border border-gray-200 dark:border-gray-700"
    >
      <ng-diagram
        [model]="model"
        [config]="config"
        [nodeTemplateMap]="nodeTemplateMap"
      >
        <ng-diagram-background />
      </ng-diagram>
    </div>
  `,
})
export class DiagramComponent {
  nodeTemplateMap = new NgDiagramNodeTemplateMap([
    [NodeTemplateType.CustomNodeType, NodeComponent],
  ]);

  config = {
    zoom: {
      max: 3,
      zoomToFit: {
        onInit: true,
        padding: 70,
      },
    },
  } satisfies NgDiagramConfig;

  model = initializeModel({
    nodes: [
      {
        id: '1',
        position: { x: 80, y: 100 },
        type: 'customNodeType',
        data: {
          name: 'Node 1',
          description: 'This is Tailwind Node 1',
          tooltip: 'Styles are applied with Tailwind CSS',
        },
        rotatable: true,
        resizable: false,
      },
      {
        id: '2',
        position: { x: 450, y: 100 },
        type: 'customNodeType',
        data: {
          name: 'Node 2',
          description: 'This is Tailwind Node 2',
          tooltip: 'Styles are applied with Tailwind CSS',
        },
        rotatable: true,
        resizable: false,
        angle: 30,
      },
    ],
    edges: [
      {
        id: '1',
        source: '1',
        target: '2',
        data: {},
        sourcePort: 'port-right',
        targetPort: 'port-left',
        sourceArrowhead: 'ng-diagram-arrow',
      },
    ],
  });
}

node.component.ts

import { CommonModule } from '@angular/common';
import { Component, input, model } from '@angular/core';
import {
  NgDiagramNodeResizeAdornmentComponent,
  NgDiagramNodeRotateAdornmentComponent,
  NgDiagramNodeSelectedDirective,
  NgDiagramPortComponent,
  type NgDiagramNodeTemplate,
  type Node,
} from 'ng-diagram';

type CustomDataType = {
  name: string;
  description: string;
  tooltip: string;
};

@Component({
  imports: [
    NgDiagramNodeRotateAdornmentComponent,
    NgDiagramPortComponent,
    NgDiagramNodeResizeAdornmentComponent,
    CommonModule,
  ],
  templateUrl: './node.component.html',
  styleUrls: ['./node.component.scss'],
  hostDirectives: [
    { directive: NgDiagramNodeSelectedDirective, inputs: ['node'] },
  ],
  host: {
    '[class.ng-diagram-port-hoverable-over-node]': 'true',
    class: 'flex w-full h-full rounded-lg bg-white dark:bg-neutral-800',
  },
})
export class NodeComponent implements NgDiagramNodeTemplate<CustomDataType> {
  text = model<string>('');
  node = input.required<Node<CustomDataType>>();

  selectedState: string = 'Inactive';

  onStateChange(event: Event) {
    const selectElement = event.target as HTMLSelectElement;
    this.selectedState = selectElement.value;
  }
}

node.component.html

<ng-diagram-node-rotate-adornment />
<ng-diagram-node-resize-adornment>
  <div
    class="flex flex-col p-3 rounded-lg border border-gray-300 dark:border-gray-600 w-full h-full text-xs"
  >
    <div class="flex justify-between items-center mb-1">
      <div class="font-bold text-lg">
        {{ node().data.name }}
      </div>
      <div>
        <div
          class="inline-block text-xs h-5 px-2 rounded-full text-white mb-2 leading-5"
          [ngClass]="{
            'bg-green-500': selectedState === 'Active',
            'bg-red-500': selectedState === 'Error',
            'bg-gray-400': selectedState === 'Inactive',
          }"
        >
          {{ selectedState }}
        </div>
      </div>
    </div>
    <div class="text-xs cursor-help" title="{{ node().data.tooltip }}">
      <div class="py-2">{{ node().data.description }}</div>
      <form class="h-12 mt-2">
        <label for="state-select" class="!mr-2">State:</label>
        <select
          id="state-select"
          [value]="selectedState"
          name="state"
          (change)="onStateChange($event)"
          class="min-w-[120px] px-2 py-1 rounded border border-gray-300 text-sm ml-2"
        >
          <option value="Active">Active</option>
          <option value="Inactive">Inactive</option>
          <option value="Error">Error</option>
        </select>
      </form>
    </div>
  </div>
  <ng-diagram-port id="port-left" type="both" side="left" />
  <ng-diagram-port id="port-top" type="both" side="top" />
  <ng-diagram-port id="port-right" type="both" side="right" />
  <ng-diagram-port id="port-bottom" type="both" side="bottom" />
</ng-diagram-node-resize-adornment>

node.component.scss

:host {
  --mdc-chip-label-text-size: 10px;
  --mat-form-field-container-vertical-padding: 8px;
  --mat-form-field-container-height: 30px;
}