mcpField
D
DiagramZu

DiagramZu

远程服务
github.com/yenchieh媒体与设计12 周前更新
代码仓库

关于 DiagramZu

DiagramZu 是面向团队的 MCP 服务,可通过 AI 客户端创建和管理 Mermaid 图表、演示文稿和 Markdown 页面。内容保存在工作区,公开分享需由人员主动操作。

主要功能

  1. 01创建和编辑 Mermaid 图表
  2. 02查看图表结构与版本历史
  3. 03为图表添加评论
  4. 04组合并更新演示文稿
  5. 05管理工作区 Markdown 页面

适用场景

  1. 01通过 AI 客户端起草 Mermaid 图表
  2. 02检查图表变更并讨论节点
  3. 03用现有图表制作演示文稿
  4. 04创建或修订工作区文档

MCP 相关

托管 HTTP 服务提供工作区图表、演示文稿、页面、评论和版本管理工具,也支持本地 stdio。服务使用受限范围的 Bearer 令牌,不提供创建公开分享链接的工具。

配置

远程服务无需本地安装。选择你使用的客户端,复制配置或使用一键安装。

服务地址https://mcp.diagramzu.ai/mcp
一键复制安装命令
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

命令在终端中运行;JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。

工具

详细介绍

@diagramzu/mcp

smithery badge

适用于 diagramzu.ai 的 MCP 服务。Claude Code、Claude Desktop、Cursor、Windsurf、ChatGPT 自定义 GPT,以及任何 MCP 客户端,都可以通过它读取和编写你 Space 中的 Mermaid 图表。

你可以通过与 AI 对话来创建图表,它会将图表保存到你的 Space 中,地址为 diagramzu.ai/app/d/<id>。你的团队可以在此读取图表并发布公开链接。

已收录于官方 MCP Registry,名称为 ai.diagramzu/mcp。

1. 获取令牌

在 diagramzu.ai 注册,然后前往 diagramzu.ai/app/settings/connections 创建 API 令牌。令牌格式类似 dz_live_…,且仅适用于一个 Space——无需单独提供 space-id。

2. 连接客户端

托管服务是最简单的选择:无需安装,也无需构建。只需粘贴配置即可。

Claude Code
claude mcp add --scope user --transport http diagramzu https://mcp.diagramzu.ai/mcp \
  --header "Authorization: Bearer dz_live_xxx"
Claude Desktop、Cursor、Windsurf、Cline

将以下内容添加到客户端的 MCP 配置中(macOS 上 Claude Desktop 的配置文件为 ~/Library/Application Support/Claude/claude_desktop_config.json,Cursor 的配置文件为 ~/.cursor/mcp.json,其他客户端以此类推):

{
  "mcpServers": {
    "diagramzu": {
      "type": "http",
      "url": "https://mcp.diagramzu.ai/mcp",
      "headers": { "Authorization": "Bearer dz_live_xxx" }
    }
  }
}
ChatGPT 自定义 GPT(Actions)

在 GPT 构建器中,添加一个指向 https://mcp.diagramzu.ai/mcp 的 MCP 服务操作,并将 Bearer 令牌身份验证标头设置为你的 dz_live_… 令牌。

本地 stdio(适用于不支持远程 MCP 的客户端)
npx -y @diagramzu/mcp

环境变量:

DIAGRAMZU_BASE_URL=https://diagramzu.ai
DIAGRAMZU_API_TOKEN=dz_live_xxx
DIAGRAMZU_SPACE_ID=<your space id>   # optional

DIAGRAMZU_SPACE_ID 为可选项。如果不设置,服务将使用令牌自身的默认工作区,即创建令牌时所选的工作区。设置后,可为此进程指定另一个默认工作区。

大多数用户应优先选择上述远程 HTTP 传输方式;stdio 方式适用于不支持 HTTP MCP 的客户端。

工作区

令牌的授权范围可以是一个工作区,也可以是其所有者所属的全部工作区。授权时可选择范围(在授权同意页的 Access 单选项中,或通过 Settings → API tokens 设置)。账户范围的令牌会动态跟随所有者的成员关系:加入工作区后,该工作区会被纳入范围;被移出工作区后,该工作区将在下次调用时关闭访问。

  • list_spaces 会显示此连接可以操作的所有工作区、默认工作区,以及你在各工作区中的角色。
  • 其他每个工具都接受可选的 space 参数——工作区 ID、slug 或准确名称(不区分大小写)。省略此参数时,将在默认工作区中操作。如果有多个工作区名称匹配,系统会拒绝请求而不会猜测;请传入 ID 或 slug。
  • 每个工具的结果末尾都会注明其操作所在的工作区。
  • 返回的 /app/... 链接会附带 ?space=,因此打开链接时,如果你是该工作区的成员,浏览器会切换到对应工作区。

