# @boneskull/typedoc-plugin-mermaid 中文文档

规范地址：https://npmcn.com/package/%40boneskull/typedoc-plugin-mermaid/

版本：0\.2\.1
npm 元数据更新时间：2026-02-01T03:22:16.432Z
中文译文更新时间：2026-11-08T10:52:11.772Z
软件包许可：BlueOak-1\.0\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40boneskull/typedoc-plugin-mermaid
原文对照：https://npmcn.com/package/%40boneskull/typedoc-plugin-mermaid/?lang=original
项目主页：https://github.com/boneskull/typedoc-plugin-mermaid2#readme
源码仓库：https://github.com/boneskull/typedoc-plugin-mermaid2

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：50.9 kB，9 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.0\.0
- 运行依赖：0 个
- peer 依赖：mermaid \>=11\.0\.0，typedoc \>=0\.27\.0 \|\| ^0\.28\.0
- 首次发布：2026-01-10T07:09:02.083Z
- 最新版本发布：2026-02-01T03:22:16.116Z
- 近 30 天下载量：9657（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 3 个）

## 中文简介

用于渲染美人鱼图的 TypeDoc 插件

## 安装

```sh
npm install @boneskull/typedoc-plugin-mermaid
```

也可以使用：`pnpm add @boneskull/typedoc-plugin-mermaid`、`yarn add @boneskull/typedoc-plugin-mermaid`、`bun add @boneskull/typedoc-plugin-mermaid`

## README

# @ boneskull/ typedoc- plugin- 美人鱼

> 用于渲染美人鱼图的 TypeDoc 插件

此插件将您类型Doc 文档中的美人鱼代码块转换为 绘制出图表。 它会自动适应TypeDoc的光和暗的主题.

## 特征

-   栅栏码块的美人鱼图
-   基于 TypeDoc 主题的 暗/ 淡主题自动切换
-   当 JavaScript 被禁用时, Graceful 回落到普通代码
-   从CDN或本地装入美人鱼 `node_modules`
-   响应图大小

## 安装

```shell
npm install @boneskull/typedoc-plugin-mermaid -D
```

## 使用量

将插件添加到您的 `typedoc.json`数字 :

```json
{
  "ignoredHighlightLanguages": ["mermaid"],
  "plugin": ["@boneskull/typedoc-plugin-mermaid"]
}
```

这个 `ignoredHighlightLanguages` 选项沉默类型Doc警告 `mermaid` 不被识别为突出显示语言( 此插件单独处理) .

或者通过命令行 :

```shell
typedoc --plugin @boneskull/typedoc-plugin-mermaid
```

然后在文档注释中使用美人鱼代码块 :

```typescript
/**
 * Represents a workflow state machine.
 *
 * ```mermaid
 * stateDiagram-v2
 *   [*] --> Idle
 *   Idle --> Processing: start()
 *   Processing --> Complete: finish()
 *   Processing --> Error: fail()
 *   Complete --> [*]
 *   Error --> Idle: retry()
 * ```
 */
export class Workflow {
  // ...
}
```

### 支持的图表类型

美人鱼作品支持的任何图表类型:

-   流程图
-   序列图
-   类图
-   状态图
-   实体关系图
-   甘特图
-   拼图
-   还有...

