next-ai-draw-io 内置 Floorplan 户型家具图元库：45 种 mxgraph 图形在 AI 绘图中的接入与使用

本指南以 floorplan.md 为核心，系统讲解 next-ai-draw-io 内置的 mxgraph.floorplan 平面图家具库：包含 45 种户型家具与设备图元，适用于室内布局、户型改造、家居动线等平面图绘制场景。读完你将掌握它的 shape 语法、完整图元清单，以及它如何通过 get_shape_library 工具被 AI 对话助手按需加载、写出可直接渲染的 draw.io XML。

Floorplan 库定位：Engineering 类 mxgraph 形状集合

在 next-ai-draw-io 的图元库体系（见 shape-libraries README）中，floorplan 被归类在 Engineering（工程） 分类下，描述为 "Floor plan furniture and fixtures"（户型图家具与固定装置）。与之同类的还有 fluidpower（流体动力）、electrical（电气电路）、pid（管道仪表）、cabinets（电气柜）等工程符号库。

它的元信息在 floorplan.md 顶部有明确声明：

• 类型（Type）： mxgraph shapes —— 说明全部图元均以 draw.io/mxgraph 的形状机制注册，通过 style 中的 shape= 属性引用；
• 前缀（Prefix）： mxgraph.floorplan —— 所有图元的 shape 名统一以 mxgraph.floorplan. 作为命名空间前缀。

标准用法：一个 mxCell 引用一个家具图元

该库的用法与仓库内所有 shape library 保持一致（参考 README.md 顶部给出的通用引用范式 style="shape=mxgraph.<library>.<shape_name>"），在 draw.io XML 的 <mxCell> 上通过 style 属性声明形状类型，再用子节点 <mxGeometry> 控制位置与尺寸。原文档给出的最小可复用模板如下：

<mxCell value="label" style="shape=mxgraph.floorplan.{shape};fillColor=#ffffff;strokeColor=#000000;" vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
</mxCell>

其中：

• {shape} 是占位符，替换为下文的任一图元名，例如 shape=mxgraph.floorplan.sofa；
• fillColor 与 strokeColor 分别控制图元的填充色与描边色（上例为白底黑边的默认配色）；
• vertex="1" 表示该 mxCell 是一个顶点（可渲染图形），parent="1" 表示挂接在默认画布父节点下；
• mxGeometry 的 x/y 控制图元坐标，width/height 控制其整体包围盒尺寸。多数家具图元带有 aspect=fixed 类固有比例约束（本仓库中 AWS 等图元的使用即见 cached-responses.ts 中大量 aspect=fixed 的写法），尺寸上通常保持 60×60 一类方形基础值即可正确缩放，因此建议用方形几何框起步、再微调。

将占位符替换后放入完整的 mxGraphModel，即是一段可直接在 draw.io 渲染的合法片段，例如放置一个浴缸：

<mxGraphModel>
  <root>
    <mxCell id="0" />
    <mxCell id="1" parent="0" />
    <mxCell id="2" value="主卫浴缸" style="shape=mxgraph.floorplan.bathtub;fillColor=#ffffff;strokeColor=#000000;" vertex="1" parent="1">
      <mxGeometry x="80" y="120" width="60" height="60" as="geometry" />
    </mxCell>
  </root>
</mxGraphModel>

需要说明：若 XML 中希望以 id 稳定标识图元以便后续增量编辑，本项目约定由调用方自行维护 cell 的 id（如 id="2"、id="3"），这与 edit_diagram 的按 id 更新/删除机制配合使用。

45 个图元全清单

原文档的 "Shapes (45)" 一节列出了全部图元名（见 floorplan.md）。按其用途可归纳为五组，凡列表中的名字都可直接替换到 mxgraph.floorplan.{shape} 中：

洗浴 / 卫浴设施（7）

形状名	建议用途
bathtub	浴缸（经典款）
bathtub2	浴缸（另一款）
shower	淋浴间（款一）
shower2	淋浴间（款二）
toilet	马桶
sink_1	单槽洗手盆（款一）
sink_2	单槽洗手盆（款二）

