AI 应用大模型前端后端MCP 服务【免费下载链接】next-ai-draw-ioA next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.项目地址https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io点击查看免费下载导读docs/shape-libraries/salesforce.md是 next-ai-draw-io 内置的 Salesforce 平台图标库文档它定义了mxgraph.salesforce这一 mxgraph 形状前缀、97 个可用形状名以及标准的mxCell用法。本文以该文档为骨架结合仓库中 Web 端聊天路由app/api/chat/route.ts与 MCP Server 的形状库加载实现packages/mcp-server/src/shape-library.ts完整讲解如何在 draw.io 画布上放置 Salesforce 图标、如何让 AI 通过get_shape_library工具准确引用这些形状以及如何与整体绘图规则布局、连线、编辑协同工作。一、快速开始在画布上放置一个 Salesforce 图标salesforce 库属于mxgraph shapes类型前缀为mxgraph.salesforce。在 next-ai-draw-io 的 draw.io 画布中一个 Salesforce 图标就是一个带style属性的mxCell顶点mxCell valuelabel styleshapemxgraph.salesforce.analytics;fillColor#7f8de1;strokeColornone;verticalLabelPositionbottom;verticalAligntop;aligncenter; vertex1 parent1 mxGeometry x0 y0 width60 height60 asgeometry / /mxCell将样式中的analytics替换为下方清单中的任意形状名即可。默认示例给出的是一个60×60的图标块shapemxgraph.salesforce.analytics核心样式指定 Salesforce 库中的具体形状fillColor#7f8de1填充色示例为紫色系strokeColornone关闭描边让图标以纯色块呈现verticalLabelPositionbottom;verticalAligntop标签置于图标下方、内容顶端对齐aligncenter水平居中mxGeometry x0 y0 width60 height60图标的位置与尺寸。这套样式模板与同目录下 aws4.md 的用法一致区别在于 aws4 库部分形状需要resIcon二级样式shapemxgraph.aws4.resourceIcon;resIconmxgraph.aws4.{shape}而 salesforce 库的所有形状都直接用shapemxgraph.salesforce.{shape}引用语法更简单。二、完整形状清单97 个salesforce 库共收录97 个形状命名规律明显绝大多数业务模块都存在xxx与xxx2两个变体后者通常为对应的线框/变体风格覆盖营销、销售、服务、数据、物联网、行业垂直方案等 Salesforce 生态场景。以下为文档原样列出的完整清单替换样式名时请严格使用这些名称注意大小写与下划线例如customer_360、non_profit、work_com、transportation_and_technologyanalytics analytics2 apps apps2 automation automation2 automotive automotive2 bots bots2 builders builders2 channels channels2 commerce commerce2 communications communications2 consumer_goods consumer_goods2 customer_360 customer_3602 data data2 education education2 employees employees2 energy energy2 field_service field_service2 financial_services financial_services2 government government2 health health2 heroku heroku2 inbox inbox2 industries industries2 integration integration2 iot iot2 learning learning2 loyalty loyalty2 manufacturing manufacturing2 marketing marketing2 media media2 mxgraph.salesforce non_profit non_profit2 partners partners2 personalization personalization2 philantrophy philantrophy2 platform platform2 privacy privacy2 retail retail2 sales sales2 segments segments2 service service2 smb smb2 social_studio social_studio2 stream stream2 success success2 sustainability sustainability2 transportation_and_technology transportation_and_technology2 web web2 work_com work_com2 workflow workflow2几点值得注意清单中的第 59 项是mxgraph.salesforce与库前缀同名文档将其作为普通形状条目列出使用时可与其他形状同等对待philantrophy是文档原文拼写而非 philanthropy引用形状名时必须与清单完全一致库索引表 docs/shape-libraries/README.md 中记录的数量为 96与本文档顶部标注的 97 存在 1 个差异具体形状以本文档清单为准。三、样式语法逐项解析salesforce 图标本质上是 mxgraph 注册的shape 渲染器因此它的样式语法与普通 draw.io 形状完全兼容可自由组合下列属性属性示例值作用shapemxgraph.salesforce.marketing必填决定渲染哪个图标必须与mxgraph.salesforce前缀组合fillColor#7f8de1、#00A1E0图标填充色可按品牌色自由定制strokeColornone描边色图标类形状通常设为noneverticalLabelPositionbottom标签相对形状的垂直位置verticalAligntop形状内部内容垂直对齐aligncenter、left、right标签水平对齐方式whiteSpacewrap配合html1实现文本自动换行多行标签场景html1启用 HTML 标签渲染文字样式更丰富从仓库的绘制规范packages/mcp-server/src/drawing-guide.ts看项目约定的通用形状风格为rounded1;fillColor#hex;strokeColor#hex;whiteSpacewrap;html1;边缘使用endArrowclassic;edgeStyleorthogonalEdgeStyle;。当用户要求极简/黑白/无样式图时则改用最小风格whiteSpacewrap;html1;形状与html1;endArrowclassic;连线此时不设置任何fillColor、strokeColor、rounded等属性。Salesforce 图标可以与这些风格规则自由叠加。四、从文档到工具get_shape_library 的调用链salesforce.md 这类形状库文档不只是给人看的它同时是 AI 绘图链路中的事实来源。仓库中docs/shape-libraries/*.md被两处工具实现消费4.1 Web 端app/api/chat/route.ts在 Web 应用的聊天路由中get_shape_library工具直接读取磁盘上的文档目录工具描述中内嵌了全部库的分组清单由SHAPE_LIBRARY_LIST生成见 app/api/chat/route.ts执行时调用getShapeLibrary(library, path.join(process.cwd(), docs/shape-libraries))把docs/shape-libraries目录作为文档根路径见 app/api/chat/route.ts请求参数library会先经过白名单校验只有已知库名才会触达文件系统例如salesforce属于 Cloud 分组见 packages/mcp-server/src/shape-library.ts。4.2 MCP Server 端packages/mcp-server桌面端 MCP Server 注册了同名工具get_shape_library其描述明确要求Call this BEFORE drawing with cloud, network or other icon shapes, and use the exact names it returns; never guess them见 packages/mcp-server/src/index.ts。加载逻辑getShapeLibrary会依次在以下位置查找salesforce.md构建产物目录dist/shape-libraries打包时由scripts/copy-assets.mjs复制仓库源目录docs/shape-libraries。查找不到时返回明确错误信息库不存在或安装缺失避免 AI 静默失败见 packages/mcp-server/src/shape-library.ts。4.3 为什么 AI 必须先查文档系统提示词与绘制指南反复强调同一原则在使用任何图标库AWS、Azure、GCP、Kubernetes、Cisco、BPMN、Material Design、web icons以及本主题的 Salesforce之前必须先调用get_shape_library并使用其返回的精确样式名绝不猜测。这层约束同时存在于Web 系统提示词lib/system-prompts.tsALWAYS call this before using any icon library — never guess the syntaxMCP 会话启动返回的绘制指南packages/mcp-server/src/index.ts与get_drawing_guide工具。原因很直接mxgraph.salesforce的 97 个形状名属于注册在 mxgraph 中的精确标识符任何拼写偏差如把work_com2写成workcom2、把philantrophy2写成philanthropy2都会导致画布上渲染失败或形状缺失。五、在完整绘图工作流中落地放置图标只是第一步要生成一张合格的 Salesforce 架构图还需遵守仓库绘制指南中与 XML 结构、布局和编辑相关的硬性规则packages/mcp-server/src/drawing-guide.ts5.1 XML 结构规则所有mxCell必须是同级兄弟节点严禁把一个mxCell嵌套进另一个mxCell校验逻辑见 packages/mcp-server/src/xml-validation.ts单元格 id 在页面内唯一且从2开始0、1为根单元格顶层形状用parent1容器内的形状用parent容器id连线edge的source、target必须引用已存在的单元格 id属性值中的特殊字符必须转义lt;、gt;、amp;、quot;严禁包含 XML 注释!-- --draw.io 会剥离它们在工具参数JSON中XML 内的每个都要转义为\。发送到服务端的 XML 只含mxCell元素mxfile、mxGraphModel、root与根单元格由服务端自动补齐这与 xml-examples.ts 中示例的结构一致。5.2 布局与连线约束单页元素尽量保持在 x 0–800、y 0–600 范围内避免分页容器如云边界框最宽 700px、最高 550px从 x≈40、y≈40 开始紧凑排布连线必须设置exitX/exitY/entryX/entryY锚点两条边不得共路径边不得穿越非源/目标的形状必要时用 2–3 个waypoint走 L 形或 U 形路径方向流优先自上而下或自左而右相邻元素保持 150–200px 间距。5.3 修改已有图的编辑语义若要对已含 Salesforce 图标的图做增量修改应使用edit_diagram而非整图重绘update需发送包含mxGeometry的完整mxCell且 id 与原单元格一致add插入新单元格delete删除单元格会连带其子元素与所有相关连线。所有操作全有或全无——任一操作失败则全部不生效返回当前页面 XML 供重试。这保证了大图中某个图标调整失败时不会破坏整张图。六、从本仓库继续深入如果你需要在自己的 next-ai-draw-io 部署中扩展或排查 Salesforce 图标相关问题以下文件是最直接的切入点库文档索引与全量统计docs/shape-libraries/README.md30 个库、4,184 个形状salesforce 位于 Cloud 分组Web 端工具注册与文档加载app/api/chat/route.ts、packages/mcp-server/src/shape-library.ts绘制规则布局、连线、编辑、最小风格packages/mcp-server/src/drawing-guide.tsXML 严格校验嵌套检测、未知元素、孤立 mxPointpackages/mcp-server/src/xml-validation.ts、语法检查 packages/mcp-server/src/xml-syntax.ts相关单元测试packages/mcp-server/tests/xml-validation.test.ts覆盖形状样式、嵌套单元格与错误 XML 的修复/拒绝行为。结语mxgraph.salesforce库让 next-ai-draw-io 生成的图表可以直接使用 Salesforce 官方的 97 个平台图标手工使用时套用shapemxgraph.salesforce.{shape}加fillColor/strokeColor等标准样式即可AI 自动绘图时get_shape_library工具负责把本文档原文提供给模型模型只需按返回的精确形状名生成mxCell再配合布局、连线与编辑规则即可产出结构清晰、视觉统一的 Salesforce 生态架构图。赞分享AI 应用大模型前端后端MCP 服务【免费下载链接】next-ai-draw-ioA next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.项目地址https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io点击查看免费下载相关推荐next-ai-draw-io 形状库实战指南OpenStack mxgraph 图标库的 19 个形状、XML 用法与 AI 绘图调用链next ai draw io 形状库实战指南OpenStack mxgraph 图标库的 19 个形状、XML 用法与 AI 绘图调用链 本指南以 docsAI 应用大模型前端后端MCP 服务next-ai-draw-io 图形形状库速查全面解析 mxgraph 图标库目录体系与 AI 绘图调用机制next ai draw io 图形形状库速查全面解析 mxgraph 图标库目录体系与 AI 绘图调用机制 本文面向希望深入掌握 next ai drawAI 应用大模型前端后端MCP 服务next-ai-draw-io 电气符号库完全指南在 AI 绘图中使用 mxgraph.electrical 形状next ai draw io 电气符号库完全指南在 AI 绘图中使用 mxgraph.electrical 形状 导读 本文面向使用 next ai draAI 应用大模型前端后端MCP 服务上一篇Shortkeys浏览器快捷键定制工具从入门到精通完整指南下一篇Adminer 测试体系完全指南从 Playwright 端到端测试到多数据库驱动验证创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
