### Local Development Setup

Source: https://github.com/synergycodes/ng-diagram/blob/main/tools/mcp-server/GUIDE.md

Steps to install, build, and configure the MCP server for local development within the ng-diagram monorepo.

```bash
cd tools/mcp-server
pnpm install
pnpm build
```

```json
{
  "mcpServers": {
    "ng-diagram-docs": {
      "type": "stdio",
      "command": "node",
      "args": ["/absolute/path/to/tools/mcp-server/dist/index.js"]
    }
  }
}
```

--------------------------------

### Data Flow at Startup

Source: https://github.com/synergycodes/ng-diagram/blob/main/tools/mcp-server/GUIDE.md

Explanation of the data flow when the MCP server starts up.

```text
Docs directory (.md/.mdx files)
  → DocumentationIndexer scans and parses
  → Sections stored in memory (page map + flat section list)
  → SearchEngine builds MiniSearch index from sections

API report (.api.md file)       [optional]
  → ApiReportIndexer parses TypeScript code block
  → Symbols stored in memory (array + name→symbol map)
  → SymbolSearchEngine builds MiniSearch index from symbols
```

--------------------------------

### YAML Frontmatter Example

Source: https://github.com/synergycodes/ng-diagram/blob/main/tools/mcp-server/GUIDE.md

Example of YAML frontmatter for title and description in markdown files.

```yaml
---
title: Getting Started
description: How to set up the library
---

Your markdown content here...

## First Section

Content under first heading...

## Second Section

Content under second heading...
```

--------------------------------

### Build and test commands

Source: https://github.com/synergycodes/ng-diagram/blob/main/tools/mcp-server/GUIDE.md

Commands to install dependencies, run tests, and build the project.

```bash
pnpm install
pnpm test    # Run tests to make sure everything works
pnpm build   # Compile TypeScript
```

--------------------------------

### Example: Introduce new API

Source: https://github.com/synergycodes/ng-diagram/blob/main/docs/processes/deprecation-guide.md

First step in the deprecation workflow: introducing the new API that will replace the old one.

```typescript
// Add new component
export class NewComponent {}
```

--------------------------------

### Update package.json

Source: https://github.com/synergycodes/ng-diagram/blob/main/tools/mcp-server/GUIDE.md

Example of updating package.json for a forked MCP server.

```json
{
  "name": "@your-lib/mcp-server",
  "description": "MCP server for your-lib documentation search"
}
```

--------------------------------

### Installation

Source: https://github.com/synergycodes/ng-diagram/blob/main/README.md

Install the ng-diagram library using npm.

```bash
npm install ng-diagram
```

--------------------------------

### Sample Usage Flow: Starting Gesture

Source: https://github.com/synergycodes/ng-diagram/blob/main/docs/adl/2026-01-14-mobile-desktop-events-changes.md

Example of how to set the current event type in TouchEventsStateService when a gesture starts.

```typescript
this.touchEventsStateService.currentEvent.set(DiagramEventName.Panning);
```

--------------------------------

### Changelog entry for deprecation

Source: https://github.com/synergycodes/ng-diagram/blob/main/docs/processes/deprecation-guide.md

Example of how to document a deprecation in the CHANGELOG.md file, including the deprecated item, its replacement, the removal version, and a link to the related pull request.

```markdown
### Deprecated

- `OldComponent` is deprecated in favor of `NewComponent`. It will be removed in v3.0.0 ([#123](https://github.com/synergycodes/ng-diagram/pull/123))
```

--------------------------------

### Configuration Example

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/guides/nodes/resizing.mdx

Example of how to configure resizing settings in the diagram configuration.

```typescript
import { Component } from "@angular/core";
import { NgDiagramConfig, NgDiagramComponent } from "@synergycodes/ng-diagram";

const config: NgDiagramConfig = {
  features: {
    resizing: {
      defaultResizable: true,
      getMinNodeSize: () => ({ width: 50, height: 50 }),
      allowResizeBelowChildrenBounds: false,
    },
  },
};

@Component({
  selector: "app-diagram",
  template: `
    <ng-diagram [config]="config"></ng-diagram>
  `,
  standalone: true,
  imports: [NgDiagramComponent],
})
export class DiagramComponent {
  config = config;
}
```

--------------------------------

### Example Middleware

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/api/Types/Middleware/MiddlewareContext.md

An example of how to use the MiddlewareContext in an execute function.

