# @barzhsieh/nuxt-content-mermaid 中文文档 规范地址：https://npmcn.com/package/%40barzhsieh/nuxt-content-mermaid/ 版本：4\.0\.1 npm 元数据更新时间：2026-10-21T22:47:03.753Z 中文译文更新时间：2026-11-07T17:21:46.623Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40barzhsieh/nuxt-content-mermaid 原文对照：https://npmcn.com/package/%40barzhsieh/nuxt-content-mermaid/?lang=original 项目主页：https://nuxt-content-mermaid.barz.app/ 源码仓库：https://github.com/andy820621/nuxt-content-mermaid ## 关键信息（来自 npm 元数据） - 包体积（解压后）：296 kB，141 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - Node.js 要求：\>=22\.19\.0 - 运行依赖：6 个 - peer 依赖：nuxt ^4\.1\.0，@nuxt/content \>=3\.5\.0 \<4\.0\.0 - 首次发布：2025-11-26T05:47:55.411Z - 最新版本发布：2026-10-21T22:47:03.456Z - 近 30 天下载量：4301（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：24（近 12 个月 24 个） ## 中文简介 用于将美人鱼与 `@nuxt/content`自动转换 `mermaid` 由Markdown中的代码块组成响应图表组件,并支持懒惰加载和暗/淡主题切换. ## 安装 ```sh npm install @barzhsieh/nuxt-content-mermaid ``` 也可以使用：`pnpm add @barzhsieh/nuxt-content-mermaid`、`yarn add @barzhsieh/nuxt-content-mermaid`、`bun add @barzhsieh/nuxt-content-mermaid` ## README [中文](https://npmcn.com/package/%40barzhsieh/nuxt-content-mermaid/README.zh-TW.md) | [English](https://npmcn.com/package/%40barzhsieh/nuxt-content-mermaid/README.md) [![nuxt-content-social-card](https://raw.githubusercontent.com/andy820621/nuxt-content-mermaid/main/src/assets/nuxt-content-mermaid.webp)](https://nuxt-content-mermaid.barz.app/zh) # nuxt-content-mermaid [![npm version](https://img.shields.io/npm/v/@barzhsieh/nuxt-content-mermaid/latest.svg?style=flat&colorA=020420&colorB=00DC82)](https://npmjs.com/package/@barzhsieh/nuxt-content-mermaid) [![npm downloads](https://img.shields.io/npm/dm/@barzhsieh/nuxt-content-mermaid.svg?style=flat&colorA=020420&colorB=00DC82)](https://npmjs.com/package/@barzhsieh/nuxt-content-mermaid) [![License](https://img.shields.io/npm/l/@barzhsieh/nuxt-content-mermaid.svg?style=flat&colorA=020420&colorB=00DC82)](https://npmjs.com/package/@barzhsieh/nuxt-content-mermaid) [![Nuxt](https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js)](https://nuxt.com/) [![Mermaid](https://img.shields.io/badge/mermaid-12.x-0f5b9d?logo=mermaid)](https://mermaid.js.org/) [![Nuxt Content](https://img.shields.io/badge/Nuxt%20Content-3.x-00DC82?logo=nuxt.js)](https://content.nuxt.com/) > 本文件說明綁定 Mermaid 12 的 4.x。已凍結的 3.x 仍適用 [3.x 契約](https://npmcn.com/package/%40barzhsieh/nuxt-content-mermaid/docs/ch/DEPENDENCY_AND_MIGRATION_CONTRACT.md)；升級請參閱[升級至 v4](https://nuxt-content-mermaid.barz.app/zh/migration/v4)。 **@barzhsieh/nuxt-content-mermaid** 會將 Nuxt Content Markdown 中的 `mermaid` 程式碼圍欄 (fence) 轉換為響應式、可互動的圖表，並支援延遲載入、深淺色 主題、工具列控制，以及由應用程式提供的渲染元件。 [英文正式文件](https://nuxt-content-mermaid.barz.app/) 是 canonical package documentation。本 README 是 npm 與 GitHub 的精簡發佈摘要； [繁體中文網站](https://nuxt-content-mermaid.barz.app/zh) 為 best-effort translation，可能比英文內容稍晚同步。若兩者有差異，請以英文文件為準。 ## 適用情境 當 Nuxt Content 應用程式需要下列能力時，可使用本模組： - 在 Markdown 中以 Mermaid 程式碼圍欄 (fence) 撰寫圖表； - 在瀏覽器中渲染圖表，並使用套件提供的載入與錯誤狀態； - 跟隨應用程式的深色與淺色模式； - 在全域、單一頁面或單一圍欄 (fence) 設定圖表； - 選用延遲渲染、工具列控制或自訂渲染元件。 本模組管理相容的 Mermaid 版本；應用程式負責 Nuxt、Nuxt Content peer dependencies，以及 Nuxt Content database connector。 ## 相容性 - Node.js `>=22.19.0` - Nuxt `^4.1.0` - Nuxt Content `>=3.5.0 <4.0.0` - ES2024 瀏覽器；Safari／iOS／iPadOS `17.4+` 相依擁有權、v4 遷移邊界與渲染保證，請參閱 [4.x 相依與遷移契約](https://npmcn.com/package/%40barzhsieh/nuxt-content-mermaid/docs/ch/DEPENDENCY_AND_MIGRATION_CONTRACT_V4.md)。 ## 快速開始 安裝本模組與 Nuxt Content peer： ```bash pnpm add @barzhsieh/nuxt-content-mermaid @nuxt/content ``` 註冊模組： ```ts export default defineNuxtConfig({ modules: ['@barzhsieh/nuxt-content-mermaid'], }) ``` 接著在 Content Markdown 檔案中加入 Mermaid 圍欄： ````markdown ```mermaid flowchart LR Markdown --> Content --> Mermaid --> SVG ``` ```` Mermaid 已包含在本模組中，不需要另外安裝。資料庫 connector 選擇與完整的 第一個專案步驟，請參閱[開始使用](https://nuxt-content-mermaid.barz.app/zh/getting-started)。 ## 繁體中文文件 - [開始使用](https://nuxt-content-mermaid.barz.app/zh/getting-started) - [撰寫圖表](https://nuxt-content-mermaid.barz.app/zh/writing-diagrams) - [設定](https://nuxt-content-mermaid.barz.app/zh/configuration) - [疑難排解](https://nuxt-content-mermaid.barz.app/zh/troubleshooting) - [升級至 v3](https://nuxt-content-mermaid.barz.app/zh/migration/v3) - [升級至 v4](https://nuxt-content-mermaid.barz.app/zh/migration/v4) ## 支持與貢獻 如果本模組對你有幫助，歡迎透過 [Ko-fi 支持我的開源工作](https://ko-fi.com/barzhsieh)。 歡迎建立 [Issue](https://github.com/andy820621/nuxt-content-mermaid/issues) 或提交附有清楚摘要與測試結果的 Pull Request。維護者請遵循 [stable release runbook](https://npmcn.com/package/%40barzhsieh/nuxt-content-mermaid/docs/en/RELEASING.md)。 ## 授權 [MIT License](https://npmcn.com/package/%40barzhsieh/nuxt-content-mermaid/LICENSE) ## 常见问题 ### @barzhsieh/nuxt-content-mermaid 是什么？ 用于将美人鱼与 @nuxt/content自动转换 mermaid 由Markdown中的代码块组成响应图表组件,并支持懒惰加载和暗/淡主题切换\. ### 如何安装 @barzhsieh/nuxt-content-mermaid？ 在项目目录运行 npm install @barzhsieh/nuxt-content-mermaid，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：nuxt（^4\.1\.0）、@nuxt/content（\>=3\.5\.0 \<4\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @barzhsieh/nuxt-content-mermaid 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @barzhsieh/nuxt-content-mermaid 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @barzhsieh/nuxt-content-mermaid 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=22\.19\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @barzhsieh/nuxt-content-mermaid 可以商用吗？ @barzhsieh/nuxt-content-mermaid 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @barzhsieh/nuxt-content-mermaid 的下载量有多少？ 根据 npm 官方下载统计，@barzhsieh/nuxt-content-mermaid 在 2026/10/08 – 2026/11/06 这 30 天内被下载 4,301 次，日均约 143 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @barzhsieh/nuxt-content-mermaid 还在维护吗？ 最新版本 4\.0\.1 发布于 2026/10/22（16 天前）；至今共发布 24 个版本，其中过去 12 个月发布了 24 个；首次发布于 2025/11/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。