SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场svg-flowchart

svg-flowchart

设计与创作

查看项目

更新于 10-21 16:43

技能介绍

SVG 流程图绘制（学术风格）

用途

svg-flowchart 用于生成干净、可直接用于论文或报告的流程图，输出为 SVG 代码并保存为 .svg 文件。当用户提到“流程图 / flowchart / 画流程图 / 用 SVG / 生成 svg 代码”，或需要论文风格、可打印、风格稳重的流程图时适用。

主要能力

支持从多种输入转化为标准 SVG 文件：

  • 结构化文本（节点清单 + 连线清单）：Agent 按规范抽取 DAG，计算布局，写出 SVG 代码并保存，默认输出到 {{THESIS_DIR}}/figures/flows/<名称>.svg。
  • 自然语言描述（“先 A 再 B，若 C 则 D…”）：Agent 抽取节点与连线，生成 SVG 并保存。
  • JSON spec 文件：使用 render_flowchart.py --spec <spec.json> --out <out.svg>，输出到指定路径的 .svg。
  • 已有 SVG：使用 validate_flowchart_style.py 做样式规范检查与修正建议，不改变格式，仅校验。

对于复杂或多列流程图，推荐优先使用 JSON spec + render_flowchart.py，可保证端口偏移、分组框与中文实体编码一致。

使用方式

生成 SVG 的步骤：

  1. 从输入抽取 DAG：节点、连线、分支标签（是/否）。
  2. 确定布局参数：节点宽高（默认 w=320, h=56），边距（pad=28），间距。
  3. 计算坐标：单列时 x = (W-w)/2，y = pad + i*(h+gapY)；分支时在菱形后拆成左右两列，并在汇合处回到主列。
  4. 输出 SVG：<defs>（marker + CSS）→ 先画连线 → 再画分组框（若有）→ 再画节点，避免线压字。
  5. 保存文件：按用户或默认路径写入 .svg。
  6. 回传：给出保存路径 + SVG 代码。

脚本自动排版：

python .opencode/skills/svg-flowchart/scripts/render_flowchart.py --spec <spec.json> --out <out.svg>

脚本会自动按分组列布局、做端口偏移、将中文转换为 HTML 数字实体，减少编码问题。

样式自检：

python .opencode/skills/svg-flowchart/scripts/validate_flowchart_style.py <file.svg> [<file2.svg> ...] 严格模式（禁止 filter/阴影）： python .opencode/skills/svg-flowchart/scripts/validate_flowchart_style.py --strict <file.svg>

检测到不规范项会列出并返回非零退出码；全部通过则输出 OK。

导出为 PDF（供 LaTeX 使用）：

方式一：使用脚本（优先尝试 cairosvg，否则提示用 Inkscape） python .opencode/skills/svg-flowchart/scripts/svg2pdf.py <input.svg> [output.pdf] 未指定 output 时，生成与 input 同名的 .pdf。

方式二：Inkscape 命令行 inkscape --export-type=pdf "论文章节/figures/flows/流程图.svg" -o "论文章节/figures/flows/流程图.pdf"

方式三：在 Inkscape / 浏览器中打开 SVG，另存为 PDF，保存到 figures/flows/ 下与 SVG 同名。

导出 PDF 后，在 LaTeX 中使用 \includegraphics[width=...]{figures/flows/流程图.pdf} 即可。

绘制规范（默认学术风格）

画布与布局：默认垂直布局，节点居中对齐，统一间距（推荐 gapY=40~48）；先按节点数估算高度，再设置 viewBox="0 0 W H"，同时 width="100%"，四边留白 pad≥28；单列流程优先，分支仅在 decision 节点处左右分叉并保持对称。

多列分组版式：列间距 col_gap=70~90；组框包住全部所属节点后四周再加 20~28px 内边距，标题放在组框内左上角；先画连线、再画节点，优先正交折线，多条入/出边做端口偏移。

图形语义：start/end 为圆角胶囊，process 为圆角矩形，decision 为菱形，data（可选）为平行四边形。

线条与箭头：统一线宽 stroke-width=1.5~1.6；颜色可用灰色系或柔和有色线；箭头使用 marker-end，填充与线条同色，尺寸克制（markerWidth/Height 6~7）；圆角线条 stroke-linecap="round"、stroke-linejoin="round"；分支线优先正交折线，必要时做端口偏移。

配色与字体：可采用清新淡雅的淡彩色，低饱和、明度偏高。推荐淡蓝色板 #E0F2FE / #BAE6FD，描边 #0EA5E9 / #0284C7；淡绿 #DCFCE7 / #BBF7D0，描边 #16A34A / #15803D；淡紫 #EDE9FE / #DDD6FE，描边 #7C3AED / #6D28D9；淡杏/橙 #FFEDD5 / #FED7AA，描边 #EA580C / #C2410C；淡青 #CFFAFE / #A5F3FC，描边 #0891B2 / #0E7490；灰色系节点 #F1F5F9，描边 #475569，分组 #F8FAFC，描边 #E2E8F0。主文字 #1E293B 或深灰，辅助/边标注 #64748B。字体 font-family="Microsoft YaHei UI, Microsoft YaHei, PingFang SC, Noto Sans CJK SC, Arial, sans-serif"。避免高饱和、荧光色，同一图内色相不宜过多。

美观要点：无重叠，节点与节点、文字与连线、边标注与箭头之间留足间距；端口偏移，同一节点多条入边或出边时在节点边缘错开落点（±10~24px）；对齐规整，同列节点水平居中、垂直等距；中文编码，手写 SVG 时中文优先用 HTML 数字实体或统一 UTF-8 保存；viewBox 完整，宽高覆盖全部图形与边标注，四边留 pad≥24~28。

适用场景

  • 论文或报告中需要直接插入的流程图。
  • 需要 SVG 代码输出、可缩放、可打印的流程图。
  • 复杂多列流程图、分组框结构、中文标注的学术框图。
  • 需要将流程图导出为 PDF 后插入 LaTeX 的场景。

限制

  • 关于收费、价格、平台支持范围等具体信息，资料中暂未提供。
  • 导出 PDF 时，XeLaTeX 的 \includegraphics 对 SVG 的 BoundingBox 支持有限，建议先导出为 PDF 再插入论文，以避免编译报错。
  • 脚本路径以仓库内 {{SKILLS_ROOT}}/svg-flowchart/scripts/ 为准，本仓库默认 .opencode/skills/svg-flowchart/scripts/，目录占位符见仓库根目录 README.md。
  • 需要样例参考时，见 examples.md。