Name: drawio-roadmap-swimlane
Author: zsxink

Imported from zsxink/skills-hub (skills/drawio-roadmap-swimlane/SKILL.md). Install upstream with npx skills add zsxink/skills-hub --skill drawio-roadmap-swimlane. Copyright stays with the author.

Swimlane-flow roadmap

Produce a .drawio file with horizontal stage lanes stacked top→bottom: each lane is a colored rounded band of titled unit cards, wired by directional arrows that make learning order explicit. Best when sequence and prerequisites matter.

When to use

This skill (swimlane) — strict order / prerequisites; each unit has title+subtitle; arrows show "learn A before B". Cleaner for courses.
drawio-roadmap-snake — poster visual impact; many parallel items per category.

If unsure, ask which they want, or offer to produce both.

Design rules

Stage lanes — one rounded rect per stage (rounded=1;strokeWidth=2), full width, stacked top→bottom. A colored lane-header chip on the left holds the stage name + unit count.
Stage color gradient — advance top→bottom. Suggested (fill / stroke):
- Blue #E3F2FD/#1565C0 → Green #E8F5E9/#2E7D32 → Orange #FFF3E0/#E65100
- Purple #F3E5F5/#6A1B9A → Cyan #E0F7FA/#00838F → Pink #FCE4EC/#AD1457
- Side-branch (加餐): dashed yellow #FFFDE7/#F9A825
Unit cards — white rounded rect rounded=1, value title
subtitle. Core/highlight units get fontStyle=1 (bold) + ⭐ in the title.
Directional arrows — use shape=flexArrow;endArrow=classic (thick filled arrow shape, not a thin line). Route from the bottom center of the last card in a lane, down to the midpoint between lanes, then horizontally left to the entry point of the next lane. Each arrow's fillColor uses a light tint of the source lane color; strokeColor=#6c8ebf. Set exitX=0.5;exitY=1 on the source card and entryX=0.25;entryY=0 on the target lane. Provide explicit waypoints in <Array as="points">.
Title + legend — big bold title on top; one-line legend explaining solid vs. dashed and ⭐ marks.

Color palette

Stage role	Lane fill	Stroke
Foundation	`#E3F2FD`	`#1565C0`
Sub-Agents	`#E8F5E9`	`#2E7D32`
Skills	`#FFF3E0`	`#E65100`
Core Mechanisms	`#F3E5F5`	`#6A1B9A`
Engineering	`#E0F7FA`	`#00838F`
Closing	`#FCE4EC`	`#AD1457`
Side-branch	`#FFFDE7` dashed	`#F9A825`

Build procedure

Collect outline: stages (lanes) → ordered units (title, subtitle, core?). If pointed at course dir/spec, derive and confirm lanes + order.
Geometry: lane height ≈150, card width 200×70, card gap ≈20, lane start x≈195. Stack lanes with ≈30 vertical gap.
Draw lanes (background) → header chips → unit cards → flexArrow arrows (bottom→down→left→top) → optional dashed branches → title + legend.
Save to assets/<name>.drawio; give open instructions.
Run python3 scripts/validate_drawio.py <file.drawio>. Read references/design-spec.md for exact palette values.

Checklist

One lane per stage, stacked top→bottom, full width
Color advances stage by stage (exact hex in design-spec)
Arrows form a continuous ordered main line across lanes
Each unit card has title + subtitle; core units bold + ⭐
Title + legend present
Valid <mxfile> XML, opens in draw.io without errors

Install drawio-roadmap-swimlane and it becomes one more candidate the router can pick - when it fits.

A listing is a routing target with a manifest: what it does, which domains it covers, what it costs and who publishes it. Once installed it sits beside your own models and tools, is scored like any other candidate for each request, and shows up in the trace when it wins. Ratings come from workspaces that installed it, one per account.

{ "ocm": "1", "id": "zsxink-skills-hub-drawio-roadmap-swimlane", "kind": "skill", "name": "drawio-roadmap-swimlane", "description": "Generate a \"swimlane flow\" learning roadmap as a draw.io (.drawio) file — horizontal stage lanes stacked top-to-bottom, each a colored rounded band holding titled unit cards, connected by directional arrows showing strict learning order. Color advances stage by stage. Use when the user wants a roadmap / 学习路线图 / 知识地图 as a drawio where sequence matters and each unit has a title + subtitle. For poster-like parallel skill overviews prefer drawio-roadmap-snake.", "publisher": "zsxink", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "skills-sh" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Generate a \"swimlane flow\" learning roadmap as a draw.io (.drawio) file — horizontal stage lanes stacked top-to-bottom, each a colored rounded band holding titled unit cards, connected by directional arrows showing strict learning order. Color advances stage by stage. Use when the user wants a roadmap / 学习路线图 / 知识地图 as a drawio where sequence matters and each unit has a title + subtitle. For poster-like parallel skill overviews prefer drawio-roadmap-snake." ], "primary": false, "metadata": { "source": { "provider": "skills.sh", "repository": "https://github.com/zsxink/skills-hub", "path": "skills/drawio-roadmap-swimlane/SKILL.md", "ref": "HEAD", "url": "https://github.com/zsxink/skills-hub/blob/HEAD/skills/drawio-roadmap-swimlane/SKILL.md", "key": "zsxink/skills-hub/skills/drawio-roadmap-swimlane/SKILL.md" } }, "instructions": "# Swimlane-flow roadmap\n\nProduce a `.drawio` file with horizontal stage lanes stacked top→bottom: each lane is a colored rounded band of titled unit cards, wired by directional arrows that make learning order explicit. Best when sequence and prerequisites matter.\n\n## When to use\n\n- **This skill (swimlane)** — strict order / prerequisites; each unit has title+subtitle; arrows show \"learn A before B\". Cleaner for courses.\n- **drawio-roadmap-snake** — poster visual impact; many parallel items per category.\n\nIf unsure, ask which they want, or offer to produce both.\n\n## Design rules\n\n1. **Stage lan", "cost": { "context_tokens": 786 } }

drawio-roadmap-swimlane

About

Swimlane-flow roadmap

When to use

Design rules

Color palette

Build procedure

Checklist

Install drawio-roadmap-swimlane and it becomes one more candidate the router can pick - when it fits.

Use it

Manifest

Reviews