技术路线图 SVG 绘制技能

一、技能定位

将科研课题的文字描述转化为符合中文学术期刊/学位论文规范的技术路线图、研究思路图、研究框架图，输出可编辑纯 SVG 矢量文件。

与通用绘图技能的区别

• 聚焦"研究流程/技术路线"，而非一般理论模型或统计图表。
• 内置从真实学术路线图归纳出的分类体系 + 范式库，可直接拼装。
• 强调白底、低饱和 pastel、虚线分组、阶段递进等学术排版惯例。

二、分类体系（先定类型，再定范式）

快速决策：
- 内容是"先做什么再做什么" → A
- 需要展示章节 + 内容 + 方法 → B
- 多层模型/数据/评估架构 → C
- 两子系统相互作用 → D
- 多尺度/多情景对比 → E
- 核心概念被多因素环绕 → F

三、范式库（10 条可复用范式）

> 每条范式都可直接复制为 SVG 片段，按课题需要组合。

P1 标题范式

顶部圆角主标题条，accent 浅底 + 深 accent 字；可带"图 N"。

<rect x="100" y="16" width="1200" height="54" rx="10" fill="#E8F5E9" stroke="#388E3C" stroke-width="2"/>
<text x="700" y="52" font-size="30" font-weight="bold" text-anchor="middle" fill="#1B5E20">研究主题标题</text>

P2 阶段范式

每阶段 = 左侧"胶囊标签" + 内容区；阶段间用粗向下箭头串联。

<rect x="100" y="88" width="200" height="34" rx="17" fill="#C8E6C9" stroke="#388E3C" stroke-width="1.5"/>
<text x="200" y="112" font-size="20" font-weight="bold" text-anchor="middle" fill="#1B5E20">阶段名称</text>
<line x1="700" y1="130" x2="700" y2="155" stroke="#333" stroke-width="2.5" marker-end="url(#arrow)"/>

P3 分组范式

虚线圆角矩形包裹同阶段模块，左上角标组名。

<rect x="70" y="130" width="1060" height="140" rx="10" fill="none" stroke="#999" stroke-width="1.5" stroke-dasharray="8 5"/>
<text x="90" y="155" font-size="16" fill="#666">分组名称</text>

P4 模块范式

白底圆角矩形(1.5px 黑边)承载概念/方法/数据；多行文字用 <tspan>。

<g id="m1">
  <rect x="100" y="150" width="160" height="60" rx="10" fill="#FFFFFF" stroke="#333" stroke-width="1.5"/>
  <text x="180" y="178" font-size="18" font-weight="bold" text-anchor="middle" fill="#333">第一行</text>
  <text x="180" y="200" font-size="16" text-anchor="middle" fill="#555">第二行说明</text>
</g>

P5 箭头语义范式

实线=主流程；虚线/点线=数据/支撑/反馈；双向箭头=耦合。

<!-- 主流程（实心） -->
<line x1="200" y1="180" x2="300" y2="180" stroke="#333" stroke-width="2.5" marker-end="url(#arrow)"/>
<!-- 次级/数据（虚线） -->
<line x1="200" y1="220" x2="300" y2="220" stroke="#777" stroke-width="1.5" stroke-dasharray="4 4" marker-end="url(#arrow)"/>
<!-- 双向耦合 -->
<line x1="200" y1="260" x2="300" y2="260" stroke="#333" stroke-width="2" marker-start="url(#arrow-start)" marker-end="url(#arrow-end)"/>

P6 形状语义范式

• 平行四边形 = 政策/背景驱动
• 菱形 = 检验/决策/识别
• 圆柱 = 数据库/多源数据
• 椭圆 = 核心概念/关键变量
• 六边形 = 维度/因素

<!-- 平行四边形 -->
<polygon points="340,95 500,95 490,130 330,130" fill="#FFF8E1" stroke="#F57C00" stroke-width="1.5"/>
<!-- 菱形 -->
<polygon points="180,150 240,190 180,230 120,190" fill="#FFFFFF" stroke="#333" stroke-width="1.5"/>
<!-- 圆柱（数据库） -->
<path d="M120,150 a40,15 0 0,1 80,0 v60 a40,15 0 0,1 -80,0 v-60 a40,15 0 0,1 80,0" fill="#E3F2FD" stroke="#333" stroke-width="1.5"/>
<!-- 椭圆 -->
<ellipse cx="200" cy="200" rx="90" ry="40" fill="#E8F5E9" stroke="#388E3C" stroke-width="1.5"/>

P7 侧栏范式

右侧纵向旋转文字标注大阶段。

<text x="1340" y="370" font-size="20" font-weight="bold" text-anchor="middle" fill="#666" transform="rotate(90,1340,370)">研究内容的分析和解决</text>

P8 配色范式

