Code Path Marker - Visual Code Execution Path Marker

中文

🎯 30 秒快速理解

Code Path Marker 让你用"书签"的方式标记代码路径。选择代码 → 右键标记 → 生成可视化树形图 → 一键分享团队

💡 解决的问题

在阅读复杂代码时，你是否遇到过这些困扰？

🎯 功能分层概览

🔥 核心功能（开箱即用）

典型工作流：选择代码 → 右键 Code Path → 🪧 Mark as Node → 继续标记其他节点 → 自动生成树形视图

🤖 AI 时代特色功能

为现代 AI 辅助开发设计的功能，让代码上下文轻松共享给 ChatGPT/Claude/Cursor：

1️⃣  在 VS Code 中选择需要理解的复杂代码段
2️⃣  点击编辑器灯泡菜单 → "📋 Copy Code Context"
3️⃣  粘贴到 ChatGPT/Claude：
    "请分析这段代码的执行流程：
    [自动复制的文件路径+行号+代码]"
4️⃣  或使用 Code Context Basket 收集多个片段：
    - 🧺 Add 多个代码片段
    - 🧺 Open 查看篮子
    - Copy Markdown → 一次性粂给 AI 分析完整流程
5️⃣  基于 AI 反馈，用 Code Path Marker 标记关键节点

AI 增强开发 = Code Path Marker 标记 + 代码上下文复制 + AI 工具理解

🔧 高级特性（深度用户）

🛠️ 编辑工具

🚀 快速开始

📦 安装

1. 从 VS Code 插件市场（推荐）：

   • 打开 VS Code → 扩展面板（Ctrl+Shift+X）
   • 搜索 "Code Path Marker"
   • 点击 安装 并重新加载

2. 从命令行：

   code --install-extension Nita.codepath-extension
   

⚡ 3 步快速上手

步骤 1：创建第一个节点

1. 选中任意代码片段
2. 右键 → "Code Path" → "🪧 Mark as New Node"
3. 自动创建根节点，打开预览面板

步骤 2：构建执行链

1. 选中下一段代码（或函数定义）
2. 右键 → "Code Path" → 选择：
   - "🪧 Mark as Child Node" （子节点）
   - "🪧 Mark as Parent Node" （父节点）
   - "🪧 Mark as Bro Node" （兄弟节点）
3. 重复标记，逐步完善执行路径

步骤 3：查看与分享

1. 预览面板显示实时树形结构
2. 点击树中节点 → 自动跳转至代码位置
3. 右键 → "导出" → 获得 .codepath 文件
4. 分享文件给团队，他们导入即可查看

📌 实际场景示例

场景：理清一个 HTTP 请求处理流程

// src/routes/userRoutes.ts - 第 15 行
router.post('/api/users', createUser);  // 👈 第 1 步：选中，"Mark as New Node"

// src/controllers/userController.ts - 第 23 行
export async function createUser(req, res) {  // 👈 第 2 步："Mark as Child Node"
  const userData = await validateUserData(req.body);
  const user = await userService.createUser(userData);  // 👈 第 3 步："Mark as Child Node"
  res.json(user);
}

// src/services/userService.ts - 第 45 行
export async function createUser(data) {  // 👈 第 4 步："Mark as Child Node"
  const hashedPassword = await hashPassword(data.password);  // 👈 第 5 步："Mark as Child Node"
  return await db.users.create({ ...data, password: hashedPassword });
}

// src/utils/crypto.ts - 第 12 行
export async function hashPassword(password) {  // 👈 第 6 步："Mark as Child Node"
  return bcrypt.hash(password, 10);  // 👈 第 7 步："Mark as Child Node"
}

生成的可视化路径：

🌲 User Registration Flow (用户注册流程)
├─ 📍 POST /api/users (userRoutes.ts:15)
│  └─ 📍 createUser 控制器 (userController.ts:23)
│     └─ 📍 validateUserData 验证 (userController.ts:24)
│     └─ 📍 userService.createUser 服务 (userController.ts:26)
│        └─ 📍 hashPassword 加密 (userService.ts:45)
│           └─ 📍 bcrypt.hash 哈希 (crypto.ts:12)
└─ 📍 数据库保存 (userService.ts:47)

效果：

• ✅ 从路由 → 控制器 → 服务 → 工具函数的完整链一目了然
• ✅ 每个节点都带上文件和行号，直接跳转修改
• ✅ 代码重构后自动更新位置，置信度提示帮助你评估可靠性
• ✅ 导出分享给团队："这是用户注册的完整流程"

🧺 Code Context Basket（代码上下文篮子）- AI 友好

用于批量收集代码片段，特别适合需要提问 AI 的场景：

