内容
# @diagrammo/dgmo-mcp
**将对话转化为真正的图表 — 无需离开您的AI工具。**
[](https://www.npmjs.com/package/@diagrammo/dgmo-mcp)
[](https://www.npmjs.com/package/@diagrammo/dgmo-mcp)
[](./LICENSE)
这个MCP服务器为Claude（和任何MCP兼容的AI工具）提供了从简洁的文本标记中渲染**时序图、流程图、ER图、C4架构、甘特图和35+其他图表类型**的能力，然后将其交给一个完整的编辑器进行完善。在聊天中请求一个图表；得到一个真正的图表。
<table>
<tr>
<td width="50%"><img src="https://raw.githubusercontent.com/diagrammo/dgmo-mcp/main/assets/sequence.png" alt="时序图" /></td>
<td width="50%"><img src="https://raw.githubusercontent.com/diagrammo/dgmo-mcp/main/assets/c4.png" alt="C4架构图" /></td>
</tr>
<tr>
<td width="50%"><img src="https://raw.githubusercontent.com/diagrammo/dgmo-mcp/main/assets/gantt.png" alt="甘特图" /></td>
<td width="50%"><img src="https://raw.githubusercontent.com/diagrammo/dgmo-mcp/main/assets/flowchart.png" alt="流程图" /></td>
</tr>
</table>
## 功能
用普通语言询问 — *"将身份验证流程绘制为时序图"*， *"将Q3计划绘制为甘特图"*， *"将我们的服务绘制为C4图"* — 然后Claude编写标记并渲染它。标记保持可读和可差异化：
```
流程图 Mutiny Resolution
方向-tb
[Sail] 在船长下启航
{Trouble?} 船员中出现不满？
{Vote} 船员投票表决
[Mutiny] 夺取船只
(Sail) -> (Trouble?)
(Trouble?) -是-> (Vote)
(Vote) -叛变-> (Mutiny)
```
→ 渲染为上面的流程图。所有渲染操作**本地进行** — 没有图表数据离开您的机器。
## 工具
| 工具 | 功能 |
| --- | --- |
| `render_diagram` | 将DGMO标记渲染为**SVG或PNG** |
| `preview_diagram` | 渲染一个或多个图表，并在浏览器中打开一个**HTML预览** |
| `generate_report` | 构建一个精致的**多节HTML报告**，带有目录和可选源 |
| `list_chart_types` | 列出所有支持的图表类型 |
| `get_language_reference` | 获取DGMO语法文档以进行准确生成 |
| **`share_diagram`** | 获取一个可分享的**diagrammo.app** URL — 将您的图表交给网页编辑器 |
| **`open_in_app`** | 将图表**直接打开到Diagrammo桌面应用程序**进行编辑 |
最后两个是离开聊天的桥梁：Claude生成的图表成为您可以完善、重新设计和嵌入的内容 — 请参见下文。
## 超出MCP服务器
MCP服务器是进入 **[Diagrammo](https://diagrammo.app)** 的一个入口点 — 一个基于相同DGMO标记的完整生态系统。在聊天中生成，在真正的编辑器中完善，并嵌入任何地方：
- **[diagrammo.app](https://diagrammo.app)** — 桌面应用程序。`open_in_app` 将AI生成的图表直接放入其中，带有实时预览、调色板和导出。
- **[online.diagrammo.app](https://online.diagrammo.app)** — 浏览器中的完整编辑器，零安装。`share_diagram` URL直接在此处打开。
- **文档集成** — 将DGMO围栏代码块放入您的文档站点： [remark-dgmo](https://www.npmjs.com/package/remark-dgmo)、 [astro-dgmo](https://www.npmjs.com/package/astro-dgmo)、 [docusaurus-plugin-dgmo](https://www.npmjs.com/package/docusaurus-plugin-dgmo)、 [fumadocs-dgmo](https://www.npmjs.com/package/fumadocs-dgmo)。
- **Obsidian** — *Diagrammo Diagrams* 社区插件在您的保险库中渲染DGMO。
- **CLI** — `npx @diagrammo/dgmo file.dgmo -o out.png`，或通过Homebrew安装。
> **一种标记，处处皆可。** 您在此处生成的图表在应用程序、文档和Obsidian中渲染相同 — 因为它们都使用DGMO。
**[→ 在 diagrammo.app 上免费试用](https://diagrammo.app)**
## 安装
### 最简单 — 一个命令
安装 [`dgmo`](https://www.npmjs.com/package/@diagrammo/dgmo) CLI 并让它配置一切：
```bash
npm install -g @diagrammo/dgmo # 或：brew install diagrammo/dgmo/dgmo
dgmo install # 自动检测Claude Code、Codex、Claude Desktop、Cursor、…
```
`dgmo install` 非交互式地配置每个检测到的助手，并将其指向 `dgmo mcp`，因此没有单独的包需要安装或提示需要回答。 使用 `dgmo install claude-code` （或 `codex`、`claude-desktop`、…）针对一个界面。
### 手动配置
如果您更喜欢自己编辑配置，请通过 `npx` 将任何MCP客户端指向服务器（无需全局安装）：
**Claude Code** — `.claude/settings.local.json`; **Claude Desktop** — `~/Library/Application Support/Claude/claude_desktop_config.json`:
```json
{
"mcpServers": {
"dgmo": {
"command": "npx",
"args": ["-y", "@diagrammo/dgmo-mcp"]
}
}
}
```
如果您已安装 `dgmo` CLI，则 `{ "command": "dgmo", "args": ["mcp"] }` 也有效。保存后重启客户端 — 工具会自动出现。
## 隐私
所有渲染操作都是**本地的**。您的图表标记和生成的图像永远不会离开您的机器，除非您显式调用 `share_diagram` （它将图表编码为 diagrammo.app URL）。请参阅 [隐私条款](https://diagrammo.app/terms#mcp-privacy)。
## 开发中心（AI 调整工具）
```bash
pnpm hub
```
一个命令，一个服务器，一个浏览器标签。中心打开一个带有选项卡的 shell，涵盖三个 AI 调整开发工具 — 在顶部选项卡之间切换，没有单独的端口或命令需要记住：
- **触发器调整** — 编辑驱动 `suggest_chart_type` 的短语/概念词汇，实时评分提示，保存回 `triggers.json`。
- **LLM 评判器** — 使用 `claude -p` 评判图表类型描述与提示。
- **指导工作室** — 编写每种类型的**样式指导**，服务器提供（`<!-- TIPS -->` 块在 dgmo 的 `language-reference.md` 中，分割成 `get_language_reference`）：选择类型，编辑 AI 被告知如何样式化它，运行提示与提交的数据夹具（因此输入永远不会在运行之间移动），并在生成的 DGMO 和渲染图像旁边查看。选择器兼作覆盖率条；“比较 3×”渲染无指导与您的提示以进行肉眼检查；保存验证并写回 `language-reference.md`。
这些工具仅限开发使用，从不捆绑到发布的服务器。（独立的 `pnpm harness` 和 `pnpm studio` 脚本仍然单独运行一个工具，如果您希望单独使用它们。）
## 贡献与发布
开发设置和发布工作流位于 [CONTRIBUTING.md](./CONTRIBUTING.md)。
## 许可证
MIT
