基于 Excalidraw 的代码结构可视化工具，支持自定义结构体容器组件和动态连线流动动画效果。
- React 18 + TypeScript
- Vite（构建工具）
- @excalidraw/excalidraw（核心画布库）
- Canvas API（动画层）
- 将 CLAUDE.md 改为中文编写
- 所有项目文档统一使用中文
完成功能：
- 三层复合架构：Excalidraw 画布 → 结构体叠加层 → 动画 Canvas 层
- 结构体容器组件（三视图切换：描述、字段、方法）
- 流动连线动画效果（直线、曲线、正交三种样式）
- 属性面板（颜色、字号、线条样式）
- 键盘快捷键（C 进入连线模式，Escape 退出）
- JSON 导入功能
重大决策：
- 透明底层矩形：底层 Excalidraw 矩形设为透明，所有视觉效果由叠加组件提供，避免选中时出现双框问题
- 固定宽度设计：结构体宽度固定为 280px，放弃自适应宽度方案
- 连线模式改进：从"先选中再连线"改为"进入模式后依次选择两个元素"，更自然
- 方法签名左对齐：解决长内容居中导致两侧都被截断的问题
| 日期 | 决策 | 原因 |
|---|---|---|
| 2025-01-20 | 底层矩形透明化 | 解决选中时双框显示问题 |
| 2025-01-20 | 固定宽度 280px | 自适应宽度导致与 Excalidraw 选择框不同步 |
| 2025-01-20 | 连线模式两步选择 | 更符合用户操作直觉 |
- 跨设备开发工作流搭建
- 添加 README 文档
- 更多结构体样式支持
- 导出功能
此文档用于在多台设备之间同步开发进度。每次重要操作后会更新此文档，然后推送到 GitHub。
推送更新（当前设备）：
- 告诉 Claude Code "推送" 或 "sync"
- 会自动提交更改并推送到 GitHub
在另一台设备继续开发：
git pull拉取最新代码- 告诉 Claude Code "继续开发" 或 "读取进度"
- Claude Code 会读取 progress.md 了解之前的进度