样式提取 — 代理参考当用户要求学习样式“从path学习我的样式命名为name”或代理需要在提取后渲染样本时由SKILL.md按需加载。样本图表用于审批渲染提取候选预设后使用候选的调色板/形状/字体/连线渲染此七节点样本。每个角色恰好出现一次六条连线一条虚线练习使用edges.arrow、edges.style和edges.dashedFor。布局TB第 1 行y40gateway居中于 x340第 2 行y180securityx80、servicex340、queuex600第 3 行y340databasex80、externalx340、errorx600模板 — 从候选预设替换{{...}}占位符。角色R的顶点样式构建为shapes[R];whiteSpacewrap;html1;fillColorpalette[roles[R]].fillColor;strokeColorpalette[roles[R]].strokeColor;fontFamilyfont.fontFamily;fontSizefont.fontSize如果extras.sketchtrue则向每个顶点样式和每个连线样式附加;sketch1。如果extras.globalStrokeWidth ! 1即任何不同于 drawio 默认值 1 的值包括0.5则向每个顶点样式和每个连线样式附加;strokeWidthn。连线样式构建为edges.style;edges.arrow逐条连线的路由键exitX/entryX/...作为字面量添加在下方。连线 15 练习使用edges.dashedFor如果edges.dashedFor非空则将其第一个条目用作连线的value标签并且向连线样式附加;dashed1。如果edges.dashedFor为空[]则使用标签cross-call且不要附加;dashed1——预设没有虚线约定因此样本不得伪造一个。占位符展开填充 XML 时应用{{VSTYLE:role}}展开为上述顶点样式公式其中R role。将结果写为字面字符串不要进行 URL 编码。{{ESTYLE}}展开为上述连线样式公式。{{EDGE15_LABEL}}和{{EDGE15_DASH}}遵循上述连线 15 规则。?xml version1.0 encodingUTF-8?mxfilehostdrawioversion26.0.0diagramnamePreset SamplemxGraphModelrootmxCellid0/mxCellid1parent0/!-- Row 1: gateway --mxCellid2valueGatewaystyle{{VSTYLE:gateway}}vertex1parent1mxGeometryx340y40width160height60asgeometry//mxCell!-- Row 2: security | service | queue --mxCellid3valueAuthstyle{{VSTYLE:security}}vertex1parent1mxGeometryx80y180width160height60asgeometry//mxCellmxCellid4valueServicestyle{{VSTYLE:service}}vertex1parent1mxGeometryx340y180width160height60asgeometry//mxCellmxCellid5valueQueuestyle{{VSTYLE:queue}}vertex1parent1mxGeometryx600y180width160height60asgeometry//mxCell!-- Row 3: database | external | error --mxCellid6valueDatabasestyle{{VSTYLE:database}}vertex1parent1mxGeometryx80y340width160height70asgeometry//mxCellmxCellid7valueExternal APIstyle{{VSTYLE:external}}vertex1parent1mxGeometryx340y340width160height60asgeometry//mxCellmxCellid8valueError Sinkstyle{{VSTYLE:error}}vertex1parent1mxGeometryx600y340width160height60asgeometry//mxCell!-- Edges --mxCellid10valuestyle{{ESTYLE}};exitX0.25;exitY1;exitDx0;exitDy0;entryX0.5;entryY0;entryDx0;entryDy0edge1parent1source2target3mxGeometryrelative1asgeometry//mxCellmxCellid11valuestyle{{ESTYLE}};exitX0.5;exitY1;exitDx0;exitDy0;entryX0.5;entryY0;entryDx0;entryDy0edge1parent1source2target4mxGeometryrelative1asgeometry//mxCellmxCellid12valuestyle{{ESTYLE}};exitX0.75;exitY1;exitDx0;exitDy0;entryX0.5;entryY0;entryDx0;entryDy0edge1parent1source2target5mxGeometryrelative1asgeometry//mxCellmxCellid13valuestyle{{ESTYLE}};exitX0.5;exitY1;exitDx0;exitDy0;entryX0.5;entryY0;entryDx0;entryDy0edge1parent1source4target7mxGeometryrelative1asgeometry//mxCellmxCellid14valuestyle{{ESTYLE}};exitX0;exitY0.5;exitDx0;exitDy0;entryX1;entryY0.5;entryDx0;entryDy0edge1parent1source4target6mxGeometryrelative1asgeometry//mxCellmxCellid15value{{EDGE15_LABEL}}style{{ESTYLE}}{{EDGE15_DASH}};exitX1;exitY0.5;exitDx0;exitDy0;entryX0;entryY0.5;entryDx0;entryDy0edge1parent1source4target8mxGeometryrelative1asgeometry//mxCell/root/mxGraphModel/diagram/mxfile渲染样本将填充好的 XML 写入/tmp/drawio-preset-name.drawio。运行主工作流程使用的相同命令draw.io -x -f png -e -s 2 -o preset-name-sample.png tmp.drawio。将 PNG 保存为./preset-name-sample.png用户的当前工作目录。向用户展示预设摘要表 PNG 路径 来源/置信度信息行。审批循环“save” / “looks good” → 将候选写入~/.drawio-skill/styles/name.json删除临时文件和样本 PNG。“change to ” → 编辑内存中的候选重新渲染重新询问。“cancel” → 删除临时文件和样本 PNG不保存。如果样本渲染失败draw.io CLI 缺失 / 导出错误仍显示摘要表和来源信息行。注明“无法渲染样本 PNGCLI 不可用。您确认后仍会保存。”不阻塞流程。XML 提取路径输入.drawio文件路径。输出候选预设 JSON。确定性过程无需 LLM 推理。步骤解析文件。读取 XML收集所有带有style属性的mxCell分为顶点vertex1和连线edge1。对每个style字符串按;进行分词。每个元素为keyvalue或裸关键字例如rhombus、ellipse、rounded1。提取调色板。对每个顶点取其(fillColor, strokeColor)对跳过两者都无的顶点。统计频次。保留前 ≤7 对。提取形状词汇 角色映射。对每个顶点按优先级确定形状类别cylinder3 ellipse rhombus swimlane rounded1 rounded0。然后从顶点的形状类别及其value标签属性推断语义角色。按顺序评估以下规则首个匹配获胜。cylinder3→databaserhombus→decisionswimlane→container存在dashed1灰色系填充R、G、B 三个通道均在彼此的 ±16 范围内即近消色 →external标签匹配/queue|bus|kafka|rabbit/i→queue标签匹配/gateway|api|lb|load/i→gateway标签匹配/auth|login|jwt|oauth/i→security标签匹配/error|fail|alert/i→error其他所有情况 →service对于每个具有规范调色板槽位的角色——service、database、queue、gateway、error、external、security——最频繁的(role, color-pair)映射获胜。该对进入角色的规范调色板槽位service→primary, database→success, queue→warning, gateway→accent, error→danger, external→neutral, security→secondary。将roles[role]设置为该槽位名称。判断和容器形状不会获得roles[...]条目——它们仅记录在shapes.decision和shapes.container中。在判断/容器顶点上观察到的任何颜色对仍参与调色板它们可以填充剩余槽位但不与语义角色关联。剩余颜色对未被任何角色-槽位映射认领的按频次降序填充其余空调色板槽位。将每个角色使用的形状类字符串记录在shapes[role]中。六个命名形状键为service、database、queue、decision、external、container——gateway、error和security角色继承shapes.service不获得自己的shapes[...]条目。示例shapes.database shapecylinder3。提取字体。计算跨顶点的众数fontFamily和fontSize将其输出为font.fontFamily和font.fontSize。同时将每个顶点的fontStyle记录为工作变量非输出字段——模式中没有顶层font.fontStyle。如果可区分的顶点子集使用了较大的fontSize并结合fontStyle1粗体则将该子集视为标题将font.titleFontSize设为其众数大小并设font.titleBold: true。否则省略这两个标题字段。提取连线默认值。取众数连线样式字符串但在计数前剥离这些逐条连线的坐标键entryX、entryY、exitX、exitY、entryDx、entryDy、exitDx、exitDy。从endArrow/endFill单独记录箭头样式到edges.arrow。如果任何连线有dashed1收集其value标签属性。如果 ≥2 个共享一个共同标记例如所有都标记为 “async” 或 “optional”则将该标记添加到edges.dashedFor。提取附加属性。在任何顶点或连线上看到sketch1→extras.sketch true。跨顶点的众数strokeWidth→extras.globalStrokeWidth默认1。设置来源信息。{source:{type:xml,path:input absolute path,extracted_at:YYYY-MM-DD},confidence:high}XML 边界情况情况行为源文件少于 3 个不同的颜色对将未填充的槽位保留为null。将confidence降级为medium。摘要中警告用户。源文件超过 7 个颜色对按频次保留前 7 个。摘要中警告某些颜色被丢弃。非标准shape关键字例如shapemxgraph.aws4.*这些不匹配步骤 4 的优先级阶梯因此该顶点在形状类别判定上回退到rounded0。图标丢失颜色、标签和连线样式仍被捕获。角色推断仍通过标签正则表达式规则进行。摘要注明“检测到非标准形状库——预设中未保留图标颜色和标签已捕获。”非英文标签步骤 4 中的英文关键字正则表达式大多无法匹配大多数顶点回退到service。调色板/形状/字体/连线仍正确捕获它们不依赖于标签文本。confidence保持high。摘要注明“角色标签非英文——从形状类别推断出service/database/decision/container/external其他角色未映射。”文件中完全没有mxCell vertex1停止。拒绝保存。消息“没有可学习的内容——源文件没有形状。”图像提取路径输入PNG/JPG或任何视觉可读的图像格式的路径。输出候选预设 JSON。基于推理confidence: medium为上限。前置条件代理的视觉能力必须可用与主工作流程自检使用的机制相同。如果视觉不可用停止并告诉用户“基于图像的学习需要支持视觉识别的模型Claude Sonnet 或 Opus。请在此类模型上重新运行或提供.drawio源文件。”步骤读取图像。使用代理的视觉输入——与主工作流程步骤 5 在自检期间读取导出 PNG 时使用的相同路径。通过视觉检查提取调色板。识别形状主体上的不同填充颜色区域。对于每个不同的填充色fillColor— 将每个 RGB 通道量化到最近的 16 的倍数。如果得到的 HSL 亮度低于 0.75将其提升到 0.85保持色相和饱和度设 L0.85HSL→RGB 往返转换。输出为#RRGGBB。Drawio 标准粉彩色的亮度范围为 L≈0.85–0.96低于 0.75 会被视为对于填充色来说太暗此步骤将其提升回该范围。strokeColor— 读取匹配的边框色。如果无法读取则通过将填充色变暗约 25% 来推导匹配 HSL将 L 降低 0.25。使用以下决策顺序将每个(fillColor, strokeColor)对映射到命名槽位先检查灰色。如果填充色的 R、G、B 通道均在彼此的 ±16 范围内与 XML 路径的灰色系规则相同定义或者 HSL 饱和度 0.20则分类为neutral。此检查优先于色相角度。否则按色相带。使用以下明确的 HSL 色相范围180°–260° →primary蓝色80°–170° →success绿色45°–65° →warning黄色20°–44° →accent橙色0°–19° 或 320°–360° →danger红色/粉色260°–320° →secondary紫色未匹配到任何色相带65°–80° 或 170°–180° 的间隙区域→ 按角度距离溢出到最近的色相带。冲突规则。如果 ≥2 个不同的填充色落入同一槽位按图像中覆盖的总像素面积排序降序。最大的保留规范槽位。剩余的填充色按色相带角度距离溢出到最近的空槽位——先到两侧的相邻色相带再到更远的。如果所有槽位都已填满则丢弃多余部分并在摘要中警告。提取形状词汇。按轮廓对每个可见形状进行分类圆角矩形 →rounded1尖角矩形 →rounded0圆形/椭圆形 →ellipse菱形 →rhombus圆柱体顶部/底部为曲线的矩形→shapecylinder3带标题的容器标题栏 内部嵌套子元素→swimlane;startSize30虚线边框矩形 →rounded1;dashed1角色分配使用与 XML 路径步骤 4 相同的标签文本 形状规则。可见标签通过视觉识别读取。提取字体。尽力而为。可区分的类别明确衬线体 →fontFamily: Georgia明确等宽体 →fontFamily: Courier New其他情况 →fontFamily: Helvetica按相对外观确定大小小 →fontSize: 11中 →fontSize: 12大 →fontSize: 14如果标题/容器头明显更大或更粗 → 相应地设置titleFontSize和titleBold: true。提取连线默认值。直角正交箭头 →edges.style edgeStyleorthogonalEdgeStyle;rounded1;orthogonalLoop1;jettySizeauto;html1。曲线箭头 → 在edges.style中附加;curved1。实心三角箭头 →edges.arrow endArrowclassic;endFill1。开放 V 形箭头 →edges.arrow endArrowopen;endFill0。任何在 “optional”、“async”、“fallback”、“secondary” 等标签附近的虚线箭头 → 将这些标签标记添加到edges.dashedFor。提取附加属性。明显的手绘/粗糙/草图外观波浪线条、不均匀填充→extras.sketch true。粗线条明显大于 1.5 倍正常粗细→extras.globalStrokeWidth 2。否则默认extras { sketch: false, globalStrokeWidth: 1 }。设置来源信息和置信度。{source:{type:image,path:input absolute path,extracted_at:YYYY-MM-DD},confidence:medium}调整可识别的形状少于 3 个 →confidence: low。图像路径默认保持medium。达到high的唯一途径是通过严格可验证的信号源图像是从 drawio 本身导出的可识别的 drawio 默认边框、网格或可见的 drawio 水印并且所有七个调色板槽位都已填充并且所有七个角色都有标签。这保持了基于推理图像和基于解析XML来源之间的语义差距。图像边界情况情况行为视觉识别不可用按上述描述停止——不要回退到猜测。图像中可识别的形状少于 3 个继续标记confidence: low摘要明确警告用户该预设是粗略近似。图像没有可见标签角色分配仅基于形状类别圆柱体 →database、菱形 →decision、泳道 →container、灰色填充虚线边框矩形 →external、其他所有 →service。调色板/字体/连线仍被捕获。摘要注明“无可读标签——未推断出超出形状类别的语义角色。”两个调色板槽位将落入同一色相系将较频繁的一个保留在其规范槽位中将另一个溢出到相邻空槽位步骤 2 中的规则。图像超过 7 种不同的填充色按步骤 2 的冲突规则保留覆盖面积最大的 7 种填充色。摘要警告某些颜色被丢弃。