# ngDiagram > A powerful Angular library for creating interactive diagrams, node-based editors, and visual programming interfaces. - Docs: https://ngdiagram.dev/docs/ - GitHub: https://github.com/synergycodes/ng-diagram - NPM: https://www.npmjs.com/package/ng-diagram - MCP: `npx -y @ng-diagram/mcp` (interactive docs & API search, stdio transport) ## Getting Started - [Thinking through architecture trade-offs?](https://ngdiagram.dev/docs/intro/architecture/): Understanding the overall architecture of ngDiagram - [Coordinate System](https://ngdiagram.dev/docs/intro/coordinate-system/): Understanding the coordinate system used in ngDiagram - [MCP Server](https://ngdiagram.dev/docs/intro/mcp/): Connect AI assistants to ng-diagram documentation and API reference using the Model Context Protocol - [Overview](https://ngdiagram.dev/docs/intro/overview/): Essential concepts of ngDiagram - understand the library without diving deep into documentation - [Need a hand getting started?](https://ngdiagram.dev/docs/intro/quick-start/): How to install and set up ngDiagram in your Angular project - [Roadmap](https://ngdiagram.dev/docs/intro/roadmap/): What we've delivered in v1.0 and what's next for ng-diagram - [Services](https://ngdiagram.dev/docs/intro/services/): Comprehensive guide to ngDiagram services and their usage - [Designing the look and feel of your diagram?](https://ngdiagram.dev/docs/intro/styling/): How to style and customize ngDiagram components ## Guides - [Background](https://ngdiagram.dev/docs/guides/background/): Example of how to set a background in ngDiagram - [Box Selection](https://ngdiagram.dev/docs/guides/box-selection/): Selecting multiple nodes using box selection in ngDiagram - [Arrowheads](https://ngdiagram.dev/docs/guides/edges/arrowheads/): Understanding how arrowheads work in NgDiagram - [Designing custom edge templates?](https://ngdiagram.dev/docs/guides/edges/custom-edges/): How to create and implement custom edges in ngDiagram - [Edges](https://ngdiagram.dev/docs/guides/edges/edges/): Understanding how edges work in ngDiagram - [Floating Edges](https://ngdiagram.dev/docs/guides/edges/floating-edges/): Understanding how floating edges work in ngDiagram - [Labels](https://ngdiagram.dev/docs/guides/edges/labels/): Understanding how labels on edges work in ngDiagram - [Need a routing algorithm tailored to your domain?](https://ngdiagram.dev/docs/guides/edges/routing/): Understanding how edge routing works in ngDiagram - [Selection](https://ngdiagram.dev/docs/guides/edges/selection/): Understanding how edge selection works in ngDiagram - [Global Configuration](https://ngdiagram.dev/docs/guides/flow-config/) - [Building custom logic on top of the pipeline?](https://ngdiagram.dev/docs/guides/middlewares/): Understanding how middlewares work in ngDiagram - [Minimap](https://ngdiagram.dev/docs/guides/minimap/): How to use and customize the minimap component in ngDiagram - [Model Initialization](https://ngdiagram.dev/docs/guides/model-initialization/): Learn how to properly initialize and reinitialize models, and when to run your logic during the initialization process - [Building groups with complex interactions?](https://ngdiagram.dev/docs/guides/nodes/custom-groups/): Creating and configuring custom group templates in ngDiagram - [Designing advanced node templates?](https://ngdiagram.dev/docs/guides/nodes/custom-nodes/): How to create and implement custom nodes in ngDiagram - [Groups](https://ngdiagram.dev/docs/guides/nodes/groups/): Understanding how groups work in ngDiagram - [Nodes](https://ngdiagram.dev/docs/guides/nodes/nodes/): Understanding how nodes work in ngDiagram - [Ports](https://ngdiagram.dev/docs/guides/nodes/ports/): Understanding how ports work in ngDiagram - [Resizing](https://ngdiagram.dev/docs/guides/nodes/resizing/): Understanding how resizing works in ngDiagram - [Rotation](https://ngdiagram.dev/docs/guides/nodes/rotation/): Understanding how rotation works in ngDiagram - [Selection](https://ngdiagram.dev/docs/guides/nodes/selection/): Understanding how selection works in ngDiagram - [Snapping](https://ngdiagram.dev/docs/guides/nodes/snapping/): Understanding how snapping works in ngDiagram - [Palette](https://ngdiagram.dev/docs/guides/palette/): Understanding how the palette works in ngDiagram - [Keyboard Shortcuts](https://ngdiagram.dev/docs/guides/shortcut-manager/): Learn how to customize and use keyboard shortcuts in ngDiagram - [State Management](https://ngdiagram.dev/docs/guides/state-management/): Learn how to create models, access the model service, and perform operations on your diagram data - [Touch Gestures](https://ngdiagram.dev/docs/guides/touch-gestures/): Using ngDiagram on touch devices with native gesture support - [Orchestrating complex state changes?](https://ngdiagram.dev/docs/guides/transactions/): Understanding how transactions work in ngDiagram - [Scaling to thousands of nodes?](https://ngdiagram.dev/docs/guides/virtualization/): Optimizing performance for large diagrams with viewport virtualization - [Z-Ordering](https://ngdiagram.dev/docs/guides/z-ordering/): How z-index layering works for nodes and edges in ngDiagram ## Examples - [Angular Material Node](https://ngdiagram.dev/docs/examples/angular-material-node/): Example of how to use Angular Material components with ngDiagram - [Context Menu Example](https://ngdiagram.dev/docs/examples/context-menu/): Example of how to implement a context menu in ngDiagram - [Custom Edge Example](https://ngdiagram.dev/docs/examples/custom-edge/): Example of how to create a custom edge in ngDiagram - [Custom Middleware Example](https://ngdiagram.dev/docs/examples/custom-middleware/): Example of how to create a custom middleware in ngDiagram - [Custom Model Example](https://ngdiagram.dev/docs/examples/custom-model/): Example of how to create a custom model implementation in ngDiagram - [Custom Node Example](https://ngdiagram.dev/docs/examples/custom-node/): Example of how to create a custom node in ngDiagram - [Custom Ports Example](https://ngdiagram.dev/docs/examples/custom-ports/): Example of how to create custom ports in ngDiagram - [Download Image Example](https://ngdiagram.dev/docs/examples/download-image/): Example of how to download the flow as an image in ngDiagram - [Landing Page Diagram](https://ngdiagram.dev/docs/examples/landing-page-diagram/): Demonstrates the library's capabilities and integration with external libraries like charts in real scenarios - [Layout Integration Example](https://ngdiagram.dev/docs/examples/layout-integration/): Example of how to integrate layout algorithms in ngDiagram - [Hitting the limits in your own project?](https://ngdiagram.dev/docs/examples/performance-test/): Example of how to test performance in ngDiagram - [Properties Sidebar Example](https://ngdiagram.dev/docs/examples/properties-sidebar/): Example of how to implement a sidebar with editing properties in ngDiagram - [Save Persistence Example](https://ngdiagram.dev/docs/examples/save-state/): Example of how to save and restore state in ngDiagram - [Tailwind CSS Example](https://ngdiagram.dev/docs/examples/tailwind-styling/): Example of how to use Tailwind CSS in ngDiagram ## API Reference ### Components - [NgDiagramBackgroundComponent](https://ngdiagram.dev/docs/api/components/ngdiagrambackgroundcomponent/) - [NgDiagramBaseEdgeComponent](https://ngdiagram.dev/docs/api/components/ngdiagrambaseedgecomponent/) - [NgDiagramBaseEdgeLabelComponent](https://ngdiagram.dev/docs/api/components/ngdiagrambaseedgelabelcomponent/) - [NgDiagramBaseNodeTemplateComponent](https://ngdiagram.dev/docs/api/components/ngdiagrambasenodetemplatecomponent/) - [NgDiagramComponent](https://ngdiagram.dev/docs/api/components/ngdiagramcomponent/) - [NgDiagramMarkerComponent](https://ngdiagram.dev/docs/api/components/ngdiagrammarkercomponent/) - [NgDiagramMinimapComponent](https://ngdiagram.dev/docs/api/components/ngdiagramminimapcomponent/) - [NgDiagramNodeResizeAdornmentComponent](https://ngdiagram.dev/docs/api/components/ngdiagramnoderesizeadornmentcomponent/) - [NgDiagramNodeRotateAdornmentComponent](https://ngdiagram.dev/docs/api/components/ngdiagramnoderotateadornmentcomponent/) - [NgDiagramPaletteItemComponent](https://ngdiagram.dev/docs/api/components/ngdiagrampaletteitemcomponent/) - [NgDiagramPaletteItemPreviewComponent](https://ngdiagram.dev/docs/api/components/ngdiagrampaletteitempreviewcomponent/) - [NgDiagramPortComponent](https://ngdiagram.dev/docs/api/components/ngdiagramportcomponent/) ### Directives - [NgDiagramGroupHighlightedDirective](https://ngdiagram.dev/docs/api/directives/ngdiagramgrouphighlighteddirective/) - [NgDiagramMinimapNavigationDirective](https://ngdiagram.dev/docs/api/directives/ngdiagramminimapnavigationdirective/) - [NgDiagramNodeSelectedDirective](https://ngdiagram.dev/docs/api/directives/ngdiagramnodeselecteddirective/) ### Services - [NgDiagramClipboardService](https://ngdiagram.dev/docs/api/services/ngdiagramclipboardservice/) - [NgDiagramGroupsService](https://ngdiagram.dev/docs/api/services/ngdiagramgroupsservice/) - [NgDiagramModelService](https://ngdiagram.dev/docs/api/services/ngdiagrammodelservice/) - [NgDiagramNodeService](https://ngdiagram.dev/docs/api/services/ngdiagramnodeservice/) - [NgDiagramSelectionService](https://ngdiagram.dev/docs/api/services/ngdiagramselectionservice/) - [NgDiagramService](https://ngdiagram.dev/docs/api/services/ngdiagramservice/) - [NgDiagramViewportService](https://ngdiagram.dev/docs/api/services/ngdiagramviewportservice/) ### Utilities - [configureShortcuts](https://ngdiagram.dev/docs/api/utilities/configureshortcuts/) - [createMiddlewares](https://ngdiagram.dev/docs/api/utilities/createmiddlewares/) - [initializeModel](https://ngdiagram.dev/docs/api/utilities/initializemodel/) - [initializeModelAdapter](https://ngdiagram.dev/docs/api/utilities/initializemodeladapter/) - [provideNgDiagram](https://ngdiagram.dev/docs/api/utilities/providengdiagram/) ### Types - [BackgroundConfig](https://ngdiagram.dev/docs/api/types/configuration/features/backgroundconfig/) - [BoxSelectionConfig](https://ngdiagram.dev/docs/api/types/configuration/features/boxselectionconfig/) - [EdgeRoutingConfig](https://ngdiagram.dev/docs/api/types/configuration/features/edgeroutingconfig/) - [GroupingConfig](https://ngdiagram.dev/docs/api/types/configuration/features/groupingconfig/) - [LinkingConfig](https://ngdiagram.dev/docs/api/types/configuration/features/linkingconfig/) - [NodeRotationConfig](https://ngdiagram.dev/docs/api/types/configuration/features/noderotationconfig/) - [ResizeConfig](https://ngdiagram.dev/docs/api/types/configuration/features/resizeconfig/) - [SelectionMovingConfig](https://ngdiagram.dev/docs/api/types/configuration/features/selectionmovingconfig/) - [SnappingConfig](https://ngdiagram.dev/docs/api/types/configuration/features/snappingconfig/) - [VirtualizationConfig](https://ngdiagram.dev/docs/api/types/configuration/features/virtualizationconfig/) - [ZIndexConfig](https://ngdiagram.dev/docs/api/types/configuration/features/zindexconfig/) - [ZoomConfig](https://ngdiagram.dev/docs/api/types/configuration/features/zoomconfig/) - [FlowConfig](https://ngdiagram.dev/docs/api/types/configuration/flowconfig/) - [NgDiagramConfig](https://ngdiagram.dev/docs/api/types/configuration/ngdiagramconfig/) - [InputModifiers](https://ngdiagram.dev/docs/api/types/configuration/shortcuts/inputmodifiers/) - [KeyboardActionName](https://ngdiagram.dev/docs/api/types/configuration/shortcuts/keyboardactionname/) - [KeyboardMoveSelectionAction](https://ngdiagram.dev/docs/api/types/configuration/shortcuts/keyboardmoveselectionaction/) - [KeyboardPanAction](https://ngdiagram.dev/docs/api/types/configuration/shortcuts/keyboardpanaction/) - [KeyboardShortcutBinding](https://ngdiagram.dev/docs/api/types/configuration/shortcuts/keyboardshortcutbinding/) - [KeyboardShortcutDefinition](https://ngdiagram.dev/docs/api/types/configuration/shortcuts/keyboardshortcutdefinition/) - [KeyboardZoomAction](https://ngdiagram.dev/docs/api/types/configuration/shortcuts/keyboardzoomaction/) - [ModifierOnlyShortcutBinding](https://ngdiagram.dev/docs/api/types/configuration/shortcuts/modifieronlyshortcutbinding/) - [PointerOnlyActionName](https://ngdiagram.dev/docs/api/types/configuration/shortcuts/pointeronlyactionname/) - [PointerOnlyShortcutDefinition](https://ngdiagram.dev/docs/api/types/configuration/shortcuts/pointeronlyshortcutdefinition/) - [ShortcutActionName](https://ngdiagram.dev/docs/api/types/configuration/shortcuts/shortcutactionname/) - [ShortcutDefinition](https://ngdiagram.dev/docs/api/types/configuration/shortcuts/shortcutdefinition/) - [WheelOnlyActionName](https://ngdiagram.dev/docs/api/types/configuration/shortcuts/wheelonlyactionname/) - [WheelOnlyShortcutDefinition](https://ngdiagram.dev/docs/api/types/configuration/shortcuts/wheelonlyshortcutdefinition/) - [ClipboardPastedEvent](https://ngdiagram.dev/docs/api/types/events/clipboardpastedevent/) - [DiagramEventMap](https://ngdiagram.dev/docs/api/types/events/diagrameventmap/) - [DiagramInitEvent](https://ngdiagram.dev/docs/api/types/events/diagraminitevent/) - [EdgeDrawCancelReason](https://ngdiagram.dev/docs/api/types/events/edgedrawcancelreason/) - [EdgeDrawEndedEvent](https://ngdiagram.dev/docs/api/types/events/edgedrawendedevent/) - [EdgeDrawnEvent](https://ngdiagram.dev/docs/api/types/events/edgedrawnevent/) - [GroupMembershipChangedEvent](https://ngdiagram.dev/docs/api/types/events/groupmembershipchangedevent/) - [NodeDragEndedEvent](https://ngdiagram.dev/docs/api/types/events/nodedragendedevent/) - [NodeDragStartedEvent](https://ngdiagram.dev/docs/api/types/events/nodedragstartedevent/) - [NodeResizeEndedEvent](https://ngdiagram.dev/docs/api/types/events/noderesizeendedevent/) - [NodeResizeStartedEvent](https://ngdiagram.dev/docs/api/types/events/noderesizestartedevent/) - [NodeResizedEvent](https://ngdiagram.dev/docs/api/types/events/noderesizedevent/) - [NodeRotateEndedEvent](https://ngdiagram.dev/docs/api/types/events/noderotateendedevent/) - [NodeRotateStartedEvent](https://ngdiagram.dev/docs/api/types/events/noderotatestartedevent/) - [PaletteItemDroppedEvent](https://ngdiagram.dev/docs/api/types/events/paletteitemdroppedevent/) - [SelectionChangedEvent](https://ngdiagram.dev/docs/api/types/events/selectionchangedevent/) - [SelectionGestureEndedEvent](https://ngdiagram.dev/docs/api/types/events/selectiongestureendedevent/) - [SelectionMovedEvent](https://ngdiagram.dev/docs/api/types/events/selectionmovedevent/) - [SelectionRemovedEvent](https://ngdiagram.dev/docs/api/types/events/selectionremovedevent/) - [SelectionRotatedEvent](https://ngdiagram.dev/docs/api/types/events/selectionrotatedevent/) - [ViewportChangedEvent](https://ngdiagram.dev/docs/api/types/events/viewportchangedevent/) - [Point](https://ngdiagram.dev/docs/api/types/geometry/point/) - [Rect](https://ngdiagram.dev/docs/api/types/geometry/rect/) - [Size](https://ngdiagram.dev/docs/api/types/geometry/size/) - [FlowStateUpdate](https://ngdiagram.dev/docs/api/types/middleware/flowstateupdate/) - [Middleware](https://ngdiagram.dev/docs/api/types/middleware/middleware/) - [MiddlewareChain](https://ngdiagram.dev/docs/api/types/middleware/middlewarechain/) - [MiddlewareContext](https://ngdiagram.dev/docs/api/types/middleware/middlewarecontext/) - [MiddlewareHelpers](https://ngdiagram.dev/docs/api/types/middleware/middlewarehelpers/) - [MiddlewareHistoryUpdate](https://ngdiagram.dev/docs/api/types/middleware/middlewarehistoryupdate/) - [ModelActionType](https://ngdiagram.dev/docs/api/types/middleware/modelactiontype/) - [ModelActionTypes](https://ngdiagram.dev/docs/api/types/middleware/modelactiontypes/) - [TransactionOptions](https://ngdiagram.dev/docs/api/types/middleware/transactionoptions/) - [TransactionResult](https://ngdiagram.dev/docs/api/types/middleware/transactionresult/) - [MinimapNodeShape](https://ngdiagram.dev/docs/api/types/minimap/minimapnodeshape/) - [MinimapNodeStyle](https://ngdiagram.dev/docs/api/types/minimap/minimapnodestyle/) - [MinimapNodeStyleFn](https://ngdiagram.dev/docs/api/types/minimap/minimapnodestylefn/) - [NgDiagramMinimapNodeTemplate](https://ngdiagram.dev/docs/api/types/minimap/ngdiagramminimapnodetemplate/) - [NgDiagramMinimapNodeTemplateMap](https://ngdiagram.dev/docs/api/types/minimap/ngdiagramminimapnodetemplatemap/) - [AbsoluteEdgeLabelPosition](https://ngdiagram.dev/docs/api/types/model/absoluteedgelabelposition/) - [Edge](https://ngdiagram.dev/docs/api/types/model/edge/) - [EdgeLabel](https://ngdiagram.dev/docs/api/types/model/edgelabel/) - [EdgeLabelPosition](https://ngdiagram.dev/docs/api/types/model/edgelabelposition/) - [FlowState](https://ngdiagram.dev/docs/api/types/model/flowstate/) - [GroupNode](https://ngdiagram.dev/docs/api/types/model/groupnode/) - [Metadata](https://ngdiagram.dev/docs/api/types/model/metadata/) - [Model](https://ngdiagram.dev/docs/api/types/model/model/) - [ModelAdapter](https://ngdiagram.dev/docs/api/types/model/modeladapter/) - [ModelChanges](https://ngdiagram.dev/docs/api/types/model/modelchanges/) - [Node](https://ngdiagram.dev/docs/api/types/model/node/) - [OriginPoint](https://ngdiagram.dev/docs/api/types/model/originpoint/) - [Port](https://ngdiagram.dev/docs/api/types/model/port/) - [PortLocation](https://ngdiagram.dev/docs/api/types/model/portlocation/) - [PortSide](https://ngdiagram.dev/docs/api/types/model/portside/) - [SimpleNode](https://ngdiagram.dev/docs/api/types/model/simplenode/) - [Viewport](https://ngdiagram.dev/docs/api/types/model/viewport/) - [NgDiagramPanelPosition](https://ngdiagram.dev/docs/api/types/ngdiagrampanelposition/) - [BasePaletteItemData](https://ngdiagram.dev/docs/api/types/palette/basepaletteitemdata/) - [GroupNodeData](https://ngdiagram.dev/docs/api/types/palette/groupnodedata/) - [NgDiagramPaletteItem](https://ngdiagram.dev/docs/api/types/palette/ngdiagrampaletteitem/) - [SimpleNodeData](https://ngdiagram.dev/docs/api/types/palette/simplenodedata/) - [EdgeRouting](https://ngdiagram.dev/docs/api/types/routing/edgerouting/) - [EdgeRoutingContext](https://ngdiagram.dev/docs/api/types/routing/edgeroutingcontext/) - [EdgeRoutingName](https://ngdiagram.dev/docs/api/types/routing/edgeroutingname/) - [RoutingMode](https://ngdiagram.dev/docs/api/types/routing/routingmode/) - [NgDiagramEdgeTemplate](https://ngdiagram.dev/docs/api/types/templates/ngdiagramedgetemplate/) - [NgDiagramEdgeTemplateMap](https://ngdiagram.dev/docs/api/types/templates/ngdiagramedgetemplatemap/) - [NgDiagramGroupNodeTemplate](https://ngdiagram.dev/docs/api/types/templates/ngdiagramgroupnodetemplate/) - [NgDiagramNodeTemplate](https://ngdiagram.dev/docs/api/types/templates/ngdiagramnodetemplate/) - [NgDiagramNodeTemplateMap](https://ngdiagram.dev/docs/api/types/templates/ngdiagramnodetemplatemap/) ### Internals - [ActionState](https://ngdiagram.dev/docs/api/internals/actionstate/) - [ActionStateManager](https://ngdiagram.dev/docs/api/internals/actionstatemanager/) - [CopyPasteActionState](https://ngdiagram.dev/docs/api/internals/copypasteactionstate/) - [DraggingActionState](https://ngdiagram.dev/docs/api/internals/draggingactionstate/) - [EdgeRoutingManager](https://ngdiagram.dev/docs/api/internals/edgeroutingmanager/) - [EnvironmentInfo](https://ngdiagram.dev/docs/api/internals/environmentinfo/) - [HighlightGroupActionState](https://ngdiagram.dev/docs/api/internals/highlightgroupactionstate/) - [LinkingActionState](https://ngdiagram.dev/docs/api/internals/linkingactionstate/) - [PanningActionState](https://ngdiagram.dev/docs/api/internals/panningactionstate/) - [ResizeActionState](https://ngdiagram.dev/docs/api/internals/resizeactionstate/) - [RotationActionState](https://ngdiagram.dev/docs/api/internals/rotationactionstate/) - [SelectionActionState](https://ngdiagram.dev/docs/api/internals/selectionactionstate/) ### Other - [BaseEdgeLabelComponent](https://ngdiagram.dev/docs/api/other/baseedgelabelcomponent/) - [InvalidateMeasurementsOptions](https://ngdiagram.dev/docs/api/other/invalidatemeasurementsoptions/) ## Policies - [API Stability](https://ngdiagram.dev/docs/policies/api-stability/): API stability levels and Angular version support for ngDiagram - [Deprecation Policy](https://ngdiagram.dev/docs/policies/deprecation-policy/): ngDiagram's policy for deprecating and removing APIs ## Optional - [llms-full.txt](https://ngdiagram.dev/docs/llms-full.txt): Full documentation content inlined for LLM context windows