@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/templates/sequence/data/template-data.ts

@@ -1,635 +1,635 @@
-import {
-  SequenceTemplateData,
-  SequenceNode,
-  SequenceEdge,
-  SequenceEntityNode,
-  ActivationBarNode,
-  CombinedFragmentNode,
-  SequenceEntityData,
-  ActivationBarData,
-  CombinedFragmentData,
-  SequenceMessageData,
-} from '../../../types/sequence-types';
-import { Node, Edge } from '@xyflow/react';
-
-export const getTemplateData = (templateType: string): SequenceTemplateData => {
-  switch (templateType) {
-    case 'client-server':
-      return {
-        nodes: [
-          // Client entity
-          {
-            id: 'client',
-            type: 'sequenceEntity',
-            position: { x: 100, y: 50 },
-            data: {
-              label: 'Client',
-              color: '#0066cc',
-              backgroundColor: '#e6f0ff',
-              lifelineLength: 500,
-              shape: 'rectangle',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'Web Browser',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // Server entity
-          {
-            id: 'server',
-            type: 'sequenceEntity',
-            position: { x: 350, y: 50 },
-            data: {
-              label: 'Server',
-              color: '#009900',
-              backgroundColor: '#e6ffe6',
-              lifelineLength: 500,
-              shape: 'rectangle',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'API Server',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // Client activation
-          {
-            id: 'client-activation',
-            type: 'activationBar',
-            position: { x: 155, y: 150 },
-            data: {
-              entityId: 'client',
-              color: '#e6f0ff',
-              borderColor: '#0066cc',
-              length: 300,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // Server activation
-          {
-            id: 'server-activation',
-            type: 'activationBar',
-            position: { x: 405, y: 180 },
-            data: {
-              entityId: 'server',
-              color: '#e6ffe6',
-              borderColor: '#009900',
-              length: 200,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-        ] as SequenceNode[],
-        edges: [
-          // Request message
-          {
-            id: 'request-edge',
-            source: 'client',
-            target: 'server',
-            type: 'sequenceMessage',
-            sourceHandle: 'right',
-            targetHandle: 'left',
-            data: {
-              label: 'HTTP Request',
-              type: 'sync',
-              y: 150,
-            },
-            animated: false,
-          },
-          // Response message
-          {
-            id: 'response-edge',
-            source: 'server',
-            target: 'client',
-            type: 'sequenceMessage',
-            sourceHandle: 'left',
-            targetHandle: 'right',
-            data: {
-              label: 'HTTP Response',
-              type: 'return',
-              y: 350,
-            },
-            animated: false,
-          },
-        ] as SequenceEdge[],
-      };
-
-    case 'authentication':
-      return {
-        nodes: [
-          // User entity
-          {
-            id: 'user',
-            type: 'sequenceEntity',
-            position: { x: 100, y: 50 },
-            data: {
-              label: 'User',
-              color: '#0066cc',
-              backgroundColor: '#e6f0ff',
-              lifelineLength: 600,
-              shape: 'actor',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'End User',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // Auth Client entity
-          {
-            id: 'client',
-            type: 'sequenceEntity',
-            position: { x: 300, y: 50 },
-            data: {
-              label: 'Client App',
-              color: '#8800cc',
-              backgroundColor: '#f5e6ff',
-              lifelineLength: 600,
-              shape: 'roundedBox',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'Frontend',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // Auth Server entity
-          {
-            id: 'auth',
-            type: 'sequenceEntity',
-            position: { x: 500, y: 50 },
-            data: {
-              label: 'Auth Server',
-              color: '#009900',
-              backgroundColor: '#e6ffe6',
-              lifelineLength: 600,
-              shape: 'rectangle',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'Authentication Service',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // Database entity
-          {
-            id: 'db',
-            type: 'sequenceEntity',
-            position: { x: 700, y: 50 },
-            data: {
-              label: 'Database',
-              color: '#cc0000',
-              backgroundColor: '#ffe6e6',
-              lifelineLength: 600,
-              shape: 'database',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'User Database',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // Client activation
-          {
-            id: 'client-activation',
-            type: 'activationBar',
-            position: { x: 355, y: 150 },
-            data: {
-              entityId: 'client',
-              color: '#f5e6ff',
-              borderColor: '#8800cc',
-              length: 400,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // Auth Server activation
-          {
-            id: 'auth-activation',
-            type: 'activationBar',
-            position: { x: 555, y: 180 },
-            data: {
-              entityId: 'auth',
-              color: '#e6ffe6',
-              borderColor: '#009900',
-              length: 300,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // Database activation
-          {
-            id: 'db-activation',
-            type: 'activationBar',
-            position: { x: 755, y: 230 },
-            data: {
-              entityId: 'db',
-              color: '#ffe6e6',
-              borderColor: '#cc0000',
-              length: 100,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // Alt Fragment
-          {
-            id: 'alt-fragment',
-            type: 'combinedFragment',
-            position: { x: 280, y: 350 },
-            style: { width: 500, height: 150 },
-            data: {
-              label: 'alt',
-              conditions: ['[valid credentials]', '[invalid credentials]'],
-              style: {
-                width: 500,
-                height: 150,
-              },
-              color: '#000000',
-              backgroundColor: '#ffffff',
-              lifelineLength: 0,
-            },
-            draggable: true,
-            zIndex: 0,
-          },
-        ] as SequenceNode[],
-        edges: [
-          // Login message
-          {
-            id: 'login-edge',
-            source: 'user',
-            target: 'client',
-            type: 'sequenceMessage',
-            sourceHandle: 'right',
-            targetHandle: 'left',
-            data: {
-              label: 'Login(username, password)',
-              type: 'sync',
-              y: 150,
-            },
-            animated: false,
-          },
-          // Auth request
-          {
-            id: 'auth-request-edge',
-            source: 'client',
-            target: 'auth',
-            type: 'sequenceMessage',
-            sourceHandle: 'right',
-            targetHandle: 'left',
-            data: {
-              label: 'Authenticate(creds)',
-              type: 'sync',
-              y: 180,
-            },
-            animated: false,
-          },
-          // DB query
-          {
-            id: 'db-query-edge',
-            source: 'auth',
-            target: 'db',
-            type: 'sequenceMessage',
-            sourceHandle: 'right',
-            targetHandle: 'left',
-            data: {
-              label: 'QueryUser(username)',
-              type: 'sync',
-              y: 230,
-            },
-            animated: false,
-          },
-          // DB response
-          {
-            id: 'db-response-edge',
-            source: 'db',
-            target: 'auth',
-            type: 'sequenceMessage',
-            sourceHandle: 'left',
-            targetHandle: 'right',
-            data: {
-              label: 'UserData',
-              type: 'return',
-              y: 310,
-            },
-            animated: false,
-          },
-          // Auth success
-          {
-            id: 'auth-success-edge',
-            source: 'auth',
-            target: 'client',
-            type: 'sequenceMessage',
-            sourceHandle: 'left',
-            targetHandle: 'right',
-            data: {
-              label: 'Token',
-              type: 'return',
-              y: 380,
-            },
-            animated: false,
-          },
-          // Login success
-          {
-            id: 'login-success-edge',
-            source: 'client',
-            target: 'user',
-            type: 'sequenceMessage',
-            sourceHandle: 'left',
-            targetHandle: 'right',
-            data: {
-              label: 'Login Success',
-              type: 'return',
-              y: 450,
-            },
-            animated: false,
-          },
-        ] as SequenceEdge[],
-      };
-
-    case 'database-transaction':
-      return {
-        nodes: [
-          // App entity
-          {
-            id: 'app',
-            type: 'sequenceEntity',
-            position: { x: 100, y: 50 },
-            data: {
-              label: 'Application',
-              color: '#0066cc',
-              backgroundColor: '#e6f0ff',
-              lifelineLength: 700,
-              shape: 'rectangle',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'Backend Service',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // DB Service entity
-          {
-            id: 'db-service',
-            type: 'sequenceEntity',
-            position: { x: 350, y: 50 },
-            data: {
-              label: 'DB Service',
-              color: '#009900',
-              backgroundColor: '#e6ffe6',
-              lifelineLength: 700,
-              shape: 'rectangle',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'Database Service',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // Database entity
-          {
-            id: 'db',
-            type: 'sequenceEntity',
-            position: { x: 600, y: 50 },
-            data: {
-              label: 'Database',
-              color: '#cc0000',
-              backgroundColor: '#ffe6e6',
-              lifelineLength: 700,
-              shape: 'database',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'SQL Database',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // App activation
-          {
-            id: 'app-activation',
-            type: 'activationBar',
-            position: { x: 155, y: 150 },
-            data: {
-              entityId: 'app',
-              color: '#e6f0ff',
-              borderColor: '#0066cc',
-              length: 500,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // DB Service activation
-          {
-            id: 'db-service-activation',
-            type: 'activationBar',
-            position: { x: 405, y: 180 },
-            data: {
-              entityId: 'db-service',
-              color: '#e6ffe6',
-              borderColor: '#009900',
-              length: 430,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // Database activation 1
-          {
-            id: 'db-activation-1',
-            type: 'activationBar',
-            position: { x: 655, y: 230 },
-            data: {
-              entityId: 'db',
-              color: '#ffe6e6',
-              borderColor: '#cc0000',
-              length: 50,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // Database activation 2
-          {
-            id: 'db-activation-2',
-            type: 'activationBar',
-            position: { x: 655, y: 350 },
-            data: {
-              entityId: 'db',
-              color: '#ffe6e6',
-              borderColor: '#cc0000',
-              length: 70,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // Database activation 3
-          {
-            id: 'db-activation-3',
-            type: 'activationBar',
-            position: { x: 655, y: 470 },
-            data: {
-              entityId: 'db',
-              color: '#ffe6e6',
-              borderColor: '#cc0000',
-              length: 50,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // Transaction fragment
-          {
-            id: 'transaction-fragment',
-            type: 'combinedFragment',
-            position: { x: 320, y: 200 },
-            style: { width: 400, height: 350 },
-            data: {
-              label: 'transaction',
-              conditions: ['[begin transaction]'],
-              style: {
-                width: 400,
-                height: 350,
-              },
-              color: '#000000',
-              backgroundColor: '#ffffff',
-              lifelineLength: 0,
-            },
-            draggable: true,
-            zIndex: 0,
-          },
-        ] as SequenceNode[],
-        edges: [
-          // Start transaction
-          {
-            id: 'transaction-edge',
-            source: 'app',
-            target: 'db-service',
-            type: 'sequenceMessage',
-            sourceHandle: 'right',
-            targetHandle: 'left',
-            data: {
-              label: 'StartTransaction()',
-              type: 'sync',
-              y: 150,
-            },
-            animated: false,
-          },
-          // Begin transaction
-          {
-            id: 'begin-transaction-edge',
-            source: 'db-service',
-            target: 'db',
-            type: 'sequenceMessage',
-            sourceHandle: 'right',
-            targetHandle: 'left',
-            data: {
-              label: 'BEGIN',
-              type: 'sync',
-              y: 230,
-            },
-            animated: false,
-          },
-          // Begin OK
-          {
-            id: 'begin-ok-edge',
-            source: 'db',
-            target: 'db-service',
-            type: 'sequenceMessage',
-            sourceHandle: 'left',
-            targetHandle: 'right',
-            data: {
-              label: 'OK',
-              type: 'return',
-              y: 270,
-            },
-            animated: false,
-          },
-          // Execute SQL
-          {
-            id: 'execute-sql-edge',
-            source: 'db-service',
-            target: 'db',
-            type: 'sequenceMessage',
-            sourceHandle: 'right',
-            targetHandle: 'left',
-            data: {
-              label: 'INSERT/UPDATE',
-              type: 'sync',
-              y: 350,
-            },
-            animated: false,
-          },
-          // SQL Result
-          {
-            id: 'sql-result-edge',
-            source: 'db',
-            target: 'db-service',
-            type: 'sequenceMessage',
-            sourceHandle: 'left',
-            targetHandle: 'right',
-            data: {
-              label: 'Result',
-              type: 'return',
-              y: 410,
-            },
-            animated: false,
-          },
-          // Commit
-          {
-            id: 'commit-edge',
-            source: 'db-service',
-            target: 'db',
-            type: 'sequenceMessage',
-            sourceHandle: 'right',
-            targetHandle: 'left',
-            data: {
-              label: 'COMMIT',
-              type: 'sync',
-              y: 470,
-            },
-            animated: false,
-          },
-          // Commit OK
-          {
-            id: 'commit-ok-edge',
-            source: 'db',
-            target: 'db-service',
-            type: 'sequenceMessage',
-            sourceHandle: 'left',
-            targetHandle: 'right',
-            data: {
-              label: 'OK',
-              type: 'return',
-              y: 510,
-            },
-            animated: false,
-          },
-          // Transaction Result
-          {
-            id: 'transaction-result-edge',
-            source: 'db-service',
-            target: 'app',
-            type: 'sequenceMessage',
-            sourceHandle: 'left',
-            targetHandle: 'right',
-            data: {
-              label: 'Transaction Success',
-              type: 'return',
-              y: 580,
-            },
-            animated: false,
-          },
-        ] as SequenceEdge[],
-      };
-
-    default:
-      return { nodes: [], edges: [] };
-  }
-};
+import {
+  SequenceTemplateData,
+  SequenceNode,
+  SequenceEdge,
+  SequenceEntityNode,
+  ActivationBarNode,
+  CombinedFragmentNode,
+  SequenceEntityData,
+  ActivationBarData,
+  CombinedFragmentData,
+  SequenceMessageData,
+} from '../../../types/sequence-types';
+import { Node, Edge } from '@xyflow/react';
+
+export const getTemplateData = (templateType: string): SequenceTemplateData => {
+  switch (templateType) {
+    case 'client-server':
+      return {
+        nodes: [
+          // Client entity
+          {
+            id: 'client',
+            type: 'sequenceEntity',
+            position: { x: 100, y: 50 },
+            data: {
+              label: 'Client',
+              color: '#0066cc',
+              backgroundColor: '#e6f0ff',
+              lifelineLength: 500,
+              shape: 'rectangle',
+              fontSize: 12,
+              borderWidth: 2,
+              description: 'Web Browser',
+              collapsed: false,
+            },
+            draggable: true,
+            zIndex: 5,
+          },
+          // Server entity
+          {
+            id: 'server',
+            type: 'sequenceEntity',
+            position: { x: 350, y: 50 },
+            data: {
+              label: 'Server',
+              color: '#009900',
+              backgroundColor: '#e6ffe6',
+              lifelineLength: 500,
+              shape: 'rectangle',
+              fontSize: 12,
+              borderWidth: 2,
+              description: 'API Server',
+              collapsed: false,
+            },
+            draggable: true,
+            zIndex: 5,
+          },
+          // Client activation
+          {
+            id: 'client-activation',
+            type: 'activationBar',
+            position: { x: 155, y: 150 },
+            data: {
+              entityId: 'client',
+              color: '#e6f0ff',
+              borderColor: '#0066cc',
+              length: 300,
+            },
+            draggable: true,
+            zIndex: 1,
+          },
+          // Server activation
+          {
+            id: 'server-activation',
+            type: 'activationBar',
+            position: { x: 405, y: 180 },
+            data: {
+              entityId: 'server',
+              color: '#e6ffe6',
+              borderColor: '#009900',
+              length: 200,
+            },
+            draggable: true,
+            zIndex: 1,
+          },
+        ] as SequenceNode[],
+        edges: [
+          // Request message
+          {
+            id: 'request-edge',
+            source: 'client',
+            target: 'server',
+            type: 'sequenceMessage',
+            sourceHandle: 'right',
+            targetHandle: 'left',
+            data: {
+              label: 'HTTP Request',
+              type: 'sync',
+              y: 150,
+            },
+            animated: false,
+          },
+          // Response message
+          {
+            id: 'response-edge',
+            source: 'server',
+            target: 'client',
+            type: 'sequenceMessage',
+            sourceHandle: 'left',
+            targetHandle: 'right',
+            data: {
+              label: 'HTTP Response',
+              type: 'return',
+              y: 350,
+            },
+            animated: false,
+          },
+        ] as SequenceEdge[],
+      };
+
+    case 'authentication':
+      return {
+        nodes: [
+          // User entity
+          {
+            id: 'user',
+            type: 'sequenceEntity',
+            position: { x: 100, y: 50 },
+            data: {
+              label: 'User',
+              color: '#0066cc',
+              backgroundColor: '#e6f0ff',
+              lifelineLength: 600,
+              shape: 'actor',
+              fontSize: 12,
+              borderWidth: 2,
+              description: 'End User',
+              collapsed: false,
+            },
+            draggable: true,
+            zIndex: 5,
+          },
+          // Auth Client entity
+          {
+            id: 'client',
+            type: 'sequenceEntity',
+            position: { x: 300, y: 50 },
+            data: {
+              label: 'Client App',
+              color: '#8800cc',
+              backgroundColor: '#f5e6ff',
+              lifelineLength: 600,
+              shape: 'roundedBox',
+              fontSize: 12,
+              borderWidth: 2,
+              description: 'Frontend',
+              collapsed: false,
+            },
+            draggable: true,
+            zIndex: 5,
+          },
+          // Auth Server entity
+          {
+            id: 'auth',
+            type: 'sequenceEntity',
+            position: { x: 500, y: 50 },
+            data: {
+              label: 'Auth Server',
+              color: '#009900',
+              backgroundColor: '#e6ffe6',
+              lifelineLength: 600,
+              shape: 'rectangle',
+              fontSize: 12,
+              borderWidth: 2,
+              description: 'Authentication Service',
+              collapsed: false,
+            },
+            draggable: true,
+            zIndex: 5,
+          },
+          // Database entity
+          {
+            id: 'db',
+            type: 'sequenceEntity',
+            position: { x: 700, y: 50 },
+            data: {
+              label: 'Database',
+              color: '#cc0000',
+              backgroundColor: '#ffe6e6',
+              lifelineLength: 600,
+              shape: 'database',
+              fontSize: 12,
+              borderWidth: 2,
+              description: 'User Database',
+              collapsed: false,
+            },
+            draggable: true,
+            zIndex: 5,
+          },
+          // Client activation
+          {
+            id: 'client-activation',
+            type: 'activationBar',
+            position: { x: 355, y: 150 },
+            data: {
+              entityId: 'client',
+              color: '#f5e6ff',
+              borderColor: '#8800cc',
+              length: 400,
+            },
+            draggable: true,
+            zIndex: 1,
+          },
+          // Auth Server activation
+          {
+            id: 'auth-activation',
+            type: 'activationBar',
+            position: { x: 555, y: 180 },
+            data: {
+              entityId: 'auth',
+              color: '#e6ffe6',
+              borderColor: '#009900',
+              length: 300,
+            },
+            draggable: true,
+            zIndex: 1,
+          },
+          // Database activation
+          {
+            id: 'db-activation',
+            type: 'activationBar',
+            position: { x: 755, y: 230 },
+            data: {
+              entityId: 'db',
+              color: '#ffe6e6',
+              borderColor: '#cc0000',
+              length: 100,
+            },
+            draggable: true,
+            zIndex: 1,
+          },
+          // Alt Fragment
+          {
+            id: 'alt-fragment',
+            type: 'combinedFragment',
+            position: { x: 280, y: 350 },
+            style: { width: 500, height: 150 },
+            data: {
+              label: 'alt',
+              conditions: ['[valid credentials]', '[invalid credentials]'],
+              style: {
+                width: 500,
+                height: 150,
+              },
+              color: '#000000',
+              backgroundColor: '#ffffff',
+              lifelineLength: 0,
+            },
+            draggable: true,
+            zIndex: 0,
+          },
+        ] as SequenceNode[],
+        edges: [
+          // Login message
+          {
+            id: 'login-edge',
+            source: 'user',
+            target: 'client',
+            type: 'sequenceMessage',
+            sourceHandle: 'right',
+            targetHandle: 'left',
+            data: {
+              label: 'Login(username, password)',
+              type: 'sync',
+              y: 150,
+            },
+            animated: false,
+          },
+          // Auth request
+          {
+            id: 'auth-request-edge',
+            source: 'client',
+            target: 'auth',
+            type: 'sequenceMessage',
+            sourceHandle: 'right',
+            targetHandle: 'left',
+            data: {
+              label: 'Authenticate(creds)',
+              type: 'sync',
+              y: 180,
+            },
+            animated: false,
+          },
+          // DB query
+          {
+            id: 'db-query-edge',
+            source: 'auth',
+            target: 'db',
+            type: 'sequenceMessage',
+            sourceHandle: 'right',
+            targetHandle: 'left',
+            data: {
+              label: 'QueryUser(username)',
+              type: 'sync',
+              y: 230,
+            },
+            animated: false,
+          },
+          // DB response
+          {
+            id: 'db-response-edge',
+            source: 'db',
+            target: 'auth',
+            type: 'sequenceMessage',
+            sourceHandle: 'left',
+            targetHandle: 'right',
+            data: {
+              label: 'UserData',
+              type: 'return',
+              y: 310,
+            },
+            animated: false,
+          },
+          // Auth success
+          {
+            id: 'auth-success-edge',
+            source: 'auth',
+            target: 'client',
+            type: 'sequenceMessage',
+            sourceHandle: 'left',
+            targetHandle: 'right',
+            data: {
+              label: 'Token',
+              type: 'return',
+              y: 380,
+            },
+            animated: false,
+          },
+          // Login success
+          {
+            id: 'login-success-edge',
+            source: 'client',
+            target: 'user',
+            type: 'sequenceMessage',
+            sourceHandle: 'left',
+            targetHandle: 'right',
+            data: {
+              label: 'Login Success',
+              type: 'return',
+              y: 450,
+            },
+            animated: false,
+          },
+        ] as SequenceEdge[],
+      };
+
+    case 'database-transaction':
+      return {
+        nodes: [
+          // App entity
+          {
+            id: 'app',
+            type: 'sequenceEntity',
+            position: { x: 100, y: 50 },
+            data: {
+              label: 'Application',
+              color: '#0066cc',
+              backgroundColor: '#e6f0ff',
+              lifelineLength: 700,
+              shape: 'rectangle',
+              fontSize: 12,
+              borderWidth: 2,
+              description: 'Backend Service',
+              collapsed: false,
+            },
+            draggable: true,
+            zIndex: 5,
+          },
+          // DB Service entity
+          {
+            id: 'db-service',
+            type: 'sequenceEntity',
+            position: { x: 350, y: 50 },
+            data: {
+              label: 'DB Service',
+              color: '#009900',
+              backgroundColor: '#e6ffe6',
+              lifelineLength: 700,
+              shape: 'rectangle',
+              fontSize: 12,
+              borderWidth: 2,
+              description: 'Database Service',
+              collapsed: false,
+            },
+            draggable: true,
+            zIndex: 5,
+          },
+          // Database entity
+          {
+            id: 'db',
+            type: 'sequenceEntity',
+            position: { x: 600, y: 50 },
+            data: {
+              label: 'Database',
+              color: '#cc0000',
+              backgroundColor: '#ffe6e6',
+              lifelineLength: 700,
+              shape: 'database',
+              fontSize: 12,
+              borderWidth: 2,
+              description: 'SQL Database',
+              collapsed: false,
+            },
+            draggable: true,
+            zIndex: 5,
+          },
+          // App activation
+          {
+            id: 'app-activation',
+            type: 'activationBar',
+            position: { x: 155, y: 150 },
+            data: {
+              entityId: 'app',
+              color: '#e6f0ff',
+              borderColor: '#0066cc',
+              length: 500,
+            },
+            draggable: true,
+            zIndex: 1,
+          },
+          // DB Service activation
+          {
+            id: 'db-service-activation',
+            type: 'activationBar',
+            position: { x: 405, y: 180 },
+            data: {
+              entityId: 'db-service',
+              color: '#e6ffe6',
+              borderColor: '#009900',
+              length: 430,
+            },
+            draggable: true,
+            zIndex: 1,
+          },
+          // Database activation 1
+          {
+            id: 'db-activation-1',
+            type: 'activationBar',
+            position: { x: 655, y: 230 },
+            data: {
+              entityId: 'db',
+              color: '#ffe6e6',
+              borderColor: '#cc0000',
+              length: 50,
+            },
+            draggable: true,
+            zIndex: 1,
+          },
+          // Database activation 2
+          {
+            id: 'db-activation-2',
+            type: 'activationBar',
+            position: { x: 655, y: 350 },
+            data: {
+              entityId: 'db',
+              color: '#ffe6e6',
+              borderColor: '#cc0000',
+              length: 70,
+            },
+            draggable: true,
+            zIndex: 1,
+          },
+          // Database activation 3
+          {
+            id: 'db-activation-3',
+            type: 'activationBar',
+            position: { x: 655, y: 470 },
+            data: {
+              entityId: 'db',
+              color: '#ffe6e6',
+              borderColor: '#cc0000',
+              length: 50,
+            },
+            draggable: true,
+            zIndex: 1,
+          },
+          // Transaction fragment
+          {
+            id: 'transaction-fragment',
+            type: 'combinedFragment',
+            position: { x: 320, y: 200 },
+            style: { width: 400, height: 350 },
+            data: {
+              label: 'transaction',
+              conditions: ['[begin transaction]'],
+              style: {
+                width: 400,
+                height: 350,
+              },
+              color: '#000000',
+              backgroundColor: '#ffffff',
+              lifelineLength: 0,
+            },
+            draggable: true,
+            zIndex: 0,
+          },
+        ] as SequenceNode[],
+        edges: [
+          // Start transaction
+          {
+            id: 'transaction-edge',
+            source: 'app',
+            target: 'db-service',
+            type: 'sequenceMessage',
+            sourceHandle: 'right',
+            targetHandle: 'left',
+            data: {
+              label: 'StartTransaction()',
+              type: 'sync',
+              y: 150,
+            },
+            animated: false,
+          },
+          // Begin transaction
+          {
+            id: 'begin-transaction-edge',
+            source: 'db-service',
+            target: 'db',
+            type: 'sequenceMessage',
+            sourceHandle: 'right',
+            targetHandle: 'left',
+            data: {
+              label: 'BEGIN',
+              type: 'sync',
+              y: 230,
+            },
+            animated: false,
+          },
+          // Begin OK
+          {
+            id: 'begin-ok-edge',
+            source: 'db',
+            target: 'db-service',
+            type: 'sequenceMessage',
+            sourceHandle: 'left',
+            targetHandle: 'right',
+            data: {
+              label: 'OK',
+              type: 'return',
+              y: 270,
+            },
+            animated: false,
+          },
+          // Execute SQL
+          {
+            id: 'execute-sql-edge',
+            source: 'db-service',
+            target: 'db',
+            type: 'sequenceMessage',
+            sourceHandle: 'right',
+            targetHandle: 'left',
+            data: {
+              label: 'INSERT/UPDATE',
+              type: 'sync',
+              y: 350,
+            },
+            animated: false,
+          },
+          // SQL Result
+          {
+            id: 'sql-result-edge',
+            source: 'db',
+            target: 'db-service',
+            type: 'sequenceMessage',
+            sourceHandle: 'left',
+            targetHandle: 'right',
+            data: {
+              label: 'Result',
+              type: 'return',
+              y: 410,
+            },
+            animated: false,
+          },
+          // Commit
+          {
+            id: 'commit-edge',
+            source: 'db-service',
+            target: 'db',
+            type: 'sequenceMessage',
+            sourceHandle: 'right',
+            targetHandle: 'left',
+            data: {
+              label: 'COMMIT',
+              type: 'sync',
+              y: 470,
+            },
+            animated: false,
+          },
+          // Commit OK
+          {
+            id: 'commit-ok-edge',
+            source: 'db',
+            target: 'db-service',
+            type: 'sequenceMessage',
+            sourceHandle: 'left',
+            targetHandle: 'right',
+            data: {
+              label: 'OK',
+              type: 'return',
+              y: 510,
+            },
+            animated: false,
+          },
+          // Transaction Result
+          {
+            id: 'transaction-result-edge',
+            source: 'db-service',
+            target: 'app',
+            type: 'sequenceMessage',
+            sourceHandle: 'left',
+            targetHandle: 'right',
+            data: {
+              label: 'Transaction Success',
+              type: 'return',
+              y: 580,
+            },
+            animated: false,
+          },
+        ] as SequenceEdge[],
+      };
+
+    default:
+      return { nodes: [], edges: [] };
+  }
+};