# @avol-io/react-mermaid 中文文档

规范地址：https://npmcn.com/package/%40avol-io/react-mermaid/

版本：0\.3\.1
npm 元数据更新时间：2026-04-18T17:31:10.894Z
中文译文更新时间：2026-11-08T01:04:58.774Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：48.5 kB，12 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：1 个
- peer 依赖：mermaid \>=11，react \>=19，react-dom \>=19，react-zoom-pan-pinch \>=3
- 首次发布：2026-04-09T00:19:40.266Z
- 最新版本发布：2026-04-18T17:31:10.750Z
- 近 30 天下载量：1953（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 5 个）

## 中文简介

用缩放、平板和全屏支持渲染美人鱼图的反射组件.

## 安装

```sh
npm install @avol-io/react-mermaid
```

也可以使用：`pnpm add @avol-io/react-mermaid`、`yarn add @avol-io/react-mermaid`、`bun add @avol-io/react-mermaid`

## README

# @avol-io/反应-雇佣军

> 反应组件 [美人鱼](https://mermaid.js.org/) 带有缩放,平板,方向控制,全屏,下载,和 draw.io 集成的图.

[![Storybook](https://img.shields.io/badge/Storybook-docs-ff4785?logo=storybook&logoColor=white)](https://www.avol.io/react-mermaid/) [![npm](https://img.shields.io/npm/v/@avol-io/react-mermaid?color=cb3837&logo=npm)](https://www.npmjs.com/package/@avol-io/react-mermaid) [![license](https://img.shields.io/npm/l/@avol-io/react-mermaid)](https://github.com/avol-io/2chatty/blob/main/LICENSE)

* * *

## 安装

```bash
npm install @avol-io/react-mermaid
```

### 同伴依赖关系

```bash
npm install react react-dom mermaid react-zoom-pan-pinch
```

| 软件包 | 需要的版本 |
| --- | --- |
| `react` | `>=19` |
| `react-dom` | `>=19` |
| `mermaid` | `>=11` |
| `react-zoom-pan-pinch` | `>=3` |

* * *

## 使用量

```tsx
import { MermaidDiagram } from '@avol-io/react-mermaid'

export function App() {
  return (
    <MermaidDiagram
      chart={`
        graph TD
          A[Start] --> B{Decision}
          B -- Yes --> C[Done]
          B -- No  --> D[Skip]
      `}
      width="100%"
      height="400px"
    />
  )
}
```

* * *

## API 密码

### 美人鱼地图

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `chart` | `string` | 所需经费 | 美人鱼源文本 |
| `width` | `string` | `"100%"` | CSS 容器宽度 |
| `height` | `string` | `"400px"` | CSS 容器高度 |
| `config` | `MermaidConfig` | —— 说 | 转交给 `mermaid.initialize()` |
| `enableDownloadSvg` | `boolean` | `true` | 在下载时显示“ SVG” 选项 |
| `enableDownloadMmd` | `boolean` | `true` | 在下载下拉时显示“.mmd”选项 |
| `enableDrawio` | `boolean` | `true` | 在工具栏中显示“ 打开 Draw.io ” 按钮 |

> 当两者 `enableDownloadSvg` 财务报告和审定财务报表 `enableDownloadMmd` 为: `false`,下载 完全不提供下拉按钮 .

### 模式

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `title` | `string` | `"Error"` | 模式方向 |
| `onClose` | `() => void` | 所需经费 | 使用 Escape 调用、 覆盖点击或关闭按钮 |
| `children` | `ReactNode` | 所需经费 | 模块体含量 |

* * *

## 工具栏

### 右上边

-   **下载** - 与SVG和 `.mmd` 选项(通过道具可独立切换)
-   **以 Draw.io 打开** - 打开 [app.diagrams.net (英语)](https://app.diagrams.net/) 通过美人鱼导入 URL 预装图表
-   **全屏** 切换固定的全屏覆盖

### 右下( 3×3 格)

-   **箭头按钮** - 将图表填入所有四个方向
-   **居中按钮** ——重排视图以适应容器中的内容
-   **缩小/ 缩小** 步骤缩放( 轮子缩放也支持, 沿着光标)

* * *

## 样式

不需要 CSS 导入 。 第一次制作时 `<style id="avol-react-mermaid-styles">` 标记被注入 输入 `<head>` 一次并被所有实例重复使用.

所有颜色和大小都暴露为 **CSS 自定义属性**覆盖它们 `:root` (单位:千美元) 全球主题,或用于逐一设定主题的容器类别的范围:

```css
/* dark theme example */
:root {
  --mermaid-bg: #1f2937;
  --mermaid-border-color: #374151;
  --mermaid-toolbar-bg: rgba(17, 24, 39, 0.9);
  --mermaid-toolbar-color: #f9fafb;
  --mermaid-toolbar-hover-bg: #111827;
  --mermaid-toolbar-border: #4b5563;
  --mermaid-fullscreen-bg: #111827;
  --mermaid-dropdown-bg: #1f2937;
  --mermaid-dropdown-item-color: #f3f4f6;
  --mermaid-dropdown-item-hover: #374151;
}
```

### 可用的令牌

| 脚本 | 默认 | 控件 |
| --- | --- | --- |
| `--mermaid-bg` | `transparent` | 容器背景 |
| `--mermaid-border-color` | `rgba(0,0,0,0.12)` | 容器边框颜色 |
| `--mermaid-border-radius` | `8px` | 容器角半径 |
| `--mermaid-toolbar-bg` | `rgba(255,255,255,0.9)` | 按钮背景 |
| `--mermaid-toolbar-border` | `rgba(0,0,0,0.12)` | 按钮边框 |
| `--mermaid-toolbar-color` | `#374151` | 按钮图标/文本颜色 |
| `--mermaid-toolbar-hover-bg` | `#ffffff` | 按钮徘徊背景 |
| `--mermaid-toolbar-hover-shadow` | `0 2px 8px rgba(0,0,0,0.1)` | 按钮徘徊阴影 |
| `--mermaid-toolbar-focus-ring` | `#01696f` | 焦点大纲颜色 |
| `--mermaid-toolbar-btn-size` | `30px` | 按钮宽度和高度 |
| `--mermaid-toolbar-btn-radius` | `6px` | 按钮角半径 |
| `--mermaid-dropdown-bg` | `#ffffff` | 下拉面板背景 |
| `--mermaid-dropdown-border` | `rgba(0,0,0,0.1)` | 下拉边框 |
| `--mermaid-dropdown-shadow` | `0 4px 12px rgba(0,0,0,0.12)` | 放下阴影 |
| `--mermaid-dropdown-item-hover` | `#f3f4f6` | 空降项目徘徊背景 |
| `--mermaid-dropdown-item-color` | `#374151` | 下拉项目文本颜色 |
| `--mermaid-error-bg` | `#fef2f2` | 错误横幅背景 |
| `--mermaid-error-border` | `#fecaca` | 错误横幅边框 |
| `--mermaid-error-color` | `#dc2626` | 错误的横幅文字 |
| `--mermaid-fullscreen-bg` | `#ffffff` | 全屏覆盖背景 |
| `--mermaid-fullscreen-zindex` | `9998` | 全屏幕 z 索引 |

* * *

## 实时文件

[https://www.avol.io/resact-mermaid/ 页面存档备份,存于互联网档案馆](https://www.avol.io/react-mermaid/)

* * *

## 许可证

麻省理工学院 [页:1](https://avol.io/)

## 常见问题

### @avol-io/react-mermaid 是什么？

用缩放、平板和全屏支持渲染美人鱼图的反射组件\.

### 如何安装 @avol-io/react-mermaid？

在项目目录运行 npm install @avol-io/react-mermaid，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：mermaid（\>=11）、react（\>=19）、react-dom（\>=19）、react-zoom-pan-pinch（\>=3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @avol-io/react-mermaid 支持 TypeScript 吗？

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

### @avol-io/react-mermaid 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @avol-io/react-mermaid 需要什么版本的 Node\.js？

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

### @avol-io/react-mermaid 可以商用吗？

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

### @avol-io/react-mermaid 的下载量有多少？

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

### @avol-io/react-mermaid 还在维护吗？

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