@likec4/diagram 1.29.1 → 1.31.0

package/src/context/DiagramFeatures.tsx

@@ -123,12 +123,6 @@ DiagramFeatures.Overlays = ({ children }: PropsWithChildren) => {
   )
 }
 
-export function useEnabledFeature<F extends NonEmptyArray<FeatureName>>(
-  ...names: F
-): { [P in `enable${F[number]}`]: boolean } {
-  return pick(useContext(DiagramFeaturesContext), map(names, (name) => `enable${name}` as const))
-}
-
 export function useEnabledFeatures(): EnabledFeatures {
   return useContext(DiagramFeaturesContext)
 }
@@ -138,7 +132,7 @@ export function IfEnabled({
   children,
   and = true,
 }: PropsWithChildren<{ feature: FeatureName; and?: boolean }>) {
-  const enabled = useEnabledFeature(feature)[`enable${feature}`] === true
+  const enabled = useEnabledFeatures()[`enable${feature}`] === true
   return enabled && and ? <>{children}</> : null
 }
 
@@ -146,6 +140,16 @@ export function IfNotEnabled({
   feature,
   children,
 }: PropsWithChildren<{ feature: FeatureName }>) {
-  const notEnabled = useEnabledFeature(feature)[`enable${feature}`] !== true
+  const notEnabled = useEnabledFeatures()[`enable${feature}`] !== true
   return notEnabled ? <>{children}</> : null
 }
+
+export function IfNotReadOnly({
+  children,
+}: PropsWithChildren) {
+  const isReadOnly = useEnabledFeatures()[`enableReadOnly`] === true
+  if (isReadOnly) {
+    return null
+  }
+  return <>{children}</>
+}

package/src/context/EnsureMantine.tsx