```typescript
const middleware: Middleware = {
  name: 'validation',
  execute: (context, next, cancel) => {
    // Check if any nodes were added
    if (context.helpers.anyNodesAdded()) {
      console.log('Nodes added:', context.state.nodes);
    }

    // Access configuration
    console.log('Cell size:', context.config.background.cellSize);

    // Check what actions triggered this (supports transactions with multiple actions)
    if (context.modelActionTypes.includes('addNodes')) {
      // Validate new nodes
      const isValid = validateNodes(context.state.nodes);
      if (!isValid) {
        cancel(); // Block the operation
        return;
      }
    }

    next(); // Continue to next middleware
  }
};
```

--------------------------------

### Example Usage

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/api/Types/Middleware/ModelActionTypes.md

An example of how to use ModelActionTypes in a middleware.

```typescript
const middleware: Middleware = {
  name: 'logger',
  execute: (context, next) => {
    console.log('Action types:', context.modelActionTypes.join(', '));
    next();
  }
};
```

--------------------------------

### Good Changelog Entry Examples

Source: https://github.com/synergycodes/ng-diagram/blob/main/docs/processes/maintaining-changelog.md

Examples of well-written changelog entries, including specific descriptions and PR links.

```markdown
- Fixed `NgDiagramModelService.addEdges` not redrawing diagram ([#369](https://github.com/synergycodes/ng-diagram/pull/369))
- Added environment layer for unified environment functionality ([#350](https://github.com/synergycodes/ng-diagram/pull/350))
```

--------------------------------

### Unreleased Section Example

Source: https://github.com/synergycodes/ng-diagram/blob/main/docs/processes/maintaining-changelog.md

Example of how to add changes under the [Unreleased] section in the changelog.

```markdown
## [Unreleased]

### Added

- Your new feature here ([#123](https://github.com/synergycodes/ng-diagram/pull/123))
```

--------------------------------

### Bad Changelog Entry Examples

Source: https://github.com/synergycodes/ng-diagram/blob/main/docs/processes/maintaining-changelog.md

Examples of poorly written changelog entries that lack specificity.

```markdown
- Updated stuff
- Bug fixes
```

--------------------------------

### Custom Node Example

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/README.md

Example of how to use CodeViewer to display custom node components and their associated code.

```mdx
// custom-node.mdx

import CustomNode from '@examples/custom-node/custom-node.astro';
import CodeViewer from '@components/code-viewer/code-viewer.astro';

<CustomNode />

<CodeViewer dirName="examples/custom-node" />
```

--------------------------------

### Import Styles

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/intro/quick-start.mdx

Import the necessary styles for the diagram components.

```css
@import 'ng-diagram/styles.css';
```

--------------------------------

### Create Your First Diagram

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/intro/quick-start.mdx

A basic Angular component demonstrating how to use the NgDiagramComponent with initial model data.

```typescript
import { Component } from '@angular/core';
import { NgDiagramComponent, initializeModel, provideNgDiagram } from 'ng-diagram';

@Component({
  imports: [NgDiagramComponent],
  providers: [provideNgDiagram()],
  template: ` <ng-diagram [model]="model" /> `,
  styles: `
    :host {
      display: flex;
      height: 300px;
    }
  `,
})
export class AppComponent {
  model = initializeModel({
    nodes: [
      { id: '1', position: { x: 100, y: 150 }, data: { label: 'Node 1' } },
      { id: '2', position: { x: 400, y: 150 }, data: { label: 'Node 2' } },
    ],
    edges: [
      {
        id: '1',
        source: '1',
        sourcePort: 'port-right',
        targetPort: 'port-left',
        target: '2',
        data: {},
      },
    ],
  });
}
```

--------------------------------

### Custom Node Setup

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/guides/nodes/resizing.mdx

Example of how to make a custom node resizable by wrapping it with NgDiagramNodeResizeAdornmentComponent.

```typescript
import { Component } from "@angular/core";
import { NgDiagramNodeResizeAdornmentComponent } from "@synergycodes/ng-diagram";

@Component({
  selector: "app-custom-node",
  template: `
    <ng-diagram-node-resize-adornment>
      <div class="custom-node">
        <!-- Your node content here -->
        Node Content
      </div>
    </ng-diagram-node-resize-adornment>
  `,
  standalone: true,
  imports: [NgDiagramNodeResizeAdornmentComponent],
})
export class CustomNodeComponent {}
```

--------------------------------

