
next-ai-draw-io 箭头图元库指南掌握 mxgraph.arrows2 的 18 种箭头形状与 AI 绘图集成【免费下载链接】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-ioarrows2 是 next-ai-draw-io 所集成 draw.io 形状库体系中的「通用箭头图元」库属于mxgraph shapes模板类型前缀为mxgraph.arrows2。本文以 docs/shape-libraries/arrows2.md 为主体系统讲解它的 style 语法、18 种可用图元、XML 落地写法并结合本仓库 AI 聊天后端如何动态读取这些图元文档供大模型绘制图表帮助你既能在人工编辑时手写箭头也能理解并校验 AI 生成的箭头 XML。一、认识 arrows2draw.io 的 mxgraph 模板图元库1.1 形状库在仓库中的位置与作用在 next-ai-draw-io 仓库中docs/shape-libraries/目录集中存放了 draw.io 各形状库的图元文档整体索引见 形状库总览其中把 arrows2 归类为「通用图形General Diagrams」下的箭头与连接图形状库。这些 Markdown 文档并非仅供人阅读的静态说明而是被后端以“运行时可查询文档”的方式暴露给 AI 模型当模型需要绘制带箭头图元的图表时会通过工具调用读取对应文件获得准确的形状名与 style 写法从而避免凭空猜测图元语法详见后文“与 AI 绘图流程的集成”。1.2 元信息解读arrows2.md 首部给出了三个关键元信息Type: mxgraph shapes指明该库图元属于 draw.io 的mxgraph模板类型stencil。在 draw.io 中这类图元与基础几何形状rounded1、ellipse等不同它们由独立的 SVG 模板注册而来style 中必须通过shapemxgraph.库名.图元名指定Prefix:mxgraph.arrows2这是 style 值中的库前缀实际引用某个图元时写成shapemxgraph.arrows2.shape_nameShapes (18)该库共收录 18 个箭头类图元。一致性提示根级索引表 README 中标注 arrows2 的图元总量为 34而本文件声明并逐一列举了 18 个两者统计口径存在差异。AI 通过get_shape_library工具实际读取到的是本文件内容因此以 arrows2.md 内列举的 18 个为准。二、style 语法与完整 XML 解析2.1 文档给出的最小可用示例mxCell valuelabel styleshapemxgraph.arrows2.arrow;fillColor#dae8fc;strokeColor#6c8ebf; vertex1 parent1 mxGeometry x0 y0 width100 height60 asgeometry / /mxCell逐段拆解这个示例它就是理解全部 18 个图元的基础片段含义valuelabel图元上显示的文本标签可为空字符串shapemxgraph.arrows2.arrow指定渲染该图元的模板shape 库前缀mxgraph.arrows2. 图元名arrowfillColor#dae8fc填充色。#dae8fc是 draw.io 默认的浅蓝推荐与 draw.io 内置默认色板保持一致strokeColor#6c8ebf描边色#6c8ebf是与#dae8fc配套的深蓝描边vertex1该 cell 是顶点图形而非连线edgeparent1挂在 id 为1的默认根 cell 下mxGeometry ... asgeometry /几何信息x/y为画布坐标width/height为尺寸单位均为像素style 中各属性用分号;分隔末尾保留一个分号是 draw.io 的常见风格但不是必须。颜色推荐直接沿用示例中的 draw.io 经典色板浅蓝填充#dae8fc配描边#6c8ebf同类默认色还有浅绿#d5e8d4/#82b366、浅橙#ffe6cc/#d79b00、浅黄#fff2cc/#d6b656、浅红#f8cecc/#b85450、浅紫#e1d5e7/#9673a6等可用于区分不同的箭头语义。2.2 关键点这些图元是 vertex不是 edgearrows2 的 18 个图元全部通过vertex1挂在画布上属于独立图形符号——它们不像endArrowclassic那样依附于连接线而是可以放置在流程图的任意位置充当“单/双向箭头块”“标注箭头”“转向/汇入标记”等装饰性或流程性符号。这与本仓库对连线的约定是两套体系lib/system-prompts.ts 中对连线edge的要求是endArrowclassic配合edgeStyleorthogonalEdgeStyle等属性第 152-155 行而本文件的箭头图元则走shapemxgraph.arrows2.xxx的模板路径二者不要混用。三、18 种箭头图元全清单与用途参考arrows2.md 按字母顺序完整列出 18 个图元名它们全部以shapemxgraph.arrows2.name的方式引用。按命名语义可大致分为三类用途为命名推断最终视觉效果请以 draw.io 渲染为准3.1 基础箭头类shape 名称命名语义参考arrow基础单箭头文档示例所用图元sharpArrow锐利直边的箭头风格更硬朗sharpArrow2sharpArrow的变体细节轮廓不同stripedArrow带条纹纹理的箭头stylisedArrow造型化/装饰化箭头tailedArrow带“尾巴”尾部延长杆的箭头tailedNotchedArrow尾部带缺口/锯齿造型的箭头triadArrow三叉箭头造型twoWayArrow双向箭头两个方向都可指示3.2 弯曲/转折类shape 名称命名语义参考bendArrow弯折一次的单箭头bendDoubleArrow弯折的双向箭头uTurnArrowU 形掉头箭头3.3 标注/多向类shape 名称命名语义参考calloutArrow带引出/标注性质的箭头calloutDoubleArrow双侧标注箭头calloutDouble90Arrow呈 90° 分布的双侧标注箭头calloutQuadArrow四向标注箭头jumpInArrow“跳入/汇入”形态箭头quadArrow四向箭头引用清单时最稳妥的做法是先查文档再写 style本仓库系统提示词也明确要求模型“当使用图标库时必须先调用get_shape_library获取正确语法绝不猜测图标样式语法”lib/system-prompts.ts 第 95-96 行这正是 arrows2.md 这类文档存在的意义。四、可直接运行的完整 XML 示例4.1 单图元可直接粘贴到 draw.io 编辑器下面是一段完整的可导入 XML画布上包含 4 种代表性箭头图元mxfile hostapp.diagrams.net typedevice diagram idarrows2_demo namearrows2-demo mxGraphModel dx900 dy600 grid1 gridSize10 guides1 tooltips1 connect1 arrows1 fold1 page1 pageScale1 pageWidth850 pageHeight1100 math0 shadow0 root mxCell id0 / mxCell id1 parent0 / mxCell ida1 valuearrow styleshapemxgraph.arrows2.arrow;fillColor#dae8fc;strokeColor#6c8ebf;fontColor#333333; vertex1 parent1 mxGeometry x60 y80 width120 height60 asgeometry / /mxCell mxCell ida2 valuetwoWayArrow styleshapemxgraph.arrows2.twoWayArrow;fillColor#d5e8d4;strokeColor#82b366;fontColor#333333; vertex1 parent1 mxGeometry x60 y200 width120 height60 asgeometry / /mxCell mxCell ida3 valuebendArrow styleshapemxgraph.arrows2.bendArrow;fillColor#ffe6cc;strokeColor#d79b00;fontColor#333333; vertex1 parent1 mxGeometry x60 y320 width140 height90 asgeometry / /mxCell mxCell ida4 valuecalloutQuadArrow styleshapemxgraph.arrows2.calloutQuadArrow;fillColor#e1d5e7;strokeColor#9673a6;fontColor#333333; vertex1 parent1 mxGeometry x60 y460 width160 height160 asgeometry / /mxCell /root /mxGraphModel /diagram /mxfile其中id0、id1是 draw.io 必需的根节点结构id0为模型根id1为默认图层业务图元统一parent1。这段结构与本仓库 public/aws_demo.svg 等内置演示文件内嵌的mxfile → diagram → mxGraphModel → root结构一致。4.2 在流程图中组合使用箭头图元 文本框 连线箭头图元最常见的用法是充当流程方向指示块例如表示“过程 A → 过程 B”之间的双向数据流可与普通文本框、orthogonal 连线自由混排mxCell idp1 value请求方 stylerounded1;whiteSpacewrap;html1;fillColor#dae8fc;strokeColor#6c8ebf; vertex1 parent1 mxGeometry x80 y140 width120 height60 asgeometry / /mxCell mxCell idp2 value服务方 stylerounded1;whiteSpacewrap;html1;fillColor#d5e8d4;strokeColor#82b366; vertex1 parent1 mxGeometry x500 y140 width120 height60 asgeometry / /mxCell mxCell idsync value双向同步 styleshapemxgraph.arrows2.bendDoubleArrow;fillColor#fff2cc;strokeColor#d6b656; vertex1 parent1 mxGeometry x260 y150 width180 height40 asgeometry / /mxCell mxCell ide1 styleedgeStyleorthogonalEdgeStyle;exitX1;exitY0.5;entryX0;entryY0.5;endArrowclassic;html1; edge1 parent1 sourcep1 targetp2 mxGeometry relative1 asgeometry / /mxCell上例说明两类元素的协作关系箭头图元负责“承载语义符号与文字”edge 负责“把各节点真正连接起来”两者在 XML 中可以共存。五、与 next-ai-draw-io 的 AI 绘图流程集成本仓库的特色在于以上文档不只在人工绘图中生效还会在 AI 对话式绘图时被实时查询。整个调用链如下5.1 运行时工具读取服务端app/api/chat/route.ts 在向模型注册的 tools 中定义了get_shape_library第 716-777 行。该工具描述中显式列出可用库其中「General」分组包含arrows2第 723 行对传入的library名做小写化并过滤非[a-z0-9_-]字符第 739-745 行再将路径拼接限定在docs/shape-libraries目录内并做path.resolve前缀校验第 747-760 行防止路径穿越攻击读取对应.md文件全文并原样返回给模型第 762-764 行即模型拿到的是与本文同源的 arrows2.md 清单若库不存在返回包含全部可用库名的提示其中同样包含arrows2第 769 行。因此当用户在 next-ai-draw-io 的聊天框中要求绘制含箭头符号的图时模型可先调用该工具拿到shapemxgraph.arrows2.xxx的准确写法再按 XML 生成规范输出图元。5.2 系统提示词侧配合lib/system-prompts.ts 对模型的约束与之呼应绘制云端/技术类或需要使用图标库的图表时必须先调用get_shape_library查找可用图元与语法“绝不猜测图标样式语法”第 95-96 行。这说明像 arrows2.md 这样的图元清单承担着防幻觉数据源的角色——把“18 个图元叫什么、怎么写”从模型记忆迁移到文档检索。同时系统提示词中的通用样式说明lib/system-prompts.ts 第 194-199 行与 arrows2.md 的示例完全兼容fillColor、strokeColor、fontSize等均为 draw.io 通用样式属性可直接叠加在shapemxgraph.arrows2.*上。六、使用与排查要点库前缀要写全是shapemxgraph.arrows2.xxx而非shapearrows2.xxx。漏掉mxgraph.前缀会导致 draw.io 无法解析该 stencil。图元名大小写敏感如bendArrow、calloutDouble90Arrow、stylisedArrow、uTurnArrow等均为驼峰式书写必须与清单一致模型查询返回的清单本文件就是唯一权威来源。区分图元与连线箭头图元放在vertex1的 cell 中若需“可吸附的连接线箭头”应使用 edgeedge1endArrow。二者适用场景不同不要互相替代。旋转/朝向调整不同图元模板对宽度、高度的渲染比例不同如bendArrow需要较高高度才能呈现弯折形态画布预览时如形态比例不对优先调整mxGeometry的宽高具体每个模板支持哪些额外样式参数以 draw.io 实际渲染效果为准。颜色遵循 draw.io 默认色板示例中#dae8fc填充与#6c8ebf描边来自 draw.io 默认样式混搭其他默认配色可让 AI 生成或人工书写的箭头在明暗主题下都保持良好的对比度本仓库支持深浅主题切换见 lib/system-prompts.ts 第 28 行附近对主题切换的描述。七、小结arrows2 库以mxgraph.arrows2为前缀、通过shape样式属性提供了 18 种开箱即用的箭头符号。在 next-ai-draw-io 中arrows2.md 既是人工写图时的手册也是 AI 模型通过 get_shape_library 工具 实时查询的数据源。掌握「先查文档 → 再写 style」的工作流就能在自然语言绘图、XML 校验与手动调参之间无缝衔接稳定产出符合 draw.io 规范的箭头图形。【免费下载链接】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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考