{"_id":"@barrierenlos/docusaurus-prerender-mermaid","_rev":"5-5f4a0ed3dc4ea15ddaeb0773e8f9629e","name":"@barrierenlos/docusaurus-prerender-mermaid","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@barrierenlos/docusaurus-prerender-mermaid","version":"1.0.0","keywords":["docusaurus","docusaurus-plugin","mermaid","static","prerender","svg"],"author":{"name":"Dmitry Dugarev"},"license":"MIT","_id":"@barrierenlos/docusaurus-prerender-mermaid@1.0.0","maintainers":[{"name":"dmiryi","email":"dmitry.dugarev@musnuss.io"}],"dist":{"shasum":"9faa3741320d564df78c29b5f6eda02e353c3396","tarball":"https://registry.npmjs.org/@barrierenlos/docusaurus-prerender-mermaid/-/docusaurus-prerender-mermaid-1.0.0.tgz","fileCount":8,"integrity":"sha512-ccm/ZwsWke/O0sfBdviDFTHPQCBmE5iYQRT7tiRqMhuectlbvWYxefG7c/ofLqJEBpWfzTz0An91GPmzj4yIPA==","signatures":[{"sig":"MEYCIQCTLC5s289eVWgApt4YASjxBJfxsr6DId7GI2A+4kpYbAIhAMmuuF8dQ8bdhV1FFQUYUHUy/uEIxfQFAN+UXS1I/he8","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":36502},"main":"index.js","engines":{"node":">=18.0"},"exports":{".":"./index.js","./remark":"./remark.js"},"gitHead":"9ef267cbee4ca848f8475e4965eb5a5be8c6fc4e","scripts":{"build":"echo \"No build script needed\" && exit 0"},"_npmUser":{"name":"dmiryi","email":"dmitry.dugarev@musnuss.io"},"_npmVersion":"11.3.0","description":"A Docusaurus plugin to pre-render Mermaid diagrams into static images (SVG or PNG) at build time, with support for light/dark themes.","directories":{},"_nodeVersion":"23.7.0","dependencies":{"globby":"^13.2.2","p-limit":"^4.0.0","@mermaid-js/mermaid-cli":"^10.9.0"},"_hasShrinkwrap":false,"peerDependencies":{"@docusaurus/core":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/docusaurus-prerender-mermaid_1.0.0_1761495299963_0.4943604263043371","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@barrierenlos/docusaurus-prerender-mermaid","version":"1.0.1","keywords":["docusaurus","docusaurus-plugin","mermaid","static","prerender","svg"],"author":{"name":"Dmitry Dugarev"},"license":"MIT","_id":"@barrierenlos/docusaurus-prerender-mermaid@1.0.1","maintainers":[{"name":"dmiryi","email":"dmitry.dugarev@musnuss.io"}],"dist":{"shasum":"925618d8fb691bd55272b91b2240612ffd3aa936","tarball":"https://registry.npmjs.org/@barrierenlos/docusaurus-prerender-mermaid/-/docusaurus-prerender-mermaid-1.0.1.tgz","fileCount":8,"integrity":"sha512-RfB51VB83b338ydPFzrhIl8rVRLKeJw7fk5vUZ98+areY0d+3aWMaQr4p06ZeE3KAQYJhPDLSGa/iICVCnYaPw==","signatures":[{"sig":"MEUCIQCqyQ6dKaWtppsUEz0aCHWPi1piZluTAZJor/MmCPeBsQIgJ2ta1gBl2+GYF9lebDk1tl/GPgtjDA/vg+HwdwS1P5k=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":36632},"main":"index.js","engines":{"node":">=18.0"},"exports":{".":"./index.js","./remark":"./remark.js"},"gitHead":"dbcc9badad9e832daf1e35de8f7ae5334a558161","scripts":{"build":"echo \"No build script needed\" && exit 0"},"_npmUser":{"name":"dmiryi","email":"dmitry.dugarev@musnuss.io"},"_npmVersion":"11.3.0","description":"A Docusaurus plugin to pre-render Mermaid diagrams into static images (SVG or PNG) at build time, with support for light/dark themes.","directories":{},"_nodeVersion":"23.7.0","dependencies":{"globby":"^13.2.2","p-limit":"^4.0.0","@mermaid-js/mermaid-cli":"^10.9.0"},"_hasShrinkwrap":false,"peerDependencies":{"@docusaurus/core":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/docusaurus-prerender-mermaid_1.0.1_1761501647774_0.17594170512780805","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@barrierenlos/docusaurus-prerender-mermaid","version":"1.0.2","keywords":["docusaurus","docusaurus-plugin","mermaid","static","prerender","svg"],"author":{"name":"Dmitry Dugarev"},"license":"MIT","_id":"@barrierenlos/docusaurus-prerender-mermaid@1.0.2","maintainers":[{"name":"dmiryi","email":"dmitry.dugarev@musnuss.io"}],"dist":{"shasum":"d036021f8d194c5531aea61d70cd56841205fb11","tarball":"https://registry.npmjs.org/@barrierenlos/docusaurus-prerender-mermaid/-/docusaurus-prerender-mermaid-1.0.2.tgz","fileCount":12,"integrity":"sha512-d9TLlO8wn5hpW9AmA4yOBGzRa5GtiWATWqpKXJ4P3uBRR1leoG9u0XUKT+XICrMKJ4JzEAtHQu1tNazcSpbOmQ==","signatures":[{"sig":"MEUCIQCdfgKYQ9ck2r64C+Gn2wiXNhKZvR1LL0TaGioU2zcWvAIgXll9S6F//m+wXM3hrYtHTlCxK81ZGuCcHzwOlk8cKLw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":56912},"main":"index.js","engines":{"node":">=18.0"},"exports":{".":"./index.js","./remark":"./remark.js"},"gitHead":"49e72f183d943e546e8c8e6c8bffafb4bd52d92e","scripts":{"test":"node --test","build":"echo \"No build script needed\" && exit 0"},"_npmUser":{"name":"dmiryi","email":"dmitry.dugarev@musnuss.io"},"_npmVersion":"11.3.0","description":"A Docusaurus plugin to pre-render Mermaid diagrams into static images (SVG or PNG) at build time, with support for light/dark themes.","directories":{},"_nodeVersion":"23.7.0","dependencies":{"globby":"^13.2.2","p-limit":"^4.0.0","unist-util-visit":"^5.0.0","@mermaid-js/mermaid-cli":"^10.9.0"},"_hasShrinkwrap":false,"peerDependencies":{"@docusaurus/core":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/docusaurus-prerender-mermaid_1.0.2_1777717708499_0.5983084672059931","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@barrierenlos/docusaurus-prerender-mermaid","version":"1.0.3","keywords":["docusaurus","docusaurus-plugin","mermaid","static","prerender","svg"],"author":{"name":"Dmitry Dugarev"},"license":"MIT","_id":"@barrierenlos/docusaurus-prerender-mermaid@1.0.3","maintainers":[{"name":"dmiryi","email":"dmitry.dugarev@musnuss.io"}],"dist":{"shasum":"7ca77de24df81df821438ec1c4e92a9b8f598d68","tarball":"https://registry.npmjs.org/@barrierenlos/docusaurus-prerender-mermaid/-/docusaurus-prerender-mermaid-1.0.3.tgz","fileCount":12,"integrity":"sha512-x/VwpcvqgM+JIj8pzObYGmuqk8n+rmv1pF9RwKBxJK2s4iDDPQYOAB3loRR59Dxw8YY4SX0YDuP17qKujSGKYg==","signatures":[{"sig":"MEYCIQDnh0RDjHi+Cz8oGrNHwgCXfLQQ+pLjG/sbPEWYw5oPvgIhAJWYtpq17xYFN95hUIcfrmgaDpyP/kRs6vt0PeIAKcg0","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCICVia/N8oQ+AIISPFAkuXu/8PTz+u2Mmg5v1er7ZX0LnAiEA1ALmSFbU1CQLyTdYYnjhMB7v94L7aH9bLOynJPeX/Hc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":59124},"main":"index.js","engines":{"node":">=18.0"},"exports":{".":"./index.js","./remark":"./remark.js"},"gitHead":"bd95b53985db09103555cd8b3154f568d3bdd853","scripts":{"test":"node --test","build":"echo \"No build script needed\" && exit 0"},"_npmUser":{"name":"dmiryi","email":"dmitry.dugarev@musnuss.io"},"_npmVersion":"11.19.0","description":"A Docusaurus plugin to pre-render Mermaid diagrams into static images (SVG or PNG) at build time, with support for light/dark themes.","directories":{},"_nodeVersion":"24.21.0","dependencies":{"globby":"^13.2.2","p-limit":"^4.0.0","unist-util-visit":"^5.0.0","@mermaid-js/mermaid-cli":"^10.9.0"},"_hasShrinkwrap":false,"peerDependencies":{"@docusaurus/core":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/docusaurus-prerender-mermaid_1.0.3_1790418301624_0.44274026658117216","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"_id":"@barrierenlos/docusaurus-prerender-mermaid@1.0.4","dist":{"shasum":"773a1eb08828fae6fba37c158be04dde85e8b32a","tarball":"https://registry.npmjs.org/@barrierenlos/docusaurus-prerender-mermaid/-/docusaurus-prerender-mermaid-1.0.4.tgz","fileCount":12,"integrity":"sha512-7lWP1b6tqIfOEKJRjhpeGALHJVHGl0fTuKCPUzzRh6UhPyNrllgWwh3olhLuXvUEZx34iy0z8ULmpMsP4yfp5A==","signatures":[{"sig":"MEUCIQCHq0GIW5NLGzbvtUUSTrE80EkiLjddVb4FXOqagM7KFgIgKxLyyrIUuZlZTCEfOkqzY/oNhRFAJYz+mouCw8q2kUM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGn4BcXprzDgLs3kiLnqI3SaMSduo0AIoC3zlPK8ZYXyAiAPKQUZuJlPE3Dfp6bXUK82kxBbzXexAO2NFDPwn2h2Lg=="}],"unpackedSize":63509},"main":"index.js","name":"@barrierenlos/docusaurus-prerender-mermaid","author":{"name":"Dmitry Dugarev"},"engines":{"node":">=18.0"},"exports":{".":"./index.js","./remark":"./remark.js"},"gitHead":"52452838f042dc210da48ded27b7701e684d5f36","license":"MIT","scripts":{"test":"node --test","build":"echo \"No build script needed\" && exit 0"},"version":"1.0.4","_npmUser":{"name":"dmiryi","email":"dmitry.dugarev@musnuss.io"},"keywords":["docusaurus","docusaurus-plugin","mermaid","static","prerender","svg"],"_npmVersion":"11.19.0","description":"A Docusaurus plugin to pre-render Mermaid diagrams into static images (SVG or PNG) at build time, with support for light/dark themes.","directories":{},"maintainers":[{"name":"dmiryi","email":"dmitry.dugarev@musnuss.io"}],"_nodeVersion":"24.21.0","dependencies":{"globby":"^13.2.2","p-limit":"^4.0.0","unist-util-visit":"^5.0.0","@mermaid-js/mermaid-cli":"^10.9.0"},"_hasShrinkwrap":false,"peerDependencies":{"@docusaurus/core":"^3.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/docusaurus-prerender-mermaid_1.0.4_1790429402832_0.8747070663915415"}}},"time":{"created":"2025-10-26T16:14:59.872Z","modified":"2026-09-26T13:30:03.158Z","1.0.0":"2025-10-26T16:15:00.154Z","1.0.1":"2025-10-26T18:00:47.996Z","1.0.2":"2026-05-02T10:28:28.623Z","1.0.3":"2026-09-26T10:25:01.714Z","1.0.4":"2026-09-26T13:30:02.936Z"},"author":{"name":"Dmitry Dugarev"},"license":"MIT","keywords":["docusaurus","docusaurus-plugin","mermaid","static","prerender","svg"],"description":"A Docusaurus plugin to pre-render Mermaid diagrams into static images (SVG or PNG) at build time, with support for light/dark themes.","maintainers":[{"name":"dmiryi","email":"dmitry.dugarev@musnuss.io"}],"readme":"# Docusaurus Prerender Mermaid Plugin\n\n[Npm](https://www.npmjs.com/package/@barrierenlos/docusaurus-prerender-mermaid)\n\n[GitHub](https://github.com/musnuss/docusaurus-prerender-mermaid)\n\n[Live-Demo](https://barrierenlos.com/en/accessibility-hub/resources/docusaurus/docusaurus-prerender-mermaid)\n\nA Docusaurus plugin that pre-renders your Mermaid diagrams into static SVG or PNG images at build time.\n\nThis solves common issues with client-side Mermaid rendering, such as slow performance, content layout shift (CLS), and especially the accessibility and SEO problems caused by missing `alt` text, captions, text descriptions and poor semantic HTML structure.\n\n## What is this and Why?\n\nBy default, Docusaurus and `@docusaurus/theme-mermaid` render diagrams on the client side. This means every visitor's browser has to run the Mermaid.js library to parse your diagram text and turn it into an image.\n\nThis approach has several problems:\n\n- **Poor Performance:** It adds extra JavaScript to your site, increasing load times.\n- **Layout Shift:** A flash of unstyled code appears before the diagram renders, causing your page content to \"jump\" (a bad Core Web Vital score).\n- **No Static Export:** Diagrams don't appear in RSS feeds, social media previews, or other non-JS environments.\n- **Accessibility Issues:** The client-side renderer doesn't add `alt` text or captions, making diagrams inaccessible to screen readers. It also doesn't use semantic HTML elements like `
` and `
` and it is impossible to link to external text descriptions by using `aria-describedby`.\n- **SEO Problems:** Search engines can't index the content of your diagrams, potentially hurting your SEO.\n\nThis plugin fixes all of that by doing the rendering **once** at build time (`npm run build`). It generates static `` tags, resulting in a lightning-fast, zero-layout-shift experience for your users. For accessibility, it wraps each diagram in a proper `
`, and supports captions in `
`, `alt` text, and `aria-describedby` for text descriptions.\n\n## Features\n\n- **Static Rendering:** Converts ` ```mermaid ` blocks into static `` tags.\n- **Dark/Light Mode Support:** Automatically renders light and dark versions of your diagrams based on your Docusaurus theme settings.\n- **Accessible:** Generates an HTML `
` wrapper with `` and `
` for screen readers, filling out `alt` text, caption and `aria-describedby` using your diagram's metadata.\n- **Metadata Support:** Use a frontmatter-like block inside your diagram to add an `id`, `alt` text, `caption`, and link to a text description via `aria-describedby`.\n- **Fully Configurable:** Integrates directly with your `docusaurus.config.ts`, including `themeConfig.mermaid`.\n- **Caching:** Already-rendered diagrams are skipped only when the Mermaid source and render settings still match, so diagram edits and Mermaid config changes automatically invalidate stale cache entries.\n- **Customizable Output:** Choose between SVG and PNG formats, set output directories, and pass custom arguments to the Mermaid CLI.\n- **Concurrency Control:** Configure how many diagrams to render in parallel for optimal build performance.\n\n## How it Works\n\nThe plugin operates in three stages:\n\n1. **Build Time (Main Plugin):**\n - Scans your content directories (`docs`, `blog`, etc.) for all ` ```mermaid ` blocks.\n - Reads your `docusaurus.config.ts` to find your light and dark theme names for Mermaid. If you have `mermaid.config.json` file, it uses the settings from there instead of `docusaurus.config.ts`.\n - If your color mode switch is disabled via `themeConfig.mermaid.disableColorMode`, it only renders the one default theme defined in `themeConfig.colorMode.defaultMode`.\n - It calls `@mermaid-js/mermaid-cli` (`mmdc`) to render two images for each diagram (e.g., `diagram-de-light.svg` and `diagram-de-dark.svg`) if the theme switch is enabled, or just one image if disabled.\n - It saves these images to the `static/img/diagrams` directory (or your configured `outputDir`).\n - Caches rendered diagrams to speed up future builds, but automatically re-renders them when the Mermaid source, theme, CLI args, or Mermaid config changes.\n - When Docusaurus starts the build process, it copies these images from `static/` to the final `build/` directory automatically.\n\n2. **Content Transformation (Remark Plugin):**\n - During the Markdown-to-HTML conversion, the remark plugin intercepts the ` ```mermaid ` block.\n - It replaces the code block with an HTML `
` structure.\n - Inside the figure, it inserts two `` tags pointing to the static files (or one, if the theme switch is disabled).\n - `prerender: false` diagrams are skipped and left as-is for the client-side renderer.\n - It fills out accessibility attributes like `alt`, `aria-label`, and `aria-describedby` using the metadata provided in the diagram block.\n - If a caption is provided, it adds a `
` element below the images.\n - In dev mode (`npm run start`), it renders and serves the same static image markup by default, and Docusaurus watches the configured Mermaid content paths so editing a diagram re-renders the cached asset in place.\n - The generated image URLs include a version token derived from the diagram source and render settings, so the browser swaps to the refreshed asset without needing a manual page reload.\n\n3. **Client Side (Browser):**\n - The plugin injects a tiny CSS file that uses Docusaurus's `[data-theme='dark']` attribute to show the correct `` and hide the other one. This switch is instant and requires zero JavaScript.\n\n## Installation\n\nYou need to install the plugin from the npm registry:\n\n```bash\n# With npm\nnpm install @barrierenlos/docusaurus-prerender-mermaid\n```\n\n## Setup\n\nYou must add the plugin to **two** places in your `docusaurus.config.ts`:\n\n1. The main plugin in the root `plugins` array.\n2. The remark plugin in your docs/blog/pages preset options.\n\n```typescript\n// docusaurus.config.ts\nimport type { Config } from '@docusaurus/types';\n// 1. Import the remark plugin\nimport remarkMermaidStatic from '@barrierenlos/docusaurus-prerender-mermaid/remark';\n\nconst config: Config = {\n // ...\n i18n: {\n defaultLocale: 'de',\n locales: ['de', 'en', 'ru'],\n },\n\n themeConfig: {\n // ...\n // The plugin reads this config automatically!\n mermaid: {\n theme: { light: 'neutral', dark: 'dark' },\n options: {\n fontFamily: 'Arial, sans-serif',\n },\n },\n },\n\n // 2. Add the main plugin\n plugins: [\n [\n '@barrierenlos/docusaurus-prerender-mermaid',\n {\n // Plugin options...\n contentPaths: ['docs', 'legal'], // Dirs to scan\n outputDir: 'static/img/diagrams', // Where to write SVGs\n outputFormat: 'svg', // 'svg' or 'png'\n // concurrency: 4, // How many to render at once. Defaults to CPU count\n mmdcArgs: ['-b', 'transparent'], // Extra mmdc args\n // other options...\n },\n ],\n // ... other plugins\n ],\n\n presets: [\n [\n 'classic',\n {\n docs: {\n // 3. Add the remark plugin\n beforeDefaultRemarkPlugins: [remarkMermaidStatic],\n // ... other docs options\n },\n blog: {\n // 3. Add the remark plugin (if you use mermaid in blog)\n beforeDefaultRemarkPlugins: [remarkMermaidStatic],\n // ... other blog options\n },\n // ...\n } satisfies Preset.Options,\n ],\n ],\n};\n\nexport default config;\n```\n\n## Configuration Options\n\nAll options are optional and are passed to the main plugin in `docusaurus.config.ts`.\n\n| Option | Description | Default |\n| :--------------- | :--------------------------------------------------------------------------------------------------------------------------- | :----------------------------------- |\n| `contentPaths` | An array of content directories to scan for diagrams, relative to `siteDir`. | `['docs', 'blog']` |\n| `outputDir` | The directory to output rendered images to, relative to the **`static`** directory. | `'img/diagrams'` |\n| `outputFormat` | The output format. Can be `'svg'` or `'png'`. | `'svg'` |\n| `configFile` | Path to a physical `mermaid.config.json` file. If provided, this **overrides** `themeConfig.mermaid.config` for base styles. | `'mermaid.config.json'` |\n| `concurrency` | The number of diagrams to render concurrently. | `os.cpus().length` |\n| `mmdcArgs` | An array of additional string arguments to pass to the `mmdc` CLI. | `['-b', 'transparent']` |\n| `outputSuffixes` | The suffixes to append for light and dark themes. | `{ light: '-light', dark: '-dark' }` |\n| `renderInDevelopment` | Render and use the static Mermaid images during `docusaurus start`. Set this to `false` to keep the live Mermaid code blocks in development. | `true` |\n\n## Configuration Examples\n\n### Default (Minimal) Configuration\n\nIf you are happy with all the defaults, you just need to register the plugin. The remark plugin needs no options.\n\n```typescript\n// docusaurus.config.ts\nimport remarkMermaidStatic from 'docusaurus-prerender-mermaid/remark';\n\nconst config: Config = {\n // ...\n plugins: [\n 'docusaurus-prerender-mermaid',\n // ...\n [\n '@docusaurus/plugin-content-docs',\n {\n id: 'your-custom-id',\n path: 'your-custom-path',\n // ...\n beforeDefaultRemarkPlugins: [remarkMermaidStatic],\n },\n ],\n ],\n\n presets: [\n [\n 'classic',\n {\n docs: {\n beforeDefaultRemarkPlugins: [remarkMermaidStatic],\n // ...\n },\n // ...\n },\n ],\n ],\n};\n```\n\n### Advanced (Complete) Configuration\n\nThis example changes the content directories, output path, and adds a custom scale factor to `mmdc`.\n\n```typescript\n// docusaurus.config.ts\nimport remarkMermaidStatic from 'docusaurus-prerender-mermaid/remark';\n\nconst config: Config = {\n // ...\n plugins: [\n [\n 'docusaurus-prerender-mermaid',\n {\n contentPaths: ['docs', 'legal', 'src/pages'],\n outputDir: 'static/assets/mermaid',\n outputFormat: 'png',\n concurrency: 4,\n mmdcArgs: ['-b', 'transparent', '--scale', '1.5'],\n },\n ],\n // ...\n ],\n\n presets: [\n [\n 'classic',\n {\n docs: {\n beforeDefaultRemarkPlugins: [remarkMermaidStatic],\n // ...\n },\n },\n ],\n ],\n // ...\n};\n```\n\n## Mermaid Metadata\n\nYou can add a metadata block (similar to frontmatter) to the **top** of any ` ```mermaid ` block. This gives you fine-grained control over accessibility and styling.\n\n### Available Metadata Fields\n\n- **`id`**: (String) Sets the HTML `id` for the `
` tag. If not provided, a 10-character hash of the diagram code is used. This ID defines the name of the output image files as well.\n- **`alt`**: (String) **Highly recommended.** Sets the `alt` text for the `` tags. This is crucial for accessibility. Make sure to describe the diagram meaningfully, but not longer than 160 characters.\n- **`caption`**: (String) Adds a `
` element below the diagram.\n- **`width`**: (String) Sets the `width` attribute on the `` tags (e.g., `600px`). This helps when rendered images are too large on desktop.\n- **`prerender`**: (`false`) If you set `prerender: false`, this plugin will **skip** this diagram entirely, leaving it for the client-side `@docusaurus/theme-mermaid` to render.\n- **`descriptionId`**: (String) An advanced accessibility feature. Links the figure to an external description via `aria-describedby`. This is essential for WCAG compliance for complex diagrams. The value should be the `id` of an existing HTML element on the page that contains the description text.\n\n### Example\n\nHere is how you would write a diagram in your `.md` or `.mdx` file:\n\n**Input (`my-doc.mdx`):**\n\n````markdown\nHere is our company process:\n\n```mermaid\n---\nid: company-flow\nalt: A flowchart showing the company process. It starts with 'Sales', leads to 'Development', then 'Testing', and finally 'Deployment'.\ncaption: The official company development process.\nwidth: 500px\ndescriptionId: company-flow-desc\n---\ngraph TD\n A[Sales] --> B(Development);\n B --> C{Testing};\n C --> D[Deployment];\n```\n````\n\n**Output (Simplified HTML at build time):**\n\n```html\n
\n \n \n\n
\n The official company development process.\n
\n
\n```\n\n## Styling Guide\n\nThe diagrams come without any default styling, so you can style them to fit your site's design.\n\n- `.static-mermaid-figure`: The main `
` wrapper.\n- `.mermaid-light`: The `` tag for the light theme.\n- `.mermaid-dark`: The `` tag for the dark theme.\n- `figcaption`: The caption element.\n\n### SCSS Styling Example\n\nHere is an advanced example (using SCSS) to add a background, border-radius, and custom-numbered counters to your figures.\n\n```scss\n// In your custom.scss file\n\n.markdown .static-mermaid-figure {\n // Add a counter for each figure\n counter-increment: figurecounter;\n\n margin: 2rem 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem; // Space between image and caption\n\n // Style the image tags\n & > img {\n max-width: 100%;\n max-height: 100%;\n padding: 1.5rem;\n background-color: var(--ifm-card-background-color);\n border-radius: 0.75rem;\n border: 1px solid var(--ifm-color-emphasis-300);\n }\n\n // Style the caption\n & > figcaption {\n margin-top: 0.25rem;\n font-size: 0.9rem;\n color: var(--ifm-font-color-secondary);\n font-style: italic;\n text-align: center;\n\n // Example of a custom \"Figure 1.1: \" counter\n &::before {\n content: 'Figure ' counter(h2counter) '.' counter(figurecounter) ': ';\n font-weight: 600;\n color: var(--ifm-font-color-base);\n font-style: normal;\n }\n }\n}\n```\n\n## License\n\nThis plugin is released under the [MIT License](./LICENSE). You are free to use, modify, and distribute it as you see fit.\n\n## Contributing\n\nContributions are welcome! If you find a bug or have a feature request, please open an issue on the [GitHub repository](https://github.com/musnuss/docusaurus-prerender-mermaid).\n","readmeFilename":"README.md"}