ng-diagram

https://github.com/synergycodes/ng-diagram
Admin
A robust Angular library for building interactive diagrams, node-based editors, and visual...
Tokens:207,194
Snippets:2,099
Trust Score:9.7
License:Apache-2.0
Update:1 month ago
Show doc for...
Tokens:
Raw
### Good Changelog Entry Examples

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

Examples of well-formatted entries that include specific details and pull request 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))
```

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

### Install ng-diagram with npm

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

Install the ng-diagram library via npm.

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

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

### Example workflow: introduce new API

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

First step in the example workflow: adding a new component class in a pull request.

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

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

### Bad Changelog Entry Examples

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

Examples of vague entries that should be avoided.

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

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

### get_doc

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

Retrieves the full content of a documentation page by path. Call this after search_docs to read a complete guide or example end-to-end.

```APIDOC
## Tool: get_doc

### Description
Retrieve the full content of a documentation page by path. Call this after `search_docs` to read a complete guide or example end-to-end.

### Parameters
- **path** (string, required): Relative path from docs root (e.g., `"guides/palette.mdx"`). Use paths from `search_docs` results.
```

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

### Example workflow: deprecate old API

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

Second step in the example workflow: marking the old component as deprecated with a JSDoc tag, along with updating changelog, migration guide, and API report.

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

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

### get linking()

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

Gets the current linking action state.

```APIDOC
## get linking()

### Description
Gets the current linking action state.

### Returns
`undefined` | [`LinkingActionState`](/docs/api/internals/linkingactionstate/)

The linking state if a link is being created, undefined otherwise
```

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

### startLinking(node, portId?)

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

Call this method to start linking from your custom logic.

```APIDOC
## startLinking(node, portId?)

### Description
Call this method to start linking from your custom logic.

### Method
startLinking

### Parameters
#### node (Node) - Required - The node from which the linking starts.
#### portId? (string) - Optional - The port ID from which the linking starts. Creates a floating edge when undefined.

### Returns
void
```

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

### Middleware Example Using ModelActionTypes

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

Example of a middleware that logs the action types from context.modelActionTypes. It demonstrates how to access the array of action types in a middleware's execute function.

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

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

### Example: Using MiddlewareHistoryUpdate in a middleware

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

Shows how to access the history of middleware updates within a middleware's execute function. The example iterates over context.history and logs each update's name and stateUpdate.

```typescript
const middleware: Middleware = {
  name: 'audit-logger',
  execute: (context, next) => {
    // Check what previous middlewares did
    context.history.forEach(update => {
      console.log(`${update.name} modified:`, update.stateUpdate);
    });
    next();
  }
};
```

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

### Build and test commands

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

Install dependencies, run tests, and compile TypeScript to build the MCP server.

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

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

### get panning()

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

Gets the current panning action state.

```APIDOC
## get panning()

### Description
Gets the current panning action state.

### Returns
`undefined` | [`PanningActionState`](/docs/api/internals/panningactionstate/)

The panning state if viewport is being panned, undefined otherwise
```

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

### search_docs

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

Searches ng-diagram's bundled documentation for guides, configuration options, examples, and integration patterns. Returns authoritative, version-matched content.

```APIDOC
## Tool: search_docs

### Description
Search ng-diagram's bundled documentation for guides, configuration options, examples, and integration patterns. Always prefer this over web search or guessing from training data — it returns authoritative, version-matched content.

### Parameters
- **query** (string, required): Search query — use specific terms like `"palette"`, `"context menu"`, `"transactions"`
- **limit** (number, optional): Max results to return (default: 10)
```

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

### get resize()

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

Gets the current resize action state.

```APIDOC
## get resize()

### Description
Gets the current resize action state.

### Returns
`undefined` | [`ResizeActionState`](/docs/api/internals/resizeactionstate/)

