diff --git a/apps/client/src/widgets/layout/NoteContentSwitcher.css b/apps/client/src/widgets/layout/NoteContentSwitcher.css
new file mode 100644
index 0000000000..2212402273
--- /dev/null
+++ b/apps/client/src/widgets/layout/NoteContentSwitcher.css
@@ -0,0 +1,15 @@
+.note-content-switcher {
+    --badge-radius: 12px;
+    position: relative;
+    top: 5px;
+    display: flex;
+    min-height: 35px;
+    gap: 5px;
+
+    .ext-badge {
+        --color: var(--input-background-color);
+        color: var(--main-text-color);
+        font-size: 0.9rem;
+        flex-shrink: 0;
+    }
+}
diff --git a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx
index 0470bac361..b2386ad3fb 100644
--- a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx
+++ b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx
@@ -1,9 +1,25 @@
-import { ComponentChildren } from "preact";
+import "./NoteContentSwitcher.css";
+
+import { Badge } from "../react/Badge";
+
+export interface NoteContentTemplate {
+    name: string;
+    content: string;
+}
 
 interface NoteContentSwitcherProps {
-    children: ComponentChildren;
+    templates: NoteContentTemplate[];
 }
 
-export default function NoteContentSwitcher({ children }: NoteContentSwitcherProps) {
-    return <p>{children}</p>;
+export default function NoteContentSwitcher({ templates }: NoteContentSwitcherProps) {
+    return (
+        <div className="note-content-switcher">
+            {templates.map(sample => (
+                <Badge
+                    key={sample.name}
+                    text={sample.name}
+                />
+            ))}
+        </div>
+    );
 }
diff --git a/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx b/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx
index 0339e48936..5d57c5b22f 100644
--- a/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx
+++ b/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx
@@ -4,6 +4,7 @@ import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../
 import NoteContentSwitcher from "../../layout/NoteContentSwitcher";
 import SvgSplitEditor from "../helpers/SvgSplitEditor";
 import { TypeWidgetProps } from "../type_widget";
+import SAMPLE_DIAGRAMS from "./sample_diagrams";
 
 let idCounter = 1;
 let registeredErrorReporter = false;
@@ -33,9 +34,7 @@ export default function Mermaid(props: TypeWidgetProps) {
             renderSvg={renderSvg}
             noteType="mermaid"
             extraContent={(
-                <NoteContentSwitcher>
-                    Foo
-                </NoteContentSwitcher>
+                <NoteContentSwitcher templates={SAMPLE_DIAGRAMS} />
             )}
             {...props}
         />
diff --git a/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts b/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts
new file mode 100644
index 0000000000..c6c036a104
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts
@@ -0,0 +1,17 @@
+import type { NoteContentTemplate } from "../../layout/NoteContentSwitcher";
+
+const SAMPLE_DIAGRAMS: NoteContentTemplate[] = [
+    {
+        name: "Flowchart",
+        content: `\
+flowchart TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]
+        `
+    }
+];
+
+export default SAMPLE_DIAGRAMS;