SuperAPI AI Directory
Partner中文AI newsFavorites
Skillssvg-flowchart

svg-flowchart

Design & creation

View repository

Updated 10-21 16:43

About this skill

SVG Flowchart Drawing (Academic Style)

Applicable Scenarios (Triggers)

  • The user mentions "flowchart / 流程图 / draw a flowchart / use SVG / generate svg code"
  • Needs a flowchart that can be inserted directly into a paper/report (steady style, restrained lines, printable)

Target Output

  • By default output SVG code, and save as .svg file(referenceable within the project)
  • The SVG should satisfy:viewBox complete, scalable, not dependent on external font resources, Chinese readable, neatly aligned

Multiple Ways to Convert to SVG

This skill supports converting from multiple inputsintostandard SVG files, convenient for paper illustrations and version management.

Input Form Conversion Method Output
Structured text(node list + edge list) The Agent extracts the DAG according to the specification, computes the layout, writes the SVG code and saves it {{THESIS_DIR}}/figures/flows/<名称>.svg(default 论文章节/figures/flows/）
Natural language description("first A then B, if C then D…") The Agent extracts nodes and edges, generates the SVG and saves it Same as above
JSON spec file Use render_flowchart.py --spec <spec.json> --out <out.svg> the .svg
Existing SVG Use validate_flowchart_style.py to perform style specification checks and provide correction suggestions Do not change the format, only validate

Recommended: For complex/multi-column flowcharts, prefer JSON spec + render_flowchart.py, which ensures consistent port offsets, group boxes, and Chinese entity encoding.

Export to PDF (for use with LaTeX)

XeLaTeX's \includegraphics has limited support for SVG BoundingBox; it is recommended toexport the flowchart to PDF before inserting it into the paper, to avoid compilation errors.

Method 1: Use the script provided by this skill (try cairosvg first, otherwise prompt to use Inkscape)

The script path is based on {{SKILLS_ROOT}}/svg-flowchart/scripts/ in the repository (this repository defaults to .opencode/skills/svg-flowchart/scripts/). For directory placeholders, see the repository root README.md。

python .opencode/skills/svg-flowchart/scripts/svg2pdf.py <input.svg> [output.pdf]
# 未指定 output 时，生成与 input 同名的 .pdf
python .opencode/skills/svg-flowchart/scripts/svg2pdf.py 论文章节/figures/flows/示例流程.svg

Method 2: Inkscape command line(if installed and added to PATH)

inkscape --export-type=pdf "论文章节/figures/flows/流程图.svg" -o "论文章节/figures/flows/流程图.pdf"

Method 3: Open the SVG in Inkscape / a browser, save as PDF, and save it under figures/flows/ with the same name as the SVG.

After exporting the PDF, use \includegraphics[width=...]{figures/flows/流程图.pdf} in LaTeX.

Recommended Workflow (More Beautiful, More Stable)

When the flowchart containsgroup boxes/multi-column structures/multiple converging arrows, prefer script-based automatic layout (which avoids problems such as "overlapping arrows, misalignment, garbled Chinese"):

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

The script will automatically:

  • Lay out by grouped columns (suitable for "three-layer data flow/three-module block diagrams")
  • Port offsets (multiple incoming edges to the same node do not overlap at the same point)
  • Convert all Chinese to HTML numeric entities, reducing encoding pitfalls on Windows/viewers

Style self-check (optional): After generating or modifying an SVG, you can use the style detection script to check whether it conforms to the skill specification (color scheme, rounded line corners, viewBox, prohibition of gradients/shadows, etc.):

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>

Non-conforming items detected will be listed and a non-zero exit code will be returned; if all pass, it outputs OK。

First collect input (at least 6 items)

Have the user provide the information in any of the following ways; fill in missing items yourself with reasonable defaults, and state the default assumptions in 1 sentence before output.

  1. Title(optional)
  2. Node list: each node id、label、type
  3. Connection list：from -> to, for decision branches write yes/no(or "yes/no")
  4. Direction：vertical(default) or horizontal
  5. Font size: default 14 (body) / 12 (auxiliary)
  6. Save path: default {{THESIS_DIR}}/figures/flows/<slug>.svg(see repository root README.md）

Two input formats are acceptable:

A. Structured (preferred)

标题：……
方向：vertical
节点：
- start: 开始 (start)
- a: 数据准备 (process)
- b: 生成速度场 (process)
- c: 是否可达？ (decision)
- d: 输出路径与时间代价矩阵 (process)
- end: 结束 (end)
连线：
- start -> a
- a -> b
- b -> c
- c(是) -> d
- c(否) -> end

B. Natural language

Just describe the steps, decision points, and inputs/outputs in order; you are responsible for extracting them into nodes and connections.

Drawing specification (default academic style)

Canvas and layout

  • Default vertical layout: nodes are center-aligned with uniform spacing (recommended:gapY=40~48, to avoid connections being too close to nodes)
  • Size strategy: first estimate the height based on the number of nodes, then set viewBox="0 0 W H"; at the same time width="100%", ensuring scalability; leave margins on all four sides pad≥28
  • Single-column flow is preferred; branches split left and right only at decision nodes (maintaining symmetry)

Multi-column grouped layout (recommended for paper block diagrams)

  • Column spacing：col_gap=70~90, ensuring whitespace between group boxes and that connections are not crowded
  • Group box: after enclosing all its nodes, add 20~28px padding on all sides; place the title in the upper-left corner inside the group box (more orderly than "hanging outside the box")
  • Connection strategy: draw connections first, then nodes, to avoid lines covering text; prefer orthogonal elbow lines, and apply port offsets for multiple incoming/outgoing edges

Shape semantics (type → shape)

  • start/end: rounded pill
  • process: rounded rect
  • decision: diamond
  • data(optional): parallelogram

Lines and arrows

  • Uniform line width stroke-width=1.5~1.6; colors can use gray tones (#64748B、#94A3B8) orsoft colored lines(such as light blue #7DD3FC, light green #6EE7B7, light purple #C4B5FD), as long as they coordinate with the node color scheme
  • Arrows use marker-end, fill in the same color as the line, with restrained size (markerWidth/Height 6~7)
  • Rounded lines：stroke-linecap="round"、stroke-linejoin="round", avoiding harsh right angles
  • Branch lines should preferably use orthogonal elbow lines, and port offsets should be applied when necessary to avoid multiple lines overlapping

Color scheme and fonts (fresh academic, light colors allowed)

  • No need to be limited to gray: nodes and groups can usefresh, elegant light colors, low saturation and relatively high brightness are sufficient, while maintaining an overall academic feel
  • Recommended light color palette(for fill, use a stroke 1–2 shades darker in the same color family):
    • Light blue:#E0F2FE / #BAE6FD, stroke #0EA5E9 / #0284C7
    • Light green:#DCFCE7 / #BBF7D0, stroke #16A34A / #15803D
    • Light purple:#EDE9FE / #DDD6FE, stroke #7C3AED / #6D28D9
    • Light apricot/orange:#FFEDD5 / #FED7AA, stroke #EA580C / #C2410C
    • Light cyan:#CFFAFE / #A5F3FC, stroke #0891B2 / #0E7490
    • Gray family (still usable): node #F1F5F9, stroke #475569; group #F8FAFC, stroke #E2E8F0
  • Core/start node: you may use a slightly darker shade in the same color family (e.g. #E0E7FF+#4F46E5) or choose one of the light colors as the accent
  • Main text：#1E293B or dark gray; secondary/edge labels:#64748B or the same color family as the connecting line
  • Font：font-family="Microsoft YaHei UI, Microsoft YaHei, PingFang SC, Noto Sans CJK SC, Arial, sans-serif"
  • Avoid high saturation and fluorescent colors; do not use too many hues in the same diagram (2–3 main colors are enough)

Aesthetic points (must follow)

  • No overlap: leave enough spacing between nodes, between text and connecting lines, and between edge labels and arrows; calculate coordinates before drawing lines
  • Port offset: when a node has multiple incoming or outgoing edges, stagger the connection points along the node edge (±10~24px) to avoid multiple lines stacking at one point
  • Neat alignment: nodes in the same column should be horizontally centered and vertically evenly spaced; group boxes should enclose all their nodes with 20~28px padding
  • Chinese encoding: when hand-writing SVG, prefer HTML numeric entities for Chinese (e.g. &#x8F93;&#x5165;), or save uniformly as UTF-8 to reduce garbled text in viewers
  • Complete viewBox: width and height should cover all shapes and edge labels, with pad≥24~28 on all four sides

Steps to generate SVG (must be in order)

  1. Extract the DAG from the input: nodes, connecting lines, branch labels (yes/no)
  2. Determine layout parameters: node width and height (default w=320, h=56), margins (pad=28), spacing
  3. Calculate coordinates：
    • Single column:x = (W-w)/2，y = pad + i*(h+gapY)
    • Branch: split into left and right columns after the diamond (xLeft/xRight), and return to the main column at the merge point
  4. Output SVG：<defs>（marker + CSS）→ Draw connecting lines first → then draw group boxes (if any) → then draw nodes(to avoid lines covering text)
  5. Save file: write to .svg
  6. Return: provide the save path + SVG code (for the user to copy)

Output template (reuse directly)

Follow this skeleton when generating SVG (you may add or remove parts); the color scheme may usegray familyorfresh light colors(see the palette in the previous section); the example below uses light blue as the main color:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 900 700">
  <defs>
    <style>
      .node { fill:#E0F2FE; stroke:#0EA5E9; stroke-width:1.5; }
      .node-core { fill:#BAE6FD; stroke:#0284C7; stroke-width:1.6; }
      .node-decision { fill:#EDE9FE; stroke:#7C3AED; stroke-width:1.5; }
      .label { fill:#1E293B; font-size:14px; font-family:Microsoft YaHei UI, Microsoft YaHei, PingFang SC, Noto Sans CJK SC, Arial, sans-serif; }
      .label-sub { fill:#64748B; font-size:12px; font-family:Microsoft YaHei UI, Microsoft YaHei, PingFang SC, Noto Sans CJK SC, Arial, sans-serif; }
      .edge { fill:none; stroke:#0EA5E9; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
      .edge-label { fill:#475569; font-size:12px; font-family:Microsoft YaHei UI, Microsoft YaHei, PingFang SC, Noto Sans CJK SC, Arial, sans-serif; }
      .group { fill:#F0F9FF; stroke:#7DD3FC; stroke-width:1.2; }
      .group-title { fill:#0369A1; font-size:13px; font-weight:600; font-family:Microsoft YaHei UI, Microsoft YaHei, PingFang SC, Noto Sans CJK SC, Arial, sans-serif; }
    </style>
    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#0EA5E9"/>
    </marker>
  </defs>
  <!-- edges first -->
  <!-- groups (optional) -->
  <!-- nodes -->
</svg>

Gray family version: node fill:#F1F5F9; stroke:#475569, connecting line stroke:#64748B, group fill:#F8FAFC; stroke:#E2E8F0。

Quality self-check (check 10 seconds before output)

  • No overlap: no covering between nodes, between text and connecting lines, or between edge labels and arrows; if necessary, increase gap or shift labels
  • Nodes are aligned and spacing is consistent, text does not overflow (wrap long labels:<tspan x="..." dy="...">）
  • Arrow directions are correct, branch lines are clear, branch labels are close to the corresponding edges; use port offsets for multiple incoming/outgoing edges
  • viewBox Cover all content with padding on all four sides (no cropping)
  • Restrained style: no gradients, no shadows, rounded line ends (stroke-linecap/join round), color schemelow saturation(gray or fresh light colors are both acceptable)

Optional: run validate_flowchart_style.py on the generated SVG to perform style specification checks and ensure nothing is missed.

Example

When sample references are needed, see examples.md。