@likec4/diagram 1.5.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -48,31 +48,36 @@
     "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.5.0",
+    "@lume/kiwi": "^0.4.3",
     "@react-hookz/web": "^24.0.4",
-    "@tabler/icons-react": "^3.9.0",
+    "@tabler/icons-react": "^3.11.0",
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.1",
+    "@xyflow/react": "12.0.3",
+    "@xyflow/system": "0.0.37",
+    "bezier-js": "^6.1.4",
+    "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.2.13",
+    "framer-motion": "^11.3.8",
     "remeda": "^2.3.0",
     "zustand": "^4.5.4"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.11.1",
-    "@mantine/hooks": "^7.11.1",
+    "@likec4/core": "1.6.1",
+    "@mantine/core": "^7.11.2",
+    "@mantine/hooks": "^7.11.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.5.0",
-    "@lume/kiwi": "^0.4.3",
-    "@mantine/core": "7.11.1",
-    "@mantine/hooks": "7.11.1",
-    "@mantine/vanilla-extract": "7.11.1",
+    "@likec4/core": "1.6.1",
+    "@likec4/tsconfig": "1.6.1",
+    "@mantine/core": "7.11.2",
+    "@mantine/hooks": "7.11.2",
+    "@mantine/vanilla-extract": "7.11.2",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.6",
@@ -80,18 +85,13 @@
     "@types/react-dom": "^18.3.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.8",
     "@vitejs/plugin-react": "^4.3.1",
-    "@xyflow/react": "12.0.1",
-    "@xyflow/system": "0.0.35",
-    "bezier-js": "^6.1.4",
-    "clsx": "^2.1.1",
     "execa": "^9.3.0",
     "khroma": "^2.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tilg": "^0.1.1",
     "type-fest": "^4.21.0",
     "typescript": "^5.5.3",
-    "vite": "5.3.3",
+    "vite": "5.3.4",
     "vite-plugin-dts": "^3.9.1"
   }
 }

package/src/LikeC4Diagram.props.ts

@@ -6,17 +6,29 @@ import type {
   EdgeId,
   ElementShape,
   Fqn,
+  IconUrl,
   NonEmptyArray,
   ThemeColor,
   ViewID
 } from '@likec4/core'
 import type { XYPosition } from '@xyflow/system'
-import type { MouseEvent as ReactMouseEvent } from 'react'
-import type { SetRequired, Simplify } from 'type-fest'
+import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
 import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
 import type { XYBackground } from './xyflow/XYFlowBackground'
 