### Example Middleware Implementations

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/api/Types/Middleware/Middleware.md

Demonstrates how to create read-only and auto-snap middleware, and how to register them.

```typescript
// Read-only middleware that blocks modifications
const readOnlyMiddleware: Middleware<'read-only'> = {
  name: 'read-only',
  execute: (context, next, cancel) => {
    const blockedActions = ['addNodes', 'deleteNodes', 'updateNode'];
    if (context.modelActionTypes.some((action) => blockedActions.includes(action))) {
      console.warn('Action blocked in read-only mode');
      cancel();
      return;
    }
    next();
  }
};

// Auto-snap middleware that modifies positions
const snapMiddleware: Middleware<'auto-snap'> = {
  name: 'auto-snap',
  execute: (context, next) => {
    const gridSize = 20;
    const nodesToSnap = context.helpers.getAffectedNodeIds(['position']);

    const updates = nodesToSnap.map(id => {
      const node = context.nodesMap.get(id)!;
      return {
        id,
        position: {
          x: Math.round(node.position.x / gridSize) * gridSize,
          y: Math.round(node.position.y / gridSize) * gridSize
        }
      };
    });

    next({ nodesToUpdate: updates });
  }
};

// Register middleware
ngDiagramService.registerMiddleware(snapMiddleware);
```

--------------------------------

### Custom Node Setup

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/guides/nodes/rotation.mdx

Example of how to make a custom node rotatable by including the NgDiagramNodeRotateAdornmentComponent in the node template.

```typescript
import { Component } from "@angular/core";
import { NgDiagramNodeRotateAdornmentComponent } from "@synergycodes/ng-diagram";

@Component({
  selector: "app-custom-node",
  template: `
    <div class="custom-node">
      <!-- Your node content here -->
      <ng-diagram-node-rotate-adornment>
        <!-- Optional: Custom handle content -->
      </ng-diagram-node-rotate-adornment>
    </div>
  `,
  standalone: true,
  imports: [NgDiagramNodeRotateAdornmentComponent]
})
export class CustomNodeComponent {}
```

--------------------------------

### Initialize Configuration

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/guides/flow-config.mdx

Example of how to initialize the configuration object in an Angular component.

```typescript
import { NgDiagramConfig } from 'ng-diagram';

const config: NgDiagramConfig = {
  zoom: { max: 3 },
  edgeRouting: { defaultRouting: 'bezier' },
};
```

--------------------------------

### Quick Start Commands

Source: https://github.com/synergycodes/ng-diagram/blob/main/docs/processes/api-extractor.md

Commands to run API Extractor for updating and reviewing API reports.

```bash
cd packages/ng-diagram

# After making API changes
pnpm api:update              # Build and update API report
git diff api-report/ng-diagram.api.md  # Review changes
git add api-report/ng-diagram.api.md   # Commit with your code changes
```

--------------------------------

### Example: Deprecate old API

Source: https://github.com/synergycodes/ng-diagram/blob/main/docs/processes/deprecation-guide.md

Second step in the deprecation workflow: marking the old API as deprecated and updating related documentation and changelogs.

```typescript
/**
 * @deprecated Use {@link NewComponent} instead. Will be removed in v3.0.0.
 */
export class OldComponent {}
```

--------------------------------

### Listening for the diagramInit Event

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/guides/model-initialization.mdx

Example of how to use the diagramInit event to perform actions after the diagram has been fully initialized.

```typescript
export class MyComponent {
  model = initializeModel();
  private injector = inject(Injector);

  onDiagramInit(event: DiagramInitEvent): void {
    console.log('Diagram is fully initialized');
    console.log('Nodes:', event.nodes);
    console.log('Edges:', event.edges);
    console.log('Viewport:', event.viewport);

    // Now it's safe to perform operations
    this.performPostInitializationLogic();
  }

  private performPostInitializationLogic() {
    // Your logic here - diagram is fully ready
    this.modelService.addNodes([...]);
    this.modelService.updateNodeData('node-1', { ... });
  }
}
```

```html
<ng-diagram [model]="model" (diagramInit)="onDiagramInit($event)"> </ng-diagram>
```

--------------------------------

### Deprecate API - Mark in Code

Source: https://github.com/synergycodes/ng-diagram/blob/main/decision-log/POLICIES.md

Example of marking an API for deprecation using JSDoc's @deprecated tag, including reason, alternative, removal version, and migration guide link.