白底 + ≤4 种低饱和 pastel；不同阶段用不同浅色区分。
| 方案 | 浅底 | 深accent | 适用 |
|------|------|---------|------|
| 学术蓝灰 | #E3F2FD | #1976D2 | 通用 |
| 生态绿 | #E8F5E9 | #388E3C | 生态/环境/地理 |
| 暖橙黄 | #FFF3E0 | #F57C00 | 土地/农业/资源 |
| 紫蓝科技 | #EDE7F6 | #5E35B1 | 模型/算法 |
> 全图饱和度 ≤ 40%，色相 ≤ 4 种。

P9 矩阵范式

左侧分析维度 × 顶部尺度/情景，单元格放方法/结果。

<g>
  <rect x="80" y="100" width="160" height="40" rx="6" fill="#C8E6C9" stroke="#388E3C" stroke-width="1.5"/>
  <text x="160" y="126" font-size="18" font-weight="bold" text-anchor="middle" fill="#1B5E20">分析维度</text>
  <rect x="260" y="100" width="100" height="40" rx="6" fill="#FFF3E0" stroke="#F57C00" stroke-width="1.5"/>
  <text x="310" y="126" font-size="16" text-anchor="middle" fill="#E65100">1km</text>
  <rect x="380" y="100" width="100" height="40" rx="6" fill="#FFF3E0" stroke="#F57C00" stroke-width="1.5"/>
  <text x="430" y="126" font-size="16" text-anchor="middle" fill="#E65100">5km</text>
</g>

P10 闭环范式

中心节点 + 外围弧形虚线表示数据回流。

<circle cx="700" cy="400" r="60" fill="#E8F5E9" stroke="#388E3C" stroke-width="2"/>
<text x="700" y="406" font-size="20" font-weight="bold" text-anchor="middle" fill="#1B5E20">核心过程</text>
<path d="M640,400 A60,60 0 0,1 760,400" fill="none" stroke="#777" stroke-width="1.5" stroke-dasharray="4 4" marker-end="url(#arrow)"/>

四、工作流

课题描述 / 论文原文 / 草图
  ↓
Step 1 信息提取（主题·阶段·要素·关系·尺度·情景）
  ↓
Step 2 选类型（A–F 六类之一或组合）
  ↓
Step 3 选范式组合（从 P1–P10 拼装）
  ↓
Step 4 选配色（P8 四方案之一）
  ↓
Step 5 生成 SVG 代码（直接用标准元素，不用提示词转译）
  ↓
Step 6 show_widget 渲染 + 自检
  ↓
Step 7 保存 .svg 并 present_files 交付

Step 1 信息提取模板

【研究主题】一句话
【研究背景/问题提出】政策/现实背景 + 关键科学问题 + 目标
【研究数据/资料】空间/统计/模型数据
【研究阶段】按逻辑或时间顺序列出
【核心方法/模型】分析/模拟/评价方法
【关键产出/结论】中间结果 + 最终结论 + 应用
【特殊结构】多尺度? 多情景? 耦合? 三栏? 环形?
【布局偏好】纵向/横向/中心辐射/多层

五、视觉规范速查

> 字号原则：印刷后中文低于 15px 难辨认，宁可换行也不要过度缩小。

元素样式对照

六、SVG 基础模板（含箭头 marker）

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1000" width="1400" height="1000" font-family="Microsoft YaHei, SimHei, sans-serif">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#333"/>
    </marker>
    <marker id="arrow-start" markerWidth="10" markerHeight="10" refX="1" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M9,0 L9,6 L0,3 z" fill="#333"/>
    </marker>
    <marker id="arrow-end" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#333"/>
    </marker>
  </defs>
  <rect width="1400" height="1000" fill="#FFFFFF"/>
  <!-- 按 P1–P10 拼装内容 -->
</svg>

七、自检清单

• [ ] 画布合适，内容未超边界
• [ ] 主标题清晰，阶段层级分明
• [ ] 所有模块文字完整、无截断
• [ ] 箭头方向正确、无过多交叉
• [ ] 同阶段模块对齐、间距均匀
• [ ] 虚线分组完整包裹相关模块
• [ ] 配色协调（≤4 色相，低饱和）
• [ ] 无错别字，术语与原文一致
• [ ] 使用标准 SVG 元素，文字为 <text>（可编辑）

八、交付

1. Write 保存为 .svg（建议 D:\课题路线图\outputs\ 或用户指定目录）。
2. show_widget 渲染预览。
3. present_files 展示最终文件。
4. 向用户说明：采用了哪类图型、组合了哪些范式、配色方案、保存路径。

九、示例

题目：中原城市群城市空间扩张模式、驱动机制与动态模拟
类型：A 纵向阶段递进型
范式组合：P1 标题 + P2 阶段(6 阶段) + P3 分组 + P4 模块 + P5 箭头 + P6 平行四边形(背景)+菱形(检验) + P7 侧栏 + P8 生态绿
配色：生态绿（白底 + #E8F5E9/#388E3C）
逻辑：国家战略背景 → 问题提出 → 研究基础 → 研究方法 → 研究内容 → 研究总结
→ 见 D:\课题路线图\outputs\示例_技术路线图.svg