코드베이스를 스캔하고 자체 유지 HTML 서비스 설계 여행지도를 생성합니다. 수동 다이어그램 작업이 필요하지 않습니다.

출력은 NN/g가 결합된 **customer 여행 지도 + 서비스 청사진 ** 단일 브라우저 ready HTML 파일. 그것을 열고, 그것을 공유합니다. 서버 없음, 빌드 단계 없음, 브라우저를 넘어 의존도 없음.

---

무엇 그것

codebase에서 포인트. 기술은 경로, 구성 요소, API 호출, 이메일 템플릿 및 오류 상태를 읽습니다. 그런 다음 서비스 디자이너와 같은 생각 : 배우는 누구, 그들의 목표는 무엇입니까, 그들은 무엇을하고 각 순간에 느낌?

모든 inferred 값은 flagged [Assumption]]이므로 실제 사용자와 검증해야하는 것을 알고 있습니다. Frontstage, Backstage 및 Support rows는 코드에서 직접 소스됩니다. - 컴포넌트, 실제 API 호출, 실제 서비스.

---

설치

Claude Code — 플러그인 마켓을 통해

나중에 업데이트 /plugin marketplace update.

플러그인 기술은 namespaced by plugin name이므로 플러그인 설치는 /journey-mapper:journey-mapper로 호출됩니다. Claude는 또한 여행지도를 요청할 때 자동으로 픽업합니다.

Claude 코드 — 설명서

Journey Mapper

A Claude Code skill that scans any codebase and generates a self-contained HTML service-design journey map — no manual diagram work required.

The output is an NN/g combined customer journey map + service blueprint in a single browser-ready HTML file. Open it, annotate it, share it. No server, no build step, no dependencies beyond a browser.

---

What it does

Point it at a codebase. The skill reads your routes, components, API calls, email templates, and error states, then thinks like a service designer: who are the actors, what are their goals, what do they do and feel at each moment?

Every inferred value is flagged [Assumption] so you know what needs validating with real users. The Frontstage, Backstage, and Support rows are sourced directly from the code — named components, real API calls, actual services.

---

Install

Claude Code — via plugin marketplace

/plugin marketplace add joeyvansommeren/journey-mapper
/plugin install journey-mapper@journey-mapper

Update later with /plugin marketplace update.

Plugin skills are namespaced by plugin name, so a plugin install is invoked as /journey-mapper:journey-mapper. Claude also picks it up automatically when you ask for a journey map.

Claude Code — manual

git clone https://github.com/joeyvansommeren/journey-mapper
cp -r journey-mapper/skills/journey-mapper ~/.claude/skills/journey-mapper

A manual install is invoked as plain /journey-mapper. For a single project, copy it to .claude/skills/journey-mapper in that repo instead.

---

Other agents — Codex, Cursor, OpenCode, Gemini CLI, GitHub Copilot, Windsurf

These tools all read Agent Skills folders natively, and all of them look in the shared .agents/skills location. One copy covers every one of them:

git clone https://github.com/joeyvansommeren/journey-mapper
mkdir -p ~/.agents/skills
cp -r journey-mapper/skills/journey-mapper ~/.agents/skills/journey-mapper

For a single project, copy it to .agents/skills/journey-mapper in that repo instead. Keep REFERENCE.md and TEMPLATE.html next to SKILL.md — the skill refers to them by relative path.

Every tool also triggers the skill on its own when you ask for a journey map or service blueprint.

---

Continue.dev

Continue reads skill folders from its own directory rather than .agents/skills:

mkdir -p ~/.continue/skills