The resize state if a resize is in progress, undefined otherwise
```

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

### Start Development Server with ng serve

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

Runs the local development server. Open http://localhost:4200/ to view the app; it auto-reloads on source file changes.

```bash
ng serve
```

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

### Middleware example using FlowStateUpdate

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

Example of a middleware that uses FlowStateUpdate to apply state changes, such as updating node positions and viewport metadata.

```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 }
      }
    });
  }
};
```

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

### initializeModel

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

Documentation for the initializeModel utility function, including its signature, parameters, return type, usage examples, and version history.

```APIDOC
## initializeModel

### Description
Creates a model adapter with initial nodes, edges, and metadata. This helper sets up a model instance ready for use in ng-diagram. It must be run in an Angular injection context unless the `injector` option is provided manually.

### Signature
`initializeModel(model?, injector?, options?): ModelAdapter`

### Parameters
- **model** (`Partial<Model>`, default `{}`) - Initial model data (nodes, edges, metadata).
- **injector** (`Injector`, optional) - Optional Angular `Injector` if not running inside an injection context.
- **options** (`InitializeModelOptions`, optional) - Optional `InitializeModelOptions`. Overriding the strip functions can and probably will break the diagram — use at your own risk.

### Returns
`ModelAdapter`

### Example
```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));

// At your own risk: customize which runtime properties are stripped
model = initializeModel({ nodes: [...], edges: [...] }, undefined, {
  stripNodeRuntimeProperties: (node) => ({
    ...stripNodeRuntimeProperties(node),
    selected: node.selected, // keep selection state across reloads
  }),
});
```

### Version History
| Version | Changes |
|---------|---------|
| v0.8.0  | Introduced |
| v1.2.0  | Can now be safely used inside reactive contexts (`computed`, `effect`, `linkedSignal`) |
| v1.3.0  | Added `options` parameter for customizing runtime-property stripping |
```

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

### zoomToFit() configuration examples

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

Demonstrates various ways to call zoomToFit, including default padding, custom padding, filtering by node IDs, and manual anchor positioning.

```typescript
// Fit all nodes and edges with default padding
this.viewportService.zoomToFit();

// Fit with custom uniform padding
this.viewportService.zoomToFit({ padding: 100 });

// Fit with different padding on each side [top, right, bottom, left]
this.viewportService.zoomToFit({ padding: [50, 100, 50, 100] });

// Fit only specific nodes
this.viewportService.zoomToFit({ nodeIds: ['node1', 'node2'] });

// Custom zoomToFit with anchor positioning using setViewport
// anchor: (0,0) = top-left, (0.5,0.5) = center, (1,1) = bottom-right
const anchor = { x: 0.5, y: 0.5 };
const { width, height } = this.modelService.metadata().viewport;
const bounds = this.modelService.computePartsBounds(nodes, edges);
if (!bounds.width || !bounds.height) return; // nothing measurable to fit
const scale = Math.min(width / bounds.width, height / bounds.height);
const x = width * anchor.x - (bounds.x + bounds.width * anchor.x) * scale;
const y = height * anchor.y - (bounds.y + bounds.height * anchor.y) * scale;
this.viewportService.setViewport(x, y, scale);
```

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

### Build MCP server for local development

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

Commands to install and build the MCP server when working within the ng-diagram monorepo.

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

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

### Displaying code examples with CodeViewer

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

Use the CodeViewer component in MDX files to display multiple files from a directory. Ensure the corresponding Astro component is imported and rendered alongside it.

```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" />
```

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

### selection getter

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

Gets the current selection action state.

```APIDOC
## get selection()

### Description
Gets the current selection action state.

### Returns
`undefined` | `SelectionActionState` - The selection state if set, undefined otherwise
```

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

### Configure minimapNodeTemplateMap

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

Example showing how to define a template map for custom node rendering in the minimap.

```typescript
const minimapTemplateMap = new NgDiagramMinimapNodeTemplateMap([
  ['database', DatabaseMinimapNodeComponent],
  ['api', ApiMinimapNodeComponent],
]);

