AutoFigure 深度解析：SVG 与 mxGraph XML 双格式如何无缝衔接 draw.io

AutoFigure 深度解析SVG 与 mxGraph XML 双格式如何无缝衔接 draw.io【免费下载链接】AutoFigure项目地址: https://gitcode.com/gh_mirrors/au/AutoFigureAutoFigure是一个用大语言模型自动生成科研插图的开源系统支持两种输出格式SVG 矢量图与mxGraph XMLdraw.io 原生格式。本文将深入解析这两条输出管线的工作机制、渲染方式与自动修复策略帮助你为论文插图、draw.io 可编辑图表等不同场景做出正确的格式选择。一图胜千言AutoFigure 的双格式能力AutoFigure 的核心思路是Review-Refine循环生成 Agent 先产出图示代码评审 Agent 打分并给出改进意见两者交替迭代直到质量达标。不同之处在于输出的载体——SVG 还是 mxGraph XML。下面这张参考图展示了一个典型的多 Agent 协作流程图正是 AutoFigure 擅长生成的复杂图示类型在格式入口上两条管线共享同一套配置。全局配置中有一个关键字段OUTPUT_FORMAT取值svg或mxgraphxml见 generator.py。SDK 用户则只需在调用generate()时传入output_format参数格式校验与归一化逻辑位于 agent.py。SVG 管线cairosvg 本地渲染路径选择 SVG 时整条管线走的是纯本地渲染路线无需依赖任何在线服务代码生成LLM 按提示词模板输出svg.../svg代码块系统从响应中精准截取起始标签到结束标签之间的内容见 generator.py语法校验检查标签闭合、属性引号、命名空间等基本结构校验函数为 validate_svg_syntax预处理preprocess_svg_for_cairo会移除 cairosvg 不兼容的多余命名空间如xmlns:xlink并补全标准 SVG 命名空间声明本地转 PNG调用cairosvg.svg2png按配置的画布尺寸默认 1333×750渲染出预览图见 generator.py。这个预览 PNG 有两个用途一是给评审 Agent 看图打分二是直接作为最终可交付的图片输出。SVG 管线最大的优点是零外部依赖、渲染结果确定适合需要直接出图的自动化流程。mxGraph XML 管线为 draw.io 而生的可编辑输出mxGraph XML 是 draw.io 的原生文件格式选中该格式意味着你拿到的是可以拖拽编辑的活图表而不是一张死图。严格的 mxfile 结构约束AutoFigure 为每种内容类型paper / survey / blog / textbook都配备了专门的 mxGraph XML 提示词模板见 generator.py。模板向 LLM 明确了不可违反的结构契约根节点必须是mxfile内部依次为diagram、mxGraphModel、root每个图形/连线都是一个mxCell除id0外必须带parent属性所有mxCell都必须是root的直接子节点颜色仅限黑白灰坐标限定在画布范围内。这套规则的完整背景可以参考前端内置的 draw.io 模式指南 xml_guide.md它详细解释了 mxfile、mxGraphModel、mxCell 各层级元素的属性含义。Playwright 内嵌 draw.io 的渲染协议mxGraph XML 无法用 cairosvg 渲染AutoFigure 采用了一个巧妙的方案启动一个无头 Chromium 浏览器在其中加载 draw.io 官方嵌入页embed.diagrams.net通过 postMessage 协议完成渲染见 generator.py步骤动作说明1宿主页面加载 draw.io 嵌入页等待init事件确认就绪2发送load动作将 mxGraph XML 注入编辑器3等待load事件确认图表加载完成4发送export动作指定 PNG 格式与 2 倍缩放5接收export事件获取 base64 编码的 PNG 数据这个协议与主流 draw.io 前端组件的通信方式完全一致保证了渲染效果与 draw.io 所见完全相同——你预览到的 PNG就是用户在 draw.io 里打开.drawio文件看到的样子。语法校验与 LLM 自动修复防线LLM 输出的 XML 难免出现标签未闭合、属性缺少引号等语法错误。AutoFigure 为两种格式各建了一道校验 修复防线SVG 侧repair_svg将错误信息连同坏代码一起交回 LLM 重写修复后立刻用 cairosvg 试渲染验证最多重试 2 次见 generator.pymxGraph XML 侧validate_mxgraphxml_syntax会做更深入的结构性检查——mxfile/diagram/mxGraphModel/root层级是否齐全、id0与id1基础单元格是否存在、每个mxCell是否都有parent属性见 generator.pyrepair_mxgraphxml则负责修复。修复成功才会进入迭代流程若初始代码彻底损坏系统会将其保存为broken_initial文件供排查而不是悄悄丢弃。迭代循环中两种格式的差异在生成 → 评审 → 改进的迭代循环中主流程见 figure_generator_pipeline两种格式的落盘与评审行为略有不同环节SVGmxGraph XML迭代文件扩展名iteration_N.svgiteration_N.drawioPNG 预览渲染cairosvg 本地转换Playwright draw.io 嵌入页评审时的附加约束无黑白灰配色、占位符弹性尺寸检查最终产出figure_final.svgfigure_final.drawio评审 Agent 同时接收PNG 图 源码文本进行双模态评估按美学设计、内容保真度、占位符使用三个维度打分结果记录在每轮次的iteration_N_evaluation.json中方便你追溯质量变化轨迹。值得强调的是评审环节完全基于 PNG因此两种格式享受同等的质量把关标准——格式差异只体现在渲染路径不影响评分体系。Web 端的策略强制 mxGraph XML理解了底层机制你就能明白 AutoFigure Web 界面Next.js 前端 Flask 后端为什么在启动生成时会硬编码OUTPUT_FORMAT mxgraphxml见 autofigure_routes.py前端画布页使用react-drawio组件直接嵌入 draw.io 编辑器见 canvas/page.tsxAI 生成的 XML 会被实时加载进画布用户在画布上可以继续手动微调点击保存时系统用extractDiagramXML提取干净 XML见 utils.ts再作为下一轮迭代的输入整个AI 生成 → 人工编辑 → AI 再优化的闭环只有在可编辑格式下才成立。而 SDK 用户则可以自由二选一直接出 SVG 图或出.drawio文件到 draw.io 里精修。两种格式怎么选选型建议清单使用场景推荐格式理由论文投稿、PPT 插图、博客配图svg直接得到出版级图片无额外依赖需要后续手动编辑、团队协作改图mxgraphxml产物是 draw.io 原生文件可拖拽、可改文字自动化流水线批量出图svgcairosvg 本地渲染稳定、速度可控Web 界面交互式创作mxgraphxml前端已锁定该格式支持人机混合编辑使用 SDK 切换格式只需一行参数output_formatmxgraphxml或svg两条管线共享同一套配置与迭代逻辑实现真正的一键切换。核心模块文件索引模块相对路径职责生成管线主体autofigure/generator.py提示词模板、校验修复、渲染、迭代循环Agent 入口autofigure/agent.pygenerate()/generate_from_paper()及结果对象SDK 配置autofigure/config.pyLLM 提供商、迭代参数、输出目录等Web 后端路由backend/autofigure_routes.py会话管理与 mxGraph 专属生成流程draw.io 画布页frontend/app/autofigure/canvas/page.tsx内嵌 draw.io 编辑器的交互式创作draw.io XML 指南frontend/app/api/chat/xml_guide.mdmxfile 结构权威参考写在最后AutoFigure 用一条管线同时驾驭了 SVG 与 mxGraph XML 两种格式SVG 走 cairosvg 本地渲染快速出图mxGraph XML 走 Playwright 内嵌 draw.io产出可编辑的活图表。两条管线共享语法修复防线与双模态评审体系差异只落在渲染环节——这正是它能无缝衔接 draw.io又保持轻量本地依赖的原因。如果你要的是最终图片选 SVG如果你要的是能在 draw.io 里继续打磨的矢量工程文件选 mxGraph XML。希望这篇深度解析能帮你少走弯路快速产出出版级科研插图。【免费下载链接】AutoFigure项目地址: https://gitcode.com/gh_mirrors/au/AutoFigure创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考