next-ai-draw-io 集成 Citrix 形状库：mxgraph.citrix 98 个虚拟化组件图形详解

本文以 docs/shape-libraries/citrix.md 为主体，系统讲解 next-ai-draw-io 项目中 Citrix 形状库（类型 mxgraph shapes、前缀 mxgraph.citrix）的引用语法、样式属性与 98 个可用图形清单，并结合 app/api/chat/route.ts 的 get_shape_library 工具、app/api/chat/xml_guide.md 的 mxCell/mxGeometry 规范，说明如何让 AI 在对话中正确生成并落图 Citrix 组件。读完本文，你将能在 next-ai-draw-io 中通过一行 style 引用 Citrix 图形、为组件正确配色定位，并把它们组合进可被 draw.io 直接识别的 XML 中。

形状库在 next-ai-draw-io 中的定位

next-ai-draw-io 是一个将 AI 能力与 draw.io 图结合的 Next.js 应用：用户用自然语言描述，AI 生成 draw.io 可识别的 XML 图元。项目在 docs/shape-libraries/README.md 中统一登记了 33 个形状库、共 4281 个图形，统一引用规范为：

style="shape=mxgraph.<library>.<shape_name>"

Citrix 库被登记在“Enterprise Software（企业软件）”分类下（README 表格中标注 shapes 数量为 97，文档正文列出 98 个名称，以正文清单为准），定位是 Citrix 虚拟化产品族：XenApp、XenDesktop、NetScaler、StoreFront、XenMobile、ShareFile 等组件图形。

在 AI 侧，get_shape_library 工具负责把指定库的文档喂给模型。app/api/chat/route.ts 中该工具的 description 明确列出可用库，其中 Enterprise 分类即包含 citrix；模型按需以 library: "citrix" 调用，服务端读取 docs/shape-libraries/citrix.md 全文返回。读取时输入做了两层安全防护：先 toLowerCase() 并过滤 [^a-z0-9_-] 防止路径穿越，再用 path.resolve + startsWith 校验解析后的路径仍位于 docs/shape-libraries 目录内，确保模型无法借工具名逃逸读取其他文件。

基础用法：一行 style 引用 Citrix 图形

Citrix 库属于 mxgraph shapes（内置矢量形状），不是外部 SVG 图片。因此用法与 azure2（image=img/lib/azure2/...）不同：无需指定图片路径，只需把 shape 设置为 mxgraph.citrix.{shape}。文档给出的标准引用模板：

<mxCell value="label" style="shape=mxgraph.citrix.{shape};fillColor=#00A4E4;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
</mxCell>

各属性的作用与建议取值：

• shape=mxgraph.citrix.{shape}：核心样式，{shape} 替换为下方清单中的图形名，如 shape=mxgraph.citrix.xenapp_server；
• fillColor=#00A4E4：填充色，示例用 Citrix 品牌蓝；mxgraph 矢量形状支持任意十六进制颜色覆盖；
• strokeColor=none：去掉描边，让图形以纯色填充呈现；也可以改成 strokeColor=#1d3f78 等深色获得描边效果；
• verticalLabelPosition=bottom;verticalAlign=top;align=center：标签放到底部水平居中，避免遮挡图形主体；
• vertex="1"：声明这是一个顶点（形状），parent="1"：挂到根单元格（id="1"）下；
• <mxGeometry>：x/y 为左上角坐标，width/height 为 60×60 尺寸，as="geometry" 表明这是该形状的几何定义。

生成时必须遵守的 XML 规范

引用模板要放进 AI 生成的图里，还需要遵循项目在 app/api/chat/xml_guide.md 中约定的约束：

• 只生成 mxCell 元素：<mxfile>、<diagram>、<mxGraphModel>、<root> 以及 id="0"、id="1" 根单元格由服务端自动补全，AI 生成的图形从 id="2" 开始；
• 所有 mxCell 必须是兄弟节点：不允许 mxCell 嵌套 mxCell（这是 packages/mcp-server/src/xml-validation.ts 中 validateMxCellStructure 的硬性校验项之一，违反会返回 “Found nested mxCell” 错误并触发自动修复）；
• 结构属性不得重复：edge、parent、source、target、vertex、connectable 等结构属性重复会被判为非法 XML；
• XML 转义：属性值中的 & 必须写成 &，</> 写成 </>（同一文件中 checkEntityReferences 会把未转义的 & 直接判错）；
• id 唯一：单页内所有 mxCell 的 id 必须唯一。

