@likec4/diagram 1.0.2 → 1.1.1

package/dist/ui/DiagramTitlePanel.css.d.ts

@@ -0,0 +1,4 @@
+export declare const container: string;
+export declare const paper: string;
+export declare const title: string;
+export declare const description: string;

package/dist/ui/DiagramTitlePanel.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function DiagramTitlePanel(): JSX.Element;

package/dist/ui/OptionsPanel.d.ts

@@ -1,3 +1,2 @@
 /// <reference types="react" />
-declare const OptionsPanelMemo: import('react').NamedExoticComponent<object>;
-export default OptionsPanelMemo;
+export default function OptionsPanel(): JSX.Element;

package/dist/ui/index.d.ts

@@ -1,2 +1 @@
-export { KeepAspectRatio } from './KeepAspectRatio';
 export { default as OptionsPanel } from './OptionsPanel';

package/dist/xyflow/SelectEdgesOnNodeFocus.d.ts

@@ -0,0 +1 @@
+export declare function SelectEdgesOnNodeFocus(): null;

package/dist/xyflow/{XYFlowWrapper.d.ts → XYFlow.d.ts}

@@ -3,12 +3,12 @@ import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
 import { SetNonNullable, Simplify } from 'type-fest';
 import { CSSProperties, PropsWithChildren } from 'react';
 
-type OnlyExpectedProps = Required<Pick<LikeC4DiagramProperties, 'className' | 'controls' | 'pannable' | 'zoomable' | 'background'>>;
+type OnlyExpectedProps = Required<Pick<LikeC4DiagramProperties, 'className' | 'controls' | 'background'>>;
 type XYFlowWrapperProps = Simplify<PropsWithChildren<SetNonNullable<OnlyExpectedProps> & {
     defaultNodes: XYFlowNode[];
     defaultEdges: XYFlowEdge[];
     style?: CSSProperties | undefined;
 }>>;
-declare function XYFlowWrapper({ className, children, defaultNodes, defaultEdges, pannable, zoomable, controls, background, style }: XYFlowWrapperProps): JSX.Element;
+declare function XYFlowWrapper({ className, children, defaultNodes, defaultEdges, controls, background, style }: XYFlowWrapperProps): JSX.Element;
 export declare const XYFlow: typeof XYFlowWrapper;
 export {};

package/dist/xyflow/XYFlowEvents.d.ts

@@ -1,15 +1,135 @@
-import { XYFlowEdge, XYFlowNode } from './types';
-import { MouseEvent as ReactMouseEvent } from 'react';
-import { EdgeMouseHandler, NodeMouseHandler, OnMoveEnd } from '@xyflow/react';
+import { XYFlowNode } from './types';
 
