@barzhsieh/nuxt-content-mermaid
nuxt-content-mermaid
This README covers 4.x, which bundles Mermaid 12. The frozen 3.x line keeps its 3.x contract; to upgrade, follow Migration to v4.
@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 - ES2024 browsers; Safari / iOS / iPadOS
17.4+
For dependency ownership, the v4 migration boundary, and rendering guarantees, see the 4.x Dependency and Migration Contract.
Quick start
Install the module and its Nuxt Content peer:
pnpm add @barzhsieh/nuxt-content-mermaid @nuxt/contentRegister 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.