// Usage:
<ng-diagram-minimap [minimapNodeTemplateMap]="minimapTemplateMap" />
```

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

### Middleware example using EdgeRoutingManager

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

Shows how to access the EdgeRoutingManager via context.edgeRoutingManager in a middleware and log the default routing. This is for middleware development, not application code.

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

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

### Enable Virtualization in NgDiagramConfig

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

Enable virtualization by setting the `enabled` property in the diagram configuration. This is the basic setup for using virtualization.

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

const config: NgDiagramConfig = {
  virtualization: {
    enabled: true,
  },
};
```

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

### Quick start: Update and review API report

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

Commands to update the API report after making changes, review the diff, and commit the report with code changes.

```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 test using the diagram fixture

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

Shows a test that loads the diagram, clicks a node, and asserts the selection via the service proxy. Uses the diagram fixture from tests/fixtures/diagram.ts.

```ts
test('clicking a node selects it', async ({ diagram }) => {
  await diagram.load();
  await diagram.node('node-a').click(); // locator
  await expect.poll(async () => (await diagram.selection.selection()).nodes.map((n) => n.id)).toEqual(['node-a']); // ng-diagram service via the proxy
});
```

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

### configureShortcuts

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

Function signature and usage for configureShortcuts, including parameters, return type, and examples.

```APIDOC
## configureShortcuts(userShortcuts, baseShortcuts)

### Description
Merges user shortcuts with base shortcuts, user shortcuts override by actionName.

### Parameters
- **userShortcuts** (`ShortcutDefinition[]`) - Required - User-provided shortcuts that will override matching base shortcuts.
- **baseShortcuts** (`ShortcutDefinition[]`) - Optional - Base shortcuts to merge with. Defaults to `DEFAULT_SHORTCUTS`.

### Returns
- `ShortcutDefinition[]` - Merged shortcut definitions.

### Example
```ts
// Merge with default built-in shortcuts
config = {
  shortcuts: configureShortcuts([
    {
      actionName: 'keyboardMoveSelectionUp',
      bindings: [{ key: 'w' }],
    },
  ]),
} satisfies NgDiagramConfig;
```

```ts
// Merge with existing config shortcuts
const currentShortcuts = ngDiagramService.config().shortcuts;
const updatedShortcuts = configureShortcuts(
  [
    {
      actionName: 'paste',
      bindings: [{ key: 'b', modifiers: { primary: true } }],
    },
  ],
  currentShortcuts
);
```
```

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

### Example usage of NgDiagramPaletteItemComponent

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

Shows how to use the ng-diagram-palette-item component with an item input and optional preview content.

```html
<ng-diagram-palette-item [item]="item">
  <!-- Palette item content here -->
  <ng-diagram-palette-item-preview>
    <!-- Optional: custom preview content -->
  </ng-diagram-palette-item-preview>
</ng-diagram-palette-item>
```

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

### computePointOnPath example

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

Computes points along a path at given percentages using the 'polyline' routing. Shows interpolation between first and last points.

```typescript
const points = [{ x: 0, y: 0 }, { x: 100, y: 100 }];
const midpoint = routingManager.computePointOnPath('polyline', points, 0.5);
// Returns: { x: 50, y: 50 }
const quarterPoint = routingManager.computePointOnPath('polyline', points, 0.25);
// Returns: { x: 25, y: 25 }
```

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

### Example usage of NgDiagramPortComponent

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

Shows how to use the ng-diagram-port component with input bindings for id, type, and side.

```html
<ng-diagram-port [id]="port.id" [type]="port.type" [side]="port.side" />
```

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

### Custom port positioning with CSS properties

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

Positions a port anywhere within its parent node using CSS properties. The example sets the port to 25% from the top and 0% from the left.

```html
<ng-diagram-port id="custom-port" type="target" side="left" style="top: 25%; left: 0" />
```

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

### Data flow at startup

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

Shows the startup data flow: docs directory is scanned and parsed into sections, then a MiniSearch index is built. Optionally, an API report is parsed and indexed for symbols.

```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
```

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

### Example usage of NgDiagramService

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

Shows how to inject NgDiagramService, check initialization with a reactive signal, access the reactive config, and update configuration.

```typescript
private ngDiagramService = inject(NgDiagramService);

