Evidence-rich research roadmaps as editable SVG and native draw.io — with real visual evidence, dated milestones, collision-safe layout, and round-trip synchronization.
Research Roadmap Studio 是一个面向 Codex 的专业制图 Skill,用来把研究资料、技术里程碑和真实视觉证据组织成高信息密度、可编辑、可追溯的技术路线图。它适用于科研发展史、产业技术图谱、人形机器人路线图、AI 模型与数据集演进、S 曲线时间线,以及需要同时交付 SVG 和 draw.io 的研究可视化任务。
下面就是使用本 Skill 制作并经过人工 draw.io 调整的完整 16:9 Demo,包含四条研究路线和 65 个真实成果节点:
人形机器人研究版图时间轴 · 1922 × 1082 · 65 个可追溯节点
查看高清 PNG
·
打开可编辑 SVG
·
下载原生 draw.io
普通时间线工具擅长排列日期,却很难同时处理研究证据、真实图片、路线继承、分叉汇合、密集节点和人工精修。本 Skill 将这些工作统一为一个可验证流程:
- 多条研究路线共享同一套时间坐标,可表达继承、分叉、汇合与跨路线影响。
- 节点严格落在演化曲线上,支持平滑 S 曲线和渐变宽度路线带。
- 每个成果节点绑定真实产品图、实验关键帧、架构图或官方机构 Logo。
- 论文首页和网页截图只用于来源追踪,不作为节点主视觉。
- 非均匀时间轴为节点密集年份提供更多空间,同时保持年份位置正确。
- 在生成阶段执行文本测量、边界约束、碰撞检测和连接线检查。
- 同时输出专业 SVG 与原生 draw.io,支持人工调整后的布局回读与同步。
- 将 OpenDesign 作为正式艺术指导阶段,把参考设计转译为可追溯、可配置的区域与视觉令牌。
仓库内置的人形机器人 Demo 包含 65 个经过稳定 ID 对齐的里程碑,分布在四条并行路线:
- 本体硬件研发
- 全身控制与运动智能
- 数据、遥操作与学习基础设施
- 具身智能算法
Demo 展示了真实图片证据、机构标识、节点密集年份扩展、平滑演化曲线、未来延伸视觉、人工 draw.io 调整,以及 SVG/draw.io 的双格式维护方式。
| Demo 文件 | 用途 |
|---|---|
| PNG preview | GitHub 预览与 fit-to-screen 视觉检查 |
| Editable SVG | 带可编辑文本及嵌入 draw.io 数据的 SVG |
| Native draw.io | 原生 mxGraphModel,节点、连线和图层可直接编辑 |
| Milestone ledger | 65 个节点的成果、年份、机构、来源、图片与 Logo 记录 |
| Layout overrides | 人工调整后的稳定 ID 与几何位置 |
| Demo notes | Demo 结构、复用方法与设计经验 |
Demo 图中的显示媒体已经嵌入 SVG/draw.io。CSV 保留项目相对路径模式,完整原始素材库未在这个精简公开示例中重复分发。
一个完整任务通常交付:
roadmap.svg
roadmap.png
roadmap.drawio
roadmap-drawio-editable.svg
milestones.csv
milestones.sqlite # optional canonical database
layout-overrides.csv
visual-qa.md
其中:
roadmap.svg用于演示、排版和专业矢量编辑。roadmap.drawio用于节点级人工调整,不是把整张 SVG 塞进一个图片单元。layout-overrides.csv记录人工修改后的几何信息,避免下一次生成覆盖人工布局。milestones.csv/.sqlite维护节点、成果、日期、URL、视觉证据和 Logo 的事实来源。
让 Codex 使用 skill-installer 从以下仓库安装:
https://github.com/wenjw666/research-roadmap-studio
也可以手动安装:
git clone https://github.com/wenjw666/research-roadmap-studio.git ~/.codex/skills/research-roadmap-studio安装后重启或刷新 Codex,使技能清单重新加载。
在请求中直接指定技能:
Use $research-roadmap-studio to create an evidence-rich, four-track
technology roadmap with editable SVG and native draw.io outputs.
中文示例:
使用 $research-roadmap-studio 制作一张 16:9 的具身智能研究路线图。
按年份组织四条演化路线,每个节点使用真实实验图或官方 Logo,
同时交付可编辑 SVG、原生 draw.io、PNG 预览和来源清单。
flowchart LR
A[Milestone research] --> B[Evidence and identity ledger]
B --> C[Time-scale and route geometry]
C --> D[Collision-safe node placement]
D --> E[Editable SVG and PNG]
D --> F[Native draw.io]
F --> G[Manual layout adjustment]
G --> H[Extract layout overrides]
H --> C
核心流程:
- 从论文项目页、实验室、大学和公司官方页面核实里程碑。
- 为每个节点记录时间、组织、一级来源、代表图片、Logo 和裁切建议。
- 确定路线语义、非均匀时间比例和演化曲线。
- 使用真实字体度量和膨胀边界执行布局与碰撞检测。
- 生成 SVG、PNG 和原生 draw.io。
- 人工调整 draw.io 后提取稳定 ID 几何位置。
- 从同一份事实数据和布局覆盖表重新生成同步 SVG。
节点主视觉优先级:
- 机器人产品或真实操作照片
- 实验关键帧或代表性结果
- 解释机制的核心架构图
- 官方项目、实验室、大学或公司 Logo
禁止用作主视觉:
- 网页整页截图
- 论文封面或标题页
- 虚构图标和无来源占位符
- 只有字母的彩色色块
- 与成果本身关系不明确的装饰图
技能将以下规则视为阻塞式质量门槛:
- 所有文字必须位于所属框的安全边界内。
- 文本宽度必须使用最终交付字体实际测量,不使用字符数估算。
- 节点圆心必须位于对应路线的数学曲线上。
- 节点年份必须落入正确的时间区间。
- 内容框、图片、Logo、路线标题、引线和年份标签不得遮挡或越界。
- 引线优先使用短垂直连接,不接受大范围斜线和交叉连线。
- PNG 在原始尺寸和 fit-to-screen 尺寸下都必须可读。
- draw.io 必须能够重新打开、编辑和导出,不接受扁平化图片容器。
milestones.csv / SQLite factual authority
layout-overrides.csv manual geometry authority
design tokens visual-style authority
│
├── specialist editable SVG
└── native draw.io ── manual edits ── geometry extraction ──┐
└── regenerate
两种同步结果可以同时保留:
- Specialist SVG:从回读后的几何位置重新生成,保留渐变路线、滤镜、裁切和命名图层。
- Draw.io appearance SVG:由 draw.io 导出并嵌入图数据,优先保证与人工调整后的画面完全一致。
详细规则见 drawio-roundtrip.md。
research-roadmap-studio/
├── SKILL.md # Codex 加载的核心技能指令
├── agents/openai.yaml # 技能名称、描述、提示词和品牌信息
├── assets/
│ ├── roadmap-studio-mark.svg
│ └── demo-humanoid-roadmap/ # 完整 Demo 输出与数据
├── references/
│ ├── composition-patterns.md
│ ├── evidence-retrieval.md
│ ├── milestone-database.md
│ ├── drawio-roundtrip.md
│ └── demo-humanoid-roadmap.md
└── scripts/
├── extract_drawio_layout.py
└── validate_evidence_ledger.py
从人工调整后的 draw.io 提取节点位置:
python3 scripts/extract_drawio_layout.py \
roadmap.drawio layout-overrides.csv检查 CSV 与 SQLite 里程碑数据库是否一致:
python3 scripts/validate_evidence_ledger.py \
milestones.csv milestones.sqlite- Composition patterns: 演化曲线图、年份列图等构图选择。
- Evidence retrieval: 里程碑检索、视觉价值判断和替换规则。
- Milestone database: 节点、图片、Logo、来源和核验字段。
- Draw.io round trip: 人工布局回读、同步策略和编辑性验证。
- OpenDesign art direction: 视觉参考矩阵、区域化设计令牌与历史风格安全规则。
- Core skill instructions: Codex 实际执行的完整工作流和强制质量门槛。
Research Roadmap Studio 专注于单页、演示级、证据密集的研究路线图。它不是网页 Dashboard,也不依赖滚动、缩放控件或交互卡片来隐藏信息。最终成品应当能在 16:9 页面中直接看清整体结构,并允许继续进行矢量级人工编辑。