若 AI 输出有误，lib/diagram-validator.ts 与 mcp-server 中的 validateAndFixXml 会尝试自动修复（JSON 转义、CDATA 包裹、重复属性、未转义字符、标签拼写、多余闭合标签等 20 余类问题），修复无果再让模型重新生成。此外，AI 生成 XML 后还会经 lib/diagram-validator.ts 定义的 VLM 视觉校验流程（formatValidationFeedback）检查布局与视觉问题，Citrix 图形应与其他组件一样遵循坐标不重叠、尺寸合理等要求。

形状清单（98）

以下为 docs/shape-libraries/citrix.md 列出的全部 98 个形状名，使用时拼接到 shape=mxgraph.citrix. 之后。

服务器与基础设施（Server & Infrastructure）

• 1u_2u_server（1U/2U 机架服务器）
• cache_server（缓存服务器）
• chassis（机箱）
• database（数据库）
• database_server（数据库服务器）
• datacenter（数据中心）
• dhcp_server（DHCP 服务器）
• directory_server（目录服务器）
• dns_server（DNS 服务器）
• edgesight_server（EdgeSight 服务器）
• file_server（文件服务器）
• ftp_server（FTP 服务器）
• license_server（许可证服务器）
• merchandising_server（商品化服务器）
• middleware（中间件）
• pbx_server（PBX 服务器）
• provisioning_server（Provisioning 服务器，对应 PVS）
• proxy_server（代理服务器）
• radius_server（RADIUS 服务器）
• reporting（报表）
• router（路由器）
• smtp_server（SMTP 服务器）
• switch（交换机）
• tower_server（塔式服务器）
• web_server（Web 服务器）
• web_service（Web 服务）
• xenapp_server（XenApp 服务器）
• xenapp_services（XenApp 服务）
• xendesktop_server（XenDesktop 服务器）
• xenserver（XenServer）

NetScaler 产品线

• netscaler_gateway（NetScaler Gateway）
• netscaler_mpx（NetScaler MPX 物理设备）
• netscaler_sdx（NetScaler SDX）
• netscaler_vpx（NetScaler VPX 虚拟设备）

终端与客户端设备（Endpoints & Clients）

• access_card（访问卡）
• browser（浏览器）
• cell_phone（手机）
• desktop（桌面）
• desktop_web（Web 桌面）
• document（文档）
• ip_phone（IP 电话）
• kiosk（自助终端）
• laptop_1（笔记本 1）
• laptop_2（笔记本 2）
• pda（PDA）
• printer（打印机）
• tablet_1（平板 1）
• tablet_2（平板 2）
• thin_client（瘦客户端）
• user_control（用户控制）
• users（用户组）
• xenclient（XenClient）
• xenclient_synchronizer（XenClient Synchronizer）

分支机构与办公场景（Branch & Office）

• branch_repeater（分支中继器）
• government（政府机构）
• home_office（家庭办公）
• hq_enterprise（企业总部）
• remote_office（远程办公）
• site（站点）

安全组件（Security）

• firewall（防火墙）
• security（安全）
• role_secure_access（安全访问角色）
• role_security（安全角色）

角色与功能组件（Roles & Functions）

• role_appcontroller（AppController 角色）
• role_applications（应用程序角色）
• role_cloudbridge（CloudBridge 角色）
• role_desktops（桌面角色）
• role_load_testing_controller（负载测试控制器角色）
• role_load_testing_launcher（负载测试启动器角色）
• role_receiver（Receiver 角色）
• role_repeater（Repeater 角色）
• role_services（服务角色）
• role_storefront（StoreFront 角色）
• role_storefront_services（StoreFront 服务角色）
• role_synchronizer（Synchronizer 角色）
• role_xenmobile（XenMobile 角色）
• role_xenmobile_device_manager（XenMobile 设备管理器角色）

云服务与移动办公（Cloud & Mobility）