// Check if diagram is initialized (reactive signal)
effect(() => {
  if (this.ngDiagramService.isInitialized()) {
    console.log('Diagram ready!');
  }
});

// Access reactive config
const isDebugMode = this.ngDiagramService.config().debugMode;

// Update configuration
this.ngDiagramService.updateConfig({ debugMode: true });
```

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

### Example usage of activeSides input

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

Sets activeSides to only right and bottom, leaving only the bottom-right handle and making the other sides inert.

```html
<ng-diagram-node-resize-adornment [activeSides]="['right', 'bottom']">
  <!-- Node content here -->
</ng-diagram-node-resize-adornment>
```

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

### MiddlewareContext usage example

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

Shows a middleware that uses context.helpers.anyNodesAdded(), context.state.nodes, context.config.background.cellSize, context.modelActionTypes, and cancel() to block operations. The middleware calls next() to continue.

```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 of NgDiagramNodeService

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

Shows how to inject the service and move nodes by a delta using the moveNodesBy method.

```typescript
private nodeService = inject(NgDiagramNodeService);

// Move nodes by a delta
this.nodeService.moveNodesBy([node1, node2], { x: 10, y: 20 });

```

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

### computePointAtDistance(points, distancePx): Point

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

Optional method to get a point on the path at a given pixel distance from the start. Negative values measure from the end of the path.

```APIDOC
## computePointAtDistance(points, distancePx): Point

### Description
Gets a point on the path at a given pixel distance from the start.
Negative values measure from the end of the path.

### Method
computePointAtDistance

### Parameters
#### Parameters
- **points** (Point[]) - Required - The points defining the path.

- **distancePx** (number) - Required - Distance in pixels (positive = from start, negative = from end).

### Returns
Point - The point at the given distance along the path.

```

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

### Example: waitForMeasurements with zoomToFit

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

Shows the difference between using waitForMeasurements false (default) and true when calling zoomToFit after adding nodes. With true, zoomToFit correctly includes new node dimensions.

```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
```

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

### initializeModel usage examples

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

Demonstrates various ways to initialize a model, including empty models, models with initial data, usage with an explicit injector, reactive contexts, and custom runtime property stripping.

```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));

// ⚠️ At your own risk: customize which runtime properties are stripped
model = initializeModel({ nodes: [...], edges: [...] }, undefined, {
  stripNodeRuntimeProperties: (node) => ({
    ...stripNodeRuntimeProperties(node),
    selected: node.selected, // keep selection state across reloads
  }),
});
```

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

### Customize nodeStyle

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

Example of a callback function to dynamically style nodes based on their type and selection state.

```typescript
nodeStyle = (node: Node) => ({
  fill: node.type === 'database' ? '#4CAF50' : '#9E9E9E',
  opacity: node.selected ? 1 : 0.6,
});
```

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

### get dragging()

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

Gets the current dragging action state.

```APIDOC
## get dragging()

### Description
Gets the current dragging action state.

### Returns
`undefined` | [`DraggingActionState`](/docs/api/internals/draggingactionstate/)

The dragging state if nodes are being dragged, undefined otherwise
```

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

### get copyPaste()

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

Gets the current copy/paste action state.

```APIDOC
## get copyPaste()

### Description
Gets the current copy/paste action state.

### Returns
`undefined` | [`CopyPasteActionState`](/docs/api/internals/copypasteactionstate/)

The copy/paste state if a copy/paste operation is in progress, undefined otherwise
```

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

### get highlightGroup()

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

Gets the current highlight group action state.

```APIDOC
## get highlightGroup()

### Description
Gets the current highlight group action state.

### Returns
`undefined` | [`HighlightGroupActionState`](/docs/api/internals/highlightgroupactionstate/)

The highlight group state if a group is being highlighted, undefined otherwise
```

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

### Architecture overview directory tree

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

Shows the project's source directory structure, including entry points, services, and tool folders. Each tool has five files: index.ts, handler.ts, tool.config.ts, tool.types.ts, and tool.validator.ts.

```text
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/
```

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

### computePoints example

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

Computes routed points for an edge using the 'orthogonal' routing. The context includes source/target nodes, positions, and edge data.

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

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

