[Docs Site] Track Mermaid usage in ComponentsUsage (#23826)

Author: KianNH

package-lock.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",

package.json

@@ -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).

src/content/docs/style-guide/components/mermaid.mdx

@@ -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);
+				}
+			});
 		}
 	}