• cloud（云）
• citrix_hdx（Citrix HDX 协议）
• citrix_logo（Citrix Logo）
• command_center（Command Center 控制台）
• globe（地球）
• geolocation_database（地理定位数据库）
• goto_meeting（GoToMeeting）
• inspection（巡检）
• podio（Podio）
• process（流程）
• sharefile（ShareFile）
• storefront_services（StoreFront 服务）
• worxenroll（Worx Enroll）
• worxhome（Worx Home）
• worxmail（Worx Mail）
• worxweb（Worx Web）
• xenapp_web（XenApp Web）
• xencenter（XenCenter 管理控制台）
• xenmobile（XenMobile）
• mxgraph.citrix（库占位/自引用图形）

说明：清单中的 mxgraph.citrix 是文档原样列出的一个形状名（用于验证形状注册是否生效），其余 97 个均为可绘制的 Citrix 组件图形。每个图形可直接用于 style 引用；具体绘制效果以 draw.io 运行时实际渲染为准。

实战组合：把 Citrix 图形拼成一张完整图

将上述知识组合成一张“用户 → NetScaler → XenApp 服务器群 → StoreFront → 数据库”的经典 Citrix 架构图，XML 骨架如下（遵循 xml_guide 的“只写 mxCell、全部兄弟节点”约定，id 从 2 开始）：

<mxCell id="2" value="User" style="shape=mxgraph.citrix.users;fillColor=#00A4E4;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="3" value="NetScaler Gateway" style="shape=mxgraph.citrix.netscaler_gateway;fillColor=#00A4E4;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
  <mxGeometry x="240" y="40" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="4" value="XenApp Server" style="shape=mxgraph.citrix.xenapp_server;fillColor=#00A4E4;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
  <mxGeometry x="440" y="40" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="5" value="StoreFront" style="shape=mxgraph.citrix.role_storefront;fillColor=#00A4E4;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
  <mxGeometry x="440" y="220" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="6" value="Database" style="shape=mxgraph.citrix.database;fillColor=#00A4E4;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
  <mxGeometry x="640" y="220" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="e1" value="" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;html=1;" edge="1" parent="1" source="2" target="3">
  <mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="e2" value="" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;html=1;" edge="1" parent="1" source="3" target="4">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

要点回顾：

• 顶点（vertex）用 shape=mxgraph.citrix.xxx + vertex="1"；连线（edge）用 edge="1" + source/target 指向两端 mxCell 的 id；
• 连线也是独立的 mxCell，必须与顶点平级（不嵌套），并使用 mxGeometry relative="1"；
• 若在 next-ai-draw-io 对话中输入“画一张用户经 NetScaler 访问 XenApp 的架构图”，AI 会经由 get_shape_library 读取本文档、按上述规范生成等价 XML，随后经 XML 校验与 VLM 视觉校验后渲染。

与相邻形状库的关系

Citrix 库常与以下库配合描述企业虚拟化与网络拓扑：

• vvd.md（VMware Validated Design，93 个图形）——跨厂商对比或混合虚拟化场景；
• cisco19.md（思科网络设备，232 个图形）与 network.md（通用网络符号）——NetScaler 前后链路上的交换机、防火墙；
• rack.md（机架与数据中心设备）——把 XenApp/XenDesktop 服务器放入机架视图；
• mscae.md（微软云与企业符号）与 sap.md（SAP 图标）——异构企业应用架构中的其他产品线。

多个库可混用：例如用 mxgraph.cisco19 画下层网络、mxgraph.citrix 画虚拟化层、mxgraph.basic 画分组注释，只要遵循统一的 mxCell 平级结构与唯一 id 规则即可。

小结与排查

• 引用格式：shape=mxgraph.citrix.<shape>，配 fillColor/strokeColor 自定义配色，verticalLabelPosition=bottom;verticalAlign=top;align=center 让标签置于底部；
• 图形清单：本文档 98 个名称按服务器/NetScaler/终端/办公/安全/角色/云移动分类列出，均可直接使用；
• 渲染空白或报错时：优先检查 shape 名是否与清单完全一致（注意下划线拼写，如 netscaler_gateway、role_storefront）；确认 mxCell 未嵌套、结构属性未重复、& 已转义为 &、id 唯一；仍不通过时，项目会走 validateAndFixXml 自动修复或触发模型重生成流程。