工具

工具描述
list_spaces列出此连接可以操作的所有工作区,以及各工作区的 ID、slug、角色和默认状态
list_diagrams列出 Space 中的图表(可用 q 筛选,按 updated / created 排序)
list_folders列出 Space 中的文件夹
get_diagram按 ID 获取单个图表(标题、描述、Mermaid 源码)
create_diagram创建新图表(返回其 ID 和 /app/d/<id> URL)
update_diagram更新现有图表的标题、Mermaid 源码、描述或样式
analyze_diagram获取图表的结构摘要(节点、边、密度)
list_versions列出图表的版本历史
get_version获取图表的指定历史版本
list_comments列出图表评论,按时间从早到晚排序(可选只列出某个节点的讨论串)
add_comment发表评论,可选固定到某个节点或回复某个讨论串
list_decks列出 Space 中的演示文稿,按最近编辑时间从新到旧排序
get_deck按 ID 获取单个演示文稿及其排序后的幻灯片
create_deck将现有图表组合成按顺序排列的演示文稿
update_deck更改演示文稿的标题、描述或幻灯片顺序(slides 采用声明式定义)
list_pages列出工作区的 Markdown 页面(ID、标题、修订版本、摘要;可用 q 筛选)
get_page按 ID 获取单个页面——完整正文、仅大纲或单个章节
create_page创建 Markdown 页面(标题取自正文的 front matter 或首个标题)
update_page编辑页面:使用针对性 edits,或通过 baseRevision 和完整新 body 更新

哪些 URL 是公开的

这里有两种不同的东西都被称为“链接”,但只有一种适用于 Space 外部的用户:

URL谁可以打开
diagramzu.ai/app/d/<id>仅 Space 成员——应用中的图表。
diagramzu.ai/app/present/<deck id>仅 Space 成员——演示文稿的演示视图。
diagramzu.ai/app/pages/<id>仅 Space 成员——应用中的 Markdown 页面。
diagramzu.ai/s/<slug>任何拥有链接的人——公开的只读图表页面。
diagramzu.ai/s/p/<slug>任何拥有链接的人——公开的只读演示文稿。
diagramzu.ai/s/pg/<slug>任何拥有链接的人——公开的只读 Markdown 页面。

这些工具会返回 /app/… URL,因此直接从聊天中复制的链接只对成员开放:发给 Space 外部的用户后,他们会被带到登录页面。要发布内容,请在 DiagramZu 中打开图表、演示文稿或页面,然后使用其 Share 按钮。此 MCP 服务有意不提供生成公开链接的工具——并非因为令牌无法生成链接(dz_live_… 令牌可以通过 REST API 生成),而是因为发布 Space 内容应当是有意为之的人为操作,而非对话的副作用。图表拥有公开链接后,get_diagram 和 update_diagram 会各自在 Share (public, read-only): 一行中报告该链接。

Markdown 页面也以同样的方式分享。 diagramzu.ai/s/pg/<slug> 是其公开只读地址,由用户通过页面的 Share 按钮生成,因此 get_page、create_page 和 update_page 会打印仅限成员访问的 /app/pages/<id> URL,并提示要分享给更多人时使用该按钮。它们不会查找页面的链接:与 get_diagram 不同,它们不会报告 Share (public, read-only): 行,因此页面的公开地址需要由用户提供,而不是由 Agent 查找。

展示你的配置

如果你在 dotfiles 或示例仓库中发布 MCP / Claude Code 配置,可以把这段内容放进 README,让后来者知道图表来自哪里:

[![MCP: diagramzu](https://diagramzu.ai/badge/mcp.svg)](https://diagramzu.ai)

渲染后会显示为一个小型 shields 风格徽章——灰色的 MCP + 靛蓝色的 diagramzu。

本地开发(此仓库)

要开发 diagramzu 本身,请从源代码构建:

cd packages/mcp-diagramzu
pnpm install
pnpm run build
# point your client at: node dist/index.js
# with DIAGRAMZU_BASE_URL / DIAGRAMZU_API_TOKEN (DIAGRAMZU_SPACE_ID optional)

许可证

MIT

评论

支持 Markdown

第一次接触 MCP?

从协议是什么,到在客户端里装上第一个服务,这几条回答覆盖了大多数入门问题。

一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。