article-visuals

name	article-visuals
description	Use to make an article 图文并茂 — generate publish-ready figures (data charts, flow/structure diagrams) and a cover, SEO/GEO-friendly. 配图/图表/插图/封面/流程图/数据图/visuals/figures/diagrams/charts
version	1.0.0
license	Apache-2.0
homepage	https://github.com/weitzu-com/ai-article-factory
when_to_use	Use at the figures stage (P6) of article production, or whenever a draft needs charts/diagrams/a cover. Renders Mermaid + matplotlib to PNG and prepares an AI-cover prompt; enforces image SEO/GEO rules.
argument-hint	<article-dir>
metadata	{"author":"weitzu-com","tags":["visuals","figures","charts","diagrams","mermaid","matplotlib","image-seo","cover"]}

article-visuals (P6 — 图文并茂)

Make figures that serve three readers at once: humans (understanding), search engines (image SEO / rich results), and AI engines (multimodal citation). ≥3 figures per article: 1 cover + ≥2 content figures. This skill is self-contained — it uses the bundled scripts, no external pack needed.

Type decision tree (pick type → tool)

To express	Type	Tool	Source file
flow / structure / relationship	diagram	Mermaid	assets/src/*.mmd
data / comparison / trend	chart	matplotlib (import figlib)	assets/src/*.py
concept / cover	illustration	AI image (prompt → human fills)	assets/src/cover-prompt.md → assets/img/cover.png
real UI / object	screenshot/photo	manual	—
tabular comparison	Markdown table (preferred — AI-extractable)	in prose	—

Rule: if data fits a Markdown table, use a table; only draw when relationships/trends need it.

Workflow

1. From the outline's figure intent, write figure sources into assets/src/ and log assets/图清单.md (caption + alt + placement).
2. Render:

   bash <repo>/scripts/render-figures.sh <article-dir>      # mermaid + matplotlib → assets/img/
   

   figlib.py provides the brand palette (scripts/palette.json) + registered CJK fonts (Chinese won't box) + save() / bar_compare() helpers. If mmdc is missing, .mmd is skipped gracefully.
3. Embed with ![keyworded-alt](assets/img/x.png) + a caption carrying the source [C#].
4. Cover: a placeholder is used so it never blocks; generate the real one from cover-prompt.md and drop it at assets/img/cover.png.