### Define node styles with MinimapNodeStyleFn

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

This example demonstrates how to implement the MinimapNodeStyleFn to conditionally set the fill color based on the node type and adjust opacity based on the selection state.

```typescript
const nodeStyle: MinimapNodeStyleFn = (node) => ({
  fill: node.type === 'database' ? '#4CAF50' : '#9E9E9E',
  opacity: node.selected ? 1 : 0.6,
});
```

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

### Checking conflicts before starting another gesture

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

Checks if zooming is already handled before starting panning, to avoid conflicts.

```typescript
if (this.touchEventsStateService.zoomingHandled()) {
  // Don't start panning
  return;
}
```

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

### Starting a gesture - set currentEvent

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

Sets the current event to Panning when starting a gesture, so other handlers can detect the active event.

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

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

### Create Version Section

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

Template for moving unreleased changes into a new versioned section during release preparation.

```markdown
## [X.Y.Z] - YYYY-MM-DD

### Added

- Your changes here
```

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

### Middleware Example: Read-only and Auto-snap Middlewares with Registration

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

Shows a read-only middleware that blocks modification actions and an auto-snap middleware that snaps node positions to a grid. Then registers the snap middleware with ngDiagramService.

```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);
```

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

### Listen for diagramInit Event

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

Use the diagramInit event on the ng-diagram component to trigger logic once the diagram is fully ready. This example shows both the component class logic and the template binding.

```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>
```

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

### Standard Release Commands

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

Commands for performing a standard release: create a PR from main to release, verify docs, and create a GitHub Release. The tag must match the package.json version.

```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
```

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

### VirtualizationConfig Interface

Source: https://github.com/synergycodes/ng-diagram/blob/main/packages/ng-diagram/api-report/ng-diagram.api.md

Configuration for virtualization, enabling or disabling it and setting padding and idle delay.

```APIDOC
## VirtualizationConfig Interface

### Description
Configuration options for virtualization in the diagram, including whether it is enabled, the padding around the viewport, and an optional idle delay.

### Properties
- **enabled** (boolean) - Required - Whether virtualization is enabled.
- **idleDelay** (number) - Optional - The delay in milliseconds before virtualization kicks in after user interaction.
- **padding** (number) - Required - The padding around the viewport to include in virtualization calculations.
```

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

### YAML frontmatter example for markdown docs

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

Shows the expected YAML frontmatter structure with title and description fields. The indexer uses these for page metadata; if missing, the filename is used as the title.

```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...
```

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

### Configure middlewares with createMiddlewares and pass to <ng-diagram>

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

Shows how to configure middlewares at initialization using the createMiddlewares helper and pass them to the <ng-diagram> component. The first block demonstrates using defaults, adding a custom middleware, and removing a specific one by name. The second block shows the component template and property that binds the middlewares array.

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

// Use all default middlewares
const middlewares = createMiddlewares((defaults) => defaults);

// Add custom middleware to the chain
const middlewares = createMiddlewares((defaults) => [...defaults, myCustomMiddleware]);

// Remove specific middleware
const middlewares = createMiddlewares((defaults) => defaults.filter((m) => m.name !== 'logger'));
```

```typescript
@Component({
  template: ` <ng-diagram [model]="model" [config]="config" [middlewares]="middlewares" /> `,
})
export class MyDiagramComponent {
  middlewares = createMiddlewares((defaults) => [...defaults, myMiddleware]);
  // ...
}
```

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

### TSDoc @category Example for Angular Component

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

Example TSDoc comment for an Angular component, using the @category tag to organize it under 'Components' in the generated API documentation.

```typescript
/**
 * Primary diagram component for rendering interactive flow diagrams.
 * @category Components
 */
@Component({...})
export class NgDiagramComponent { }
```

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

### Using provideNgDiagram in an Angular component

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

Use this snippet to set up ng-diagram in an Angular component by importing NgDiagramComponent and providing the required services via provideNgDiagram(). The example initializes a model with a single node.

```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' }
      }
    ]
  });
}
```

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

### List Available Schematics with ng generate --help

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

Displays a complete list of available schematics (e.g., components, directives, pipes).

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

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

### getNodes()

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

Gets all nodes in the model.

```APIDOC
## getNodes()

