Input a topic and a piece of content, output an animated explainer diagram. Users don't need to know SVG, and don't need to choose the diagram type, style, or aspect ratio.
Workflow (follow it, don't skip steps)
1. Decide whether it's suitable
Suitable: the content containssequence, causality, flow, quantity changes, proportions, comparisons, structural relationships. Not suitable (tell the user directly to switch to a static diagram or table):
- Large architecture diagrams with more than 9 main nodes (suggest splitting into two)
- Large data tables that require reading precise values (more than 8 rows × 6 columns)
- Diagrams that require click interaction
2. Identify "what is moving" in one sentence
Write down:这张图里，<什么东西> 从 <哪> 到 <哪>，读者看完应该明白 <一句结论>.
Read the two selection tables in references/types.md , and choose the diagram type based on "what is moving":
- Things are moving (steps, messages, data, requests) → 13 process types
- Numbers and relationships are growing (proportions, schedules, flows, scores, intersections, key numbers) → 18 data and structure types
- States within states, need to point out violation paths, layer-by-layer stacking, comparison of two points in time, three dimensions → 4 hierarchy and 3D types
If unsure, choose
flow。
3. Choose style and aspect ratio
Style: use it if the user specified one; if not, "style":"auto". You can also pick by subject matter (see references/styles.md):
Technology default swiss, architecture diagrams candy, introductory science sketch, protocol structure blueprint，Agent/CLI terminal, developer products linear, marketing riso, opinion/industry editorial, battle reports poster，SOP field, communication neon, finance porcelain, reviews brutal, classroom chalk, Chinese style inkwash, lifestyle kraft, hand-drawn illustrated-guide feel pencil, money and bills receipt。
Aspect ratio: for WeChat official account article illustrations always use 3:4(default, no need to write it). For other scenarios, follow what the user says: vertical video, Xiaohongshu full screen 9:16; WeChat Moments square image 1:1; PPT, blog 4:3; Bilibili, horizontal video 16:9。
4. Write the spec (JSON)
Write according to the fields in references/types.md . Key points:
- Title in one sentence, preferably within 18 characters, and it must clearly state what this diagram is about
- Node titles 2~8 characters, subtitles should bespecific examples or numbers("about 500 characters each" is better than "text chunking")
- Use real-world numbers and examples, don't use A/B/C placeholders; example data should be noted in
footorsubtitlenoted in - The last node / conclusion should use
role:"accent"orhl:true, so the final state has focus - Lifestyle and small-shop topics can add
"scene":["cup","bell","walker"]such footer small objects; long technical articles generally don't add them
Save to a working directory other than demos/specs/ , for example in the same directory as the article xxx.json。
5. Render
python3 scripts/render.py --spec xxx.json --out xxx.svg --png xxx.png
python3 scripts/render.py --spec xxx.json --ratio 16:9 --out xxx-16x9.svg # 换画幅
Insert into the Markdown article (after the first paragraph under the specified heading):
python3 scripts/render.py --spec xxx.json --insert-to 文章.md --heading "### RAG 怎么跑"
6. Check (required)
python3 scripts/lint.py xxx.svg # Floor 必须全过
python3 scripts/capture.py xxx.svg --sheet sheet.png # 看 8 帧
Open the PNG and the sheet and review them: check whether text overflows, is crowded together, and whether the animation order matches the script order. If there are problems, revise the spec (shorten text, reduce nodes, adjust rank/row) and re-render.
7. Export as needed
python3 scripts/capture.py xxx.svg --mp4 xxx.mp4 # 宽 1080，高按画幅；发视频号 / 小红书 / B 站
python3 scripts/capture.py xxx.svg --gif xxx.gif # 发群、发微博
When none of the 35 diagram types fit
Read references/custom.md, write it by hand with the same set of brushes, and it still must pass lint and frame-capture checks.
Hard rules
- The canvas must use only one of 5 aspect ratios: 750×1000 (3:4), 750×1334 (9:16), 900×900 (1:1), 1200×900 (4:3), 1280×720 (16:9)
- SVG on a single line, no id / defs / style / script / CSS animation
- The static final state must be fully readable
- One image uses at most 2 accent colors and 2~3 motions
- Do not add any signature box, bottom citation box, or decorations such as "老章工程手记"
- Motions must be meaningful (see
references/motion.md）
File
scripts/render.py 渲染入口（--ratio 换画幅，--list 列出图型/风格/画幅）
scripts/lint.py 公众号兼容 + 反模板检查
scripts/capture.py 截帧 / 联系表 / MP4 / GIF
scripts/gallery.py 重出 demos/ 与 docs/ 图库（维护用）
scripts/dongxi/ 引擎：styles.py 风格，core.py 画笔与画幅，layouts.py 过程类，charts.py 数据与结构类，extra.py 层次与立体类，props.py 页脚小物件
references/ 选型、风格、动作、自定义、设计笔记
demos/specs/ 40 个示例 spec，可直接照抄改