-type XYFlowEventHandlers = {
-    onPaneClick: (event: ReactMouseEvent) => void;
-    onNodeContextMenu: NodeMouseHandler<XYFlowNode>;
-    onEdgeContextMenu: EdgeMouseHandler<XYFlowEdge>;
-    onPaneContextMenu: (event: ReactMouseEvent | MouseEvent) => void;
-    onNodeClick: NodeMouseHandler<XYFlowNode>;
-    onEdgeClick: EdgeMouseHandler<XYFlowEdge>;
-    onMoveEnd: OnMoveEnd;
+export declare function useXYFlowEvents(): {
+    onDoubleClick: (event: import('react').MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onPaneClick: (event: import('react').MouseEvent<Element, MouseEvent>) => void;
+    onNodeContextMenu: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
+    onPaneContextMenu: (event: MouseEvent | import('react').MouseEvent<Element, MouseEvent>) => void;
+    onEdgeContextMenu: (event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
+        source: string;
+        target: string;
+        style?: import('react').CSSProperties;
+        id: string;
+        zIndex?: number;
+        markerEnd?: import('@xyflow/react').EdgeMarkerType;
+        markerStart?: import('@xyflow/react').EdgeMarkerType;
+        hidden?: boolean;
+        className?: string;
+        label?: import('react').ReactNode;
+        selected?: boolean;
+        selectable?: boolean;
+        deletable?: boolean;
+        ariaLabel?: string;
+        focusable?: boolean;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        interactionWidth?: number;
+        labelStyle?: import('react').CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: import('react').CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        data: import('./types').RelationshipData;
+        type: "relationship";
+    }) => void;
+    onNodeClick: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
+    onNodeDoubleClick: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
+    onEdgeClick: (event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
+        source: string;
+        target: string;
+        style?: import('react').CSSProperties;
+        id: string;
+        zIndex?: number;
+        markerEnd?: import('@xyflow/react').EdgeMarkerType;
+        markerStart?: import('@xyflow/react').EdgeMarkerType;
+        hidden?: boolean;
+        className?: string;
+        label?: import('react').ReactNode;
+        selected?: boolean;
+        selectable?: boolean;
+        deletable?: boolean;
+        ariaLabel?: string;
+        focusable?: boolean;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        interactionWidth?: number;
+        labelStyle?: import('react').CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: import('react').CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        data: import('./types').RelationshipData;
+        type: "relationship";
+    }) => void;
+    onMoveEnd: (event: MouseEvent | TouchEvent | null, _viewport: import('@xyflow/react').Viewport) => void;
+    onNodeMouseEnter: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
+    onNodeMouseLeave: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
+    onEdgeMouseEnter: (event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
+        source: string;
+        target: string;
+        style?: import('react').CSSProperties;
+        id: string;
+        zIndex?: number;
+        markerEnd?: import('@xyflow/react').EdgeMarkerType;
+        markerStart?: import('@xyflow/react').EdgeMarkerType;
+        hidden?: boolean;
+        className?: string;
+        label?: import('react').ReactNode;
+        selected?: boolean;
+        selectable?: boolean;
+        deletable?: boolean;
+        ariaLabel?: string;
+        focusable?: boolean;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        interactionWidth?: number;
+        labelStyle?: import('react').CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: import('react').CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        data: import('./types').RelationshipData;
+        type: "relationship";
+    }) => void;
+    onEdgeMouseLeave: (event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
+        source: string;
+        target: string;
+        style?: import('react').CSSProperties;
+        id: string;
+        zIndex?: number;
+        markerEnd?: import('@xyflow/react').EdgeMarkerType;
+        markerStart?: import('@xyflow/react').EdgeMarkerType;
+        hidden?: boolean;
+        className?: string;
+        label?: import('react').ReactNode;
+        selected?: boolean;
+        selectable?: boolean;
+        deletable?: boolean;
+        ariaLabel?: string;
+        focusable?: boolean;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        interactionWidth?: number;
+        labelStyle?: import('react').CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: import('react').CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        data: import('./types').RelationshipData;
+        type: "relationship";
+    }) => void;
+    /**
+     * WOKAROUND:
+     * Viewport transform is not rounded to integers which results in blurry nodes on some resolution
+     * https://github.com/xyflow/xyflow/issues/3282
+     */
+    onViewportChange: ({ x, y, zoom }: import('@xyflow/react').Viewport) => void;
 };
-export declare function useXYFlowEvents(): XYFlowEventHandlers;
-export {};

package/dist/xyflow/edges/RelationshipEdge.d.ts

@@ -10,13 +10,13 @@ export declare const RelationshipEdge: import('react').NamedExoticComponent<Edge
     markerEnd?: import("@xyflow/react").EdgeMarkerType;
     markerStart?: import("@xyflow/react").EdgeMarkerType;
     hidden?: boolean;
+    className?: string;
+    label?: import("react").ReactNode;
     selected?: boolean;
     selectable?: boolean;
     deletable?: boolean;
     ariaLabel?: string;
-    className?: string;
     focusable?: boolean;
-    label?: import("react").ReactNode;
     sourceHandle?: string | null;
     targetHandle?: string | null;
     animated?: boolean;

