diff --git a/packages/presentation/src/components/markup/NodeContent.svelte b/packages/presentation/src/components/markup/NodeContent.svelte
index 35442b8143b..6b75dee004c 100644
--- a/packages/presentation/src/components/markup/NodeContent.svelte
+++ b/packages/presentation/src/components/markup/NodeContent.svelte
@@ -186,6 +186,8 @@
         {/each}
       {/if}
     </th>
+  {:else if node.type === MarkupNodeType.mermaid}
+    <!-- TODO -->
   {:else if node.type === MarkupNodeType.comment}
     <!-- Ignore -->
   {:else}
diff --git a/packages/text/src/kits/server-kit.ts b/packages/text/src/kits/server-kit.ts
index 0226c673d54..e5366ba7b65 100644
--- a/packages/text/src/kits/server-kit.ts
+++ b/packages/text/src/kits/server-kit.ts
@@ -33,6 +33,7 @@ import { DefaultKit, DefaultKitOptions } from './default-kit'
 import { CodeExtension, codeOptions } from '../marks/code'
 import { NoteBaseExtension } from '../marks/noteBase'
 import { CommentNode } from '../nodes/comment'
+import { MermaidExtension, mermaidOptions } from '../nodes/mermaid'
 import TextAlign from '@tiptap/extension-text-align'
 import TextStyle from '@tiptap/extension-text-style'
 import { BackgroundColor, TextColor } from '../marks/colors'
@@ -85,6 +86,7 @@ export const ServerKit = Extension.create<ServerKitOptions>({
       }),
       CodeBlockExtension.configure(codeBlockOptions),
       CodeExtension.configure(codeOptions),
+      MermaidExtension.configure(mermaidOptions),
       ...tableExtensions,
       ...taskListExtensions,
       ...fileExtensions,
diff --git a/packages/text/src/markup/model.ts b/packages/text/src/markup/model.ts
index ae0b052aa6d..255a2f401e2 100644
--- a/packages/text/src/markup/model.ts
+++ b/packages/text/src/markup/model.ts
@@ -38,6 +38,7 @@ export enum MarkupNodeType {
   table_row = 'tableRow',
   table_cell = 'tableCell',
   table_header = 'tableHeader',
+  mermaid = 'mermaid',
   comment = 'comment'
 }
 
diff --git a/packages/text/src/nodes/mermaid.ts b/packages/text/src/nodes/mermaid.ts
new file mode 100644
index 00000000000..dd128740d7f
--- /dev/null
+++ b/packages/text/src/nodes/mermaid.ts
@@ -0,0 +1,44 @@
+//
+// Copyright © 2024 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import CodeBlock, { CodeBlockOptions } from '@tiptap/extension-code-block'
+import { codeBlockOptions } from './codeblock'
+
+export const mermaidOptions: CodeBlockOptions = {
+  ...codeBlockOptions,
+  defaultLanguage: 'mermaid'
+}
+
+export const MermaidExtension = CodeBlock.extend({
+  name: 'mermaid',
+  group: 'block',
+
+  parseHTML () {
+    return [
+      {
+        tag: 'div.mermaid-diagram',
+        preserveWhitespace: 'full'
+      }
+    ]
+  },
+
+  addAttributes () {
+    return {
+      language: {
+        default: 'mermaid'
+      }
+    }
+  }
+})