diff --git a/app/editor/menus/block.ts b/app/editor/menus/block.tsx
similarity index 87%
rename from app/editor/menus/block.ts
rename to app/editor/menus/block.tsx
index 9a6fbe7d8..143c28309 100644
--- a/app/editor/menus/block.ts
+++ b/app/editor/menus/block.tsx
@@ -19,10 +19,22 @@ import {
   ClockIcon,
   CalendarIcon,
 } from "outline-icons";
+import * as React from "react";
+import styled from "styled-components";
+import Image from "@shared/editor/components/Image";
 import { MenuItem } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";
 import { metaDisplay } from "~/utils/keyboard";
 
+const Img = styled(Image)`
+  border-radius: 2px;
+  background: #fff;
+  box-shadow: 0 0 0 1px #fff;
+  margin: 4px;
+  width: 18px;
+  height: 18px;
+`;
+
 export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
   return [
     {
@@ -168,5 +180,15 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
       keywords: "notice card suggestion",
       attrs: { style: "tip" },
     },
+    {
+      name: "separator",
+    },
+    {
+      name: "code_block",
+      title: "Mermaid Diagram",
+      icon: () => <Img src="/images/mermaidjs.png" alt="Mermaid Diagram" />,
+      keywords: "diagram flowchart",
+      attrs: { language: "mermaidjs" },
+    },
   ];
 }
diff --git a/public/images/mermaidjs.png b/public/images/mermaidjs.png
new file mode 100644
index 000000000..3f872df23
Binary files /dev/null and b/public/images/mermaidjs.png differ