@barzhsieh/nuxt-content-mermaid
nuxt-content-mermaid
@barzhsieh/nuxt-content-mermaid turns mermaid code blocks in Nuxt
Content Markdown into responsive, interactive diagrams. It supports lazy
loading, light and dark themes, toolbar controls, and application-provided
rendering components.
The documentation website is the canonical package documentation. This README is a bounded distribution summary for npm and GitHub.
Package fit
Use this module when your Nuxt Content application needs to:
- author diagrams as Mermaid fences in Markdown;
- render diagrams in the browser with package-owned loading and error states;
- follow application light and dark modes;
- configure diagrams globally, per page, or per fence;
- opt into lazy rendering, toolbar controls, or custom rendering components.
The module owns its compatible Mermaid version. Applications own their Nuxt and Nuxt Content peer dependencies and the Nuxt Content database connector.
Compatibility
- Node.js
>=22.19.0 - Nuxt
^4.1.0 - Nuxt Content
>=3.5.0 <4.0.0
For dependency ownership, the Nuxt Content v2 migration boundary, and rendering guarantees, see the Dependency and Migration Contract.
Quick start
Install the module and its Nuxt Content peer:
pnpm add @barzhsieh/nuxt-content-mermaid @nuxt/content
Register the module:
export default defineNuxtConfig({
modules: ['@barzhsieh/nuxt-content-mermaid'],
})
Then add a Mermaid fence to a Content Markdown file:
```mermaid
flowchart LR
Markdown --> Content --> Mermaid --> SVG
```
Mermaid is included by the module and does not need to be installed separately. For database connector choices and a complete first-project walkthrough, follow Getting Started.
Canonical package documentation
Support and contribution
If the module is useful to you, you can support my open-source work on Ko-fi.
Contributions are welcome. Open an issue or submit a pull request with a clear summary and test results. Maintainers should follow the stable release runbook.