package/dist/xyflow/edges/edges.css.d.ts

@@ -1,6 +1,7 @@
 export declare const container: string;
 export declare const edgePathBg: string;
 export declare const fillStrokeCtx: string;
+export declare const controlPoint: string;
 export declare const cssEdgePath: string;
 export declare const varLabelX: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const varLabelY: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/xyflow/hooks/useXYFlow.d.ts

@@ -9,13 +9,13 @@ export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<
     markerEnd?: import("@xyflow/react").EdgeMarkerType;
     markerStart?: import("@xyflow/react").EdgeMarkerType;
     hidden?: boolean;
+    className?: string;
+    label?: import("react").ReactNode;
     selected?: boolean;
     selectable?: boolean;
     deletable?: boolean;
     ariaLabel?: string;
-    className?: string;
     focusable?: boolean;
-    label?: import("react").ReactNode;
     sourceHandle?: string | null;
     targetHandle?: string | null;
     animated?: boolean;
@@ -30,8 +30,8 @@ export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<
     type: "relationship";
 }>;
 export declare const useXYNodesData: {
-    (nodeId: string): Pick<XYFlowNode, "id" | "type" | "data"> | null;
-    (nodeIds: string[]): Pick<XYFlowNode, "id" | "type" | "data">[];
+    (nodeId: string): Pick<XYFlowNode, "id" | "data" | "type"> | null;
+    (nodeIds: string[]): Pick<XYFlowNode, "id" | "data" | "type">[];
 };
 export declare function useXYStore<StateSlice = unknown>(selector: (state: XYFlowState) => StateSlice, equalityFn?: (a: StateSlice, b: StateSlice) => boolean): StateSlice;
 export declare const useXYStoreApi: () => {
@@ -44,13 +44,13 @@ export declare const useXYStoreApi: () => {
         markerEnd?: import("@xyflow/react").EdgeMarkerType;
         markerStart?: import("@xyflow/react").EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import("react").ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;
@@ -73,13 +73,13 @@ export declare const useXYStoreApi: () => {
         markerEnd?: import("@xyflow/react").EdgeMarkerType;
         markerStart?: import("@xyflow/react").EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import("react").ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;
@@ -101,13 +101,13 @@ export declare const useXYStoreApi: () => {
         markerEnd?: import("@xyflow/react").EdgeMarkerType;
         markerStart?: import("@xyflow/react").EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import("react").ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;
@@ -129,13 +129,13 @@ export declare const useXYStoreApi: () => {
         markerEnd?: import("@xyflow/react").EdgeMarkerType;
         markerStart?: import("@xyflow/react").EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import("react").ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;
@@ -157,13 +157,13 @@ export declare const useXYStoreApi: () => {
         markerEnd?: import("@xyflow/react").EdgeMarkerType;
         markerStart?: import("@xyflow/react").EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import("react").ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;
@@ -185,13 +185,13 @@ export declare const useXYStoreApi: () => {
         markerEnd?: import("@xyflow/react").EdgeMarkerType;
         markerStart?: import("@xyflow/react").EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import("react").ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;
@@ -214,13 +214,13 @@ export declare const useXYStoreApi: () => {
         markerEnd?: import("@xyflow/react").EdgeMarkerType;
         markerStart?: import("@xyflow/react").EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import("react").ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;
@@ -242,13 +242,13 @@ export declare const useXYStoreApi: () => {
         markerEnd?: import("@xyflow/react").EdgeMarkerType;
         markerStart?: import("@xyflow/react").EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import("react").ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;

package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts

@@ -1,5 +1,7 @@
-export declare const cssContainer: string;
-export declare const cssCompound: string;
-export declare const cssTitle: string;
-export declare const cssIndicator: string;
-export declare const cssNavigateBtn: string;
+export declare const container: string;
+export declare const varTransparency: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const compoundBody: string;
+export declare const transparent: string;
+export declare const title: string;
+export declare const indicator: string;
+export declare const navigateBtn: string;

package/dist/xyflow/types.d.ts

@@ -48,13 +48,13 @@ export declare namespace XYFlowEdge {
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import('react').ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import('react').ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -50,8 +50,9 @@
     "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.0.2",
+    "@likec4/core": "1.1.1",
     "@react-hookz/web": "^24.0.4",
+    "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
     "framer-motion": "^11.2.2",
@@ -70,6 +71,7 @@
     "@mantine/hooks": "^7.9.2",
     "@mantine/vanilla-extract": "^7.9.2",
     "@total-typescript/ts-reset": "^0.5.1",
+    "@types/d3-shape": "^3",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.4",
     "@vanilla-extract/css": "^1.15.1",
@@ -78,7 +80,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@xyflow/react": "^12.0.0-next",
     "clsx": "^2.1.1",
-    "execa": "^8.0.1",
+    "execa": "^9.1.0",
     "khroma": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/{ui/KeepAspectRatio.tsx → KeepAspectRatioContainer.tsx}

@@ -1,15 +1,16 @@
 import { Box } from '@mantine/core'
 import clsx from 'clsx'
-import type { HTMLAttributes } from 'react'
-import { wrapper } from './KeepAspectRatio.css'
+import { type HTMLAttributes, useId } from 'react'
+import * as css from './LikeC4Diagram.css'
 
-type KeepAspectRatioProps = HTMLAttributes<HTMLDivElement> & {
+type KeepAspectRatioContainerProps = HTMLAttributes<HTMLDivElement> & {
+  // Whether to keep the aspect ratio
   enabled: boolean
   width: number
   height: number
 }
 
-export function KeepAspectRatio({
+export function KeepAspectRatioContainer({
   children,
   width,
   height,
@@ -17,11 +18,11 @@ export function KeepAspectRatio({
   className,
   style,
   ...rest
-}: KeepAspectRatioProps) {
+}: KeepAspectRatioContainerProps) {
   return (
     <Box
       {...rest}
-      className={clsx(wrapper, className)}
+      className={clsx(css.keepAspectRatioContainer, className)}
       style={enabled
         ? {
           ...style,

package/src/LikeC4Diagram.css.ts

@@ -1,6 +1,12 @@
 import { globalStyle, style } from '@vanilla-extract/css'
 import { vars, xyvars } from './theme.css'
 
+export const keepAspectRatioContainer = style({
+  width: '100%',
+  height: '100%',
+  padding: 0
+})
+
 export const cssReactFlow = style({})
 
 globalStyle(`.react-flow${cssReactFlow}`, {
@@ -10,7 +16,8 @@ globalStyle(`.react-flow${cssReactFlow}`, {
   }
 })
 globalStyle(`.react-flow${cssReactFlow} .react-flow__viewport`, {
-  willChange: 'transform'
+  // willChange: 'transform'
+  backfaceVisibility: 'hidden'
 })
 
 export const cssDisablePan = style({})

package/src/LikeC4Diagram.props.ts

@@ -1,4 +1,5 @@
 import type {
+  BorderStyle,
   DiagramEdge,
   DiagramNode,
   DiagramView,
@@ -10,8 +11,8 @@ import type {
 } from '@likec4/core'
 import type { MouseEvent as ReactMouseEvent } from 'react'
 import type { SetRequired, Simplify } from 'type-fest'
-import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
 import type { XYBackgroundProps } from './xyflow/XYFlowBackground'
+import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
 
 export type DiagramNodeWithNavigate = Simplify<SetRequired<DiagramNode, 'navigateTo'>>
 
@@ -44,22 +45,20 @@ export type OnEdgeClick = (
 export type OnCanvasClick = (event: ReactMouseEvent) => void
 
 export namespace Changes {
-  export interface ChangeColor {
-    op: 'change-color'
-    color: ThemeColor
-    targets: NonEmptyArray<Fqn>
-  }
-
-  export interface ChangeShape {
-    op: 'change-shape'
-    shape: ElementShape
+  export interface ChangeElementStyle {
+    op: 'change-element-style'
+    style: {
+      border?: BorderStyle
+      opacity?: number
+      shape?: ElementShape
+      color?: ThemeColor
+    }
     targets: NonEmptyArray<Fqn>
   }
 }
 
 export type Change =
-  | Changes.ChangeColor
-  | Changes.ChangeShape
+  | Changes.ChangeElementStyle
 
 export type ChangeEvent = {
   changes: NonEmptyArray<Change>
@@ -139,6 +138,12 @@ export interface LikeC4DiagramProperties {
    * @default true
    */
   showElementLinks?: boolean | undefined
+
+  /**
+   * Display panel with diagram title / description
+   * @default true
+   */
+  showDiagramTitle?: boolean | undefined
 }
 
 export interface LikeC4DiagramEventHandlers {

package/src/LikeC4Diagram.tsx

@@ -2,18 +2,19 @@ import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
 import { useRef } from 'react'
 import { rootClassName } from './globals.css'
+import { KeepAspectRatioContainer } from './KeepAspectRatioContainer'
 import { cssDisablePan, cssNoControls, cssReactFlow, cssTransparentBg } from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { EnsureMantine } from './mantine/EnsureMantine'
 import { DiagramContextProvider } from './state/DiagramContext'
 import { WhenInitialized } from './state/WhenInitialized'
-import { KeepAspectRatio } from './ui/KeepAspectRatio'
+import DiagramTitlePanel from './ui/DiagramTitlePanel'
 import OptionsPanel from './ui/OptionsPanel'
 import { diagramViewToXYFlowData } from './xyflow/diagram-to-xyflow'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
 import { SyncWithDiagram } from './xyflow/SyncWithDiagram'
 import type { XYFlowData } from './xyflow/types'
-import { XYFlow } from './xyflow/XYFlowWrapper'
+import { XYFlow } from './xyflow/XYFlow'
 
 export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers
 export function LikeC4Diagram({
@@ -29,6 +30,7 @@ export function LikeC4Diagram({
   background = 'dots',
   controls = false,
   showElementLinks = true,
+  showDiagramTitle = true,
   initialWidth,
   initialHeight,
   keepAspectRatio = false,
@@ -69,6 +71,8 @@ export function LikeC4Diagram({
         <DiagramContextProvider
           view={view}
           readonly={readonly}
+          pannable={pannable}
+          zoomable={zoomable}
           fitViewEnabled={fitView}
           fitViewPadding={fitViewPadding}
           showElementLinks={showElementLinks}
@@ -84,7 +88,7 @@ export function LikeC4Diagram({
           onNavigateTo={onNavigateTo}
           onCanvasDblClick={onCanvasDblClick}
         >
-          <KeepAspectRatio
+          <KeepAspectRatioContainer
             className={clsx(rootClassName, className)}
             enabled={keepAspectRatio}
             width={view.width}
@@ -102,12 +106,11 @@ export function LikeC4Diagram({
               controls={controls}
               defaultNodes={initialRef.current.defaultNodes}
               defaultEdges={initialRef.current.defaultEdges}
-              pannable={pannable}
-              zoomable={zoomable}
             >
               {readonly !== true && <OptionsPanel />}
+              {showDiagramTitle === true && <DiagramTitlePanel />}
             </XYFlow>
-          </KeepAspectRatio>
+          </KeepAspectRatioContainer>
           <WhenInitialized>
             <SyncWithDiagram />
             <FitViewOnDiagramChange />

package/src/StaticLikeC4Diagram.tsx

@@ -31,6 +31,7 @@ export function StaticLikeC4Diagram({
       controls={false}
       background={background}
       showElementLinks
+      showDiagramTitle={false}
       nodesSelectable={false}
       nodesDraggable={false}
       {...rest}