💡 底部的“历史记录”面板会自动保存每次篮子更新，也可以通过命令面板快速执行 🧺 History / Restore / Delete / Edit。

典型用法：

1. 在代码各处 🧺 Add，收集理解流程所需的所有片段
2. 🧺 Open 查看篮子，按逻辑顺序调整
3. 点击 Copy → 粘贴到 ChatGPT：
   "请分析这段代码流程：[粘贴的 Markdown]"

🎯 典型使用场景

场景 1：调试复杂逻辑

困扰：函数链很长，某处报错但不知道从哪开始追踪 解决：

• 选中出错函数 → Mark as Node
• 逐级往上标记调用栈 → 生成完整的执行链
• 点击树中节点快速跳转，逐行调试

场景 2：代码审查与交接

困扰：新成员需要理解模块代码，只能口头解释 解决：

• 标记关键代码路径 → 导出 .codepath 文件
• 新成员导入 → 直接查看结构化的执行流程
• 团队讨论时："我们在树的第 3 层" （更清晰）

场景 3：配合 AI 工具开发

困扰：向 AI 解释代码流程很费力，信息碎片化 解决：

• 🧺 Code Context Basket 收集关键代码片段
• Copy Markdown → 粘贴到 ChatGPT/Claude
• AI 理解完整流程后，生成文档/重构建议

场景 4：代码重构追踪

困扰：重构后之前的笔记位置全部失效，很烦人 解决：

• 之前的节点标记自动追踪（通过代码哈希+多策略搜索）
• 重构后 Ctrl+Shift+R 刷新 → 自动更新到新位置
• 置信度提示（精确/高/中/低）帮你评估更新的可靠性

场景 5：多条执行路径探索

困扰：一段代码有多种调用方式，想记录 A 方案和 B 方案的差异 解决：

• 对同一个父节点，标记多个子节点（树分叉）
• 树中自动展示多条路径
• 方便对比分析

📖 完整文档

❓ 常见问题速览

🌟 项目信息

🎨 VibeCoding 开发声明

本项目采用 VibeCoding 工作流，由人与 AI 协同共创完成。我们强调：

• 沉浸式节奏：保持开发的流畅感与创意连贯性
• 即时反馈：通过 AI 工具快速验证想法和实现方案
• 人机协作：充分发挥人类的架构思维与 AI 的生产力

代码、文档与测试均在这种协作环境下迭代生成。我们认为这是现代高效开发的新常态，而非传统"古法手敲"模式。

请在贡献或审阅本项目时，充分考虑这一创作背景。我们欢迎各种形式的贡献，无论是代码、建议还是 AI 辅助的方案。

English

🎯 30-Second Quick Overview

Code Path Marker lets you bookmark code paths like bookmarks. Select code → Right-click mark → Generate visual tree → Share with team instantly

💡 The Problem

Have you encountered these challenges while reading complex code?

🎯 Feature Overview by Layer

🔥 Core Features (Ready to Use)

Typical Workflow: Select code → Right-click Code Path → 🪧 Mark as Node → Continue marking → Auto-generate tree

🤖 AI-Era Special Features

Designed for modern AI-assisted development, easily share code context with ChatGPT/Claude/Cursor:

1️⃣  Select complex code in VS Code you want to understand
2️⃣  Click editor lightbulb menu → "📋 Copy Code Context"
3️⃣  Paste to ChatGPT/Claude:
    "Please analyze this code execution flow:
    [Auto-copied file path + line numbers + code]"
4️⃣  Or use Code Context Basket to collect multiple snippets:
    - 🧺 Add multiple code snippets
    - 🧺 Open basket
    - Copy Markdown → Feed AI to analyze complete flow at once
5️⃣  Based on AI feedback, mark key nodes with Code Path Marker

AI-Enhanced Development = Code Path Marker + Context Copy + AI Tools

🔧 Advanced Features (Power Users)

🛠️ Editing Tools

🚀 Quick Start

📦 Installation

1. From VS Code Marketplace (Recommended):

   • Open VS Code → Extensions panel (Ctrl+Shift+X)
   • Search for "Code Path Marker"
   • Click Install and reload

2. From Command Line:

   code --install-extension Nita.codepath-extension
   

⚡ 3 Steps to Get Started

Step 1: Create Your First Node

1. Select any code snippet
2. Right-click → "Code Path" → "🪧 Mark as New Node"
3. Auto-creates root node and opens preview panel

Step 2: Build Execution Chain

1. Select next code segment or function definition
2. Right-click → "Code Path" → Choose:
   - "🪧 Mark as Child Node" (child)
   - "🪧 Mark as Parent Node" (parent)
   - "🪧 Mark as Bro Node" (sibling)
