展示 HN:Onboard-CLI,一个基于 LLM 和 AST 的工具,用于可视化代码库
Untitled.design.1.1.mp4 开发者平台,提供代码解析、系统概况和基于画布的节点可视化。Onboard-CLI 是一个先进的命令行界面工具和基于 web 的可视化工具,旨在帮助开发人员快速理解和绘制大型、复杂的代码库。通过利用 Tree-sitter 进行 AST(抽象语法树)解析,Onboard-CLI 生成结构拓扑图并强制执行架构边界,通过直观的 React Flow 画布展示出来。🌟 主要特点 - AST 切片引擎:使用 tree-sitter 进行深入的代码解析,以跨多种语言(Go、JS、TS、Python、Java)生成准确的结构节点。 - 互动可视化工具(地图):自动启动本地 React Flow 画布(http://localhost:3000/app),以可视化方式探索指定半径内的代码路径、依赖关系和拓扑图。 - 架构漂移检测(漂移):分析代码库与 architecture.yml 规则的符合程度,检测未经授权的跨文件导入和边界违规,确保长期代码健康。 - 综合生态系统:内置配置管理、影响分析、代码导出、所有者跟踪和项目脉动的命令。 - 现代技术栈:用 Go 编写的超快 CLI,配合采用 Vite、React 19、@xyflow/react(React Flow)、Framer Motion 和 Tailwind CSS 的丰富前端。 📊 统计与能力 - 语言支持:5+ 内置解析器(Go、TypeScript、JavaScript、Python、Java)。 - 可视化半径:可配置的深度映射(默认半径:1,可扩展至复杂依赖树)。 - 规则执行:针对成千上万文件的架构漂移进行亚秒级边界正则评估。 - 前端性能:为大型节点集优化的画布渲染,由 Vite 和 SWC/Oxc 检查提供支持。 🚀 安装 您可以使用提供的安装脚本安装 Onboard-CLI: - macOS / Linux curl -fsSL https://raw.githubusercontent.com/onboard-cli/install.sh | bash (或直接从库运行 ./install.sh)。 - Windows Invoke-WebRequest - Uri https://raw.githubusercontent.com/onboard-cli/install.ps1 - OutFile install.ps1; .\install.ps1 💻 使用 1. 初始化项目 生成必要的 .onboard onboard init 对于 CI/CD 用户,使用以下命令生成必要的配置和 architecture.yaml 文件 onboard init --template clean-architecture (可用模板:generic,clean-architecture,modular-monolith,mvc,serverless) 2. 映射代码库(可视化工具) 启动上下文引擎以映射符号或文件路径,并启动可视化服务器。 onboard map --target "internal/parser" --radius 2 👉 点击提供的链接(http://localhost:3000/app)查看交互式画布。按 Ctrl+P 使用模糊查找器!从右上方切换暗模式和紧凑模式。 3. 提取后端路由 自动将后端 API 路由映射到其在各种框架(Express、Gin、FastAPI、Spring)中的确切文件和行处理程序位置。 onboard routes --protocol rest --framework express 4. 检测架构漂移 检查与您定义的架构规则的违规行为。 onboard drift --rules architecture.yml 5. CI/CD 集成 将 onboard drift 集成到您的 GitHub Actions 工作流中,以在每个 Pull Request 上执行架构边界。 查看 docs/onboard-action.yml 中的模板。 6. 其他命令 onboard impact:分析提议的代码更改的影响。 onboard owners:跟踪代码所有权和维护者。 onboard export:导出图形/AST 数据。 onboard pulse:快速获取代码库健康和最近活动的总结。 (注意:您可以将 --no-update-check 全局标志传递给任何命令,以禁用自动异步版本检查)。 🛠️ 技术栈 - CLI 引擎:Go、Cobra、Go-Tree-Sitter、YAML。 - Web UI:React 19、TypeScript、Vite、@xyflow/react(React Flow)、Tailwind CSS、Framer Motion、Lucide React。 - 代码高亮和 Markdown:Shiki、MDX、Rehype。 🤝 贡献 我们欢迎贡献!请查看 cmd 和 internal 目录以获取 CLI 逻辑,查看 ui 目录以获取 React 前端。在提交 Pull Request 之前请阅读我们的贡献指南和 AI 使用政策。 - Fork 仓库 - 创建特性分支(git checkout -b feature/amazing-feature) - 提交更改(git commit -m '添加一些惊人的特性') - 推送到分支(git push origin feature/amazing-feature) - 打开 Pull Request 📝 许可证 根据 MIT 许可证发行。有关更多信息,请参见 LICENSE。
本站免费、广告极少。如果觉得有帮助,可以请我们喝杯咖啡 —— 任何金额都对持续运营有实际帮助。
☕请我喝杯咖啡