企业官网建设流程全解析

使用 next-ai-draw-io 的 Android 图形库绘制移动端 UI 线框图（mxgraph.android 形状全集与用法解析）

【免费下载链接】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/android.md 展开，系统讲解该项目内置的 Android UI mockup 图形库：它的mxgraph.android命名前缀、XML 引用语法、47 个预置形状的分类清单，以及在 AI 对话式绘图中如何被正确调用。读者读完后，将能够在 draw.io 兼容的 XML 中直接使用这些 Android 组件形状，并理解它们在该项目的 AI 工具链（get_shape_library）中扮演的角色。

一、这份文档在项目中的定位

next-ai-draw-io 是一个将 AI 能力与 draw.io 图编辑结合的项目。为了让大模型能够“正确”而不是“靠猜”地写出 draw.io 样式，仓库在 docs/shape-libraries/ 下维护了 33 个图形库、总计 4,281 个形状的参考文档，覆盖云厂商（aws4、azure2、gcp2 等）、网络（cisco19、kubernetes 等）、业务流程（bpmn）、通用图形（flowchart、basic）以及 UI/线框图等分类。android.md即属于其中的UI/Mockups分类，官方描述为“Android UI mockup components”（Android 界面线框组件）。

需要留意一处仓库内部差异：在索引表 docs/shape-libraries/README.md 中 android 被标注为 17 个形状，而android.md正文实际列出 47 个形状——索引计数可能存在滞后，使用时应以各库文档正文的清单为准。

该目录不只是给人看的，它还被聊天接口当作“AI 工具的知识库”读取。在 app/api/chat/route.ts 中注册了一个名为get_shape_library的工具，AI 可以按库名读取对应.md文件来获取“style 语法与形状名”。因此，这份文档的质量会直接影响 AI 生成 Android UI 线框图的准确率——文档中的每一条形状名都相当于 AI 的“可选词汇表”。

二、mxgraph 形状机制：前缀、shape 属性与整体语法

android.md开头给出了两个关键元信息：

• Type:mxgraph shapes——本库属于 draw.io 的 mxgraph 内置矢量形状体系；
• Prefix:mxgraph.android——所有该库形状的完整引用都以mxgraph.android.开头。

在 draw.io 的 XML 中，一个图形通过<mxCell>的style属性里的shape=mxgraph.android.<shape_name>来指定。这与项目中其他库（如 basic.md 的shape=mxgraph.basic.{shape}）完全同构，也与 lib/cached-responses.ts 中保存的示例 XML（shape=mxgraph.aws4.group、shape=mxgraph.aws4.resourceIcon等）使用的是同一套约定。

系统提示词 lib/system-prompts.ts 中对 AI 有一条硬性要求：使用图标库（material_design、webicons 等）时必须先调用get_shape_library去发现可用的图标形状与正确语法，绝不允许猜测图标 style 语法。对 Android 形状也是如此——不查文档直接写shape=...是错误高发点。

三、基础用法：以 phone2 设备框为例

android.md提供了一个可直接复制的最小示例，用phone2（手机外形）作为载体：

<mxCell value="label" style="shape=mxgraph.android.phone2;strokeColor=#c0c0c0;" vertex="1" parent="1"> <mxGeometry x="0" y="0" width="200" height="390" as="geometry" /> </mxCell>

逐段拆解这段 XML，便于理解每部分的作用：

从命名与默认几何看，phone2是竖屏手机外形（文档示例的 200×390 宽高比 ≈ 1:1.95，接近常见手机屏幕比例）。实际使用时，可把外围组件的坐标放在手机框内，就得到一张可拼装的界面线框图。除strokeColor外，还可叠加 fillColor、rounded、dashed、html、whiteSpace 等 draw.io 常规样式键来调整视觉。

四、47 个 Android 形状全清单与分类说明

android.md正文给出了完整 47 项清单。按形状名称所对应的界面元素语义，可归纳为以下几组（分类依据名称推断，原始文档未显式分组）：

1. 设备与系统框架（外壳、状态栏、导航栏）

2. 操作栏（Action Bar）与上下文操作

3. 进度与加载指示器

4. 滚动与文本选择

5. 表单控件与交互元素

说明：上表的分组与语义描述是根据形状命名规范与 Android Material 设计语言做出的推断性归纳，用于帮助记忆与检索；形状能否按预期渲染，取决于目标 draw.io 编辑器是否包含该 stencil 集合。在引用到具体界面时，建议先在编辑器中实际放置一次确认外观。

