为什么你的Diff还这么吵Whiteboard语义Diff查看器Rust AST差异与WASM插件原理【免费下载链接】whiteboardopen-source canvas for thoughtful software design项目地址: https://gitcode.com/gh_mirrors/whiteboard36/whiteboard你的每次提交都在刷屏成百上千行的红绿交错里真正重要的改动可能只有二十行。Whiteboard 是一款开源的深思熟虑的软件设计画布open-source canvas for thoughtful software design它内置了一个用Rust 编写的语义 Diff 查看器不再按行比对而是基于 AST抽象语法树理解代码结构把测试、文档、样板改动折叠起来把大段新增函数概括成伪代码。更妙的是这套行为完全可以通过WASM 插件系统自定义——本文带你读懂它的原理与上手方法。一、先认识 Whiteboard人机共用的设计画布Whiteboard 是一个桌面应用让你和 Claude Code、Codex 等编码智能体在同一个工作区里协作设计软件。智能体通过 SDK 在应用内的画布上画图——时序图、实体关系图、软件拓扑图——描述它的工作成果。它的核心理念在 README.md 中写得很清楚Diagrams that lead to code点击画布上的任何可视化元素可以直接跳转到底层代码。而解决Diff 太吵这一痛点的答案就在 README.md 的Semantic diff viewer一节原始 diff 视图往往噪音很大所以我们用 Rust 写了一个语义的、AST 感知的 diff 查看器让你只看与自身相关的代码改动。二、为什么传统行级 Diff 如此吵闹传统git diff的工作方式很简单逐行对比文本。这带来三个经典问题问题具体表现后果噪音淹没信号一次重命名/格式化波及几百行真正的逻辑改动被淹没改动被拆碎同一函数的修改散落在文件各处无法判断改了什么语义无关内容刷屏单测、注释、文档全量高亮评审注意力被稀释评审一个分支时你最关心的其实只有一句话这次改动的行为是什么行级 diff 回答不了这个问题而 AST 语义 diff 可以——它先读懂代码结构再比较结构节点函数、类型、语句块而不是字符。三、原理拆解Rust 编写的 diffr 引擎3.1 独立的 Rust 二进制diffrWhiteboard 没有把语义 diff 塞进前端而是让一个名为diffr的Rust 可执行文件独立负责全部解析工作。桌面端只是以子进程方式启动它这一点在 structural-diff.ts 中一目了然优先使用随应用打包的bin/diffrWindows 为diffr.exe也支持通过环境变量REVIEW_DIFFR_BINARY指向自定义构建启动失败时会给出清晰的诊断信息而不是静默降级3.2 NDJSON 流式协议大仓库也能渐进出结果diffr与桌面端之间通过NDJSON每行一个 JSON 事件通信核心逻辑见 structural-diff.ts--repo 路径 --format ndjson --stream-annotations base head -- file1 file2 ...事件流按序包含四类start—— 本次比较涉及哪些文件file—— 某个文件的结构化 diff 结果边算边发annotations—— 注释/摘要等增强信息complete—— 收尾汇报失败数与是否中止前端对每一行做严格校验协议解码见 structural-diff.ts单条记录超过 64 MiB 或出现乱序事件都会直接抛错保证宁可报错不渲染脏数据。3.3 并发复用同一比较只算一次多个视图覆盖率统计、编辑器渲染可能同时订阅同一个比较。structural-comparisons.ts 中的StructuralComparisons用引用计数 事件重放的方式让所有消费者共享一次计算并最多保留两个空闲比较结果兼顾内存与响应速度。3.4 合理的默认行为Whiteboard 为语义 diff 内置了一组降噪默认值大型新增函数 → 概括为伪代码一眼看懂意图无需逐行阅读单元测试与文档改动 → 折叠/隐藏评审时默认不出现在视野中 所有行为均可通过插件与配置重新定义四、WASM 插件系统让 Diff 按你的习惯消音4.1 插件配置一份 TOML 说了算diffr的可定制性来自它内建的WASM 插件系统。应用会把设置写入标准的 TOML 配置文件写入逻辑见 diffr-config.tsplugins.order [bundled.summarize] plugins.bundled.summarize.enabled true这意味着插件以 WASM 模块形式加载进diffr在 AST 处理管线中执行——既保证了跨平台一致行为又让扩展逻辑与宿主隔离、沙箱化运行。4.2 内置的summarize插件AI 伪代码摘要最典型的内置插件是bundled.summarize当一段新增代码大到人类难以速读时插件调用你配置的模型服务把它压缩成一段伪代码摘要。在 diffr-config.ts 中可以看到桌面端会读取diffr提供的配置 schema动态生成设置页里的provider模型服务商与默认模型endpoint / API key也支持从环境变量读取密钥system_prompt摘要提示词留空则用内置默认tests是否对测试代码同样摘要而 diffr-config.ts 的保存流程还做了两个工程细节更换服务商时先清空旧密钥再写入新地址避免密钥错配到别的供应商每次写入后主动失效缓存的比较结果保证新配置立即生效。4.3 应用内的可视化配置这些能力在设置页有完整 UI对应 diffr-config-section.tsx。配置完成后桌面端还会提供一个摘要测试用一份样例 Rust 文件跑一次真实摘要确认密钥、模型与网络都正常实现见 diffr-config.ts。五、新手上手指南3 步用上语义 Diff下载并打开 Whiteboard—— 支持 macOS / Windows / LinuxMIT 协议开源直接运行在你本地的代码检出上连接你的智能体—— 在欢迎页选择 Claude Code、Codex 等让智能体评审你的分支—— 例如请对比我当前分支与最新的 main把结果在 Whiteboard 中打开。打开结果后你看到的就是经过 AST 语义过滤的 diff大函数是摘要测试是折叠的而真正的逻辑改动被清晰地呈现出来。六、源码导读去哪里看更清楚想深入原理按这条路线读源码最顺想了解的入口文件整体理念与默认行为README.md启动diffr与流式事件循环structural-diff.ts比较结果的并发复用structural-comparisons.ts插件配置与 AI 摘要设置diffr-config.ts流协议的校验解码structural-diff.ts桌面端设置页 UIdiffr-config-section.tsx七、总结把看 Diff变成读意图Whiteboard 的语义 Diff 查看器给出了一套值得借鉴的组合拳⚙️Rust AST独立高性能引擎按语法结构而非文本行比较NDJSON 流式协议大仓库渐进渲染协议严格校验WASM 插件系统摘要、折叠、降噪策略全部可插拔、可配置AI 伪代码摘要大函数压缩成意图测试文档默认隐身当 AI 智能体生成代码的体量越来越大行级 diff只会越来越吵。用结构理解改动、用插件定义降噪规则——这正是 Whiteboard 想让你获得的评审体验。【免费下载链接】whiteboardopen-source canvas for thoughtful software design项目地址: https://gitcode.com/gh_mirrors/whiteboard36/whiteboard创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考