图MCP
MCP服务器可以让AI代理将描述转换为 经过验证的交互式图表一个HTML文件，你可以打开，探索和分享。
- 10种图表类型： 架构、工作流、序列、数据流、生命周期、ERD、类、树、时间线和瀑布。
- 单页讲解员: 首先是答案，然后是原因、步骤、表格、比较和嵌入的图表。
- 为探索而生： 将鼠标悬停在任何项目上或选择TAB，以查看其详细信息及其上游和下游连接。单击邻居即可跟随该路径。缩放和平移大型图表。
- 值得信赖的输出: 通过精确的JSON路径进行严格的验证，确定的呈现，以及将每个文件与其嵌入的源绑定在一起的篡改检查。
- 访问: 完整的键盘支持，屏幕阅读器标签，明亮和黑暗的主题，和运动，尊重你的减少运动设置。
- 独立的: 没有外部请求。图表导出为SVG或PNG。
安装
需要Node.js 18或更新版本。向Claude Code注册服务器：
claude mcp add diagrammer -- npx -y diagrammer-mcp
将其注册到任何其他MCP客户端：
{
"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 | 切换亮/暗，打开或关闭动画，或导出图表。 |
文档
发展
git clone https://github.com/VinodhDeva/diagrammer.git
cd diagrammer && npm install && npm test
看到 发展 查看代码布局和发布步骤。