```typescript
/**
 * @deprecated Use {@link newMethod} instead. This method will be removed in v3.0.0.
 * See migration guide: https://ngdiagram.dev/guides/upgrading/v2-to-v3#old-method
 */
export function oldMethod() {}
```

--------------------------------

### NgDiagramPaletteItem Example

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/api/Types/Palette/NgDiagramPaletteItem.md

An example demonstrating how to define an NgDiagramPaletteItem.

```typescript
const paletteItem: NgDiagramPaletteItem = {
  type: 'customNode',
  data: { label: 'My Node' },
  resizable: true,
  rotatable: false,
};
```

--------------------------------

### Standard Release Steps

Source: https://github.com/synergycodes/ng-diagram/blob/main/docs/processes/release-process.md

Steps for performing a standard release, including creating a PR, verifying documentation, and creating a GitHub Release for npm publishing.

```bash
# 1. Create PR from main to release branch
# Go to: https://github.com/synergycodes/ng-diagram/compare/release...main
# - Create and merge PR (use merge commit, not squash)
# → Documentation deploys automatically when PR is merged

# 2. Verify docs at https://www.ngdiagram.dev/docs

# 3. Create GitHub Release
# Go to: https://github.com/synergycodes/ng-diagram/releases/new
# - Tag: vX.Y.Z (must match package.json version!)
# - Target: release branch
# - Title: vX.Y.Z
# - Description: Paste changelog entries from CHANGELOG.md
# - Publish release
# → NPM package publishes automatically
```

--------------------------------

### waitForMeasurements example

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/api/Types/Middleware/TransactionOptions.md

Demonstrates the difference in behavior when using waitForMeasurements, particularly in relation to operations like zoomToFit that depend on measured values.

```typescript
// Without waitForMeasurements - zoomToFit might not include new nodes
await diagramService.transaction(() => {
  modelService.addNodes([newNode]);
});
viewportService.zoomToFit(); // May not account for new node dimensions

// With waitForMeasurements - zoomToFit will include new nodes
await diagramService.transaction(() => {
  modelService.addNodes([newNode]);
}, { waitForMeasurements: true });
viewportService.zoomToFit(); // Correctly includes new node dimensions
```

--------------------------------

### Development Server

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/angular-demo/README.md

Starts a local development server. The application will automatically reload when source files are modified.

```bash
ng serve
```

--------------------------------

### Start Linking Programmatically

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/guides/touch-gestures.mdx

You can trigger the linking mode programmatically using the `startLinking` method, for example, via a button in your UI. Once activated, the connection line follows the user's finger as they drag across the canvas. Lifting the finger over a compatible port completes the connection. If the finger is released elsewhere on the canvas, the linking action is cancelled without creating an edge.

```typescript
import { NgDiagramService } from "@synergycodes/ng-diagram";

// ...

constructor(private diagramService: NgDiagramService) {}

startLinkingProgrammatically() {
  this.diagramService.startLinking();
}
```

--------------------------------

### Local Development Setup

Source: https://github.com/synergycodes/ng-diagram/blob/main/tools/mcp-server/README.md

Commands to set up the MCP server for local development within the monorepo.

```bash
cd tools/mcp-server
pnpm install
pnpm build

```

--------------------------------

### Example Usage

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/api/Components/NgDiagramBaseEdgeLabelComponent.md

This is an example of how to use the NgDiagramBaseEdgeLabelComponent in an HTML template.

```html
<ng-diagram-base-edge-label
  [id]="labelId"
  [positionOnEdge]="0.5"
>
  <!-- Any label content here (text, icon, button) -->
</ng-diagram-base-edge-label>
```

--------------------------------

### Best Practice: Use Transactions

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/guides/model-initialization.mdx

Example of wrapping multiple operations in a transaction after diagram initialization.

```typescript
onDiagramInit(event: DiagramInitEvent): void {
  this.ngDiagramService.transaction(() => {
    this.modelService.addNodes([...]);
    this.modelService.addEdges([...]);
    this.modelService.updateMetadata({ ... });
  });
}
```

--------------------------------

### provideNgDiagram Example

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/api/Utilities/provideNgDiagram.md

Example of how to use provideNgDiagram in a component.

```typescript
@Component({
  imports: [NgDiagramComponent],
  providers: [provideNgDiagram()],
  template: `<ng-diagram [model]="model" />`
})
export class Diagram {
  model = initializeModel({
    nodes: [
      {
        id: '1',
        position: { x: 0, y: 0 },
        data: { label: 'Node 1' }
      }
    ]
  });
}
```

