AI 应用MCP 服务交互助手【免费下载链接】drawio-mcp项目地址https://gitcode.com/gh_mirrors/dr/drawio-mcp点击查看免费下载导读drawio-mcp 项目为 AI 助手接入 draw.io 提供了四种方式其中 project-instructions 目录承载的是一套完全不需要安装 MCP 服务器的替代方案把一段精心编写的指令粘贴进 Claude Project 设置Claude 就能在对话中直接生成可点击的 draw.io 图表链接。本文将以该方案的核心文档为主体完整讲解其安装步骤、底层 URL 编码原理、Python 生成脚本、格式选择规则与HTML artifact 交付链接的设计动机并结合仓库源码mcp-tool-server/src/index.js、shared/xml-reference.md、shared/mermaid-elk.js 等佐证其技术细节。读完本文你将掌握这套零安装方案的全部配置内容与运行机制并能判断它相比 MCP 服务器方案的优势与边界。方案定位为什么可以不需要 MCP仓库主 README 将四种接入方式并列对比Project Instructions 是其中唯一零安装的一条维度MCP App ServerMCP Tool ServerAssistant PluginsProject Instructions工作方式对话内嵌渲染图表浏览器打开图表生成.drawio文件Claude 用 Python 生成 draw.io URL输出形式对话内交互视图新标签页编辑器.drawio/ PNG/SVG/PDF / URL可点击的 draw.io 链接是否需要安装否托管于 mcp.draw.io是npm 包一行命令装插件否——只需粘贴指令支持格式仅 XMLXML / CSV / Mermaid仅 XMLXML / CSV / Mermaid 全支持适用场景对话内联预览本地桌面工作流本地开发工作流快速上手、无需安装原文档project-instructions/README.md给出的定位是这是一条不需要安装 MCP 服务器的替代路径不使用任何 MCP 工具而是通过向 Claude Project 添加指令让 Claude使用 Python 代码执行来生成 draw.io URL。该方案的核心优势原文档列出无需安装——在 Claude.ai 中开箱即用立即生效无需桌面应用——完全在浏览器内完成使用简单——只需把指令加入 Claude Project隐私友好——生成的 URL 使用哈希片段#create...该片段只停留在浏览器中永远不会被发送到任何服务器。从仓库结构看AGENTS.mdproject-instructions/目录正是Claude Project 指令无需 MCP、无需安装的专属模块与mcp-app-server/App 服务器、mcp-tool-server/stdio 工具服务器、plugins/各助手插件并列构成项目的第四条交付通道。安装步骤两条内容粘贴即用原文档的安装流程只有四步核心动作是把两份文本粘贴进 Claude Project打开你的 Claude Project 设置将 claude-project-instructions.txt 的完整内容加入项目指令同时加入 shared/xml-reference.md 的内容——这是覆盖边缘路由、容器、图层、标签、元数据、深色模式等主题的 XML 生成参考之后让 Claude 创建图表它便会生成可点击的 draw.io URL。其中claude-project-instructions.txt就是发给 Claude 的技能说明书本体而shared/xml-reference.md是项目层级的单一事实来源single source of truth。这一点在 AGENTS.md 中有明确说明shared/下两份参考文件xml-reference.md与mermaid-reference.md被每一种交付机制消费——App 服务器的create_diagram、Tool 服务器的open_drawio_xml、Claude Code 插件以及这里的 Project Instructions——因此只需维护这一份文件改动会自动传播到所有消费者。此外 mcp-tool-server/src/index.js 也印证了这一机制工具服务器在启动时读取同一份shared/xml-reference.md并附加到open_drawio_xml的工具描述中指令方案与 MCP 方案共享完全相同的 XML 生成规范。工作原理四步闭环原文档给出的工作流程是一个四步闭环Claude 生成图表代码Mermaid、XML 或 CSVClaude 执行 Python 代码对图表进行压缩与编码脚本输出一个完整 HTML 页面URL 以可点击按钮的形式内嵌其中Claude 将 HTML 作为 artifact工件呈现用户点击按钮即可打开 draw.io。这条流程的关键在于图表的压缩 编码 拼 URL全部由 Python 代码完成Claude 的文本生成过程完全不触碰 URL 本身。为什么必须这样设计原文档给出了明确的理由下一节详述。URL 的编码机制deflateRaw Base64 #create 哈希claude-project-instructions.txt中的 Python 脚本揭示了 draw.io URL 的标准编码管线对图表源码做quote(diagram_code, safe)即百分号编码用zlib.compressobj(9, zlib.DEFLATED, -15)做原始 deflate 压缩-15表示不带 zlib 头、使用原始 deflate 流对压缩结果做 Base64 编码组装 JSON 载荷{type: ..., compressed: true, data: ...}再次百分号编码后拼进#create哈希片段。这条管线与仓库中 MCP 工具服务器的服务端实现逐位一致在 mcp-tool-server/src/index.js 中compressData()使用pako.deflateRaw()对encodeURIComponent(data)的结果做压缩并转为 Base64generateDrawioUrl() 则组装{ type, compressed: true, data }对象用#create前缀拼出完整 URL。区别仅在于服务端还额外处理了lightbox、dark、border、edit等查询参数以及针对 Mermaid 类型追加version字段见下文进阶一致性一节。因此指令方案中 Python 脚本产出的 URL 与 MCP 服务器产出的 URL 属于同一协议格式可以被 draw.io 编辑器同等解析。为什么 URL 放在#create哈希里是隐私友好的原文档强调生成的 URL 使用哈希片段hash fragment承载数据。哈希片段位于 URL 的#之后按 Web 规范不会随 HTTP 请求发送到服务器只会留在浏览器端。因此包含整个图表载荷的#create...部分不会泄露给任何中间服务器——这正是该方案隐私友好的技术根基。Python 生成脚本逐段解析完整可复制以下是 claude-project-instructions.txt 中要求 Claude 执行的完整 Python 脚本。它负责把图表代码压缩、编码、拼装 URL并输出一张内嵌Open in draw.io按钮的 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)逐段要点编码管线quote→deflateRaw→base64顺序与 MCP 服务器 compressData() 完全一致compressobj(9, ...)的 9 是最高压缩级别-15是关键——它选择原始 deflate 格式即deflateRaw与 draw.io 官方工具链的解码端严格对应。载荷结构{type: diagram_type, compressed: true, data: data}中的compressed: true是 draw.io 判断数据已被压缩的解码开关字段名不可改动。URL 查询参数pv0grid0会关闭演示模式与网格与服务端 generateDrawioUrl() 在非 lightbox 分支下设置的参数一致。HTML 输出脚本用 f-string 模板输出一张居中卡片页把url变量直接插值进a href中——URL 由程序生成不经过 Claude 的文本生成从而保证链接字节级正确。格式选择三种输入格式与适用场景claude-project-instructions.txt为 Claude 定义了格式选择策略格式最佳用途Mermaid流程图、时序图、ER 图、Gantt 图、状态图、类图CSV层级数据组织架构图、从电子表格批量导入XML复杂布局、精确坐标定位、自定义样式、图标、形状原文档给出三条决策建议见 AGENTS.md 的 Best Practices 与工具服务器 README 中的 Quick Decision Guide默认优先用 Mermaid——它稳定覆盖大多数图表类型需要精确坐标与定制样式时用 XML尽量对关键图表避免 CSV——CSV 依赖 draw.io 服务端处理可能偶发失败组织架构图建议改用 Mermaid。三种格式的示例代码Mermaid流程图——方向关键字TD表示自上而下--为箭头--|Yes|为带标签的边graph TD A[Start] -- B{Decision} B --|Yes| C[Action] B --|No| D[End]XMLdraw.io 原生格式——mxGraphModel为根元素root内id0与id1分别代表根与默认图层mxCell描述顶点mxGeometry给出坐标与尺寸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层级数据——以#开头的行是 draw.io 的导入指令# label:定义节点文本模板# style:定义默认样式# connect:定义父子连线规则invert: true表示箭头从经理指向下属# layout: auto开启自动布局# label: %name% # style: rounded1;whiteSpacewrap;html1; # connect: {from:manager,to:name,invert:true} # layout: auto name,manager CEO, CTO,CEO CFO,CEOXML 生成的关键规则良构性与转义指令中对 XML 生成有一条 CRITICAL 级约束输出必须是良构well-formed的 XML具体包括严禁包含任何 XML 注释!-- --——注释浪费 token、可能引发解析错误在图表 XML 中毫无意义属性值中的特殊字符必须转义→amp;→lt;→gt;→quot;。这一约束在共享参考 shared/xml-reference.md 中被再次强调并补充了第三条每个mxCell的id必须唯一。之所以对良构性如此执念从源码侧可以得到印证工具服务器对 XML 的后续处理归一化、ELK 布局、libavoid 布线全部建立在对 XML 的解析之上——shared/mx-xml.js 的注释明确指出解析器是一个针对mxCell/mxGeometry的小而精确的遍历LLM 被要求输出带转义属性值的良构 XML任何意外情况都会让该页保持原样跳过处理。也就是说良构 XML 是后续一切服务器端增强布局、布线、修复能正确生效的前提。除良构性外shared/xml-reference.md还为 XML 生成提供了完整的风格与结构规范例如常用样式圆角矩形rounded1;whiteSpacewrap;html1;、决策菱形rhombus;、数据库圆柱shapecylinder3;、文档形状shapemxgraph.flowchart.document;HTML 标签value中含b、br等标签时必须在样式中加html1否则标签会按字面文本显示换行应使用#xa;或lt;brgt;绝不能用\n容器体系子元素通过parentcontainerId归属容器并使用相对坐标不可见分组用group;含pointerEvents0带标题栏用swimlane;startSize30;任意形状加container1;pointerEvents0;也可充当容器图层与标签额外图层是parent0的mxCell可用visible0默认隐藏标签需用object包裹mxCell通过tagscritical v2空格分隔多标签深色模式mxGraphModel adaptiveColorsauto开启自动适配未显式指定的颜色随明暗主题自动反转明色反色并旋转色相 180°需要精确双色时用light-dark(lightColor,darkColor)函数。这些细节都是复制进 Claude Project 的xml-reference.md所携带的能力指令方案因此在 XML 图表质量上与 MCP 方案保持同一水准。为什么必须用 HTML artifact 交付链接关键设计决策原文档用了整整一节强调一个反直觉的约束绝不要在你的聊天回复里重新输入、复述或复制生成的 URL。原因是深刻的工程现实生成的 URL 内含压缩后的 Base64 数据而 LLM 在逐 token 复现 Base64 字符串时会静默损坏它——哪怕只有一个字符改变整条链接也会彻底失效。Base64 是一种对单个字符错误极其敏感的表达方式而 LLM 的文本生成本质上是概率性的 token 序列逐字符精确复制长 Base64 串超出了其可靠边界。解决方案正是本文反复强调的HTML artifact 交付流程执行 Python 脚本脚本输出一个内嵌了正确链接的完整 HTML 页面Claude 将脚本输出作为artifact呈现链接因由脚本生成而保证正确在聊天文字中只需告诉用户点击 artifact 里的按钮。也就是说URL 从不经过 Claude 的文本生成管线artifact 本身就是链接的交付机制。这与 MCP 工具服务器的浏览器打开逻辑形成有趣的对照服务端在 openBrowser() 中处理 Windows 上#片段丢失、URL 超长超过 Win32INTERNET_MAX_URL_LENGTH2083 字符等问题时同样选择了临时 HTML 重定向页buildRedirectHtml()来绕过 shell 的 URL 长度限制——两种方案不约而同地借助HTML 承载链接来规避环境对长 URL 的处理缺陷只是指令方案更进一步把这个思想用于规避 LLM 自身的 Base64 复现误差。进阶与 MCP 服务器方案的底层一致性虽然指令方案不运行任何服务器但它产出的图表协议与 MCP 工具服务器高度同源理解这一点有助于排查异常压缩与载荷协议一致见上文Python 的zlib原始 deflate Base64 与服务器pako.deflateRaw Base64 是同一格式mcp-tool-server/src/index.js。Mermaid 版本一致性服务端在生成 Mermaid URL 时会向载荷追加version: 12MERMAID_DEFAULTS_VERSION确保 draw.io 以 Mermaid 12 的默认配置ELK 布局、redux-color 主题转换并记住该版本指令脚本未设置此字段绘制结果将按 draw.io 当时的默认处理——若追求与 MCP 方案一致的渲染效果可在脚本的payload中为type mermaid的情况追加version: 12。ELK 布局选择shared/xml-reference.md描述的postLayout: elk对应服务端 elk-pass.js 的服务端 ELK 重排对 Mermaid 流程图shared/mermaid-elk.js 的withElkLayout()展示了标准做法——在源码前插入 YAML frontmatterconfig: { layout: elk }draw.io 转换时便会启用分层 ELK 布局。指令方案若需要复杂流程图约 ≥20 节点、≥3 个判断菱形、存在回边或 ≥3 个端点更整洁的排布可以在生成的 Mermaid 源码顶部自行加入该 frontmatter。模型归一化MCP 服务器会对每个 XML 图表先做归一化shared/normalize-model.js把边归到其端点的最近公共祖先、为缺失几何的边补上relative几何、把容器撑大到容纳溢出的子元素——这些修复对应桌面 CLI 的--normalize。指令方案的 XML 若要被编辑器平滑编辑建议遵循同一规则两端在同一容器内的边parent应设为该容器详见xml-reference.md的边归属于同时容纳两个端点的最内层容器规则避免后续自动布局把边排到错误坐标帧。最佳实践与常见问题综合原文档与仓库 AGENTS.md 的 Best Practices 与 Troubleshooting 表格指令方案的使用要点可归纳为默认 Mermaid流程图、时序图、ER 图、Gantt 图等用它最可靠XML 用于精确控制需要精确坐标、自定义颜色或复杂布局时使用避免对关键图表用 CSVCSV 处理可能失败组织架构图优先 Mermaid发送前校验语法确保 Mermaid/XML/CSV 语法正确、转义到位链接一律走 artifact绝不把 URL 复制进聊天文本。常见问题对照现象成因对策生成的 XML 中出现注释!-- --混入输出移除全部 XML 注释严格禁止CSV 图表报 URI malformed样式属性里用了%column%占位符改用硬编码颜色CSV 转换失败Service nicht verfügbardraw.io CSV 服务端不可用稍后重试或改用 Mermaid打开后是空白图Mermaid/XML 语法无效检查语法与转义链接失效URL 被 LLM 重新复述导致 Base64 损坏必须用 HTML artifact 交付链接小结project-instructions/README.md 描述的是 drawio-mcp 家族中最轻量的一条接入路径不装 MCP、不开桌面应用、不碰服务器只靠两段粘贴进 Claude Project 的文本就让 Claude 借 Python 代码执行产出协议正确的 draw.io 链接。它的技术内核——deflateRaw 压缩、Base64 编码、#create哈希承载、HTML artifact 交付——与仓库中 MCP 服务器共享同一套规范因此既可以作为零安装的快速体验入口也可以作为理解整个 drawio-mcp 编码管线的最小样例。当你需要立刻、零依赖、隐私友好地让 AI 出图时这套 Project Instructions 就是首选。赞分享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 服务交互助手无需 MCP 服务器在 Claude Project 中用 Python 指令让 Claude 生成 draw.io 图解链接无需 MCP 服务器在 Claude Project 中用 Python 指令让 Claude 生成 draw.io 图解链接 本指南讲解 drawio mcAI 应用MCP 服务交互助手drawio-mcp 的 GitHub Copilot 插件实战指南让 Copilot 直接产出原生 .drawio 图表drawio mcp 的 GitHub Copilot 插件实战指南让 Copilot 直接产出原生 .drawio 图表 本文基于 drawio mcp 仓AI 应用MCP 服务交互助手上一篇DB-GPT Docker 镜像构建完全指南从 build_image.sh 到多模式定制化部署下一篇Refine v5 MUI SaveButton 组件完全指南表单提交、属性定制与源码解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考