drawio-mcp

GitHub
2.4k 143 简单 1 次阅读 今天Apache-2.0语言模型插件
AI 解读 由 AI 自动生成,仅供参考

drawio-mcp 是 draw.io 官方推出的开源服务,旨在让大语言模型(LLM)能够直接创建、编辑和展示流程图。它解决了 AI 在生成图表时通常只能输出静态图片或难以修改的痛点,实现了从“文字描述”到“可编辑矢量图”的无缝转化。

该工具提供了四种灵活的集成方式:既支持在聊天界面中直接内嵌渲染交互式图表,也能调用本地 draw.io 编辑器打开文件,还能生成标准的 .drawio 源文件或图片。其独特亮点在于强大的形状搜索功能,能从上万种专业图标库(如 AWS、UML、网络拓扑等)中精准匹配样式,并原生支持 XML、CSV 及 Mermaid 多种格式。

drawio-mcp 特别适合开发者、技术文档撰写人、系统架构师以及需要频繁绘制流程图的研究人员使用。对于希望在不安装额外软件的情况下快速获得高质量图表的普通用户,它也提供了基于项目指令的轻量级方案。无论是嵌入本地开发工作流,还是在云端对话中即时预览,drawio-mcp 都能帮助用户高效地将抽象逻辑转化为直观、可反复编辑的专业图表。

使用场景

某后端架构师正在向团队解释新设计的微服务通信流程,需要快速生成一张包含 AWS 组件和时序逻辑的系统架构图。

没有 drawio-mcp 时

  • 工程师必须中断编程思路,手动打开 draw.io 网页或桌面端,在数千个图标中费力查找对应的 AWS Lambda 和 API Gateway 形状。
  • 绘制连线和对齐元素完全依赖鼠标拖拽,调整布局耗时耗力,难以保证图表的专业美观度。
  • 完成绘图后需手动导出图片或 XML 文件,再切换回聊天窗口上传,沟通链路冗长且容易版本混乱。
  • 若需修改细节(如增加一个数据库节点),往往需要重新经历一遍“打开编辑器 - 修改 - 导出 - 上传”的繁琐循环。

使用 drawio-mcp 后

  • 工程师直接在对话中输入“创建包含 AWS Lambda 和 API Gateway 的微服务时序图”,drawio-mcp 自动调用 search_shapes 精准匹配图标并生成完整 XML。
  • 借助 MCP App Server,生成的交互式图表直接内嵌在聊天窗口中,无需跳转浏览器即可预览和缩放查看细节。
  • 发现逻辑遗漏时,只需追加指令“在用户服务后增加 Redis 缓存层”,drawio-mcp 即刻更新图表并原地刷新,实现“所说即所得”。
  • 支持直接编辑原生 .drawio 文件,团队成员可基于 AI 生成的底稿继续在本地深度定制,完美保留可编辑性。

drawio-mcp 将原本割裂的“构思 - 绘图 - 沟通”流程融合为流畅的自然语言交互,让技术图表的创建像编写代码一样高效敏捷。

运行环境要求

操作系统
  • Linux
  • macOS
  • Windows
GPU

未说明

内存

未说明

依赖
notes该工具主要基于 Node.js 运行,而非 Python。提供四种集成方式:1. MCP App Server(可托管或本地运行,需支持 MCP Apps 协议的主机);2. MCP Tool Server(通过 npm 安装,直接在浏览器打开 draw.io);3. Skill + CLI(需安装 draw.io 桌面版以使用导出功能);4. Project Instructions(无需安装,仅需在 Claude Projects 中粘贴指令)。若需重新生成形状搜索索引,则需本地检出 drawio-dev 源码仓库。
python未说明
Node.js
npm
@drawio/mcp (npm 包)
jsdom (用于生成形状索引)
drawio-mcp hero image

快速开始

draw.io MCP 服务器

这是官方的 draw.io MCP(模型上下文协议)服务器,使大型语言模型能够在 draw.io 编辑器中创建和打开图表。

创建图表的四种方式

本仓库提供了四种将 draw.io 与 AI 助手集成的方法。请选择适合您设置的方式:

MCP 应用服务器 MCP 工具服务器 技能 + CLI 项目指令
工作原理 在聊天中内联渲染图表 在浏览器中打开图表 生成 .drawio 文件,可选导出为 PNG/SVG/PDF Claude 通过 Python 生成 draw.io URL
图表输出 对话中嵌入的交互式查看器 新标签页中的 draw.io 编辑器 .drawio.drawio.png / .svg / .pdf 可点击的 draw.io 链接
是否需要安装 否(托管在 mcp.draw.io 是(npm 包) 复制技能文件 + draw.io 桌面版 不需要 — 直接粘贴指令
支持 XML、CSV、Mermaid 仅 XML ✅ 三者均支持 仅 XML(原生格式) ✅ 三者均支持
可在 draw.io 中编辑 通过“在 draw.io 中打开”按钮 ✅ 直接编辑 ✅ 直接编辑 通过链接
兼容平台 Claude.ai、VS Code、任何 MCP Apps 主机 Claude Desktop、任何 MCP 客户端 Claude Code Claude.ai(配合 Projects)
最适合场景 聊天中的内联预览 本地桌面工作流 本地开发工作流 快速搭建,无需安装

MCP 应用服务器

MCP 应用服务器使用 MCP Apps 协议,在 AI 聊天界面中将 draw.io 图表 内联 渲染。图表不会打开在一个新的浏览器标签页中,而是直接以交互式 iframe 的形式显示在对话中。

官方托管的端点地址为:

https://mcp.draw.io/mcp

您可以将此 URL 添加到 Claude.ai 或任何兼容 MCP Apps 的主机中作为远程 MCP 服务器——无需任何安装。

您也可以通过 Node.js 在本地运行该服务器,或者将其部署到 Cloudflare Workers 上。

工具:

  • create_diagram — 将 draw.io XML 渲染为聊天中内联的交互式图表
  • search_shapes — 根据关键词搜索 draw.io 所有库中的 10,000 多种形状(AWS、Azure、GCP、P&ID、电气、Cisco、Kubernetes、UML、BPMN 等)。返回可以直接用于 XML 的精确样式字符串。在调用 create_diagram 之前,可以先使用此工具找到正确的形状。

完整文档 →

注意: 内联图表渲染需要支持 MCP Apps 扩展的 MCP 主机。在不支持 MCP Apps 的主机中,该工具仍然可以正常工作,但会以文本形式返回 XML。


MCP 工具服务器

最初的 MCP 服务器,可以直接在 draw.io 编辑器中打开图表。支持 XML、CSV 和 Mermaid.js 格式,并提供灯箱模式和暗黑模式选项。已发布为 npm 上的 @drawio/mcp

快速入门:npx @drawio/mcp

完整文档 →


技能 + CLI

一个 Claude Code 技能,可以生成原生的 .drawio 文件,并可选导出为 PNG、SVG 或 PDF(嵌入 XML,因此导出的文件仍可在 draw.io 中编辑)。无需配置 MCP——只需复制一个技能文件即可。

默认情况下,该技能会写入一个 .drawio 文件并在 draw.io 中打开它。如果您希望导出其他格式(如 /drawio png ...),可以在请求中提及,然后使用 draw.io 桌面版的命令行工具并加上 --embed-diagram 参数进行导出。

完整文档 →


替代方案:项目指令(无需 MCP)

这是一种无需安装任何东西即可使用的替代方法。您可以在 Claude 项目中添加指令,教会 Claude 使用 Python 代码执行来生成 draw.io URL。无需 MCP 服务器,也不需要桌面应用程序——只需粘贴指令即可开始使用。

完整文档 →


XML 参考(单一事实来源)

draw.io XML 生成参考——涵盖边缘路由、容器、图层、标签、元数据、暗黑模式、样式属性以及 XML 的良好形成——集中在一个规范文件中:

shared/xml-reference.md

上述四种方法都以该文件作为 LLM 提示的单一事实来源:

方法 如何访问参考文件
MCP 应用服务器 在启动或构建时读取该文件,并将其包含在工具描述中
MCP 工具服务器 在启动时读取该文件(从仓库中获取或通过 prepack 打包的副本)
技能 + CLI 引用 GitHub 原始 URL
项目指令 用户将其内容复制到自己的 Claude 项目中

当更新 XML 生成指南时,只需编辑 shared/xml-reference.md——更改会自动传播到所有使用者。


形状搜索索引

search_shapes 工具由预先构建的 draw.io 所有形状索引提供支持。该索引是通过运行 draw.io 客户端源代码(app.min.js)中的所有侧边栏调色板初始化函数,并使用 jsdom 在 Node.js 中捕获形状数据而生成的。

# 生成形状搜索索引(需要 ../drawio-dev 检出)
cd shape-search
npm install
DRAWIO_DEV_PATH=../../drawio-dev node generate-index.js

# 重新构建 MCP 应用服务器 Worker,以嵌入更新后的索引
cd ../mcp-app-server
npm run build:worker

何时重新生成: 在更新 drawio-dev 后(新增形状、重命名模板、更新样式字符串),请重新运行 generate-index.js。该脚本会加载 app.min.js 和所有侧边栏调色板,因此能够自动捕捉形状库中的任何变化。

生成的 search-index.json 会被提交到仓库中,以便 MCP 应用服务器可以在没有本地 drawio-dev 检出的情况下构建和部署。


开发

# MCP 应用服务器
cd mcp-app-server
npm install
npm start

# MCP 工具服务器
cd mcp-tool-server
npm install
npm start

相关资源

常见问题

相似工具推荐

everything-claude-code

everything-claude-code 是一套专为 AI 编程助手(如 Claude Code、Codex、Cursor 等)打造的高性能优化系统。它不仅仅是一组配置文件,而是一个经过长期实战打磨的完整框架,旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。 通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能,everything-claude-code 能显著提升 AI 在复杂任务中的表现,帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略,使得模型响应更快、成本更低,同时有效防御潜在的攻击向量。 这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库,还是需要 AI 协助进行安全审计与自动化测试,everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目,它融合了多语言支持与丰富的实战钩子(hooks),让 AI 真正成长为懂上

140.4k|★★☆☆☆|今天
开发框架Agent语言模型

NextChat

NextChat 是一款轻量且极速的 AI 助手,旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性,以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发,NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。 这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言,它也提供了便捷的自托管方案,支持一键部署到 Vercel 或 Zeabur 等平台。 NextChat 的核心亮点在于其广泛的模型兼容性,原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型,让用户在一个界面即可自由切换不同 AI 能力。此外,它还率先支持 MCP(Model Context Protocol)协议,增强了上下文处理能力。针对企业用户,NextChat 提供专业版解决方案,具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能,满足公司对数据隐私和个性化管理的高标准要求。

87.6k|★★☆☆☆|昨天
开发框架语言模型

ML-For-Beginners

ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程,旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周,包含 26 节精炼课程和 52 道配套测验,内容涵盖从基础概念到实际应用的完整流程,有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。 无论是希望转型的开发者、需要补充算法背景的研究人员,还是对人工智能充满好奇的普通爱好者,都能从中受益。课程不仅提供了清晰的理论讲解,还强调动手实践,让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持,通过自动化机制提供了包括简体中文在内的 50 多种语言版本,极大地降低了全球不同背景用户的学习门槛。此外,项目采用开源协作模式,社区活跃且内容持续更新,确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路,ML-For-Beginners 将是理想的起点。

85k|★★☆☆☆|今天
图像数据工具视频

ragflow

RAGFlow 是一款领先的开源检索增强生成(RAG)引擎,旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体(Agent)能力相结合,不仅支持从各类文档中高效提取知识,还能让模型基于这些知识进行逻辑推理和任务执行。 在大模型应用中,幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构(如表格、图表及混合排版),显著提升了信息检索的准确度,从而有效减少模型“胡编乱造”的现象,确保回答既有据可依又具备时效性。其内置的智能体机制更进一步,使系统不仅能回答问题,还能自主规划步骤解决复杂问题。 这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统,还是致力于探索大模型在垂直领域落地的创新者,都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口,既降低了非算法背景用户的上手门槛,也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目,它正成为连接通用大模型与行业专有知识之间的重要桥梁。

77.1k|★★★☆☆|2天前
Agent图像开发框架

PaddleOCR

PaddleOCR 是一款基于百度飞桨框架开发的高性能开源光学字符识别工具包。它的核心能力是将图片、PDF 等文档中的文字提取出来,转换成计算机可读取的结构化数据,让机器真正“看懂”图文内容。 面对海量纸质或电子文档,PaddleOCR 解决了人工录入效率低、数字化成本高的问题。尤其在人工智能领域,它扮演着连接图像与大型语言模型(LLM)的桥梁角色,能将视觉信息直接转化为文本输入,助力智能问答、文档分析等应用场景落地。 PaddleOCR 适合开发者、算法研究人员以及有文档自动化需求的普通用户。其技术优势十分明显:不仅支持全球 100 多种语言的识别,还能在 Windows、Linux、macOS 等多个系统上运行,并灵活适配 CPU、GPU、NPU 等各类硬件。作为一个轻量级且社区活跃的开源项目,PaddleOCR 既能满足快速集成的需求,也能支撑前沿的视觉语言研究,是处理文字识别任务的理想选择。

74.9k|★★★☆☆|今天
语言模型图像开发框架

OpenHands

OpenHands 是一个专注于 AI 驱动开发的开源平台,旨在让智能体(Agent)像人类开发者一样理解、编写和调试代码。它解决了传统编程中重复性劳动多、环境配置复杂以及人机协作效率低等痛点,通过自动化流程显著提升开发速度。 无论是希望提升编码效率的软件工程师、探索智能体技术的研究人员,还是需要快速原型验证的技术团队,都能从中受益。OpenHands 提供了灵活多样的使用方式:既可以通过命令行(CLI)或本地图形界面在个人电脑上轻松上手,体验类似 Devin 的流畅交互;也能利用其强大的 Python SDK 自定义智能体逻辑,甚至在云端大规模部署上千个智能体并行工作。 其核心技术亮点在于模块化的软件智能体 SDK,这不仅构成了平台的引擎,还支持高度可组合的开发模式。此外,OpenHands 在 SWE-bench 基准测试中取得了 77.6% 的优异成绩,证明了其解决真实世界软件工程问题的能力。平台还具备完善的企业级功能,支持与 Slack、Jira 等工具集成,并提供细粒度的权限管理,适合从个人开发者到大型企业的各类用户场景。

70.6k|★★★☆☆|今天
语言模型Agent开发框架