--------------------------------

### Testing Commands

Source: https://github.com/synergycodes/ng-diagram/blob/main/tools/mcp-server/GUIDE.md

Commands to run tests for the MCP server.

```bash
pnpm test           # Run all tests
pnpm test:watch     # Watch mode
```

--------------------------------

### modelActionTypes Example

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/api/Types/Middleware/MiddlewareContext.md

Examples of how modelActionTypes can look for transactions and single commands.

```typescript
// For a transaction named 'batchUpdate' with addNodes and moveViewport commands:
// modelActionTypes = ['batchUpdate', 'addNodes', 'moveViewport']

// For a single command outside a transaction:
// modelActionTypes = ['addNodes']
```

--------------------------------

### Example Usage

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/api/Types/Middleware/ModelActionType.md

An example of how to use ModelActionType to define blocked actions.

```typescript
const blockedActions: ModelActionType[] = ['addNodes', 'deleteNodes', 'updateNode'];
```

--------------------------------

### Building the Project

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/angular-demo/README.md

Compiles the project and stores build artifacts in the dist/ directory. Optimizes for production by default.

```bash
ng build
```

--------------------------------

### hasEventListeners example

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/api/Services/NgDiagramService.md

Example of checking if there are any listeners for a specific event.

```typescript
if (ngDiagramService.hasEventListeners('selectionChanged')) {
  // There are listeners for selection changes
}
```

--------------------------------

### Using in Reactive Contexts

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/guides/model-initialization.mdx

Demonstrates how `initializeModel` can be used within reactive contexts like `computed` to automatically reinitialize the model when a signal source changes.

```typescript
export class MyComponent {
  private readonly injector = inject(Injector);

  // Source data — could come from an API, route params, etc.
  diagramData = signal<Partial<Model>>({});

  // Model re-initializes automatically when diagramData changes
  model = computed(() => initializeModel(this.diagramData(), this.injector));

  async loadFromAPI(id: string) {
    const data = await this.api.getDiagram(id);
    this.diagramData.set(data);
  }
}
```

--------------------------------

### Basic Shortcut Configuration

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/guides/shortcut-manager.mdx

Demonstrates how to override, disable, and add multiple bindings for shortcuts using the configureShortcuts helper.

```typescript
import { configureShortcuts } from 'ng-diagram';

const config = {
  shortcuts: configureShortcuts([
    // Override: Change paste to Ctrl+B
    {
      actionName: 'paste',
      bindings: [{ key: 'b', modifiers: { primary: true } }],
    },
    // Disable: Empty bindings array
    {
      actionName: 'undo',
      bindings: [],
    },
    // Multiple bindings: WSAD + Arrow keys
    {
      actionName: 'keyboardMoveSelectionUp',
      bindings: [{ key: 'w' }, { key: 'ArrowUp' }],
    },
  ]),
};
```

--------------------------------

### computePoints Example

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/api/Internals/EdgeRoutingManager.md

Example of computing routed points for an edge.

```typescript
const points = routingManager.computePoints('orthogonal', {
  sourceNode: node1,
  targetNode: node2,
  sourcePosition: { x: 100, y: 50 },
  targetPosition: { x: 300, y: 200 },
  edge: edge
});
```

--------------------------------

### Middleware Example

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/api/Internals/EdgeRoutingManager.md

Example of using EdgeRoutingManager within a middleware.

```typescript
const middleware: Middleware = {
  name: 'routing-optimizer',
  execute: (context, next) => {
    const routingManager = context.edgeRoutingManager;
    const defaultRouting = routingManager.getDefaultRouting();
    console.log('Using routing:', defaultRouting);
    next();
  }
};
```

--------------------------------

### Custom Model Adapter Initialization

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/guides/model-initialization.mdx

Shows how to initialize a model using a custom `ModelAdapter` with `initializeModelAdapter`, optionally seeding it with initial data.

```typescript
import { initializeModelAdapter } from 'ng-diagram';

// Initialize a custom adapter
model = initializeModelAdapter(new MyCustomModelAdapter());

// Optionally seed the adapter with initial data
model = initializeModelAdapter(new MyCustomModelAdapter(), {
  nodes: [
    {
      id: '1',
      position: { x: 100, y: 150 },
      data: { label: 'Node 1' },
    },
  ],
  edges: [],
});
```

