Code Structure Visualizer

基于 Excalidraw 的代码结构可视化工具，用于展示代码中的结构体/类及其关系。

功能特性

• 结构体容器：可视化展示结构体/类的字段、方法和描述信息
• 三视图切换：每个结构体支持 Info（描述）、Fields（字段）、Methods（方法）三种视图
• 流动连线动画：支持直线、曲线、正交三种连线样式，带有流动动画效果
• 属性面板：选中结构体后可调整颜色、字号、连线样式
• JSON 导入：支持从分析工具导入结构体定义
• 拖拽交互：支持拖拽移动、缩放画布

技术栈

• React 18 + TypeScript
• Vite
• @excalidraw/excalidraw
• Canvas API

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

使用说明

添加结构体

点击工具栏的 Add Struct 按钮，在画布中央创建一个新的结构体容器。

编辑结构体

1. 点击结构体选中它
2. 双击标题栏可编辑结构体名称
3. 使用底部导航栏切换 Info / Fields / Methods 视图
4. 在各视图中双击可编辑内容

创建连线

1. 按 C 键或点击 Connect 按钮进入连线模式
2. 点击第一个结构体（显示"起点"标签）
3. 点击第二个结构体
4. 连线自动创建，退出连线模式

按 Escape 可取消连线模式。

属性面板

选中结构体后，左侧属性面板可调整：

• Color：6 种预设颜色 + 自定义颜色
• Font Size：S / M / L 三种字号
• Line Style：Straight（直线）/ Curve（曲线）/ Orthogonal（正交）

键盘快捷键

按键	功能
C	进入/退出连线模式
Escape	退出连线模式

导入 JSON 格式

支持从代码分析工具导入结构体定义：

{
  "structs": [
    {
      "name": "UserService",
      "fields": [
        { "name": "db", "type": "*Database", "description": "数据库连接" }
      ],
      "methods": [
        { "name": "GetUser", "params": "id: int", "returnType": "User", "description": "获取用户" }
      ],
      "description": "用户服务，处理用户相关业务逻辑",
      "descriptionTitle": "概述"
    }
  ],
  "connections": [
    { "from": "UserService", "to": "Database" }
  ]
}

架构说明

采用三层复合架构：

1. Excalidraw Canvas（底层）：提供画布基础功能
2. Struct Box Overlay（中层）：React 组件叠加层
3. Animation Canvas（顶层）：Canvas 动画层，绘制流动连线

License

MIT