SuperAPI AI 工具集

drawio-roadmap-swimlane

设计与创作

查看项目

更新于 10-16 09:31

技能介绍

用途:生成“泳道流程”式学习路线图(.drawio)。泳道自下而上按阶段堆叠,每阶段是一条彩色圆角横条,内含带标题与副标题的单元卡片,由箭头串起学习顺序。当顺序与前置关系重要时优先使用;若更看重海报视觉、每类并行项多,可考虑另一技能 drawio-roadmap-snake;不确定时可询问或两者都出。

主要能力与设计规则:每阶段一个圆角矩形(rounded=1;strokeWidth=2),通栏、自上而下堆叠,左侧彩色阶段标题块显示阶段名与单元数;颜色随阶段自上而下递进(蓝#E3F2FD/#1565C0→绿#E8F5E9/#2E7D32→橙#FFF3E0/#E65100→紫#F3E5F5/#6A1B9A→青#E0F7FA/#00838F→粉#FCE4EC/#AD1457;加餐支线为黄色虚线#FFFDE7/#F9A825)。单元卡片为白色圆角矩形,值写作 title subtitle,核心/重点单元用 fontStyle=1 加粗并在标题加 ⭐。有向箭头用 shape=flexArrow;endArrow=classic,从上一泳道末卡底部中心下到泳道间中点,再水平左行至下一泳道入口,箭头 fillColor 用源泳道浅色、strokeColor=#6c8ebf,源卡设 exitX=0.5;exitY=1,目标泳道设 entryX=0.25;entryY=0,并在 <Array as="points"> 提供显式路径点。顶部有大号加粗标题,以及一行图例说明实线/虚线与 ⭐ 含义。

构建流程:收集大纲(阶段→有序单元,含标题、副标题、是否核心),若指向课程目录或规格则推导并确认;按几何参数绘制(泳道高约150、卡片200×70、卡片间距约20、泳道起始 x≈195、泳道间垂直间距约30);依次画泳道背景→标题块→单元卡片→flexArrow箭头→可选虚线支线→标题与图例;保存到 assets/<name>.drawio 并给出打开说明;运行 python3 scripts/validate_drawio.py <file.drawio> 校验,配色精确值见 references/design-spec.md。

限制与说明:需输出合法 <mxfile> XML,并确保在 draw.io 中可无错打开;核对清单包括每阶段一泳道且通栏堆叠、颜色逐阶段递进、箭头构成连续有序主线、每张卡片有标题与副标题、核心单元加粗带 ⭐、含标题与图例。资料未提供安装方式、收费、价格、平台与效果等信息。