# @dendronhq/remark-mermaid 中文文档

规范地址：https://npmcn.com/package/%40dendronhq/remark-mermaid/

版本：0\.4\.0
npm 元数据更新时间：2022-08-31T04:41:44.840Z
中文译文更新时间：2026-11-11T22:35:57.926Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：13.9 kB，5 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：1 个
- 首次发布：2021-01-22T01:49:11.513Z
- 最新版本发布：2022-08-31T04:41:44.750Z
- 近 30 天下载量：7302（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

替换 Markdown 的注释插件 `mermaid` 带有制成的 SVG 的图表 .

## 安装

```sh
npm install @dendronhq/remark-mermaid
```

也可以使用：`pnpm add @dendronhq/remark-mermaid`、`yarn add @dendronhq/remark-mermaid`、`bun add @dendronhq/remark-mermaid`

## README

# 评论-美容师

[![NPM](https://img.shields.io/npm/v/remark-mermaid.svg)](https://npmjs.org/packages/remark-mermaid/) [![Travis CI](https://img.shields.io/travis/temando/remark-mermaid.svg)](https://travis-ci.org/temando/remark-mermaid) [![MIT License](https://img.shields.io/github/license/temando/remark-mermaid.svg)](https://en.wikipedia.org/wiki/MIT_License)

将人鱼格式的有栅栏的代码块替换为:

-   链接到已渲染的图形 SVG 文件( 默认模式) .
-   美人鱼格式化的代码用div标签包裹,用于由美人鱼(简单模式)渲染.

你也许也喜欢 [`remark-graphviz`](https://www.npmjs.com/package/remark-graphviz)。 。 。 .

## 安装

```sh
$ npm install remark-mermaid mermaid.cli
```

## 使用量

使用 `mermaid` 可用 `mermaid:` 标题 将生成 SVG 图像.

```md
[Link to a Graph](test/fixtures/assets/example.mmd "mermaid:")
![Embed image of graph](test/fixtures/assets/example.mdd "mermaid:")
```

或者,可以通过使用 `mermaid` 作为 用于栅栏编码块的语言标识符.

\`\`\`mermaid
graph LR
    Start --> Stop
\`\`\`

看看这个项目 [固定装置](https://npmcn.com/package/%40dendronhq/remark-mermaid/test/fixtures) 需要更多的实例.

### 选项

-   `simple`: 当设置为 `true`,插件将把人鱼图包入 `<div class="mermaid">` 元素而不是生成 SVG 。 默认为 `false`。 。 。 .

## 示例

### SVG 生成

鉴于一个文件, `example.md`,包含以下马克下:

\# mermaid code block

\`\`\`mermaid
graph LR
    Start --> Stop
\`\`\`

使用如下语句:

```js
var vfile = require('to-vfile');
var remark = require('remark');
var mermaid = require('remark-mermaid');

var example = vfile.readSync('example.md');

remark()
  .use(mermaid)
  .process(example, function (err, file) {
    if (err) throw err;
    console.log(String(file));
  });
```

将生成一个 SVG 相对 `example.md`和马克下 改为:

```md
# mermaid code block

![](./6b03e143dc2a47a93496133d692c44d5ec012b57.svg "`mermaid` image")
```

要改变 SVG 的写法,设置 `data.destinationDir` 在 vFile 上显示:

```js
var vfile = require('to-vfile');
var remark = require('remark');
var mermaid = require('remark-mermaid');

var example = vfile.readSync('example.md');
example.data = {
  destinationDir: '~/absolute/path/to/output'
};

remark()
  .use(mermaid)
  .process(example, function (err, file) {
    if (err) throw err;
    vfile.writeSync({ path: example.destinationFilePath });
  });
```

这样您就可以从一个目录处理文件,并将结果保存到另一个目录.

### 简单模式

以下代码样本允许简单模式:

```js
var vfile = require('to-vfile');
var remark = require('remark');
var mermaid = require('remark-mermaid');

var example = vfile.readSync('example.md');

remark()
  .use(mermaid, { simple: true })
  .process(example, function (err, file) {
    if (err) throw err;
    console.log(String(file));
  });
```

这将产生以下马克下调输出 :

```md
# mermaid code block

<div class="mermaid">
  graph LR
    Start --> Stop
</div>
```

[美人鱼](https://mermaidjs.github.io/usage.html)

## 常见问题

### @dendronhq/remark-mermaid 是什么？

替换 Markdown 的注释插件 mermaid 带有制成的 SVG 的图表 \.

### 如何安装 @dendronhq/remark-mermaid？

在项目目录运行 npm install @dendronhq/remark-mermaid，或使用 pnpm add / yarn add / bun add。

### @dendronhq/remark-mermaid 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/dendronhq\_\_remark-mermaid 是否存在。

### @dendronhq/remark-mermaid 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @dendronhq/remark-mermaid 可以商用吗？

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

### @dendronhq/remark-mermaid 的下载量有多少？

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

### @dendronhq/remark-mermaid 还在维护吗？

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