五、在 AI 对话绘图中使用该库的完整链路

5.1 工具读取与路径安全

在聊天接口中，AI 通过get_shape_library工具按需读取库文档。app/api/chat/route.ts 的实现值得关注两点：

1. 输入清洗：库名先toLowerCase()，再用/[^a-z0-9_-]/g剔除非白名单字符，防止通过库名注入路径片段；
2. 路径穿越防护：将解析后的绝对路径与docs/shape-libraries基准目录比对，!resolvedPath.startsWith(path.resolve(baseDir))时直接拒绝。即“AI 只允许读取预置的形状库文档”，这是对不可信模型输出的一种纵深防御。

调用方式（供 AI 理解接口，非人工操作命令）：

get_shape_library(library = "android")

返回内容即为android.md的全文；若库不存在，工具会返回一份可用的库名清单。

5.2 库名提示的覆盖范围

值得注意：get_shape_library的工具描述里，UI/Mockups 分类同时列出了android与material_design（见 app/api/chat/route.ts），而仓库docs/shape-libraries/目录中目前可确认实际存在android.md。也就是说，AI 的能力声明与可读取资料之间存在细微出入，人工确认时应以实际存在的文档目录为准。

5.3 一个端到端的实战示例

结合上文知识，构造一张完整的 Android 竖屏线框图 XML（含手机外框、状态栏与顶部操作栏），可作为向 AI 下达“画一个 Android 界面线框”指令时的手写范本：

<mxfile> <diagram id="android-mock" name="Android UI"> <mxGraphModel dx="800" dy="600" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="240" pageHeight="430"> <root> <mxCell id="0" /> <mxCell id="1" parent="0" /> <mxCell id="phone" value="" style="shape=mxgraph.android.phone2;strokeColor=#c0c0c0;html=1;" vertex="1" parent="1"> <mxGeometry x="20" y="20" width="200" height="390" as="geometry" /> </mxCell> <mxCell id="status" value="9:41" style="shape=mxgraph.android.statusBar;strokeColor=#666666;html=1;fontSize=9;" vertex="1" parent="1"> <mxGeometry x="24" y="30" width="192" height="20" as="geometry" /> </mxCell> <mxCell id="action" value="App Title" style="shape=mxgraph.android.action_bar;strokeColor=#666666;html=1;fontSize=12;" vertex="1" parent="1"> <mxGeometry x="24" y="52" width="192" height="40" as="geometry" /> </mxCell> </root> </mxGraphModel> </diagram> </mxfile>

上例仅用于演示图形组合与层级坐标的编排思路，各组件内部布局需在实际 draw.io 编辑器中按需微调坐标与尺寸。

六、与其他 UI/线框库文档的配合使用

android.md不是孤立存在。需要更丰富的图标素材时，AI 会按需并行读取多个库文档再合并生成：

• 想添加通用界面图形：参考 basic.md（矩形、横幅、标注等 31 个基础形状）；
• 想画流程图与状态流转：参考 flowchart.md；
• 想用网络/基础设施场景：参考 cisco19.md 等云与网络库。

所有库共享同一套调用约定：shape=mxgraph.<库前缀>.<形状名>。读完 android 库后，掌握“先查get_shape_library再写 style”的习惯，即可触类旁通地使用 docs/shape-libraries/README.md 中列出的全部 33 个库。

七、与 AI 生图相关的工程配套

除get_shape_library外，仓库还提供了若干保证“AI 产出的 XML 可被 draw.io 正确打开”的配套能力，它们在引用形状库文档时共同起作用：

• XML 结构封装与修复：lib/utils.ts 负责把零散内容包装为 draw.io 所需的完整mxfile结构，并提供 20 余种常见 XML 问题的自动修复逻辑（lib/utils.ts）；
• cached-responses 参考样例：lib/cached-responses.ts 保存了带mxgraph.aws4.*等真实 shape 的完整 XML 片段，是“shape 语法 + 完整 mxCell 结构”可以对照的落盘范本；
• 系统提示词约束：lib/system-prompts.ts 定义了 AI 读写图的方式（新建/追加/修改工具调用），并要求先查库文档再产出 style。

这条“文档 → 工具读取 → 模型生成 → XML 修复 → 编辑器渲染”的链路，正是 next-ai-draw-io 把第三方 draw.io 形状库转译为 AI 可执行知识的方式。理解android.md，就等于理解了这条链路的入口。

【免费下载链接】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