diff --git a/resources/js/wysiwyg/lexical/core/LexicalNode.ts b/resources/js/wysiwyg/lexical/core/LexicalNode.ts
index 95a723469..4aba2a22f 100644
--- a/resources/js/wysiwyg/lexical/core/LexicalNode.ts
+++ b/resources/js/wysiwyg/lexical/core/LexicalNode.ts
@@ -208,9 +208,9 @@ export class LexicalNode {
   }
 
   /**
-   * Clones this node, creating a new node with a different key
-   * and adding it to the EditorState (but not attaching it anywhere!). All nodes must
-   * implement this method.
+   * Clones this node, creating a new matching instance.
+   * Should be created with the existing node key if it exists.
+   * All nodes must implement this method.
    *
    */
   static clone(_data: unknown): LexicalNode {
diff --git a/resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts b/resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts
index a30c86fcc..c18c4b4ca 100644
--- a/resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts
+++ b/resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts
@@ -39,6 +39,8 @@ import {EditorUiContext} from "../../../../ui/framework/core";
 import {EditorUIManager} from "../../../../ui/framework/manager";
 import {ImageNode} from "@lexical/rich-text/LexicalImageNode";
 import {MediaNode} from "@lexical/rich-text/LexicalMediaNode";
+import {DiagramNode} from "@lexical/rich-text/LexicalDiagramNode";
+import {DiagramDecorator} from "../../../../ui/decorators/DiagramDecorator";
 
 type TestEnv = {
   readonly container: HTMLDivElement;
@@ -489,6 +491,7 @@ export function createTestContext(): EditorUiContext {
     nodes: [
         ImageNode,
         MediaNode,
+        DiagramNode,
     ]
   });
 
@@ -509,6 +512,7 @@ export function createTestContext(): EditorUiContext {
   };
 
   context.manager.setContext(context);
+  context.manager.registerDecoratorType('diagram', DiagramDecorator);
 
   return context;
 }
diff --git a/resources/js/wysiwyg/lexical/rich-text/__tests__/unit/LexicalDiagramNode.test.ts b/resources/js/wysiwyg/lexical/rich-text/__tests__/unit/LexicalDiagramNode.test.ts
new file mode 100644
index 000000000..e6bb244f4
--- /dev/null
+++ b/resources/js/wysiwyg/lexical/rich-text/__tests__/unit/LexicalDiagramNode.test.ts
@@ -0,0 +1,33 @@
+import {createTestContext} from "lexical/__tests__/utils";
+import {$createDiagramNode, DiagramNode} from "@lexical/rich-text/LexicalDiagramNode";
+import {$getHtmlContent} from "@lexical/clipboard";
+import {getEditorContentAsHtml} from "../../../../utils/actions";
+import {$getRoot} from "lexical";
+
+
+describe('LexicalDiagramNode', () => {
+
+    test('clone creates new instance with same key', () => {
+        const {editor} = createTestContext();
+        editor.updateAndCommit(() => {
+            const node = $createDiagramNode('10', 'https://example.com/barry.png');
+            const clone = DiagramNode.clone(node);
+
+            expect(node).not.toBe(clone);
+            expect(node.getKey()).toBe(clone.getKey());
+        });
+    });
+
+    test('output HTML format', async () => {
+        const {editor} = createTestContext();
+        editor.updateAndCommit(() => {
+            const node = $createDiagramNode('10', 'https://example.com/barry.png');
+            node.setId('cat-123');
+            $getRoot().append(node);
+        });
+
+        const html = await getEditorContentAsHtml(editor);
+        expect(html).toBe(`<div id="cat-123" drawio-diagram="10"><img src="https://example.com/barry.png"></div>`);
+    });
+
+});
\ No newline at end of file