coco-research Journey Map Project
Project
- Locating it: this skill does not assume a fixed install path. See "Locating the Project" below before running any commands.
- Stack: React 19 + Vite + TypeScript +
@xyflow/react(React Flow v12) - Purpose: Rich user journey map tool for PMs and UX researchers
Locating the Project
Before making changes, find the project root:
- If the user gives a path, use it.
- Otherwise search common locations, e.g.:
find "$HOME" -maxdepth 5 -iname "journey-map" -type d 2>/dev/null - If nothing is found, ask the user where the project lives.
Dev Commands
Run from the project root located above:
npm run dev # start dev server (Vite)
npm run build # production build
npm run preview # preview build
Stack
Single package: @xyflow/react (React Flow v12). There is no AntV X6
dependency — the project fully migrated off X6, and no --legacy-peer-deps
flag is needed on React 19.
See references/packages.md for imports, node pattern, layout constants, file structure.
Implemented Features
| Feature | Mechanism |
|---|---|
| Swimlanes (persona rows) | swimlaneBg node type — wide colored band, zIndex=0 |
| Stage headers + narratives | stageHeader / stageNarr node types |
| Touchpoint cards | touchpoint node — seq badge, timing chip, emoji, title, badges |
| Emotion curve | EmotionCurve.tsx SVG component below canvas |
| Ad-hoc cross-flow | AdHocFlow.tsx component below canvas |
| Pan + zoom | React Flow built-in |
| Minimap | React Flow <MiniMap> |
| Controls | React Flow <Controls> |
| Persona focus/dim | focusPersona state → opacity on non-focused touchpoints |
| Detail panel | Click touchpoint → slide-in right panel |
References
- Full package list + versions + plugin roles:
references/packages.md - React Flow (MIT licensed, https://github.com/xyflow/xyflow) is the only graph engine this project uses.