### Description
Get all nodes in the model.

### Method
getNodes()

### Returns
[`Node`](/docs/api/types/model/node/)[]
```

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

### getEdges()

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

Gets all edges in the model.

```APIDOC
## getEdges()

### Description
Get all edges in the model.

### Method
getEdges()

### Returns
[`Edge`](/docs/api/types/model/edge/)\<`object`\>[]
```

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

### InitializeModelOptions

Source: https://github.com/synergycodes/ng-diagram/blob/main/packages/ng-diagram/api-report/ng-diagram.api.md

Options for model initialization, including functions to strip runtime properties from nodes and edges.

```APIDOC
## InitializeModelOptions

### Description
Options for model initialization, including functions to strip runtime properties from nodes and edges.

### Properties
- **stripEdgeRuntimeProperties?: StripEdgeRuntimePropertiesFn** - Optional function to strip runtime properties from edges.
- **stripNodeRuntimeProperties?: StripNodeRuntimePropertiesFn** - Optional function to strip runtime properties from nodes.

```

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

### getAddedNodes()

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

Gets all nodes that were added.

```APIDOC
## getAddedNodes()

### Description
Gets all nodes that were added.

### Method
getAddedNodes

### Returns
- **Node[]** - Array of node instances that were added by the initial state update or any previous middleware
```

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

### getAddedEdges()

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

Gets all edges that were added.

```APIDOC
## getAddedEdges()
t
### Description
Gets all edges that were added.

### Method
getAddedEdges

### Returns
- **Edge[]** - Array of edge instances that were added by the initial state update or any previous middleware
```

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

### getMetadata()

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

Gets metadata associated with the model.

```APIDOC
## getMetadata()

### Description
Get metadata associated with the model.

### Method
getMetadata()

### Returns
[`Metadata`](/docs/api/types/model/metadata/)
```

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

### VirtualizationConfig

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

Configuration object for viewport virtualization. When enabled, only nodes and edges visible in the viewport (plus padding) are rendered, improving performance for large diagrams.

```APIDOC
## VirtualizationConfig

### Description
Configuration for viewport virtualization behavior. When enabled, only nodes and edges visible in the viewport (plus padding) are rendered, significantly improving performance for large diagrams.

### Properties

#### enabled
- **type**: `boolean`
- **required**: true
- **description**: Whether viewport virtualization is enabled. When disabled, all nodes/edges are rendered regardless of viewport.
- **default**: `false`

#### idleDelay
- **type**: `number`
- **required**: false
- **description**: Delay in milliseconds after panning stops before re-rendering visible nodes.
- **default**: `100`

#### padding
- **type**: `number`
- **required**: true
- **description**: Padding multiplier relative to viewport size. The actual padding is calculated as: max(viewportWidth, viewportHeight) * padding. For example, 0.5 means 50% of the viewport size as padding in each direction.
- **default**: `0.5`

```

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

### getNodeById<T>(nodeId)

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

Gets a node by id.

```APIDOC
## getNodeById<T>(nodeId)

### Description
Gets a node by id.

### Method
Function

### Signature
`getNodeById<T>(nodeId: string): Node<T> | null`

### Type Parameters
- **T** (object) - The type of the node's `data` property. Defaults to `DataObject`.

### Parameters
- **nodeId** (string) - Node id.

### Returns
- **Node<T> | null** - Node or null if not found.
```

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

### getEdgeById<T>(edgeId)

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

Gets an edge by id.

```APIDOC
## getEdgeById<T>(edgeId)

### Description
Gets an edge by id.

### Method
Function

### Signature
`getEdgeById<T>(edgeId: string): Edge<T> | null`

### Type Parameters
- **T** (object) - The type of the edge's `data` property. Defaults to `DataObject`.

### Parameters
- **edgeId** (string) - Edge id.