橱柜 / 灶具 / 家电（8）

形状名	建议用途
range_1	灶台/炉具（款一）
range_2	灶台/炉具（款二）
refrigerator	冰箱
drying_machine	烘干机
washing_machine	洗衣机
copier	复印机
water_cooler	饮水机
bookcase	书柜

桌椅 / 家具（9）

形状名	建议用途
bed_double	双人床
bed_single	单人床
chair	普通椅子
office_chair	办公椅
couch	长沙发/沙发床
sofa	沙发（单座款）
dresser	斗柜/梳妆台
desk_corner	转角书桌
desk_corner_2	转角书桌（款二）

桌类（6）

形状名	建议用途
table	通用桌子
table_1	桌子款一
table_2	桌子款二
table_3	桌子款三
table_4	桌子款四
table_5	桌子款五

影音 / 照明 / 设备（5）

形状名	建议用途
crt_tv	老式显像管电视
flat_tv	平板电视
piano	钢琴
floor_lamp	落地灯
fireplace	壁炉

通道 / 结构 / 其他（8）

形状名	建议用途
elevator	电梯
spiral_stairs	旋转楼梯
plant	绿植
laptop	笔记本（桌面摆设）
printer	打印机
sink_double	双槽水槽
sink_double2	双槽水槽（款二）
sink_22	双槽水槽（补充款）
workstation	工位/工作站

说明：原清单中另有一项同名条目 mxgraph.floorplan（不带 . 后缀的具体图元名，见 floorplan.md），它实际是生成文档时的冗余记录而非可引用的家具图元名，实战引用时请以上述具体名字为准。此外索引表 README.md 统计的 44 与本文档自述的 45 存在轻微计数出入，属文档维护差异，不影响图元本身的使用。

在 AI 对话中按需加载：get_shape_library 调用链

floorplan 库并非只能在手写 XML 时使用，它还是 next-ai-draw-io 里 AI 助手生成平面图时的"官方查图工具"输入源。

1. 工具注册与目录映射

服务端在 app/api/chat/route.ts 注册了 get_shape_library 工具，其 execute 逻辑会：

1. 对传入的 library 名做小写化与白名单清洗（/[^a-z0-9_-]/g），从入口拦截路径穿越类攻击；
2. 将库名拼接到 docs/shape-libraries/{library}.md，并校验解析后的路径仍位于 docs/shape-libraries 目录内（防止越权读取）；
3. 读文件并把整份 Markdown 文档作为工具返回值交给大模型。

因此，当用户要求 AI 画"户型平面图"时，模型即可调用 get_shape_library({ library: "floorplan" })，将本文档的完整图元清单读入上下文。该工具在系统提示中被归类为 Engineering 系列（fluidpower, electrical, pid, cabinets, floorplan，见 app/api/chat/route.ts），与库索引的工程分类一一对应。

2. 系统提示的强制约束

项目默认系统提示词（lib/system-prompts.ts 与第 95 行）明确要求：

• 使用任何图标库（含 material_design、webicons、云厂商图标）创建图之前，必须先调用 get_shape_library 获取正确的 shape 语法，绝不猜测图标 style 写法；
• 工具用途说明为 "Get shape/icon library documentation"，与 display_diagram（全量新建）、edit_diagram（局部编辑）、append_diagram（截断续写）协同工作。

这意味着你在提示 AI"用床、沙发、冰箱布置这套两居室"时，模型可以走 get_shape_library("floorplan") → display_diagram 的链路，自动产出带正确 shape=mxgraph.floorplan.xxx 的 XML。

3. 校验层的配合

仓库的 MCP Server 侧还维护了 XML 校验工具（packages/mcp-server/src/xml-validation.ts），会对错误闭合的 </mxgraphmodel> 等标签给出纠错提示；服务端也提供了 validate-diagram 相关能力（参见 lib/diagram-validator.ts 同目录实现与 api/validate-diagram/route.ts）。因此即便是 AI 通过工具拼接生成的 floorplan XML，也会经过标签合法性检查，降低了"图元名对但 XML 结构错"的风险。