-export type DiagramNodeWithNavigate = Simplify<SetRequired<DiagramNode, 'navigateTo'>>
+export type DiagramNodeWithNavigate = Omit<DiagramNode, 'navigateTo'> & {
+  navigateTo: ViewID
+}
+
+type ElementIconNodeProps = {
+  id: string
+  title: string
+  icon?: string | undefined
+}
+
+export type ElementIconRenderer = (props: {
+  node: ElementIconNodeProps
+}) => ReactNode
 
 export type OnNavigateTo = {
   (
@@ -177,6 +189,12 @@ export interface LikeC4DiagramProperties {
    * @default false
    */
   experimentalEdgeEditing?: boolean | undefined
+
+  /**
+   * Render custom icon for a node
+   * By default, if icon is http:// or https://, it will be rendered as an image
+   */
+  renderIcon?: ElementIconRenderer | undefined
 }
 
 export interface LikeC4DiagramEventHandlers {

package/src/LikeC4Diagram.tsx

@@ -1,13 +1,10 @@
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
-import '@xyflow/react/dist/style.css'
 import clsx from 'clsx'
-import { DEV } from 'esm-env'
 import { shallowEqual } from 'fast-equals'
 import { domAnimation, LazyMotion } from 'framer-motion'
 import { memo, useEffect, useRef, useState } from 'react'
-import useTilg from 'tilg'
 import { rootClassName } from './globals.css'
-import { cssDisablePan, cssNoControls, cssReactFlow, cssTransparentBg } from './LikeC4Diagram.css'
+import * as css from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { EnsureMantine } from './mantine/EnsureMantine'
 import { DiagramContextProvider } from './state/DiagramContext'
@@ -49,9 +46,9 @@ export function LikeC4Diagram({
   onEdgeContextMenu,
   onNavigateTo,
   onNodeClick,
-  onNodeContextMenu
+  onNodeContextMenu,
+  renderIcon
 }: LikeC4DiagramProps) {
-  DEV && useTilg()
   const initialRef = useRef<{
     defaultNodes: XYFlowData['nodes']
     defaultEdges: XYFlowData['edges']
@@ -70,6 +67,7 @@ export function LikeC4Diagram({
       initialHeight: initialHeight ?? view.height
     }
   }
+
   return (
     <EnsureMantine>
       <XYFlowProvider
@@ -89,6 +87,7 @@ export function LikeC4Diagram({
           nodesDraggable={nodesDraggable}
           nodesSelectable={nodesSelectable}
           experimentalEdgeEditing={experimentalEdgeEditing}
+          renderIcon={renderIcon ?? null}
           onCanvasClick={onCanvasClick}
           onCanvasContextMenu={onCanvasContextMenu}
           onEdgeClick={onEdgeClick}
@@ -143,7 +142,6 @@ const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4Diag
   showNavigationButtons,
   enableDynamicViewWalkthrough
 }) {
-  DEV && useTilg()
   const diagramApi = useDiagramStoreApi()
   const [isInitialized, setIsInitialized] = useState(diagramApi.getState().initialized)
 
@@ -167,10 +165,10 @@ const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4Diag
         defaultEdges={defaultEdges}
         className={clsx(
           'likec4-diagram',
-          cssReactFlow,
-          controls === false && cssNoControls,
-          pannable !== true && cssDisablePan,
-          background === 'transparent' && cssTransparentBg
+          css.cssReactFlow,
+          controls === false && css.cssNoControls,
+          pannable !== true && css.cssDisablePan,
+          background === 'transparent' && css.cssTransparentBg
         )}
       >
         <XYFlowInner

package/src/StaticLikeC4Diagram.tsx

@@ -11,6 +11,7 @@ export type StaticLikeC4DiagramProps = Pick<
   | 'background'
   | 'initialWidth'
   | 'initialHeight'
+  | 'renderIcon'
 >
 
 export function StaticLikeC4Diagram({

package/src/index.ts

@@ -1,3 +1,5 @@
+import '@xyflow/react/dist/style.css'
+
 export { LikeC4Diagram } from './LikeC4Diagram'
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
 

package/src/state/DiagramContext.tsx

@@ -2,7 +2,7 @@ import { shallowEqual } from 'fast-equals'
 import { createContext, type PropsWithChildren, useEffect, useRef } from 'react'
 import { hasSubObject, isNonNullish, pickBy } from 'remeda'
 import { useUpdateEffect } from '../hooks'
-import { useXYFlow, useXYStoreApi } from '../xyflow/hooks'
+import { useXYFlow, useXYStoreApi } from '../xyflow/hooks/useXYFlow'
 import { createDiagramStore, type DiagramInitialState } from './diagramStore'
 
 export type DiagramZustandStore = ReturnType<typeof createDiagramStore>
@@ -52,16 +52,16 @@ export function DiagramContextProvider({
     () => {
       if (!store.current) return
       const state = store.current.getState()
-      if (state.view !== view) {
-        state.updateView(view)
-      }
       const newProps = pickBy(props, isNonNullish)
       if (!hasSubObject(state, newProps)) {
         store.current.setState(newProps, false, 'update incoming props')
       }
+      if (state.view !== view) {
+        state.updateView(view)
+      }
     },
     [view, props],
-    shallowEqual
+    (prev, next) => shallowEqual(prev[0], next[0]) && shallowEqual(prev[1], next[1])
   )
   return (
     <div

package/src/state/diagramStore.ts

@@ -10,7 +10,12 @@ import type { Exact, Except, RequiredKeysOf, Simplify } from 'type-fest'
 import { devtools, subscribeWithSelector } from 'zustand/middleware'
 import { shallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
-import type { Changes, DiagramNodeWithNavigate, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props'
+import type {
+  Changes,
+  DiagramNodeWithNavigate,
+  ElementIconRenderer,
+  LikeC4DiagramEventHandlers
+} from '../LikeC4Diagram.props'
 import { MinZoom } from '../xyflow/const'
 import type { XYStoreApi } from '../xyflow/hooks'
 import type { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types'
@@ -29,6 +34,7 @@ export type DiagramStore = {
   nodesDraggable: boolean
   nodesSelectable: boolean
   experimentalEdgeEditing: boolean
+  renderIcon: ElementIconRenderer | null
   // Diagram Container, see DiagramContainer.tsx
   getContainer: () => HTMLDivElement | null
 
@@ -76,6 +82,7 @@ export type DiagramInitialState = // Required properties
   & Pick<
     DiagramStore,
     | 'view'
+    | 'renderIcon'
     | 'readonly'
     | 'showElementLinks'
     | 'fitViewEnabled'

package/src/ui/BackwardForwardPanel.tsx

@@ -2,7 +2,7 @@ import { ActionIcon, Group } from '@mantine/core'
 import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
-import { useNavigationHistory } from '../state/hooks'
+import { useNavigationHistory } from '../state/useNavigationHistory'
 import * as css from './BackwardForwardPanel.css'
 
 export function BackwardForwardPanel() {

package/src/xyflow/FitviewOnDiagramChange.tsx

@@ -3,7 +3,7 @@ import { useDebouncedEffect } from '@react-hookz/web'
 import { shallowEqual } from 'fast-equals'
 import { useEffect, useRef } from 'react'
 import { type DiagramState, type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../state/hooks'
-import { useXYStore, useXYStoreApi, type XYStoreApi } from './hooks'
+import { useXYStore, useXYStoreApi, type XYStoreApi } from './hooks/useXYFlow'
 import type { XYFlowState } from './types'
 import { toDomPrecision } from './utils'
 

package/src/xyflow/SelectEdgesOnNodeFocus.tsx

@@ -2,7 +2,7 @@ import { nonNullable } from '@likec4/core'
 import type { EdgeChange, NodeChange } from '@xyflow/react'
 import { getBoundsOfRects, getViewportForBounds, nodeToRect } from '@xyflow/system'
 import { useEffect } from 'react'
-import { useDiagramStoreApi } from '../state/hooks'
+import { useDiagramStoreApi } from '../state/useDiagramStore'
 import { MinZoom } from './const'
 import type { XYFlowEdge, XYFlowNode } from './types'
 

package/src/xyflow/SyncWithDiagram.tsx

@@ -2,7 +2,7 @@ import { deepEqual as eq } from 'fast-equals'
 
 import { useEffect } from 'react'
 import { omit } from 'remeda'
-import { useDiagramState, useDiagramStoreApi } from '../state/hooks'
+import { useDiagramState, useDiagramStoreApi } from '../state/useDiagramStore'
 import { diagramViewToXYFlowData } from './diagram-to-xyflow'
 
 /**

package/src/xyflow/XYFlow.tsx

@@ -1,9 +1,8 @@
 import { ReactFlow, useOnViewportChange } from '@xyflow/react'
-import { DEV } from 'esm-env'
 import { deepEqual as eq } from 'fast-equals'
 import { type CSSProperties, type PropsWithChildren, useCallback } from 'react'
-import useTilg from 'tilg'
-import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../state/hooks'
+import type { DiagramState } from '../state/diagramStore'
+import { useDiagramState, useDiagramStoreApi } from '../state/useDiagramStore'
 import { MinZoom } from './const'
 import { RelationshipEdge } from './edges/RelationshipEdge'
 import { useLayoutConstraints } from './hooks/useLayoutConstraints'
@@ -67,7 +66,6 @@ export function XYFlow({
   defaultEdges,
   style
 }: XYFlowWrapperProps) {
-  DEV && useTilg()
   const xyflowApi = useXYStoreApi()
   const diagramApi = useDiagramStoreApi()
   const {

package/src/xyflow/XYFlowEvents.tsx

@@ -1,7 +1,7 @@
 import type { ReactFlowProps } from '@xyflow/react'
 import { useMemo, useRef } from 'react'
 import type { Simplify } from 'type-fest'
-import { useDiagramStoreApi } from '../state/hooks'
+import { useDiagramStoreApi } from '../state/useDiagramStore'
 import type { XYFlowEdge, XYFlowNode } from './types'
 
 export type XYFlowEventHandlers = Simplify<

package/src/xyflow/XYFlowInner.tsx

@@ -3,7 +3,7 @@ import { shallowEqual } from 'fast-equals'
 import { memo, type PropsWithChildren } from 'react'
 import { isNonNull } from 'remeda'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
-import { useDiagramState } from '../state/hooks'
+import { useDiagramState } from '../state/useDiagramStore'
 import { BackwardForwardPanel } from '../ui/BackwardForwardPanel'
 import DiagramTitlePanel from '../ui/DiagramTitlePanel'
 import { DynamicViewWalkthrough } from '../ui/DynamicViewWalkthrough'
@@ -52,3 +52,4 @@ export const XYFlowInner = memo(function XYFlowInnerR({
     </>
   )
 }, shallowEqual)
+XYFlowInner.displayName = 'XYFlowInner'

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -16,10 +16,10 @@ import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
 import { deepEqual, deepEqual as eq } from 'fast-equals'
 import { memo, type PointerEvent as ReactPointerEvent, useRef, useState } from 'react'
 import { first, hasAtLeast, isArray, isTruthy, last } from 'remeda'
-import { useDiagramState, useDiagramStoreApi } from '../../state/hooks'
+import { useDiagramState, useDiagramStoreApi } from '../../state/useDiagramStore'
 import { ZIndexes } from '../const'
 import { EdgeMarkers } from '../EdgeMarkers'
-import { useXYStoreApi } from '../hooks'
+import { useXYStoreApi } from '../hooks/useXYFlow'
 import { type RelationshipData, type XYFlowEdge } from '../types'
 import { bezierControlPoints } from '../utils'
 import * as edgesCss from './edges.css'
@@ -375,7 +375,7 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
             selected: selected ?? false,
             stepNum: data.stepNum,
             label: data.label,
-            zIndex: edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge,
+            zIndex: (edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge) + 1,
             isHovered,
             isActive,
             isStepEdge

package/src/xyflow/edges/edges.css.ts

@@ -53,7 +53,7 @@ globalStyle(`:where(${isSelected}) ${container}[data-edge-hovered='true']`, {
 // })
 
 globalStyle(`.react-flow__edges > svg`, {
-  mixBlendMode: 'screen'
+  mixBlendMode: 'plus-lighter'
 })
 
 // globalStyle(`:where([data-mantine-color-scheme="light"]) .react-flow__edges > svg`, {
@@ -63,7 +63,7 @@ globalStyle(`.react-flow__edges > svg`, {
 export const dimmed = style({})
 
 globalStyle(`.react-flow__edges > svg:has(${dimmed})`, {
-  opacity: 0.8,
+  opacity: 0.6,
   transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
   transitionDelay: '200ms',
   filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
@@ -117,11 +117,11 @@ export const controlPoint = style({
 })
 
 export const controlDragging = style({
-  cursor: 'grabbing'
+  cursor: 'grab'
 })
 
 globalStyle(`${controlDragging} *`, {
-  cursor: 'grabbing'
+  cursor: 'grab'
 })
 
 const strokeKeyframes = keyframes({
@@ -174,7 +174,7 @@ export const edgeLabel = style({
   cursor: 'pointer',
   width: 'fit-content',
   transformOrigin: '50% 50%',
-  mixBlendMode: 'screen',
+  mixBlendMode: 'plus-lighter',
   color: xyvars.edge.labelColor,
   backgroundColor: xyvars.edge.labelBgColor,
   borderRadius: 3,
@@ -188,7 +188,7 @@ export const edgeLabel = style({
       transform: `${varTranslate} scale(1.12)`
     },
     [`&:is(${dimmed})`]: {
-      opacity: 0.6,
+      opacity: 0.3,
       transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
       transitionDelay: '200ms',
       filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,

package/src/xyflow/hooks/useLayoutConstraints.ts

@@ -4,7 +4,7 @@ import type { InternalNode, ReactFlowProps, XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { useMemo, useRef } from 'react'
 import { isNullish } from 'remeda'
-import { useDiagramStoreApi } from '../../state/hooks'
+import { useDiagramStoreApi } from '../../state/useDiagramStore'
 import type { XYFlowInstance, XYFlowNode } from '../types'
 import { isSamePoint } from '../utils'
 import { useXYStoreApi, type XYStoreApi } from './useXYFlow'

package/src/xyflow/nodes/compound/CompoundNode.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
 import { memo } from 'react'
 import { clamp } from 'remeda'
-import { useDiagramState } from '../../../state/hooks'
+import { useDiagramState } from '../../../state/useDiagramStore'
 import type { CompoundXYFlowNode } from '../../types'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
 import * as css from './CompoundNode.css'

package/src/xyflow/nodes/element/ElementLink.tsx

@@ -16,7 +16,8 @@ import { IconLink } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { useId } from 'react'
 import { clamp } from 'remeda'
-import { type DiagramState, useDiagramState } from '../../../state/hooks'
+import { type DiagramState } from '../../../state/diagramStore'
+import { useDiagramState } from '../../../state/useDiagramStore'
 import type { XYFlowNode } from '../../types'
 import { elementLink, trigger } from './ElementLink.css'
 

package/src/xyflow/nodes/element/ElementNode.tsx

@@ -1,19 +1,23 @@
-import { Text } from '@mantine/core'
+import type { DiagramNode } from '@likec4/core/types'
+import { Text as MantineText } from '@mantine/core'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
 import { m, type Variants } from 'framer-motion'
 import { memo } from 'react'
-import { isNumber } from 'remeda'
-import { useDiagramState } from '../../../state/hooks'
+import { isNumber, isTruthy } from 'remeda'
+import { type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../../../state/useDiagramStore'
 import type { ElementXYFlowNode } from '../../types'
 import { toDomPrecision } from '../../utils'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
 import * as css from './element.css'
-import { ElementIcon } from './ElementIcon'
 import { ElementLink } from './ElementLink'
 import { ElementShapeSvg, SelectedIndicator } from './ElementShapeSvg'
 
+const Text = MantineText.withProps({
+  component: 'div'
+})
+
 type ElementNodeProps = NodeProps<ElementXYFlowNode>
 
 const selectedScale = 1.015
@@ -67,7 +71,7 @@ const isEqualProps = (prev: ElementNodeProps, next: ElementNodeProps) => (
   prev.id === next.id
   && eq(prev.selected ?? false, next.selected ?? false)
   && eq(prev.dragging ?? false, next.dragging ?? false)
-  && eq(prev.draggable ?? false, next.draggable ?? false)
+  // && eq(prev.draggable ?? false, next.draggable ?? false)
   && eq(prev.width ?? 0, next.width ?? 0)
   && eq(prev.height ?? 0, next.height ?? 0)
   && eq(prev.data.element, next.data.element)
@@ -84,6 +88,7 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   width,
   height
 }) {
+  const store = useDiagramStoreApi()
   const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState(s => ({
     isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
@@ -116,7 +121,7 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
       break
   }
 
-  // useTilg(animate, isHovered, isInteractive)
+  const elementIcon = ElementIcon({ node: element, store })
 
   return (
     <>
@@ -143,6 +148,22 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
           whileTap: dragging ? animate : 'tap'
         })}
       >
+        {
+          /* <svg
+          className={clsx(
+            css.cssShapeSvgMultiple
+          )}
+          viewBox={`0 0 ${w} ${h}`}
+          width={w}
+          height={h}
+        >
+          <ElementShapeSvg
+            shape={element.shape}
+            w={w}
+            h={h}
+          />
+        </svg> */
+        }
         <svg
           className={clsx(
             css.cssShapeSvg
@@ -164,27 +185,32 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
             h={h}
           />
         </svg>
-        <div className={clsx(css.element, 'likec4-element')}>
-          <ElementIcon node={element} />
-          <Text
-            component="div"
-            className={clsx(css.title, 'likec4-element-title')}>
-            {element.title}
-          </Text>
-          {element.technology && (
-            <Text
-              component="div"
-              className={clsx(css.technology, 'likec4-element-technology')}>
-              {element.technology}
-            </Text>
+        <div
+          className={clsx(
+            css.elementDataContainer,
+            isTruthy(elementIcon) && css.hasIcon,
+            'likec4-element'
           )}
-          {element.description && (
+        >
+          {elementIcon}
+          <div className={clsx(css.elementTextData, 'likec4-element-main-props')}>
             <Text
-              component="div"
-              className={clsx(css.description, 'likec4-element-description')}>
-              {element.description}
+              className={clsx(css.title, 'likec4-element-title')}>
+              {element.title}
             </Text>
-          )}
+            {element.technology && (
+              <Text
+                className={clsx(css.technology, 'likec4-element-technology')}>
+                {element.technology}
+              </Text>
+            )}
+            {element.description && (
+              <Text
+                className={clsx(css.description, 'likec4-element-description')}>
+                {element.description}
+              </Text>
+            )}
+          </div>
         </div>
         {isHovercards && element.links && <ElementLink element={element} />}
         {isNavigable && <NavigateToBtn xynodeId={id} className={css.cssNavigateBtn} />}
@@ -197,3 +223,26 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     </>
   )
 }, isEqualProps)
+
+const ElementIcon = ({ node, store }: { node: DiagramNode; store: DiagramStoreApi }) => {
+  if (!node.icon) {
+    return null
+  }
+  if (node.icon.startsWith('http://') || node.icon.startsWith('https://')) {
+    return (
+      <div className={clsx(css.elementIcon, 'likec4-element-icon')}>
+        <img src={node.icon} alt={node.title} />
+      </div>
+    )
+  }
+  const RenderIcon = store.getState().renderIcon
+  const icon = RenderIcon ? <RenderIcon node={node} /> : null
+  if (!icon) {
+    return null
+  }
+  return (
+    <div className={clsx(css.elementIcon, 'likec4-element-icon')}>
+      {icon}
+    </div>
+  )
+}

package/src/xyflow/nodes/element/ElementShapeSvg.tsx

@@ -2,7 +2,7 @@ import { type ElementShape, nonexhaustive } from '@likec4/core'
 import { toDomPrecision } from '../../utils'
 import { fillElementFill, fillMixStroke } from './element.css'
 
-function cylinderSVGPath(diameter: number, height: number, tilt = 0.0725) {
+export function cylinderSVGPath(diameter: number, height: number, tilt = 0.065) {
   const radius = Math.round(diameter / 2)
   // const tiltAdjustedHeight = height * Math.cos((tilt * Math.PI) / 2)
   const rx = radius
@@ -25,7 +25,7 @@ function cylinderSVGPath(diameter: number, height: number, tilt = 0.0725) {
   }
 }
 
-function queueSVGPath(width: number, height: number, tilt = 0.2) {
+function queueSVGPath(width: number, height: number, tilt = 0.185) {
   const diameter = height
   const radius = Math.round(diameter / 2)
   const ry = radius