taiyi-diagram-render

name	taiyi-diagram-render
description	TaiyiForge 辅助 — 将 C4/architecture Mermaid 渲染为 SVG/PNG（视觉审查 · 不改架构边界）。OpenCode / Claude / Codex / Cursor 通用。

taiyi-diagram-render

目的

以 上游 C4 或 architecture.md 的 Mermaid 为真源，导出可读 SVG（默认）或 PNG，并做排版自检——禁止重新扫描代码或改组件边界。

何时使用

时机	说明
架构流水线 第 3 步	/taiyi:diagram-pipeline 自动调用
C4/architecture 已写好，要预览图	单独 /taiyi:diagram-render
评审/对外文档需要图片	design 或 docs 维护

外部 Skill（可选增强）

若已安装 diagramming-architecture（architecture-diagram-skill），进入 仅 Mermaid 模式 + 渲染约束（见下方）；未安装则用本仓库 render-mermaid.mjs + Agent 目视检查。

git clone --depth 1 https://github.com/robertanton81/architecture-diagram-skill.git /tmp/arch-diag
mkdir -p ~/.cursor/skills/diagramming-architecture
cp -r /tmp/arch-diag/skill/* ~/.cursor/skills/diagramming-architecture/

输入（真源，分目录）

源	导出目录
c4/context.md · c4/containers.md	c4/png/*.svg
diagrams/architecture.md	diagrams/png/*.svg（勿写入 c4/png/）

变更内路径前缀：.taiyi/changes/<slug>/diagrams/；仓库级：docs/。

输出

范围	路径
变更内 C4	diagrams/c4/png/*.svg
变更内工程图	diagrams/png/*.svg（可选）
仓库级 C4	docs/c4/png/*.svg
仓库级工程图	docs/diagrams/png/*.svg（可选）

导出说明见 docs/diagrams/pipeline.md「导出图」节（不再维护 RENDER.md）。

mark-aux：scripts/taiyi-forge.sh mark-aux <slug> taiyi-diagram-render（变更内且 diagrams/c4/png/context.svg 已生成）。

执行步骤

1. 读真源：确认 Observed/Inferred 不在此步修改
2. 提取 每个 ```mermaid 代码块
3. 导出 C4（默认 SVG）：

node scripts/render-mermaid.mjs docs/c4/context.md --format svg --out docs/c4/png/
node scripts/render-mermaid.mjs docs/c4/containers.md --format svg --out docs/c4/png/

4. **可选：工程补充图**：

```bash
node scripts/render-mermaid.mjs docs/diagrams/architecture.md \
  --format svg --out docs/diagrams/png/

5. 高质量 / 视觉审查（已装 diagramming-architecture 时）：
   • 禁止 analyze_codebase.py
   • mmdc 加 -w 3200 -H 2400 -s 2 与白底
   • 按 Visual Review checklist 迭代 ≤3 轮（重叠、箭头乱、过挤）
6. mark-aux（变更内）

约束 prompt（接 diagramming-architecture 时必用）

以 <source.md> 为架构真源；禁止 analyze_codebase.py 或改组件边界。
任务：提取 mermaid → mmdc SVG → Visual Review ≤3 轮

质量自检

• SVG 与真源 mermaid 一一对应
• 未新增/删除架构节点（仅排版）
• C4 导出在 c4/png/，工程图在 diagrams/png/

流水线位置

/taiyi:diagram-c4  →  /taiyi:diagram-arch  →  /taiyi:diagram-render

总命令：/taiyi:diagram-pipeline