3. Repeat marking, progressively complete your path

Step 3: View & Share

1. Preview panel displays real-time tree structure
2. Click any node → Auto-jump to code location
3. Right-click → "Export" → Get .codepath file
4. Share file with team, they import to view instantly

📌 Real-World Example

Scenario: Understanding an HTTP Request Flow

// src/routes/userRoutes.ts - Line 15
router.post('/api/users', createUser);  // 👈 Step 1: Select, "Mark as New Node"

// src/controllers/userController.ts - Line 23
export async function createUser(req, res) {  // 👈 Step 2: "Mark as Child Node"
  const userData = await validateUserData(req.body);
  const user = await userService.createUser(userData);  // 👈 Step 3: "Mark as Child Node"
  res.json(user);
}

// src/services/userService.ts - Line 45
export async function createUser(data) {  // 👈 Step 4: "Mark as Child Node"
  const hashedPassword = await hashPassword(data.password);  // 👈 Step 5: "Mark as Child Node"
  return await db.users.create({ ...data, password: hashedPassword });
}

// src/utils/crypto.ts - Line 12
export async function hashPassword(password) {  // 👈 Step 6: "Mark as Child Node"
  return bcrypt.hash(password, 10);  // 👈 Step 7: "Mark as Child Node"
}

Generated Visual Path:

🌲 User Registration Flow
├─ 📍 POST /api/users (userRoutes.ts:15)
│  └─ 📍 createUser controller (userController.ts:23)
│     └─ 📍 validateUserData validation (userController.ts:24)
│     └─ 📍 userService.createUser service (userController.ts:26)
│        └─ 📍 hashPassword encryption (userService.ts:45)
│           └─ 📍 bcrypt.hash hashing (crypto.ts:12)
└─ 📍 Database save (userService.ts:47)

Benefits:

• ✅ Complete chain from route → controller → service → utility function at a glance
• ✅ Each node has file and line number, jump directly to edit
• ✅ After refactoring, auto-update positions with confidence hints
• ✅ Export share with team: "This is the complete user registration flow"

🧺 Code Context Basket - AI Friendly

Batch collect code snippets, especially useful when asking AI questions:

Typical Usage:

1. 🧺 Add throughout codebase, collect all snippets needed to understand flow
2. 🧺 Open basket, adjust order logically
3. Click Copy → Paste to ChatGPT:
   "Please analyze this code flow: [Pasted Markdown]"

🎯 Typical Use Cases

Scenario 1: Debug Complex Logic

Challenge: Long function chain, error at some point but don't know where to start tracing Solution:

• Select error function → Mark as Node
• Gradually mark calling stack upward → Generate complete execution chain
• Click tree nodes to jump quickly, debug line by line

Scenario 2: Code Review & Onboarding

Challenge: New team member needs to understand module code, only verbal explanation possible Solution:

• Mark key code paths → Export .codepath file
• New member imports → View structured execution flow directly
• Team discussions: "We're at layer 3 in the tree" (much clearer)

Scenario 3: AI-Assisted Development

Challenge: Explaining code flow to AI is tedious, information fragmented Solution:

• 🧺 Code Context Basket collect key snippets
• Copy Markdown → Paste to ChatGPT/Claude
• AI understands complete flow, generates docs/refactor suggestions

Scenario 4: Refactoring Tracking

Challenge: After refactoring, previous notes' locations all invalid, frustrating Solution:

• Previous node markings auto-track (via code hash + multi-strategy search)
• After refactoring, Ctrl+Shift+R refresh → Auto-update to new positions
• Confidence hints (exact/high/medium/low) help evaluate reliability

Scenario 5: Multiple Execution Paths

Challenge: One code segment has multiple call paths, want to record A plan vs B plan differences Solution:

• Mark multiple children to same parent node (tree fork)
• Tree auto-displays multiple paths
• Easy for comparative analysis

📖 Complete Documentation

❓ FAQ Quick Look

🌟 Project Info

🎨 VibeCoding Development Statement

This project is built with the VibeCoding workflow, co-created by humans and AI. We emphasize:

• Immersive Rhythm: Maintain development flow and creative continuity
• Instant Feedback: Rapidly validate ideas and implementation through AI tools
• Human-AI Collaboration: Leverage human architectural thinking and AI productivity

Code, documentation, and tests are all iteratively generated in this collaborative environment. We believe this is the new normal of modern efficient development, rather than the traditional "handcrafted" approach.

When contributing to or reviewing this project, please consider this creative context. We welcome all forms of contributions, whether code, suggestions, or AI-assisted solutions.