This page describes common patterns for extending and customizing maxGraph functionality. It covers class extension, custom implementations, registration patterns, and configuration approaches.
For global configuration options, see Global Configuration System. For registry management, see Registry System. For plugin-specific patterns, see Plugins
maxGraph provides multiple extension points organized into distinct customization layers:
Sources: packages/core/src/index.ts1-262 packages/core/src/util/config.ts1-201 packages/website/docs/usage/global-configuration.md1-92
Plugins provide the primary extension mechanism for adding interactive functionality to Graph instances.
Implementation Pattern:
Sources: packages/website/docs/usage/plugins.md76-92 packages/website/docs/usage/migrate-from-mxgraph.md277-301
Extend existing plugins to modify default behavior:
Sources: packages/website/docs/usage/plugins.md60-73 packages/website/docs/usage/migrate-from-mxgraph.md287-301
Custom Shape Pattern:
Sources: packages/core/src/view/shape/Shape.ts1-700 packages/core/src/view/shape/ShapeRegistry.ts1-46 README.md153-154
Sources: packages/core/src/view/cell/CellRenderer.ts1-500 packages/website/docs/usage/global-configuration.md53-84
Perimeters define edge connection points on vertex boundaries.
Implementation Pattern:
Sources: packages/website/docs/usage/perimeters.md132-170 packages/core/src/view/style/perimeter/PerimeterRegistry.ts1-40
Sources: packages/website/docs/usage/perimeters.md54-97
Codecs serialize and deserialize objects to/from XML.
Custom Codec Pattern:
Sources: packages/website/docs/usage/codecs.md162-218 packages/core/src/serialization/ObjectCodec.ts1-600
Stencil shapes provide XML-based declarative shape definitions without code.
XML Stencil Example:
Loading Stencils:
Sources: packages/core/src/view/shape/stencil/StencilShape.ts1-750 packages/core/src/view/shape/stencil/StencilShapeRegistry.ts23-40
Sources: packages/core/src/view/shape/stencil/StencilShape.ts33-68 packages/website/docs/usage/migrate-from-mxgraph.md150-153
Handlers control interactive behaviors like resizing, rotating, and editing.
Configuration Pattern:
Sources: packages/core/src/view/handler/config.ts1-200 packages/website/docs/usage/migrate-from-mxgraph.md471-484 packages/core/__tests__/view/handler/config.test.ts1-74
Sources: packages/core/src/view/handler/VertexHandler.ts1-700 packages/core/src/view/handler/EdgeHandler.ts1-900
Configuration Pattern:
Sources: packages/core/src/util/config.ts98-201 packages/core/__tests__/util/config.test.ts48-62
Common pattern for customizing graph behavior by overriding methods.
Common Override Patterns:
Sources: packages/html/stories/Orthogonal.stories.ts71-96 packages/website/docs/usage/migrate-from-mxgraph.md287-301
Essential for testing and story isolation to ensure clean state.
Storybook Reset Pattern:
Sources: packages/html/.storybook/preview.ts62-130 packages/core/__tests__/util/config.test.ts27-46
Sources: packages/core/src/view/style/edge/EdgeStyleRegistry.ts1-50 packages/core/src/view/style/marker/EdgeMarkerRegistry.ts1-60
Complete Integration:
Sources: README.md79-134 packages/website/docs/getting-started.mdx66-104 packages/html/stories/Orthogonal.stories.ts50-200
Refresh this wiki