### Returns
- **Edge<T> | null** - Edge or null if not found.
```

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

### initializeModelAdapter(adapter, model?, injector?, options?)

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

Initializes an existing model adapter for use in ng-diagram. Prepares all nodes and edges in the adapter so they are ready for rendering. Use this when providing a custom ModelAdapter implementation.

```APIDOC
## initializeModelAdapter(adapter, model?, injector?, options?)

### Description
Initializes an existing model adapter for use in ng-diagram. Prepares all nodes and edges in the adapter so they are ready for rendering by ng-diagram. Use this when providing a custom ModelAdapter implementation.

### Signature
initializeModelAdapter(adapter: ModelAdapter, model?: Partial<Model>, injector?: Injector, options?: InitializeModelOptions): ModelAdapter

### Parameters
- **adapter** (ModelAdapter) - Required - An existing ModelAdapter to initialize.
- **model** (Partial<Model>) - Optional - Initial model data to seed the adapter with.
- **injector** (Injector) - Optional - Angular Injector if not running inside an injection context.
- **options** (InitializeModelOptions) - Optional - Optional InitializeModelOptions. Overriding the strip functions can and probably will break the diagram — use at your own risk. Note that for custom adapters these functions only affect initialization; keeping serialization consistent in your adapter's toJSON() is up to you.

### Returns
ModelAdapter

### Example
```typescript
// Basic usage with a custom adapter
model = initializeModelAdapter(new NgRxModelAdapter(this.store));

// With initial model data to seed the adapter
model = initializeModelAdapter(new NgRxModelAdapter(this.store), {
  nodes: [{ id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } }],
  edges: [],
});

// With an explicit injector (outside injection context)
model = initializeModelAdapter(new NgRxModelAdapter(this.store), undefined, this.injector);
```

### Version History
| Version | Changes |
|---------|---------|
| v1.1.0  | Introduced |
| v1.3.0  | Added `options` parameter for customizing runtime-property stripping |
```

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

### getState()

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

Gets the current action state (readonly).

```APIDOC
## getState()

### Description
Gets the current action state (readonly).

### Returns
`Readonly<ActionState>` - The complete action state object
```

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

### configureShortcuts

Source: https://github.com/synergycodes/ng-diagram/blob/main/packages/ng-diagram/api-report/ng-diagram.api.md

Configures keyboard shortcuts by merging user shortcuts with optional base shortcuts. Returns the resulting shortcut definition array.

```APIDOC
## configureShortcuts

### Description
Configures keyboard shortcuts by merging user shortcuts with optional base shortcuts. Returns the resulting shortcut definition array.

### Signature
```ts
export function configureShortcuts(userShortcuts: ShortcutDefinition[], baseShortcuts?: ShortcutDefinition[]): ShortcutDefinition[];
```

### Parameters
- **userShortcuts** (ShortcutDefinition[]) - Required - The user-defined shortcuts to configure.
- **baseShortcuts** (ShortcutDefinition[]) - Optional - Base shortcuts to merge with user shortcuts.

### Returns
- **ShortcutDefinition[]** - The configured array of shortcut definitions.

### Remarks
User shortcuts take precedence over base shortcuts when merging.

### Usage Example
```ts
const shortcuts = configureShortcuts([{ key: 'Ctrl+C', action: 'copy' }], [{ key: 'Ctrl+V', action: 'paste' }]);
```
```

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

### getConnectedEdges<T>(nodeId)

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

Gets all edges connected to a node.

```APIDOC
## getConnectedEdges<T>(nodeId)

### Description
Gets all edges connected to a node.

### Method
Function

### Signature
`getConnectedEdges<T>(nodeId: string): Edge<T>[]`

### Type Parameters
- **T** (object) - The type of the edges' `data` property. Defaults to `DataObject`.

### Parameters
- **nodeId** (string) - Node id.

