信息图生成器

用户输入 → 类型匹配 → 加载 schema → 校验输入 → 加载 reference
    → 加载主题 → Token 注入 → 渲染 HTML → 输出

读取用户输入 → 提取 type/title/theme 等字段 → 匹配图表类型

input.theme → themes/<name>.json
（默认 "default" → themes/default.json）

{
  "name": "Dark",
  "extends": "default",
  "color": {
    "primary": "#6C9BD2",
    "background": "#1A1A2E",
    "text_primary": "#EAEAEA"
  }
}

/* ✅ 正确 — token 引用 */
fill: var(--color-primary);
font-size: var(--size-label)px;

/* ❌ 禁止 — 硬编码 */
fill: #4A90D9;
font-size: 12px;

mermaid.initialize({
  startOnLoad: true,
  theme: 'base',
  securityLevel: 'sandbox',
  gantt: { barHeight: {{bar_height}}, fontSize: {{size_axis}},
           useWidth: {{width}} },
  er: { fontSize: {{size_label}} },
  fontFamily: '{{font_family}}'
});

type: gantt
title: 项目计划
sections:
  - name: 阶段一
    tasks:
      - { name: 任务A, start: "2026-01-01", end: "2026-01-10", status: done }
      - { name: 任务B, start: "2026-01-11", duration: "7d" }

type: string     # 必填，图表类型
title: string    # 必填，标题
subtitle: string # 可选，副标题
theme: string    # 可选，主题名（默认 "default"）
width: integer   # 可选，画布宽
height: integer  # 可选，画布高
ratio: string    # 可选，宽高比

infographic/
├── CONSTITUTION.md          # 设计宪法
├── SKILL.md                 # 本文件（入口路由）
├── DESIGN_RESEARCH.md       # 设计研究
├── references/              # 图表渲染模板
│   ├── _shared/             # 跨图表共享组件
│   │   ├── README.md
│   │   ├── color-scale.md   # 颜色比例尺
│   │   ├── legend.md        # 图例（active）
│   │   └── tooltip.md       # 悬浮提示
│   ├── gantt.md             # Phase 1 — Mermaid
│   ├── erd.md
│   ├── timeline.md
│   ├── venn.md              # Phase 1 — SVG inline
│   ├── sankey.md            # Phase 2 — d3-sankey
│   ├── radar.md             # Phase 2 — ECharts
│   ├── treemap.md           # Phase 2 — d3-hierarchy
│   ├── wardley.md           # Phase 3 — SVG inline
│   ├── ishikawa.md          # Phase 3 — SVG inline
│   └── wordcloud.md         # Phase 3 — SVG inline + JS
│   ├── bar.md               # Phase 6 — ECharts
│   ├── line.md              # Phase 6 — ECharts
│   ├── pie.md               # Phase 6 — ECharts
│   ├── scatter.md           # Phase 6 — ECharts
│   ├── heatmap.md           # Phase 6 — ECharts
│   └── funnel.md            # Phase 6 — ECharts
├── themes/                  # 8 套主题 (Phase 7)
│   ├── default.json         # 基础主题
│   ├── dark.json / corporate.json / academic.json
│   ├── minimal.json / warm.json / tech.json / nature.json
│   └── selection-index.json
├── tokens/                  # Token 声明
│   ├── schema.json
│   └── validate.py
├── schemas/                 # 输入 schema
│   ├── input-common.md
│   ├── gantt.md
│   ├── erd.md
│   ├── timeline.md
│   ├── venn.md
│   ├── sankey.md            # Phase 2
│   ├── radar.md             # Phase 2
│   ├── treemap.md           # Phase 2
│   ├── wardley.md           # Phase 3
│   ├── ishikawa.md          # Phase 3
│   └── wordcloud.md         # Phase 3
│   ├── bar.md               # Phase 6
│   ├── line.md              # Phase 6
│   ├── pie.md               # Phase 6
│   ├── scatter.md           # Phase 6
│   ├── heatmap.md           # Phase 6
│   ├── funnel.md            # Phase 6
│   └── dashboard.md         # Phase 6C — Dashboard
├── presets/                 # 场景预设
│   ├── report-16-9.json     # Phase 4
│   ├── social-3-4.json      # Phase 4
│   ├── social-1-1.json      # Phase 5
│   └── story-9-16.json      # Phase 5
├── layouts/                 # Phase 6C — 仪表盘布局
│   ├── two-col.md           # 左右 2 列
│   ├── three-col.md         # 3 列等宽
│   └── grid.md              # 2×2 网格
├── metadata/                # 元数据
│   ├── registry.yaml
│   ├── fields.yaml
│   └── dependencies.yaml
└── scripts/                 # 工具脚本
    ├── build.py             # Phase 4 — active
    ├── render_mermaid.py    # Phase 5 — Mermaid 族
    ├── render_svg.py        # Phase 5 — SVG 族
    ├── render_js.py         # Phase 5 — d3/echarts 族
    ├── run_tests.py         # Phase 6E — CI 测试运行器
    └── png_export.js        # Phase 5 — Puppeteer PNG 导出
├── .github/workflows/       # Phase 6E — CI/CD
│   └── test.yml             # GitHub Actions: 57 tests
├── gallery/                 # Phase 6F — 图表画廊
│   └── index.html           # 17 种图表交互式展示