# diagrammer-mcp 中文文档

规范地址：https://npmcn.com/package/diagrammer-mcp/

版本：0\.6\.0
npm 元数据更新时间：2026-11-03T11:48:27.799Z
中文译文更新时间：2026-11-03T11:53:16.426Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/diagrammer-mcp
原文对照：https://npmcn.com/package/diagrammer-mcp/?lang=original
项目主页：https://github.com/VinodhDeva/diagrammer#readme
源码仓库：https://github.com/VinodhDeva/diagrammer

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

- 包体积（解压后）：204 kB，41 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=18
- 运行依赖：1 个
- 首次发布：2026-11-03T11:10:30.499Z
- 最新版本发布：2026-11-03T11:48:27.601Z
- 已发布版本数：3（近 12 个月 3 个）

## 中文简介

MCP服务器，将经过验证的图表（架构、工作流、序列、数据流、生命周期、ERD、类、树、时间线、瀑布）和单页解释器呈现为独立的HTML。

## 安装

```sh
npm install diagrammer-mcp
```

也可以使用：`pnpm add diagrammer-mcp`、`yarn add diagrammer-mcp`、`bun add diagrammer-mcp`

## README

# 图MCP

[![npm](https://img.shields.io/npm/v/diagrammer-mcp)](https://www.npmjs.com/package/diagrammer-mcp)

MCP服务器可以让AI代理将描述转换为 **经过验证的交互式图表**一个HTML文件，你可以打开，探索和分享。

-   **10种图表类型：** 架构、工作流、序列、数据流、生命周期、ERD、类、树、时间线和瀑布。
-   **单页讲解员:** 首先是答案，然后是原因、步骤、表格、比较和嵌入的图表。
-   **为探索而生：** 将鼠标悬停在任何项目上或选择TAB，以查看其详细信息及其上游和下游连接。单击邻居即可跟随该路径。缩放和平移大型图表。
-   **值得信赖的输出:** 通过精确的JSON路径进行严格的验证，确定的呈现，以及将每个文件与其嵌入的源绑定在一起的篡改检查。
-   **访问:** 完整的键盘支持，屏幕阅读器标签，明亮和黑暗的主题，和运动，尊重你的减少运动设置。
-   **独立的:** 没有外部请求。图表导出为SVG或PNG。

## 安装

需要Node.js 18或更新版本。向Claude Code注册服务器：

```bash
claude mcp add diagrammer -- npx -y diagrammer-mcp
```

将其注册到任何其他MCP客户端：

```json
{
  "mcpServers": {
    "diagrammer": { "command": "npx", "args": ["-y", "diagrammer-mcp"] }
  }
}
```

重新启动客户端。然后问，例如，“画出这个回购的架构”或“用一页纸的解释解释这个决定”。

## 工具

| 工具 | 目的 |
| --- | --- |
| `diagram_guide` | 为问题推荐图表类型。 |
| `diagram_authoring_context` | 返回类型的提示、模式和示例。 |
| `diagram_finalize` | 验证、呈现和检查候选对象，然后写入HTML文件和收据。 |
| `diagram_validate` | 仅验证候选人。 |
| `diagram_check` | 重新检查现有的HTML文件是否被篡改或损坏。 |

## 探索图表

| 这样做 | 为了得到这个 |
| --- | --- |
| 将鼠标悬停在项目上，或 选项卡 它 | 详细信息面板显示其名称、类型、组、描述和数据，以及其 **上游** 连接（琥珀色）和 **下游** 连接(绿色)。 |
| 单击，或按 输入 | 固定面板。单击列出的邻居跳转到该邻居。 |
| 新闻 Esc | 关闭面板。 |
| 使用 `−` / `+` / **适合** / **100％**， Ctrl/⌘ +滚动，或拖动 | 缩放和平移。大型图表的打开率为75%或更高，这样标签就可以保持可读性。 |
| 使用 **主题**， **运动**， **SVG** 或 **PNG** | 切换亮/暗，打开或关闭动画，或导出图表。 |

## 文档

-   [指南](https://npmcn.com/package/diagrammer-mcp/docs/guide.md)：它是如何工作的，查看器，选择类型，工具，输出文件，检查，每个诊断代码，配置，故障排除和开发。
-   [模式参考](https://npmcn.com/package/diagrammer-mcp/docs/schema-reference.md)：每种类型的每个字段，生成自 [`schemas/`](https://npmcn.com/package/diagrammer-mcp/schemas/)。
-   [例子](https://npmcn.com/package/diagrammer-mcp/examples/)每种类型一名工作候选人。

## 发展

```bash
git clone https://github.com/VinodhDeva/diagrammer.git
```

```bash
cd diagrammer && npm install && npm test
```

看到 [发展](https://npmcn.com/package/diagrammer-mcp/docs/guide.md#development) 查看代码布局和发布步骤。

## 许可证

麻省理工学院。看到 [许可证](https://npmcn.com/package/diagrammer-mcp/LICENSE)． 第三方通知在 [请注意](https://npmcn.com/package/diagrammer-mcp/NOTICE)． 图形布局的用途 [dagre](https://github.com/dagrejs/dagre)，在麻省理工学院许可下。

## 常见问题

### diagrammer-mcp 是什么？

MCP服务器，将经过验证的图表（架构、工作流、序列、数据流、生命周期、ERD、类、树、时间线、瀑布）和单页解释器呈现为独立的HTML。

### 如何安装 diagrammer-mcp？

在项目目录运行 npm install diagrammer-mcp，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 diagrammer-mcp，可以用 npx diagrammer-mcp 直接运行。

### diagrammer-mcp 支持 TypeScript 吗？

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

### diagrammer-mcp 支持 ESM 还是 CommonJS？

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

### diagrammer-mcp 需要什么版本的 Node\.js？

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

### diagrammer-mcp 可以商用吗？

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

### diagrammer-mcp 还在维护吗？

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