@@ -1,13 +1,23 @@
-import { MantineContext } from '@mantine/core'
-import { type PropsWithChildren, useContext } from 'react'
+import { MantineContext, MantineProvider } from '@mantine/core'
+import { type PropsWithChildren, useContext, useEffect } from 'react'
 
 type EnsureMantineProps = PropsWithChildren<{}>
 
 export function EnsureMantine({ children }: EnsureMantineProps) {
   const mantineCtx = useContext(MantineContext)
 
+  useEffect(() => {
+    if (!mantineCtx) {
+      console.warn('LikeC4Diagram must be a child of MantineProvider')
+    }
+  }, [])
+
   if (!mantineCtx) {
-    throw new Error('LikeC4Diagram must be a child of MantineProvider')
+    return (
+      <MantineProvider>
+        {children}
+      </MantineProvider>
+    )
   }
 
   return <>{children}</>

package/src/context/IconRenderer.tsx

@@ -1,4 +1,5 @@
 import type { ElementShape } from '@likec4/core'
+import { cx as clsx } from '@likec4/styles/css'
 import {
   type Icon,
   type IconProps,
@@ -9,7 +10,6 @@ import {
   IconReorder,
   IconUser,
 } from '@tabler/icons-react'
-import clsx from 'clsx'
 import {
   type ForwardRefExoticComponent,
   type PropsWithChildren,
@@ -53,7 +53,9 @@ export function IconRenderer({
     return null
   }
   let icon: ReactNode
-  if (element.icon.startsWith('http://') || element.icon.startsWith('https://')) {
+  if (
+    element.icon.startsWith('http://') || element.icon.startsWith('https://')
+  ) {
     icon = <img src={element.icon} alt={element.title} />
   } else if (RenderIcon) {
     icon = <RenderIcon node={element} />

package/src/context/ReduceGraphics.tsx

@@ -1,14 +1,14 @@
-import { createOptionalContext, createSafeContext } from '@mantine/core'
+import { createSafeContext } from '@mantine/core'
 import { useStore } from '@nanostores/react'
 import { type WritableAtom, atom } from 'nanostores'
-import { type PropsWithChildren, useRef } from 'react'
+import { type PropsWithChildren, createContext, useContext, useRef } from 'react'
 
-const [ReduceGraphicsModeCtx, useReducedGraphics] = createOptionalContext<boolean>()
+const ReduceGraphicsModeCtx = createContext<boolean | null>(null)
 /**
  * Hook to determine if reduced graphics mode is enabled.
  */
 export function useIsReducedGraphics() {
-  const isReduced = useReducedGraphics()
+  const isReduced = useContext(ReduceGraphicsModeCtx)
   if (isReduced === null) {
     console.warn('ReduceGraphicsMode is not provided')
   }
@@ -30,9 +30,9 @@ export function ReduceGraphicsContext({ reduceGraphics, children }: PropsWithChi
   }
   return (
     <PanningAtomSafeCtx value={$isPanningRef.current}>
-      <ReduceGraphicsModeCtx value={reduceGraphics}>
+      <ReduceGraphicsModeCtx.Provider value={reduceGraphics}>
         {children}
-      </ReduceGraphicsModeCtx>
+      </ReduceGraphicsModeCtx.Provider>
     </PanningAtomSafeCtx>
   )
 }

package/src/context/index.ts

@@ -4,7 +4,6 @@ export {
   DiagramFeatures,
   IfEnabled,
   IfNotEnabled,
-  useEnabledFeature,
   useEnabledFeatures,
 } from './DiagramFeatures'
 export type { EnabledFeatures } from './DiagramFeatures'

package/src/custom/components.ts

@@ -0,0 +1,47 @@
+export {
+  CompoundActionButton,
+  CompoundDetailsButton,
+  CompoundNodeContainer,
+  CompoundTitle,
+  DefaultHandles,
+  ElementActionButtons,
+  ElementDetailsButton,
+  ElementNodeContainer,
+  ElementShape,
+  ElementTitle,
+} from '../base/primitives'
+
+export {
+  IconOrShapeRenderer,
+  IconRenderer,
+  IconRendererProvider,
+} from '../context/IconRenderer'
+
+export {
+  CompoundActions,
+  CompoundDeploymentNode,
+  CompoundDeploymentToolbar,
+  CompoundDetailsButtonWithHandler,
+  CompoundElementNode,
+  CompoundElementToolbar,
+  DeploymentElementActions,
+  DeploymentElementToolbar,
+  DeploymentNode,
+  ElementActions,
+  ElementDetailsButtonWithHandler,
+  ElementNode,
+  ElementToolbar,
+  Toolbar,
+  ViewGroupNode,
+} from '../likec4diagram/custom/nodes'
+
+export {
+  IfEnabled,
+  IfNotEnabled,
+  IfNotReadOnly,
+} from '../context/DiagramFeatures'
+
+export {
+  Overlay,
+  type OverlayProps,
+} from '../overlays/overlay/Overlay'

package/src/custom/customNodes.tsx

@@ -0,0 +1,244 @@
+import type { AnyAux, DeployedInstanceModel, DeploymentNodeModel, NodeModel } from '@likec4/core/model'
+import type { DiagramView } from '@likec4/core/types'
+import type { ReactNode } from 'react'
+import { customNode } from '../base/primitives'
+import type { NodeProps } from '../base/types'
+import type { Types } from '../likec4diagram/types'
+import { useLikeC4Model } from '../likec4model/useLikeC4Model'
+
+function customDiagramNode<
+  P extends {
+    nodeProps: NodeProps<Types.NodeData>
+    nodeModel: NodeModel<AnyAux>
+  },
+>(
+  Node: (props: P) => ReactNode,
+): (props: P['nodeProps']) => ReactNode {
+  return customNode((props) => {
+    const viewModel = useLikeC4Model(true).view(props.data.viewId)
+    const model = viewModel.node(props.id)
+    // @ts-ignore
+    return <Node nodeProps={props} nodeModel={model} />
+  }) as (props: P['nodeProps']) => ReactNode
+}
+
+export type CustomElementNodeProps<M extends AnyAux = AnyAux> = {
+  nodeProps: NodeProps<Types.ElementNodeData, 'element'>
+  nodeModel: NodeModel.WithElement<M, DiagramView>
+}
+/**
+ * Node that will be used to render the element from the model.
+ * It is a leaf node, i.e. it does not have children.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: LikeC4 {@link NodeModel.WithElement}
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   elementNode,
+ *   ElementNodeContainer,
+ *   ElementShape,
+ *   ElementTitle,
+ *   ElementActions,
+ *   ElementDetailsButtonWithHandler,
+ *   IfNotReadOnly,
+ *   ElementToolbar,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomElementNode = elementNode(({ nodeProps, nodeModel }) => (
+ *   <ElementNodeContainer nodeProps={nodeProps}>
+ *     <ElementShape {...nodeProps} />
+ *     <ElementTitle {...nodeProps} />
+ *     <ElementActions
+ *       {...nodeProps}
+ *       extraButtons={[
+ *         {
+ *           key: 'plus',
+ *           icon: <IconPlus />,
+ *           onClick: () => console.log('extra'),
+ *         },
+ *       ]}
+ *     />
+ *     <ElementDetailsButtonWithHandler {...nodeProps} />
+ *     {nodeModel.element.getMetadata('your-attr') === 'value' && <YourComponent />}
+ *     <IfNotReadOnly>
+ *       <ElementToolbar {...nodeProps} />
+ *     </IfNotReadOnly>
+ *     <DefaultHandles />
+ *   </ElementNodeContainer>
+ * ))
+ * ```
+ */
+export const elementNode = customDiagramNode<CustomElementNodeProps>
+
+export type CustomDeploymentNodeProps<M extends AnyAux = AnyAux> = {
+  nodeProps: NodeProps<Types.DeploymentElementNodeData, 'deployment'>
+  nodeModel: NodeModel.WithDeploymentElement<M, DiagramView>
+}
+/**
+ * Node that will be used to render the element from deployment model.
+ * It is a leaf node, i.e. it does not have children.
+ * Can be {@link DeploymentNodeModel} or {@link DeployedInstanceModel}.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: {@link NodeModel.WithDeploymentElement}
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   deploymentNode,
+ *   ElementNodeContainer,
+ *   ElementShape,
+ *   ElementTitle,
+ *   DeploymentElementActions,
+ *   ElementDetailsButtonWithHandler,
+ *   IfNotReadOnly,
+ *   DeploymentElementToolbar,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomDeploymentNode = deploymentNode(({ nodeProps, nodeModel }) => (
+ *   <ElementNodeContainer nodeProps={nodeProps}>
+ *     <ElementShape {...nodeProps} />
+ *     <ElementTitle {...nodeProps} />
+ *     <DeploymentElementActions
+ *       {...nodeProps}
+ *       extraButtons={[
+ *         {
+ *           key: 'plus',
+ *           icon: <IconPlus />,
+ *           onClick: () => console.log('extra'),
+ *         },
+ *       ]}
+ *     />
+ *     <ElementDetailsButtonWithHandler {...nodeProps} />
+ *     <IfNotReadOnly>
+ *       <DeploymentElementToolbar {...nodeProps} />
+ *     </IfNotReadOnly>
+ *     <DefaultHandles />
+ *   </ElementNodeContainer>
+ * ))
+ * ```
+ */
+export const deploymentNode = customDiagramNode<CustomDeploymentNodeProps>
+
+export type CustomCompoundElementNodeProps<M extends AnyAux = AnyAux> = {
+  nodeProps: NodeProps<Types.CompoundElementNodeData, 'compound-element'>
+  nodeModel: NodeModel.WithElement<M, DiagramView>
+}
+/**
+ * Node that will be used to render the compound element from the model.
+ * It is a container node, i.e. it has children.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: LikeC4 {@link NodeModel.WithElement}
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   compoundElementNode,
+ *   CompoundNodeContainer,
+ *   CompoundTitle,
+ *   CompoundActions,
+ *   CompoundDetailsButtonWithHandler,
+ *   IfEnabled,
+ *   CompoundElementToolbar,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomCompoundElementNode = compoundElementNode(({ nodeProps, nodeModel }) => (
+ *   <CompoundNodeContainer nodeProps={props}>
+ *     <CompoundTitle {...props} />
+ *     <CompoundActions {...props} />
+ *     <IfEnabled feature="ElementDetails">
+ *       <CompoundDetailsButtonWithHandler {...props} />
+ *     </IfEnabled>
+ *     <IfNotReadOnly>
+ *       <CompoundElementToolbar {...props} />
+ *     </IfNotReadOnly>
+ *     <DefaultHandles />
+ *   </CompoundNodeContainer>
+ * ))
+ * ```
+ */
+export const compoundElementNode = customDiagramNode<CustomCompoundElementNodeProps>
+
+export type CustomCompoundDeploymentNodeProps<M extends AnyAux = AnyAux> = {
+  nodeProps: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>
+  nodeModel: NodeModel.WithDeploymentElement<M, DiagramView>
+}
+/**
+ * Node that will be used to render the compound from the deployment model.
+ * It is a container node, i.e. it has children.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: LikeC4 {@link NodeModel.WithDeploymentElement}
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   compoundDeploymentNode,
+ *   CompoundNodeContainer,
+ *   CompoundTitle,
+ *   CompoundActions,
+ *   CompoundDeploymentToolbar,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomCompoundDeploymentNode = compoundDeploymentNode(({ nodeProps, nodeModel }) => (
+ *   <CompoundNodeContainer nodeProps={nodeProps}>
+ *     <CompoundTitle {...nodeProps} />
+ *     <CompoundActions {...nodeProps} />
+ *     <IfNotReadOnly>
+ *       <CompoundDeploymentToolbar {...nodeProps} />
+ *     </IfNotReadOnly>
+ *     <DefaultHandles />
+ *   </CompoundNodeContainer>
+ * ```
+ */
+export const compoundDeploymentNode = customDiagramNode<CustomCompoundDeploymentNodeProps>
+
+export type CustomViewGroupNodeProps<M extends AnyAux = AnyAux> = {
+  nodeProps: NodeProps<Types.ViewGroupNodeData, 'view-group'>
+  nodeModel: NodeModel.IsGroup<M, DiagramView>
+}
+/**
+ * Node that will be used to render the view group from the model.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: LikeC4 {@link NodeModel.IsGroup}
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   viewGroupNode,
+ *   CompoundNodeContainer,
+ *   CompoundTitle,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomViewGroupNode = viewGroupNode(({ nodeProps, nodeModel }) => (
+ *   <CompoundNodeContainer nodeProps={nodeProps}>
+ *     <CompoundTitle {...nodeProps} />
+ *     <DefaultHandles />
+ *   </CompoundNodeContainer>
+ * ```
+ */
+export const viewGroupNode = customDiagramNode<CustomViewGroupNodeProps>
+
+export interface CustomNodes {
+  element?: undefined | ((props: NodeProps<Types.ElementNodeData, 'element'>) => ReactNode)
+  deployment?: undefined | ((props: NodeProps<Types.DeploymentElementNodeData, 'deployment'>) => ReactNode)
+  compoundElement?: undefined | ((props: NodeProps<Types.CompoundElementNodeData, 'compound-element'>) => ReactNode)
+  compoundDeployment?:
+    | undefined
+    | ((props: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>) => ReactNode)
+  viewGroup?: undefined | ((props: NodeProps<Types.ViewGroupNodeData, 'view-group'>) => ReactNode)
+}

package/src/custom/hooks.ts

@@ -0,0 +1,35 @@
+export type {
+  DiagramActorEvent,
+  DiagramActorRef,
+  DiagramContext,
+} from '../state/types'
+
+export {
+  useDiagramEventHandlers,
+} from '../context/DiagramEventHandlers'
+
+export {
+  type EnabledFeatures,
+  useEnabledFeatures,
+} from '../context/DiagramFeatures'
+export {
+  useCurrentViewId,
+} from '../hooks/useCurrentViewId'
+export {
+  useDiagram,
+  useDiagramContext,
+} from '../hooks/useDiagram'
+export {
+  useXYFlow,
+  useXYInternalNode,
+  useXYStore,
+  useXYStoreApi,
+} from '../hooks/useXYFlow'
+
+export {
+  useLikeC4Model,
+} from '../likec4model/useLikeC4Model'
+
+export { useMantinePortalProps } from '../hooks/useMantinePortalProps'
+export { useSetState } from '../hooks/useSetState'
+export { useUpdateEffect } from '../hooks/useUpdateEffect'

package/src/custom/index.ts

@@ -0,0 +1,5 @@
+export * from './components'
+export * from './customNodes'
+export * from './hooks'
+
+export type { Types } from '../likec4diagram/types'

package/src/hooks/useCurrentViewId.ts

@@ -1,9 +1,17 @@
-import type { ViewId } from '@likec4/core'
+import { invariant } from '@likec4/core'
+import type { AnyAux, LikeC4ViewModel } from '@likec4/core/model'
+import type { DiagramView, ViewId } from '@likec4/core/types'
 import { useSelector } from '@xstate/react'
+import { useLikeC4Model } from '../likec4model/useLikeC4Model'
 import type { DiagramActorSnapshot } from '../state/types'
 import { useDiagramActorRef } from './useDiagram'
 
 const selectViewId = (s: DiagramActorSnapshot) => s.context.view.id
+
+/**
+ * Returns current view id
+ * Should be used only inside LikeC4Diagram
+ */
 export function useCurrentViewId(): ViewId {
   const actorRef = useDiagramActorRef()
   return useSelector(actorRef, selectViewId)

package/src/hooks/useDiagram.ts

@@ -1,4 +1,13 @@
-import { type DiagramView, type EdgeId, type ElementNotation, type Fqn, type NodeId, type ViewId } from '@likec4/core'
+import {
+  type DiagramEdge,
+  type DiagramNode,
+  type DiagramView,
+  type EdgeId,
+  type ElementNotation,
+  type Fqn,
+  type NodeId,
+  type ViewId,
+} from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { useSelector as useXstateSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
@@ -8,17 +17,27 @@ import type { FeatureName } from '../context/DiagramFeatures'
 import type { OpenSourceParams } from '../LikeC4Diagram.props'
 import type { Types } from '../likec4diagram/types'
 import type { AlignmentMode } from '../state/aligners'
-import type { DiagramActorSnapshot, DiagramContext, SyncLayoutActorRef, SyncLayoutActorSnapshot } from '../state/types'
+import type {
+  DiagramActorEvent,
+  DiagramActorSnapshot,
+  DiagramContext,
+  SyncLayoutActorRef,
+  SyncLayoutActorSnapshot,
+} from '../state/types'
 import { findDiagramEdge, findDiagramNode } from '../state/utils'
 import { useDiagramActorRef } from './safeContext'
 
 export { useDiagramActorRef }
 
+/**
+ * Diagram API
+ * Mostly for internal use
+ */
 export function useDiagram() {
   const actor = useDiagramActorRef()
   return useMemo(() => ({
     actor,
-    send: actor.send,
+    send: (event: DiagramActorEvent) => actor.send(event),
     navigateTo: (viewId: ViewId, fromNode?: NodeId) => {
       actor.send({
         type: 'navigate.to',
@@ -52,11 +71,10 @@ export function useDiagram() {
     updateNodeData: (nodeId: NodeId, data: PartialDeep<Types.NodeData>) => {
       actor.send({ type: 'update.nodeData', nodeId, data })
     },
-    updateEdgeData: (edgeId: EdgeId, data: PartialDeep<Types.Edge['data']>) => {
+    updateEdgeData: (edgeId: EdgeId, data: PartialDeep<Types.EdgeData>) => {
       actor.send({
         type: 'update.edgeData',
         edgeId,
-        // @ts-expect-error TODO: fix this
         data,
       })
     },
@@ -93,21 +111,21 @@ export function useDiagram() {
     /**
      * @warning Do not use in render phase
      */
-    getSnapshot: () => actor.getSnapshot(),
+    getSnapshot: (): DiagramActorSnapshot => actor.getSnapshot(),
     /**
      * @warning Do not use in render phase
      */
-    getContext: () => actor.getSnapshot().context,
+    getContext: (): DiagramContext => actor.getSnapshot().context,
     /**
      * @warning Do not use in render phase
      */
-    findDiagramNode: (xynodeId: string) => {
+    findDiagramNode: (xynodeId: string): DiagramNode | null => {
       return findDiagramNode(actor.getSnapshot().context, xynodeId)
     },
     /**
      * @warning Do not use in render phase
      */
-    findDiagramEdge: (xyedgeId: string) => {
+    findDiagramEdge: (xyedgeId: string): DiagramEdge | null => {
       return findDiagramEdge(actor.getSnapshot().context, xyedgeId)
     },
 
@@ -152,6 +170,9 @@ export function useDiagramSyncLayoutState<T = unknown>(
   return useXstateSelector(syncLayoutActorRef, useCallbackRef(selector), compare)
 }
 
+/**
+ * Read diagram context
+ */
 export function useDiagramContext<T = unknown>(
   selector: (context: DiagramContext) => T,
   compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,

package/src/index.ts

@@ -5,19 +5,13 @@ export { LikeC4Diagram } from './LikeC4Diagram'
 export type { LikeC4DiagramProps } from './LikeC4Diagram'
 export { Overlay } from './overlays/overlay/Overlay'
 
-export {
-  useLikeC4ElementsTree,
-  useLikeC4Model,
-} from './likec4model'
-
 export { LikeC4ModelProvider } from './LikeC4ModelProvider'
 
-export { useSetState } from './hooks/useSetState'
-export { useUpdateEffect } from './hooks/useUpdateEffect'
-// export { vars, xyvars } from './theme-vars'
+export * from './custom/hooks'
 
 export type {
   ChangeEvent,
+  CustomNodes,
   DiagramNodeWithNavigate,
   ElementIconRenderer,
   LikeC4ColorScheme,
@@ -29,6 +23,8 @@ export type {
   OnNavigateTo,
   OnNodeClick,
   OpenSourceParams,
+  PaddingUnit,
+  PaddingWithUnit,
   WhereOperator,
 } from './LikeC4Diagram.props'
 

package/src/likec4diagram/DiagramXYFlow.tsx

@@ -1,16 +1,18 @@
 import { type EdgeId, type NodeId, nonNullable } from '@likec4/core'
 import { cx } from '@likec4/styles/css'
 import { useCallbackRef, useDebouncedCallback, useTimeout } from '@mantine/hooks'
+import { useCustomCompareMemo } from '@react-hookz/web'
 import type { OnMove, OnMoveEnd } from '@xyflow/system'
 import { deepEqual, shallowEqual } from 'fast-equals'
 import { type PropsWithChildren, memo } from 'react'
 import { BaseXYFlow } from '../base/BaseXYFlow'
 import { useDiagramEventHandlers } from '../context'
 import { useIsReducedGraphics, usePanningAtom } from '../context/ReduceGraphics'
+import { useUpdateEffect } from '../hooks'
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import type { DiagramContext } from '../state/types'
-import { edgeTypes, nodeTypes } from './custom'
+import { BuiltinNodes as defaultNodeTypes, edgeTypes } from './custom'
 import { DiagramUI } from './DiagramUI'
 import type { Types } from './types'
 import { useLayoutConstraints } from './useLayoutConstraints'
@@ -50,14 +52,17 @@ export type LikeC4DiagramXYFlowProps = PropsWithChildren<
     | 'nodesDraggable'
     | 'nodesSelectable'
     | 'reactFlowProps'
+    | 'renderNodes'
   >
 >
 
 const compareProps = <T extends LikeC4DiagramXYFlowProps>(a: T, b: T): boolean =>
-  a.nodesDraggable === b.nodesDraggable &&
-  a.nodesSelectable === b.nodesSelectable &&
+  a.nodesDraggable == b.nodesDraggable &&
+  a.nodesSelectable == b.nodesSelectable &&
+  a.children == b.children &&
   deepEqual(a.background, b.background) &&
-  deepEqual(a.reactFlowProps ?? {}, b.reactFlowProps ?? {})
+  deepEqual(a.reactFlowProps ?? {}, b.reactFlowProps ?? {}) &&
+  shallowEqual(a.renderNodes ?? {}, b.renderNodes ?? {})
 
 export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
   background = 'dots',
@@ -65,6 +70,7 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
   nodesSelectable = false,
   reactFlowProps = {},
   children,
+  renderNodes,
 }) => {
   const diagram = useDiagram()
   const {
@@ -116,7 +122,24 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
     }),
     onViewportResize = useCallbackRef(() => {
       diagram.send({ type: 'xyflow.resized' })
-    })
+    }),
+    nodeTypes = useCustomCompareMemo(
+      () => {
+        return {
+          element: renderNodes?.element ?? defaultNodeTypes.element,
+          deployment: renderNodes?.deployment ?? defaultNodeTypes.deployment,
+          'compound-element': renderNodes?.compoundElement ?? defaultNodeTypes['compound-element'],
+          'compound-deployment': renderNodes?.compoundDeployment ?? defaultNodeTypes['compound-deployment'],
+          'view-group': renderNodes?.viewGroup ?? defaultNodeTypes['view-group'],
+        } satisfies { [key in Types.Node['type']]: any }
+      },
+      [renderNodes],
+      shallowEqual,
+    )
+
+  useUpdateEffect(() => {
+    console.warn('renderNodes changed - this might degrade performance')
+  }, [renderNodes])
 
   return (
     <BaseXYFlow<Types.Node, Types.Edge>