组合实战：用 7 个图元拼一套单身公寓

把上述知识串起来，下面是一份可直接启发 AI（或手工绘制）的单间公寓平面草稿：入口电梯 + 双人床 + 沙发 + 书桌 + 灶台 + 冰箱 + 马桶 + 淋浴。以 40×40 网格起步、各图元 60×60，并通过 fillColor/strokeColor 统一白底描边风格：

<mxCell id="e1" value="电梯" style="shape=mxgraph.floorplan.elevator;fillColor=#ffffff;strokeColor=#000000;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="60" height="60" as="geometry"/>
</mxCell>
<mxCell id="b1" value="床" style="shape=mxgraph.floorplan.bed_double;fillColor=#ffffff;strokeColor=#000000;" vertex="1" parent="1">
  <mxGeometry x="160" y="40" width="60" height="60" as="geometry"/>
</mxCell>
<mxCell id="s1" value="沙发" style="shape=mxgraph.floorplan.sofa;fillColor=#ffffff;strokeColor=#000000;" vertex="1" parent="1">
  <mxGeometry x="160" y="160" width="60" height="60" as="geometry"/>
</mxCell>
<mxCell id="d1" value="书桌" style="shape=mxgraph.floorplan.desk_corner;fillColor=#ffffff;strokeColor=#000000;" vertex="1" parent="1">
  <mxGeometry x="40" y="160" width="60" height="60" as="geometry"/>
</mxCell>
<mxCell id="r1" value="灶台" style="shape=mxgraph.floorplan.range_1;fillColor=#ffffff;strokeColor=#000000;" vertex="1" parent="1">
  <mxGeometry x="40" y="280" width="60" height="60" as="geometry"/>
</mxCell>
<mxCell id="f1" value="冰箱" style="shape=mxgraph.floorplan.refrigerator;fillColor=#ffffff;strokeColor=#000000;" vertex="1" parent="1">
  <mxGeometry x="160" y="280" width="60" height="60" as="geometry"/>
</mxCell>
<mxCell id="t1" value="卫浴" style="shape=mxgraph.floorplan.bathtub;fillColor=#ffffff;strokeColor=#000000;" vertex="1" parent="1">
  <mxGeometry x="280" y="160" width="60" height="60" as="geometry"/>
</mxCell>

几点布局经验（亦与 system-prompts.ts 对模型输出的视口约束相印证）：

• 保持元素坐标在 0~800（x）与 0~600（y）的视口内，避免出现分页断线；
• 湿区（浴缸/淋浴/水槽）与厨房电器尽量分区聚拢，减少管线绘制的交叉；
• 需要表达墙体时可叠加普通矩形 mxCell 作承重结构，floorplan 图元负责"软装"层；
• 若后续要微调，可将每个图元的稳定 id 交给 edit_diagram 按 id 更新。

边界与注意点

• 渲染依赖底层 mxgraph 资源： 本库属于 mxgraph shapes，其矢量外观依赖 draw.io 编辑器内置的 mxgraph stencil 注册表。仓库提供的是图元清单与调用规范，实际是否可见取决于底层 draw.io 运行时是否包含 floorplan 模板资源；
• 命名不可臆造： 引用时必须以本文档清单或 get_shape_library("floorplan") 返回值为准。若在 app/api/chat/route.ts 的可选库列表之外传名，会直接返回 "Library not found" 提示；
• 风格参数可叠加： 在 shape=... 之外，draw.io 的通用 style 属性（rounded、opacity、rotation、html=1、whiteSpace=wrap 等）均可与 mxgraph 图元同段拼接，便于做配色区分（如卫浴蓝色描边、厨房橙色描边）与旋转调整朝向。

如果你希望在 AI 对话里获得"样板间级"平面图，建议在自然语言指令中点明房型与用途，例如"请画一室一厅的 floorplan 布局，包含双人床、L 型沙发、灶台和冰箱"，模型便会依照 get_shape_library 返回的本文档内容自动组装出规范且可编辑的 draw.io 图元序列。