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点击查看免费下载管道仪表流程图Piping and Instrumentation DiagramPID是化工、制药、能源等过程工业中表达工艺管线、阀门与仪表控制关系的核心工程图纸。在 next-ai-draw-io 项目中这类符号以 mxgraph 形状库的形式内置于docs/shape-libraries/pid.md文档并通过 AI 对话中的get_shape_library工具实时提供给模型查询。读完本文你将掌握 PID 图库的前缀体系、阀门八种类型的 style 写法、完整可运行的 draw.io XML 片段以及该图库在 Web 应用与 MCP Server 两条链路中的源码级工作机制。PID 图库概览类型、前缀与归类根据 docs/shape-libraries/pid.md 的说明PID 图库属于mxgraph shapes类型共包含三个命名空间前缀前缀类别说明mxgraph.pid2valves阀门Valves提供valve形状配合valveType参数切换 8 种阀门类型mxgraph.pid2inst仪表Instruments离散仪表discInst、共享容器sharedCont、计算功能compFunc等mxgraph.pid2misc杂项Miscellaneous其他辅助性 PID 符号在 docs/shape-libraries/README.md 的总览表中pid 图库登记为18 个形状、前缀mxgraph.pid2归类在Engineering工程分组下与fluidpower液压/气动、electrical电气电路、cabinets电气柜、floorplan平面图并列。这个分组关系并非只存在于文档中——packages/mcp-server/src/shape-library.ts 中的SHAPE_LIBRARY_GROUPS常量同样将 pid 列入 Engineering 组供工具描述文本动态生成保证文档与代码的分组口径一致。基本用法mxCell 中的 style 引用方式与全部 30 个图库一样PID 符号通过 draw.io 的shapestyle 属性引用参考 docs/shape-libraries/README.md 的通用规则styleshapemxgraph.library.shape_name。pid.md 给出了最小可运行的 XML 示例mxCell valuelabel styleshapemxgraph.pid2valves.valve;valveTypegate; vertex1 parent1 mxGeometry x0 y0 width60 height60 asgeometry / /mxCell逐字段拆解这一示例valuelabel图元的显示文本可替换为实际的阀门位号如V-101或仪表编号如FT-101。styleshapemxgraph.pid2valves.valve;valveTypegate;shape指向阀门形状valveType选择具体阀门子类型。vertex1声明这是一个顶点形状而非边连线。parent1挂载到根单元格id1之下即顶层形状的标准写法。mxGeometry x0 y0 width60 height60 asgeometry /定义位置与尺寸PID 阀门通常采用 60×60 的方形占位。值得强调的是这条 XML 片段可以直接用于 next-ai-draw-io 的两条生成链路Web 端对话的display_diagram/edit_diagram工具以及 MCP Server 的create_new_diagram/edit_diagram工具。两种链路都遵循同一套 XML 规则——只发送mxCell元素本身mxfile、mxGraphModel、root以及根单元格id0、id1由服务端自动补齐详见 packages/mcp-server/src/drawing-guide.ts 与 lib/system-prompts.ts。阀门类型valveType的 8 个取值对于mxgraph.pid2valves.valvepid.md 明确列出可通过valveType切换的 8 种阀门类型valveType 取值阀门类型典型工程用途gate闸阀全开/全关的截断管路阻力小globe截止阀需要频繁调节流量的场合needle针阀精密小流量调节ball球阀快速启闭、低压降butterfly蝶阀大管径的启闭与调节diaphragm隔膜阀含腐蚀性、易污染介质的管路plug旋塞阀快速启闭的截断阀check止回阀防止介质倒流写法上只需在 style 中替换valveType的值即可例如!-- 球阀 -- mxCell valueV-102 styleshapemxgraph.pid2valves.valve;valveTypeball; vertex1 parent1 mxGeometry x220 y40 width60 height60 asgeometry / /mxCell !-- 止回阀 -- mxCell valueV-103 styleshapemxgraph.pid2valves.valve;valveTypecheck; vertex1 parent1 mxGeometry x340 y40 width60 height60 asgeometry / /mxCell这种基础形状 类型参数的引用模式与同属 Engineering 分组的 electrical.md 的mxgraph.electrical.{category}.{shape}两级组织方式一脉相承都属于 mxgraph 形状体系的风格化扩展。仪表与杂项pid2inst与pid2misc前缀除阀门之外PID 图库还提供仪表与杂项两类符号pid.md 给出了其子形状线索mxgraph.pid2inst仪表包括discInst离散仪表如现场安装的指示器、sharedCont共享容器/控制功能、compFunc计算功能等形状。mxgraph.pid2misc杂项PID 绘制中需要的其他辅助符号。引用时同样采用shapemxgraph.pid2inst.shape_name的形式例如mxCell valueFT-101 styleshapemxgraph.pid2inst.discInst; vertex1 parent1 mxGeometry x120 y40 width60 height60 asgeometry / /mxCell注意pid.md 对pid2inst与pid2misc只给出了子形状名称线索未逐一声明其可用参数。若要获取精确的形状名与语法最可靠的方式是让 AI 通过get_shape_library工具直接读取该图库文档原文而不是凭记忆猜测——这正是项目在系统提示词中反复强调的铁律见下文。在 AI 对话中调用get_shape_library工具链路PID 图库文档在 next-ai-draw-io 中不只是给人读的参考更是模型在生成图纸前的查表工具。项目在 Web 与 MCP 两条链路都注册了get_shape_library工具。Web 端chat 路由在 app/api/chat/route.ts 中get_shape_library接收library参数如aws4、kubernetes、flowchart执行时通过getShapeLibrary(library, path.join(process.cwd(), docs/shape-libraries))读取对应 Markdown 文档并原样返回给模型execute: async ({ library }) { // Only known library names reach the file system const result await getShapeLibrary( library, path.join(process.cwd(), docs/shape-libraries), ) return result.ok ? result.text : result.error },getShapeLibrary的实现packages/mcp-server/src/shape-library.ts包含一道白名单校验库名必须先经过LIBRARIES集合由SHAPE_LIBRARY_GROUPS展开得到检查未收录的名字直接返回错误之后才拼接文件路径读取——这就是注释Only known library names reach the file system的含义从源头杜绝了路径穿越。MCP 端注册与工具描述在 packages/mcp-server/src/index.ts 中get_shape_library被注册为只读工具annotations: { readOnlyHint: true, openWorldHint: false }其描述明确要求模型在绘制云、网络或其他图标形状之前必须先调用它并使用它返回的精确名称绝不猜测。提示词中的硬性规则这一约束在多个提示词文件中被反复强化lib/system-prompts.ts 将get_shape_library列为系统工具并要求在使用任何图标库之前 ALWAYS 调用绝不猜测语法packages/mcp-server/src/drawing-guide.ts 的绘图指南同样写道Before using any icon library... call get_shape_library and use the exact style names it returns. NEVER guess icon style names.也就是说当你向 AI 提出画一张带闸阀、止回阀和流量仪表的 PID 图时合规的模型行为是先调用get_shape_library读取 pid 图库文档也就是 docs/shape-libraries/pid.md 的完整内容再据此拼装mxgraph.pid2valves.valve;valveType...等 style。前端在 components/chat/ToolCallCard.tsx 中会将这一调用显示为 Get Shape Library 卡片并允许一键复制图库文档内容。构建与部署细节图库文档如何随应用分发PID 图库文档要能在运行时被get_shape_library读取离不开打包配置的支持。next.config.ts 中通过outputFileTracingIncludes将整个docs/shape-libraries/*.md目录纳入/api/chat路由的产物追踪outputFileTracingIncludes: { *: [./instrumentation.ts], /api/chat: [./docs/shape-libraries/*.md], },这意味着即使采用output: standalone的独立部署形态图库文档也会随 API 路由一起打进产物保证模型在任何环境下都能查到 PID 形状语法。MCP Server 侧同样做了双重兜底packages/mcp-server/src/shape-library.ts 的libraryDirs会依次尝试dist/shape-libraries构建产物与仓库内的docs/shape-libraries源码运行tsx与打包运行都能定位到文档。端到端验证从图库查找到画布落图项目的 e2e 测试覆盖了模型调用图库工具 → 前端展示 → 画布更新的完整链路。tests/e2e/diagram-content.spec.ts 中专门构造了一个场景模型先调用get_shape_library参数library: aws4期间另一个损坏的edit_diagram调用失败测试断言工具调用的输出事件仍按序到达前端、画布正确回滚。这印证了图库工具与绘图工具在消息流中是并行独立的事件即便某个编辑失败图库查询结果依然会被前端接收与渲染。在真实使用中模型通常会组合多条工具调用完成一张 PID 图先get_shape_library查询 pid 文档再用display_diagram一次性下发包含多个阀门的 XML或在已有图纸上用edit_diagram增量添加某个mxgraph.pid2inst仪表。若要手工验证也可以直接把本文的 XML 片段粘贴进 draw.io 编辑器或通过export_diagram导出.drawio文件后打开观察mxgraph.pid2valves.valve在不同valveType下的图形差异。小结与延伸阅读PID 图库在 next-ai-draw-io 中是一个典型的文档驱动形状案例文档pid.md定义语法工具get_shape_library分发语法提示词system-prompts.ts、drawing-guide.ts强制模型使用语法。掌握mxgraph.pid2valves.valve;valveTypetype与mxgraph.pid2inst.shape两套写法即可在自然语言对话中稳定生成符合工程规范的 PID 图纸。如需继续深入可参考同属 Engineering 分组的 fluidpower.md液压/气动符号与 electrical.md电气电路符号或查看 docs/shape-libraries/README.md 了解全部 30 个图库、4,184 个形状的总览与文件索引。赞分享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 形状库实战用 mscae 绘制 Microsoft 云与企业架构图next ai draw io 形状库实战用 mscae 绘制 Microsoft 云与企业架构图 本篇技术指南围绕 next ai draw io 内置的AI 应用大模型前端后端MCP 服务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.basic完全指南30 种 draw.io 形状的 XML 引用与 AI 绘图实战next ai draw io 基础图形库mxgraph.basic完全指南30 种 draw.io 形状的 XML 引用与 AI 绘图实战 本指南以 dAI 应用大模型前端后端MCP 服务上一篇CookLikeHOC 清炒春菜复刻全解析从 50g 大豆油到 100g 水的后厨级配方拆解下一篇Reasonix Task Catalog 深度解析跨项目任务投影的 SQLite 索引、对账与重建机制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
