流程图 · 架构图

这套规则来自「关注清单通信」的流程图和架构图（用户打了 10 分的版本）。
范例：design/Workflow.dc.html（流程图）、design/Architecture.dc.html（架构图）、
design/WorkflowDetail.dc.html（图解长页），导出版在 docs/design/。动手前先打开范例对照。

用户要什么（打分时扣分的点）

• 图示为主，不要大段文字。全是文字只给 4 分。每张卡片：粗体标题一行 + 最多 2–3 行短说明。
• 重点要突出：最关键的一条路径（例如「要紧消息当日通知」）用颜色单独标出。
• 时间要分得清：每个步骤什么时候跑、隔多久、最快多久能看到结果，单独画一条「一天的时间轴」。
• 哪些要钱、哪些免费：每个环境 / 泳道都贴费用标签。
• 在哪个环境运行：临时服务器、长期存储、云端容器、外部服务，分开画框。
• 细节放附录：限制、判断标准（「什么算新消息」「什么算要紧」）这类，放在图下方的附录卡片里；
  和流程无关的说明（例如存储）放另一页，不要塞进流程图。
• 判断节点要能回答「怎么判断的」：菱形旁边或附录里写清条件。
• 全部用中文，术语保留原名（GitHub Actions、Discord）。
• 精确到算法：用到的模型、算法、API 都画进图里，写正确的名字和数字（例：rembg birefnet-general-lite 224MB・1 枚ずつ、
  SFace cos ≥ 0.363、×4 並列、Reddit 2 秒に 1 回）。没画进去 = 图的逻辑不对。
• 详细流程也是图：点开一个任务看到的流程要画成泳道图（判断用菱形、分支用箭头、并行用横排的箱子），不要写成从上到下的文字列表。
  本仓库的实现：scripts/processes.py 的 COMPONENTS（部件）・flow_diagram()（流程图）・architecture()（架构图）。

两张图分别画什么

① 流程图（从左往右读）

1. 标题 + 一行图例（线的颜色各代表什么）。
2. 泳道：一行一个执行者（例：GitHub Actions · 每 2 小时 / 仓库里的文件 / Claude AI 编辑 · 每天 2 次 / Discord 通知）。
   泳道名用等宽大写小字，旁边贴费用标签。
3. 卡片按步骤编号 ①②③；判断用菱形；线上写「是 / 否 → 本次结束」。
4. 时间轴：一天 0–24 点，每条轨道对应一个泳道，用一个具体例子（「14:17 那次发现了要紧消息」）串起来，标出延迟。
5. 附录：判断标准卡片、限制卡片（官方规则 vs 我们的用量 + 「安全」标签）。

② 架构图（AWS 架构图那种）

• 虚线框 = 运行环境（临时：每次新开、用完即销毁），实线框 = 长期保存的地方，卡片 = 任务或文件。
• 外层按服务商分框（互联网来源 / GitHub / Anthropic / Discord），内层按环境分框（Actions 临时服务器、仓库、Pages、云端容器）。
• 每个框左上角写名字 + 一句括号说明 + 费用标签。
• 箭头编号（1 来源 → Actions，2 Actions ↔ 仓库 …），颜色跟流程图一致。

两张都要时，另做一个总览板，把它们上下拼在一起，设为打开时的默认视图，免得用户以为其中一张不见了。

视觉规范

用途	值
底色 / 泳道底色	#EDEBE6 / #E2DDD2、#F4F2ED
正文、主线、黑卡片	#1A1C22（黑卡片上的字 #F1EEE6）
白卡片	#FBFAF7 + 2px solid #1A1C22
次要文字	#4A4538、#6B6457
判断菱形	#C9C2B2，clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%)
AI / 免费（绿）	线 #2E7D4F，泳道 #DCE8DF，标签「免费」白字绿底
要紧 / 网页（红）	线 #B83A17，底 #F6E3DC
Discord（蓝紫）	线 #5865F2，字 #3C45A5，底 #E1E3F7
用订阅额度（黄）	标签 #D99A1E 底、黑字
字体	Noto Sans SC 500/700/900；泳道名、时间用 JetBrains Mono
字号	大标题 40px/900，分区标题 28px/900，卡片标题 16px 粗体，正文 13–15px
分区线	border-top: 3px double #1A1C22

做法

1. 先确认信息：从代码和配置里读真实的时间（cron）、环境、费用、限制，不要凭印象写。
2. 新建图时先调 Artifact 的 quickstart（intent: design），在设计画布里做，一张图一个画板。
   画板用绝对定位，宽 2000–2100px；先画环境框 / 泳道底色，再画箭头，最后画卡片和文字。
   箭头用 <svg> + marker-end 的写法，照抄范例里的箭头片段改坐标和颜色即可。
3. 改已有的图时，先 read 那个设计稿，在它的基础上改，同一个链接重新发布。
4. 自己截图检查再交：文字有没有溢出卡片、箭头有没有穿过卡片、标签有没有压线。
5. 保存进仓库：

   # 设计稿源文件
   cp <画板>.dc.html canvas.json design/
   # 导出成能直接打开的网页 + PNG
   python .claude/skills/diagram/export.py design/Workflow.dc.html docs/design/flow.html "关注清单通信 · 流程图"
   node .claude/skills/diagram/shot.mjs "$PWD/docs/design/flow.html" docs/design/flow.png 2200

   README 的图表表格里加上网页版和 PNG 的链接，提交并推送。把 PNG 用 SendUserFile 发给用户。
6. 用中文回复，说清改了哪里、在哪里看。