见 [美人鱼文档](https://mermaid.js.org/intro/) 用于所有图表 类型和语法.

## 配置

### `mermaidSource`

从哪里装入美人鱼图书馆. 默认为 `"cdn"`。 。 。 .

| 数值 | 说明 |
| --- | --- |
| `"cdn"` | 从 CDN URL 中装入(通过 `mermaidCdnUrl`(中文(简体) ) |
| `"local"` | 复制美人鱼的无害环境管理包 `node_modules` 到文件输出 |

**类型doc.json :**

```json
{
  "mermaidSource": "local"
}
```

使用时 `"local"`,您必须在您的项目中安装美人鱼:

```shell
npm install mermaid -D
```

插件复制美人鱼的无害环境管理切入点并块目录到 `assets/mermaid/` 在文档输出中。 图表专用代码被懒惰地装入 需求,所以只有您实际使用的图表类型被浏览器下载.

**使用 `"local"` 需要时:**

-   离线文档
-   空载或受限制的网络环境
-   绑定的美人鱼版本与您的文档捆绑
-   全面控制美人鱼分布

### `mermaidCdnUrl`

装入美人鱼库的 URL 。 默认为 `https://unpkg.com/mermaid@latest/dist/mermaid.esm.min.mjs`。 。 。 .

仅在 `mermaidSource` 实值 `"cdn"` (默认).

这对使用替代的CDN或自宿库有用.

**类型doc.json :**

```json
{
  "mermaidCdnUrl": "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs"
}
```

**命令行 :**

```shell
typedoc --mermaidCdnUrl "https://your-cdn.example.com/mermaid.esm.min.mjs"
```

## 如何运作

插件钩入了TypeDoc的 HTML 渲染管道并:

1.  查找 `<pre><code class="mermaid">` 输出中的块
2.  装入装有暗色和浅色标本的容器
3.  输入 CSS 和 JavaScript 来渲染图表和切换主题
4.  保留原始代码作为非 JS 环境的倒置

图表是使用美人鱼库制作的客户端, 无论是来自 cDN 或文档输出中的本地副本(取决于 `mermaidSource`) (中文(简体) ).

## 承认

此插件是从 [类型doc- 插件- 人工智能](https://github.com/kamiazya/typedoc-plugin-mermaid) 以 [卡米亚扎](https://github.com/kamiazya)。 。 。 .

### 与原文的区别

| 特性 | 此插件 | kamiazya/型多克-插素-美人鱼 |
| --- | --- | --- |
| 类型文件版本 | 0.27+ (中文(简体) ) | 0.22-0.26 (中文(简体) ) |
| 制定战略 | 带有 CSS 切换的双向暗光图 | 每个区块的单图 |
| 主题支持 | 基于 TypeDoc 主题的自动暗光/ 灯光 | 手动主题配置 |
| `@mermaid` JSDoc 标签 | 不予支持 | 支助 |
| 美人鱼加载 | CDN 或带有懒散块的本地无害环境管理包 | 包装 UMD 或 CDN |
| 离线支持 | 是(与 `mermaidSource: "local"`(中文(简体) ) | 是(捆绑时) |
| 配置选项 | `mermaidSource`, (中文(简体) ), `mermaidCdnUrl` | `mermaidVersion`, (中文(简体) ), `mermaidCdn` |

**为什么是新插件?**

原插件因中断API而停止与 TypeDoc 0.27+ 工作 更改和似乎未保留.

## 许可证

版权 2026 [克里斯托弗·"波内斯库尔"·希勒](https://github.com/boneskull)获得许可 [蓝橡-1.0.0](https://blueoakcouncil.org/license/1.0.0)。 。 。 .

## 常见问题

### @boneskull/typedoc-plugin-mermaid 是什么？

用于渲染美人鱼图的 TypeDoc 插件

### 如何安装 @boneskull/typedoc-plugin-mermaid？

在项目目录运行 npm install @boneskull/typedoc-plugin-mermaid，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：typedoc（\>=0\.27\.0 \|\| ^0\.28\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @boneskull/typedoc-plugin-mermaid 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @boneskull/typedoc-plugin-mermaid 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @boneskull/typedoc-plugin-mermaid 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @boneskull/typedoc-plugin-mermaid 可以商用吗？

@boneskull/typedoc-plugin-mermaid 使用 BlueOak-1\.0\.0 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @boneskull/typedoc-plugin-mermaid 的下载量有多少？

根据 npm 官方下载统计，@boneskull/typedoc-plugin-mermaid 在 2026/10/09 – 2026/11/07 这 30 天内被下载 9,657 次，日均约 322 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @boneskull/typedoc-plugin-mermaid 还在维护吗？

最新版本 0\.2\.1 发布于 2026/02/01（9 个月前）；至今共发布 3 个版本，其中过去 12 个月发布了 3 个；首次发布于 2026/01/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。