--------------------------------

### initializeModel Examples

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/api/Utilities/initializeModel.md

Examples demonstrating how to use the initializeModel function to create a model adapter with initial data, with or without an explicit injector, and within reactive contexts.

```typescript
// Create an empty model
model = initializeModel();

// Create a model with initial data
model = initializeModel({
  nodes: [{ id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } }],
  edges: [],
});

// With an explicit injector (outside injection context)
model = initializeModel({ nodes: [...], edges: [...] }, this.injector);

// Safe to use inside reactive contexts (computed, effect, linkedSignal)
model = computed(() => initializeModel(this.myModel(), this.injector));
```

--------------------------------

### Ports Example

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/guides/edges/edges.mdx

Example demonstrating how ports are used for edge connections.

```typescript
<CodeSnippet relativePath="edges/edges/diagram.component.ts" sectionId="ports" />
```

--------------------------------

### addEventListener example

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/api/Services/NgDiagramService.md

Example of adding an event listener for 'selectionChanged' and how to unsubscribe.

```typescript
const unsubscribe = ngDiagramService.addEventListener('selectionChanged', (event) => {
  console.log('Selection changed', event.selectedNodes);
});
```

--------------------------------

### MCP Server Project Structure

Source: https://github.com/synergycodes/ng-diagram/blob/main/tools/mcp-server/GUIDE.md

Overview of the directory structure for the MCP server.

```tree
src/
├── index.ts                  # Entry point - resolve paths, start server
├── server.ts                 # MCP protocol wiring - tool registration, stdio transport
├── services/
│   ├── indexer.ts            # Scans docs directory, parses frontmatter, splits sections
│   ├── search.ts             # MiniSearch index over documentation sections
│   ├── api-indexer.ts        # Parses API Extractor .api.md report
│   └── symbol-search.ts     # MiniSearch index over API symbols
└── tools/
    ├── search-docs/          # Each tool has 5 files:
    │   ├── index.ts          #   Barrel exports
    │   ├── handler.ts        #   Business logic (factory function)
    │   ├── tool.config.ts    #   MCP tool schema definition
    │   ├── tool.types.ts     #   Input/output TypeScript types
    │   └── tool.validator.ts #   Zod input validation schema
    ├── get-doc/
    ├── search-symbols/
    └── get-symbol/
```

--------------------------------

### NgDiagramGroupHighlightedDirective Example

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/intro/styling.mdx

Example of using the NgDiagramGroupHighlightedDirective to apply highlight styling to a group.

```html
<div ngDiagramGroupHighlighted [node]="node">
  <!-- Group content -->
</div>
```

--------------------------------

### Code Scaffolding - Help

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/angular-demo/README.md

Displays a list of available schematics for code generation.

```bash
ng generate --help
```

--------------------------------

### NgDiagramNodeSelectedDirective Example

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/intro/styling.mdx

Example of using the NgDiagramNodeSelectedDirective to apply selection styling to a node.

```html
<div ngDiagramNodeSelected [node]="node">
  <!-- Node content -->
</div>
```

--------------------------------

### Example usage

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/api/Types/Templates/NgDiagramEdgeTemplate.md

This example shows how to implement the `NgDiagramEdgeTemplate` interface in a custom edge component.

```typescript
import { Component, InputSignal } from "@angular/core";
import { Edge, NgDiagramEdgeTemplate } from "@synergycodes/ng-diagram";

interface MyEdgeData {
  // Define your edge data properties here
}

@Component({...})
export class MyCustomEdgeComponent implements NgDiagramEdgeTemplate<MyEdgeData> {
  edge!: InputSignal<Edge<MyEdgeData>>;
}
```

--------------------------------

### FlowStateUpdate Example

Source: https://github.com/synergycodes/ng-diagram/blob/main/apps/docs/src/content/docs/api/Types/Middleware/FlowStateUpdate.md

Example of how a middleware can modify the diagram state using FlowStateUpdate.

```typescript
const middleware: Middleware = {
  name: 'auto-arranger',
  execute: (context, next) => {
    // Apply state changes
    next({
      nodesToUpdate: [
        { id: 'node1', position: { x: 100, y: 200 } },
        { id: 'node2', position: { x: 300, y: 200 } }
      ],
      metadataUpdate: {
        viewport: { x: 0, y: 0, zoom: 1 }
      }
    });
  }
};
```