docs: Enabled mermaid chart support for docs (#4433)

# What does this PR do?
<!-- Provide a short summary of what this PR does and why. Link to
relevant issues if applicable. -->
- Before the fix

<img width="1253" height="926" alt="Screenshot 2025-12-29 at 1 02 36 PM"
src="https://github.com/user-attachments/assets/5321c265-9aef-4f6e-98f1-ebc7530e9934"
/>

- After fix

<img width="1315" height="927" alt="Screenshot 2025-12-29 at 1 03 03 PM"
src="https://github.com/user-attachments/assets/66382c7f-038d-4951-83b9-314e014390b2"
/>


<!-- If resolving an issue, uncomment and update the line below -->
<!-- Closes #[issue-number] -->

## Test Plan
<!-- Describe the tests you ran to verify your changes with result
summaries. *Provide clear instructions so the plan can be easily
re-executed.* -->

docs/docusaurus.config.ts

@@ -267,6 +267,7 @@ const config: Config = {
 
   themes: [
     "docusaurus-theme-openapi-docs",
+    "@docusaurus/theme-mermaid",
     [
       require.resolve("@easyops-cn/docusaurus-search-local"),
       {
@@ -301,6 +302,10 @@ const config: Config = {
       },
     ],
   ],
+
+  markdown: {
+    mermaid: true,
+  },
 };
 
 export default config;

docs/package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "@docusaurus/core": "3.8.1",
     "@docusaurus/preset-classic": "3.8.1",
+    "@docusaurus/theme-mermaid": "3.8.1",
     "@easyops-cn/docusaurus-search-local": "^0.52.1",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",