AI 应用MCP 服务交互助手【免费下载链接】drawio-mcp项目地址https://gitcode.com/gh_mirrors/dr/drawio-mcp点击查看免费下载本指南讲解 drawio-mcp 仓库中一条「零安装」的替代集成路线把项目指令Project Instructions粘贴进 Claude.ai 的 Project 设置让 Claude 用 Python 代码执行的方式生成压缩编码的 draw.io 打开链接并以 HTML artifact 交付。读完本文你将掌握这套方案的安装步骤、核心压缩/编码原理、三种图格式Mermaid / XML / CSV的模板以及避免 base64 链接损坏的两条红线规则并了解仓库源码shared/mx-xml.js、shared/normalize-model.js是如何用同一套 XML 约定做服务端校验的。方案概览为什么可以完全不装 MCP仓库根目录 README.md 列出了四种把 draw.io 接入 AI 助手的方式MCP App Server对话内联渲染、MCP Tool Server浏览器打开、Assistant Plugins生成.drawio文件以及本文要讲的第四种——Project Instructions无需 MCP。它不需要安装任何 MCP 服务器也不要求桌面应用只需把指令文本粘贴进 Claude Project 的设置里即可生效。根据 project-instructions/README.md这套方案的核心优势是无需安装粘贴指令后在 Claude.ai 中立即生效无需桌面应用完全在浏览器中完成易于使用只需向 Claude Project 添加指令隐私友好生成的 URL 使用 hash 片段#create...承载数据数据始终留在浏览器端不会发送到任何服务器。从仓库结构看project-instructions/目录是整个仓库中唯一「不依赖任何运行时、纯提示词驱动」的方案project-instructions/AGENTS.md 与README.md说明原理而真正要被粘贴进 Claude Project 的是 project-instructions/claude-project-instructions.txt约 170 行完整指令。根目录 AGENTS.md 还特别说明了一个仓库约定每个子目录的CLAUDE.md只通过AGENTS.md导入同目录的AGENTS.md作为单一事实来源本目录的project-instructions/CLAUDE.md同样如此——阅读本文时请以project-instructions/下的三份文件为准。安装向 Claude Project 粘贴两条指令安装过程只有三步全程不涉及命令行打开你的 Claude Project 设置Settings将 project-instructions/claude-project-instructions.txt 的完整内容添加到项目指令Project Instructions中同时将 shared/xml-reference.md 的内容一并加入——这是 XML 生成参考覆盖边路由edge routing、容器containers、图层layers、标签tags、元数据metadata、暗色模式dark mode等主题。完成后直接在 Project 里请 Claude 创建图表它就会生成可点击的 draw.io URL。shared/xml-reference.md是仓库内所有交付方式MCP App Server、MCP Tool Server、Claude Code 插件、Project Instructions共用的「单一事实来源」见根 AGENTS.md 中 Shared References 一节因此它与claude-project-instructions.txt配套使用能让 Claude 生成的 XML 同时满足渲染正确与后续布局正确两个要求。工作原理四步流水线整套流程是一条固定流水线来自 project-instructions/AGENTS.mdClaude 生成图代码Mermaid、XML 或 CSV 三选一Claude 执行一段 Python 代码对图代码进行压缩与编码脚本输出一个完整的 HTML 页面其中以可点击按钮的形式内嵌了最终 URLClaude 将 HTML 作为 artifact 呈现给用户用户点击按钮即可在 draw.io 中打开。关键点在于Claude 从不直接生成最终 URL 文本。URL 由 Python 脚本在运行时构造并嵌入 HTMLClaude 只负责把脚本输出原样呈现为 artifact从而绕开了大模型逐 token 复述长字符串的环节。在动手之前Claude 需要先决定用哪种格式来写图格式适用场景Mermaid流程图、时序图、ER 图、甘特图、状态图、类图CSV层级数据组织结构图、从表格批量导入XML复杂布局、精确定位、自定义样式、图标与形状核心脚本压缩、编码与 HTML 输出claude-project-instructions.txt提供了完整的 Python 脚本。它将图代码经 URL 编码、raw-deflate 压缩、base64 编码后打包进#createhash 片段并输出一个带按钮的 HTML 页面import json, zlib, base64 from urllib.parse import quote # Set these variables: diagram_type mermaid # mermaid, xml, or csv diagram_code graph TD A[Start] -- B[End] # Generate compressed URL encoded quote(diagram_code, safe) c zlib.compressobj(9, zlib.DEFLATED, -15) raw_deflate c.compress(encoded.encode(utf-8)) c.flush() data base64.b64encode(raw_deflate).decode() payload json.dumps({type: diagram_type, compressed: True, data: data}) url fhttps://app.diagrams.net/?pv0grid0#create{quote(payload, safe)} # Output as HTML page print(f!DOCTYPE html html head meta charsetutf-8 style body {{ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: #f8f9fa; }} .card {{ text-align: center; background: white; border-radius: 12px; padding: 40px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }} .card h2 {{ margin: 0 0 8px; color: #1a1a1a; }} .card p {{ margin: 0 0 24px; color: #666; }} .btn {{ display: inline-block; padding: 14px 32px; background: #4285f4; color: white; text-decoration: none; border-radius: 8px; font-size: 16px; font-weight: 500; transition: background 0.2s; }} .btn:hover {{ background: #3367d6; }} /style /head body div classcard h2Diagram Ready/h2 pClick below to open your diagram in draw.io/p a classbtn href{url} target_blank relnoopener noreferrer Open in draw.io /a /div /body /html)脚本中的两个可调变量是diagram_type取mermaid、xml或csv与diagram_code对应的图源代码字符串。编码链路分四段每一段都对应一个明确目的quote(diagram_code, safe)先对图代码做百分号编码URL 编码。safe表示所有字符都被编码保证后续压缩面对的是干净的 ASCII 字节流zlib.compressobj(9, zlib.DEFLATED, -15)创建压缩对象。9是最高压缩级别-15是关键——负号表示raw deflate不带 zlib 头这正是 draw.io 打开链接所期望的格式c.compress(...) c.flush()完成整段压缩base64.b64encode(...).decode()把压缩后的二进制转为 base64 文本使其可以安全地放进 URLjson.dumps({type: ..., compressed: True, data: ...})打包成 payload再经quote(payload, safe)编码后拼到https://app.diagrams.net/?pv0grid0#create之后。需要说明的一点原始指令文本中该字典写作compressed: trueJSON 风格的字面量Python 中应写作Truejson.dumps序列化后输出仍是 JSON 标准的true上文已按可运行版本给出。#create这个 hash 片段正是本方案隐私友好的根源——它只存在于浏览器地址栏的 fragment 中点击链接时不会作为查询参数发往服务器。仓库内另一处也使用了完全相同的交付形态根 AGENTS.md 记录MCP App Server 的create_diagram在遇到不支持 MCP Apps 内联渲染的普通客户端时会额外返回一个app.diagrams.net/#create文本链接作为兜底说明这套「hash 携带压缩图数据」的机制是整个仓库共用的打开方式。HTML 模板本身也值得注意f...中的{{/}}是 f-string 对花括号的转义写法{url}在运行时被替换为真正的链接。卡片页用#4285f4蓝色按钮承载链接并带target_blank relnoopener noreferrer在点击后于新标签页打开 draw.io。为什么必须用 HTML artifact 交付链接这条设计不是偏好而是必要。claude-project-instructions.txt用「CRITICAL」级别明确警告生成的 URL 包含压缩后的 base64 数据。LLM 在逐 token 复述 base64 字符串时会静默损坏它——哪怕只改了一个字符整个链接就会失效。base64 字符串没有任何自然的纠错或人类可读语义模型在文本层复制它时极易出错且无法察觉。解决方法是让 URL完全不经过 Claude 的文本生成Python 脚本输出完整的 HTML 页面链接已在脚本内部拼好Claude 只是把脚本输出呈现为 artifact——链接因此「保证正确」。project-instructions/README.md 的 Why HTML Output 一节同样强调这一点并把机制概括为「URL 从不经过 Claude 的文本生成Claude 仅呈现脚本输出」。三种格式的示例模板指令文件为每种格式各给了一个可直接套用的模板。Mermaid流程图带判断分支graph TD A[Start] -- B{Decision} B --|Yes| C[Action] B --|No| D[End]XMLdraw.io 原生格式。注意根元素mxGraphModel adaptiveColorsauto以及id0根单元、id1默认图层这两个必须存在的结构单元mxGraphModel adaptiveColorsauto root mxCell id0/ mxCell id1 parent0/ mxCell id2 valueBox stylerounded1;fillColor#d5e8d4; vertex1 parent1 mxGeometry x100 y100 width120 height60 asgeometry/ /mxCell /root /mxGraphModelCSV层级数据如组织结构图。#开头的行是元指令# label指定节点文本模板、# style指定默认样式、# connect指定父子连线规则、# layout: auto请求自动布局# label: %name% # style: rounded1;whiteSpacewrap;html1; # connect: {from:manager,to:name,invert:true} # layout: auto name,manager CEO, CTO,CEO CFO,CEO生成流程与两条红线规则指令文件给出了 Claude 应遵循的四步流程收到图表请求后先判断最适合的格式生成图代码执行 Python 代码创建 URL将脚本输出创建为 HTML artifact——这就是用户可点击的链接。红线一XML 必须良构Well-Formedness绝不允许在输出中出现任何 XML 注释!-- --。注释被严格禁止——它们浪费 token、可能引发解析错误对图 XML 毫无意义属性值中的特殊字符必须转义amp;、lt;、gt;、quot;。这条规则在仓库源码中有对应的工程化实现。shared/mx-xml.js 中的escapeXml第 67–77 行正是按此约定编码→amp;、→lt;、→gt;、→quot;并把换行\n、回车\r、制表符\t分别写成字符引用#xa;、#xd;、#x9;XML 属性规范化会把字面换行读回为空格所以换行必须用字符引用形式。解析侧unescapeXml则反向解码且「未知实体保持原样」确保任何意外内容都不会破坏文档。这印证了指令中对转义规则的严格要求并非空谈而是服务端解析/写回管线的既定契约。红线二绝不在对话中复述 URL绝不要在聊天回复中打出、重打或复述生成的 URL正确流程执行 Python 脚本 → 脚本输出带正确链接的完整 HTML 页面 → 将 HTML 作为 artifact 呈现其中的链接由脚本生成保证正确→ 在聊天消息里只告诉用户点击 artifact 中的按钮不要把脚本输出里的 URL 复制进回复文本——artifact 本身就是链接的交付机制。源码级佐证仓库如何用同一套约定做服务端保障虽然 Project Instructions 方案本身不调用任何服务器但仓库的共享代码恰好为这套约定提供了「服务端版本」的背书理解它们可以加深对指令背后原因的认识。归一化normalize管线。shared/normalize-model.js 的注释解释了指令中「把边放在parent1图层上」这一写法渲染正确为何需要一次额外的归一化步骤draw.io 编辑器的模型要求一条边归属其两个端点最近的公共祖先容器坐标也位于该容器坐标系中而 LLM 直接写出的 XML 把所有边都放在图层上渲染没问题但 ELK 布局读取边坐标时会在错误的坐标系里计算导致连线「跳出」容器对应 issue jgraph/drawio-mcp#64。因此 App Server 与 Tool Server 在每次处理 XML 前都会调用normalizeDiagram该文件的第 53–59 行把边重新归位到最近公共祖先、为缺失 geometry 的边补上relative1几何、并把容器撑大到能包住越界的子节点——且该过程幂等已经合规的图会原样返回。mcp-tool-server/test/normalize-model.test.js 用一组夹具验证了这条规则同一容器内的边移到该容器如alb → ecs的边归到vpc、跨越容器边界的边保持在图层、最近公共祖先优先于最外层容器、自环归到终端的父容器。单一事实来源。除了xml-reference.mdshared/mermaid-reference.md 覆盖 draw.io Mermaid 解析器支持的 28 种图类型与复杂流程图的 ELK 布局开关config: layout: elkfrontmattershared/style-reference.md 则给出全部形状、样式属性、色板与 HTML 标签的速查。Project Instructions 的用户虽然只需要粘贴claude-project-instructions.txt与xml-reference.md但当需要精确定位、行业图标或暗色模式时这些共享参考提供了与 MCP 方案完全一致的语法依据——仓库根 AGENTS.md 明确要求修改图生成指引时只改这些文件改动会自动传播到所有交付方式。适用场景与限制这套方案最适合「快速上手、零安装」的场景只要有一个 Claude.ai 账号并能创建 Project粘贴两条指令即可用。它完全在浏览器内工作生成的链接因为使用#createhash 片段而不会把图数据发往服务器隐私性优于需要服务端中转的方案。同时也应明确其边界以下均以仓库实际文档为准它只在 Claude.ai Project 环境中生效产出物是可点击的链接而非对话内联渲染的图内联渲染需要 MCP App ServerMermaid 与 XML、CSV 三种格式都支持但 CSV 依赖 draw.io 的服务端转换Tool Server 文档中标注为「可能偶尔失败或不可用」建议组织结构图优先用 MermaidXML 若需自动布局ELK或 libavoid 避障布线则要走仓库其他方案MCP 服务器或 draw.io Desktop CLI 的--layout参数Project Instructions 本身不包含布局传递。掌握这套方案后你既可以把「生成 draw.io 链接」的能力一键注入任何 Claude Project也能在阅读 MCP 方案源码时更容易理解#createURL、XML 良构与边归位规则这些贯穿整个仓库的核心约定。赞分享AI 应用MCP 服务交互助手【免费下载链接】drawio-mcp项目地址https://gitcode.com/gh_mirrors/dr/drawio-mcp点击查看免费下载相关推荐基于 Claude Project 指令生成 draw.io 图表drawio-mcp 无 MCP 服务器方案实战指南基于 Claude Project 指令生成 draw.io 图表drawio mcp 无 MCP 服务器方案实战指南 本文导读 drawio mcp 仓库AI 应用MCP 服务交互助手Telepresence MCP Claude 命令详解在 Claude Desktop 中管理 MCP 服务器配置Telepresence MCP Claude 命令详解在 Claude Desktop 中管理 MCP 服务器配置 telepresence mcp cla云原生开发工具微服务网络连接真实 Host用 python-sdk 的 mcp run 命令将 MCP 服务器接入 Claude Desktop、Claude Code、Cursor 与 VS Code连接真实 Host用 python sdk 的 mcp run 命令将 MCP 服务器接入 Claude Desktop、Claude Code、Cursor人工智能MCP 服务MCP Clients上一篇终极指南ngx-admin骨架屏如何提升加载性能与用户体验下一篇Gin-Vue-Admin前端包体积优化指南5个实用的构建产物分析技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考