diff --git a/package-lock.json b/package-lock.json
index d861a25cb46b7cd..38d1b6bad8de503 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
 				"@tailwindcss/postcss": "4.1.4",
 				"@types/hast": "3.0.4",
 				"@types/he": "1.2.3",
+				"@types/mdast": "4.0.4",
 				"@types/node": "24.0.14",
 				"@types/react": "19.0.7",
 				"@types/react-dom": "19.0.4",
diff --git a/package.json b/package.json
index ccc83799234d1d0..b272142738223d3 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
 		"@tailwindcss/postcss": "4.1.4",
 		"@types/hast": "3.0.4",
 		"@types/he": "1.2.3",
+		"@types/mdast": "4.0.4",
 		"@types/node": "24.0.14",
 		"@types/react": "19.0.7",
 		"@types/react-dom": "19.0.4",
diff --git a/src/content/docs/style-guide/components/mermaid.mdx b/src/content/docs/style-guide/components/mermaid.mdx
index 5b631bb09a1bcae..ffbde76bd764249 100644
--- a/src/content/docs/style-guide/components/mermaid.mdx
+++ b/src/content/docs/style-guide/components/mermaid.mdx
@@ -1,5 +1,7 @@
 ---
 title: Mermaid
+styleGuide:
+  component: Mermaid
 ---
 
 Mermaid diagrams are added with [`remark-mermaid`](https://github.com/remcohaszing/rehype-mermaid/) and [`mermaid`](https://www.npmjs.com/package/mermaid).
diff --git a/src/util/components.ts b/src/util/components.ts
index 65d8063f8e06fd5..2db0f5e830ad381 100644
--- a/src/util/components.ts
+++ b/src/util/components.ts
@@ -7,6 +7,7 @@ import {
 	type MdxJsxFlowElement,
 	type MdxJsxTextElement,
 } from "mdast-util-mdx";
+import type { Code } from "mdast";
 import { visit } from "unist-util-visit";
 
 type Usage = { count: number; pages: Set<string> };
@@ -52,6 +53,14 @@ export async function getComponentsUsage(
 				usages[typed.name].count++;
 				usages[typed.name].pages.add(fullName);
 			});
+
+			visit(tree, "code", function (node: Code) {
+				if (node.lang === "mermaid") {
+					usages["Mermaid"] ||= { count: 0, pages: new Set() };
+					usages["Mermaid"].count++;
+					usages["Mermaid"].pages.add(fullName);
+				}
+			});
 		}
 	}