Code Path Marker - Visual Code Execution Path Marker

中文

Code Path Marker 是一款 VS Code 扩展，提供交互式节点图与树形视图，用于可视化、标记并导航代码执行路径，支持路径的创建、管理与跳转。

它通过还原代码的调用链与执行流，帮助你进行学习、调试、代码审查与知识传递。

你可以选中任意代码片段、文件或文件夹创建节点；并通过 "Mark as Parent / Bro / Child" 等操作组织父/兄/子关系。借助可视化树形视图，将分散在各处的上下文统一到一个视图中，清晰呈现执行流程与结构。

注意：插件仍处于测试阶段，功能接口、文档与数据结构可能会频繁调整，欢迎反馈使用问题与改进建议。

🚀 快速开始

环境要求

• VS Code 1.75.0 或更高版本

安装方式

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

   • 打开 VS Code
   • 进入扩展面板（Ctrl+Shift+X）
   • 搜索 "Code Path Marker"
   • 点击 安装

2. 从命令行安装

   code --install-extension Nita.codepath-extension
   

首次使用

1. 选择代码: 在编辑器中高亮任意代码
2. 右键点击: 在 "Code Path" 子菜单选择 "Mark as New Node"
3. 构建路径: 添加父/子/兄弟节点创建执行流
4. 可视化: 以文本或图表格式查看代码路径

使用示例

安装完成后，试试这个简单示例：

// 1. 选中这个函数名
function calculateSum(a: number, b: number) {
  return a + b;  // 2. 将这行标记为子节点
}

// 3. 选中这个调用
const result = calculateSum(5, 3);  // 4. 标记为子节点
console.log(result);  // 5. 标记为最终节点

现在你就有了一个完整的执行路径，显示函数定义和它的使用过程。

📖 文档

• 📚 用户指南 - 完整使用说明
• 🛠️ 开发指南 - 开发和贡献指南
• 📋 API 参考 - 技术 API 文档
• 🔧 配置说明 - 设置和自定义
• 🌐 交互式文档 - 多语言文档门户
• 🎓 学习指南 - 初学者深度指南

🧩 核心功能

• 交互式节点标记 - 统一 "Code Path" 子菜单快速标记节点
• 文本可视化 - 实时刷新、分层展示的树形视图
• 多图表管理 - 状态栏快捷菜单快速访问
• 智能导航 - 模糊匹配和位置追踪
• 自动位置更新 - 智能代码追踪，多策略搜索
• 树分叉支持 - 追踪同一代码的多条执行路径
• 导出/导入 - 团队协作分享，自动切换
• 节点编辑 - 实时验证和预览更新
• 文件浏览器集成 - 标记文件/文件夹为节点，直接预览和分享图表文件
• 节点操作 - 复制、粘贴、剪切、上移、下移，自定义预览菜单
• 代码上下文复制 - 一键复制相对路径、行号范围与代码片段，便于沟通协作
• 跨平台 - 全平台兼容

🎯 使用场景

• 调试复杂逻辑 - 可视化执行流程，自动追踪位置变化
• 代码审查 - 通过导出/导入与团队分享执行路径
• 编写文档 - 通过结构化文本记录执行路径
• 学习代码 - 交互式导航理解复杂代码库
• 代码重构 - 智能位置更新追踪代码变化
• 多场景探索 - 使用树分叉探索不同执行路径

English

Code Path Marker is a VS Code extension that helps developers visualize and bookmark code execution paths via an interactive node diagram. It supports creating, managing, and navigating code flows.

By reconstructing the execution path in a visual node graph, it assists with debugging, code review, and knowledge sharing.

You can select any code, file, or folder to mark desired code locations or file positions. You can organize code execution relationships by selecting "Mark as Parents", "Bro", "Child" and other node types. Through the visual tree view, you can intuitively see the code execution flow or organization relationships, unifying scattered code context from different locations into a single view.

Note: The extension is still in beta; its APIs, documentation, and data structures may change frequently. Feedback on issues and suggestions for improvement are welcome.

🚀 Quick Start

Prerequisites

• VS Code 1.75.0 or higher

Installation

1. From VS Code Marketplace (Recommended):

   • Open VS Code
   • Go to Extensions (Ctrl+Shift+X)
   • Search for "Code Path Marker"
   • Click Install

2. From Command Line:

   code --install-extension Nita.codepath-extension
   

First Use

1. Select Code: Highlight any code in your editor
2. Right-click: Choose "Code Path" > "Mark as New Node" from context menu
3. Build Path: Add child/parent nodes to create execution flow
4. Visualize: View your code path in text

Example Usage

After installing, try this simple example:

// 1. Select this function name
function calculateSum(a: number, b: number) {
  return a + b;  // 2. Mark this line as child node
}

// 3. Select this call
const result = calculateSum(5, 3);  // 4. Mark as child node
console.log(result);  // 5. Mark as final node

Now you have a complete execution path showing the function definition and its usage!

📖 Documentation

• 📚 User Guide - Complete usage instructions
• 🛠️ Developer Guide - Development and contribution guide
• 📋 API Reference - Technical API documentation
• 🔧 Configuration - Settings and customization
• 🌐 Interactive Docs - Multi-language documentation portal
• 🎓 Learning Guide - In-depth guide for beginners

🔑 Key Features

• Interactive Node Marking from selected code with unified "Code Path" submenu
• Text Visualization with instant refresh and hierarchical view
• Multiple Graph Management with quick status bar menu
• Status Bar Quick Menu now offers 👁️ Refresh & Preview that refreshes the view and opens the preview panel when needed
• Smart Navigation with fuzzy matching and location tracking
• Auto Location Update - Intelligent code tracking with multi-strategy search
• Tree Fork Support - Track multiple execution paths for the same code
• Export/Import for team collaboration with auto-switch
• Node Editing with real-time validation and preview update
• File Explorer Integration - Mark files/folders as nodes, preview and share graphs
• Node Operations - Copy, paste, cut, move up/down with custom preview menu
• Copy Code Context - Copy relative file paths, line ranges, and selected snippets for quick sharing
• Cross-platform compatibility

🎯 Use Cases

• Debug Complex Logic - Visualize execution flow with automatic location tracking
• Code Review - Share execution paths with team via export/import
• Documentation - Capture execution flows with structured text export
• Learning - Understand complex codebases with interactive navigation
• Refactoring - Track code changes with intelligent location updates
• Multiple Scenarios - Use tree forks to explore different execution paths