### Returns
- **Edge<T>[]** - Array of edges where the node is either source or target.
```

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

### Model with Metadata and Viewport Settings

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

Initializes a model with metadata such as viewport settings (x, y, scale). You can also add any additional custom properties to the metadata object as needed.

```typescript
const model = initializeModel({
  metadata: {
    viewport: { x: 100, y: 50, scale: 0.8 },
  },
  nodes: [
    // ... your nodes
  ],
  edges: [
    // ... your edges
  ],
});
```

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

### rotation getter

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

Gets the current rotation action state.

```APIDOC
## get rotation()

### Description
Gets the current rotation action state.

### Returns
`undefined` | `RotationActionState` - The rotation state if a rotation is in progress, undefined otherwise
```

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

### Run tests with pnpm test and pnpm test:watch

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

Run the test suite in normal or watch mode. Tests create ephemeral fixture files in beforeEach and clean up in afterEach, so no stale fixtures need maintenance.

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

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

### getNodesInRange<T>(point, range)

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

Gets all nodes in a range from a point.

```APIDOC
## getNodesInRange<T>(point, range)

### Description
Gets all nodes in a range from a point.

### Method
Function

### Signature
`getNodesInRange<T>(point: Point, range: number): Node<T>[]`

### Type Parameters
- **T** (object) - The type of the nodes' `data` property. Defaults to `DataObject`.

### Parameters
- **point** (Point) - Point to check from.
- **range** (number) - Range to check in.

### Returns
- **Node<T>[]** - Array of nodes in range.
```

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

### getNodeEnds<S, T>(edgeId)

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

Gets the source and target nodes of an edge.

```APIDOC
## getNodeEnds<S, T>(edgeId)

### Description
Gets the source and target nodes of an edge.

### Method
Function

### Signature
`getNodeEnds<S, T>(edgeId: string): { source: Node<S>; target: Node<T> } | null`

### Type Parameters
- **S** (object) - The type of the source node's `data` property. Defaults to `DataObject`.
- **T** (object) - The type of the target node's `data` property. Defaults to `DataObject`.

### Parameters
- **edgeId** (string) - Edge id.

### Returns
- **{ source: Node<S>; target: Node<T> } | null** - Object containing source and target nodes, or null if edge doesn't exist.
```

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

### initializeModelAdapter

Source: https://github.com/synergycodes/ng-diagram/blob/main/packages/ng-diagram/api-report/ng-diagram.api.md

Initializes an existing model adapter with optional model and injector.

```APIDOC
## initializeModelAdapter

### Description
Initializes an existing model adapter with optional model and injector.

### Signature
- **initializeModelAdapter(adapter: ModelAdapter, model?: Partial<Model>, injector?: Injector, options?: InitializeModelOptions): ModelAdapter**

### Parameters
- **adapter** (ModelAdapter) - Required - The model adapter to initialize.
- **model** (Partial<Model>) - Optional - The initial model.
- **injector** (Injector) - Optional - The Angular injector.
- **options** (InitializeModelOptions) - Optional - Additional options.

### Returns
- **ModelAdapter** - The initialized model adapter.

```

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

### Development, Testing, and Build Commands

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

Use these commands to manage the project lifecycle. pnpm dev enables auto-reload, pnpm test runs the test suite, and pnpm build compiles the TypeScript code and bundles documentation.

```bash
# Development
pnpm dev              # Run with auto-reload (uses monorepo paths)

# Testing
pnpm test             # Run all tests
pnpm test:watch       # Run in watch mode

# Building
pnpm build            # Compile TypeScript + bundle docs & API report into dist/data/
```

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

### getChangedNodeIds()

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

Gets all node IDs that have any property changed, regardless of which property.

```APIDOC
## getChangedNodeIds()

### Description
Gets all node IDs that have any property changed, regardless of which property.

### Method
Function

### Parameters
None

### Returns
`string[]` - Array of node IDs that were modified by the initial state update or any previous middleware

### Since
1.2.2
```

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

### Update .mcp.json

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

Configure the MCP server in .mcp.json with the server name, stdio type, node command, and path to the built index.js.

```json
{
  "mcpServers": {
    "your-lib-docs": {
      "type": "stdio",
      "command": "node",
      "args": ["path/to/mcp-server/dist/index.js"]
    }
  }
}
```
Tokens:
Raw