feat: Add mermaid diagrams support to documentation

- Added support for rendering mermaid diagrams in documentation.
- Updated Docusaurus configuration to include mermaid theme and enable
  mermaid rendering in markdown files.
- Updated package.json dependencies to use compatible versions.
This commit is contained in:
Mahmoud-Emad
2025-06-16 14:04:10 +03:00
parent fca7c7364a
commit df452ce258
2 changed files with 54 additions and 56 deletions

View File

@@ -1,6 +1,7 @@
import {themes as prismThemes} from 'prism-react-renderer'; import { themes as prismThemes } from 'prism-react-renderer';
import type {Configuration} from '??docusaurus/types'; import type { Configuration } from '@@docusaurus/types';
import type * as Preset from '??docusaurus/preset-classic'; import type * as Preset from '@@docusaurus/preset-classic';
const config: Configuration = { const config: Configuration = {
title: '@{config.main.title}', title: '@{config.main.title}',
@@ -27,6 +28,11 @@ const config: Configuration = {
// locales: ['en'], // locales: ['en'],
// }, // },
themes: ["@@docusaurus/theme-mermaid"],
markdown: {
mermaid: true,
},
presets: [ presets: [
[ [
'classic', 'classic',
@@ -52,41 +58,41 @@ const config: Configuration = {
items: [ items: [
@for item in config.navbar.items @for item in config.navbar.items
{ {
label: '@{item.label}', label: '@{item.label}',
href: '@{item.href}', href: '@{item.href}',
position: '@{item.position}' position: '@{item.position}'
}, },
@end @end
], ],
}, },
footer: { footer: {
style: '@{config.footer.style}', style: '@{config.footer.style}',
links: [ links: [
@for link_group in config.footer.links @for link_group in config.footer.links
{ {
title: '@{link_group.title}', title: '@{link_group.title}',
items: [ items: [
@for item in link_group.items @for item in link_group.items
{ {
label: '@{item.label}', label: '@{item.label}',
@if item.href != '' @if item.href != ''
href: '@{item.href}' href: '@{item.href}'
@else if item.to != '' @else if item.to != ''
to: '@{item.to}' to: '@{item.to}'
@else @else
to: '/docs' to: '/docs'
@end @end
},
@end
]
},
@end
],
copyright: '@{config.main.copyright}',
}, },
prism: { @end
theme: prismThemes.github, ]
darkTheme: prismThemes.dracula, },
@end
],
copyright: '@{config.main.copyright}',
},
prism: {
theme: prismThemes.github,
darkTheme: prismThemes.dracula,
}, },
} satisfies Preset.ThemeConfig, } satisfies Preset.ThemeConfig,
}; };

View File

@@ -1,10 +1,10 @@
{ {
"name": "docs-website", "name": "@{name}",
"version": "0.0.0", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
"docusaurus": "docusaurus", "docusaurus": "docusaurus",
"start": "docusaurus start --no-open", "start": "docusaurus start",
"build": "docusaurus build", "build": "docusaurus build",
"swizzle": "docusaurus swizzle", "swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy", "deploy": "docusaurus deploy",
@@ -15,27 +15,20 @@
"typecheck": "tsc" "typecheck": "tsc"
}, },
"dependencies": { "dependencies": {
"@@docusaurus/core": "^3.7.0", "@@docusaurus/core": "^3.1.0",
"@@docusaurus/preset-classic": "^3.7.0", "@@docusaurus/preset-classic": "^3.1.0",
"@@docusaurus/theme-mermaid": "^3.7.0", "@@docusaurus/theme-mermaid": "^3.1.0",
"@@mdx-js/react": "^3.0.0", "@@mdx-js/react": "^3.0.0",
"buffer": "^6.0.3",
"chart.js": "^4.4.7",
"clsx": "^2.0.0", "clsx": "^2.0.0",
"echarts": "^5.6.0",
"pako": "^2.1.0",
"prism-react-renderer": "^2.3.0", "prism-react-renderer": "^2.3.0",
"react": "^18.2.0", "react": "^18.0.0",
"react-chartjs-2": "^5.3.0", "react-dom": "^18.0.0"
"react-dom": "^18.2.0",
"remark-kroki": "^0.3.7",
"zlib": "^1.0.5"
}, },
"devDependencies": { "devDependencies": {
"@@docusaurus/module-type-aliases": "^3.7.0", "@@docusaurus/module-type-aliases": "^3.1.0",
"@@docusaurus/tsconfig": "3.5.2", "@@docusaurus/tsconfig": "^3.1.0",
"@@docusaurus/types": "3.5.2", "@@docusaurus/types": "^3.1.0",
"typescript": "~5.5.2" "typescript": "^5.2.2"
}, },
"browserslist": { "browserslist": {
"production": [ "production": [
@@ -44,13 +37,12 @@
"not op_mini all" "not op_mini all"
], ],
"development": [ "development": [
"last 3 chrome version", "last 1 chrome version",
"last 3 firefox version", "last 1 firefox version",
"last 5 safari version" "last 1 safari version"
] ]
}, },
"engines": { "engines": {
"bun": ">=1.2.5" "node": ">=18.0"
}, }
"packageManager": "bun@1.2.5"
} }