code-architect

v1.1.2

Published

a month ago

自动将源码转换为交互式架构图的可视化工具

0High
0Medium
0Low

shijinghao

code-visualization architecture-diagram code-analysis react typescript cytoscape 代码可视化架构图

Code Architect 🎨

自动将源码转换为交互式架构图的可视化工具

功能特性 • 快速开始 • 使用指南 • 技术栈 • 贡献

✨ 功能特性

🎯 智能代码分析 - 自动识别类、函数、组件、接口等代码结构
🔗 依赖关系可视化 - 清晰展示模块间的导入导出关系
🎨 多种布局算法 - 支持 Dagre、Cola、Circle、Grid 等多种布局
⚡ 实时交互 - 点击、缩放、拖拽，流畅的交互体验
📊 多语言支持 - 支持 JavaScript、TypeScript、JSX、TSX
🎭 赛博朋克风格 - 独特的视觉设计，炫酷的动画效果
📤 导出功能 - 支持导出为 SVG、PNG 等格式（开发中）
🔍 代码洞察 - 显示代码复杂度、行数等元数据

🚀 快速开始

方法 1：直接运行（推荐）⚡

最简单的方式，一条命令即可启动：

# 全局安装
npm install -g code-architect

# 运行（自动打开浏览器）
code-architect

就这么简单！浏览器会自动打开 http://localhost:3000

方法 2：作为 npm 包使用 📦

在你的 React 项目中使用 Code Architect 组件：

# 安装
npm install code-architect

# 在你的项目中使用

import { GraphCanvas, Sidebar, Toolbar } from 'code-architect';
import 'code-architect/dist/style.css';

function App() {
  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      <Sidebar />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <Toolbar />
        <GraphCanvas />
      </div>
    </div>
  );
}

方法 3：从源码运行 🛠️

# 克隆仓库
git clone https://github.com/shijinghao/code-architect.git

# 进入项目目录
cd code-architect

# 安装依赖
npm install

# 启动开发服务器
npm run dev

访问 http://localhost:3000 即可使用！

📖 使用指南

1. 输入代码

有三种方式输入代码：

直接粘贴 - 在左侧文本框中粘贴你的代码
上传文件 - 点击"上传文件"按钮选择 .js、.jsx、.ts、.tsx 文件
加载示例 - 点击"加载示例"查看演示效果

2. 分析代码

点击"分析代码"按钮，工具会自动：

解析代码的 AST（抽象语法树）
识别类、函数、组件、接口等结构
分析模块间的依赖关系
生成可视化图表

3. 探索架构

切换布局 - 使用顶部工具栏切换不同的布局算法
交互操作 - 点击节点查看详情，拖拽调整位置
缩放视图 - 使用鼠标滚轮缩放，拖拽画布移动
导出图片 - 点击导出按钮保存架构图（开发中）

4. 理解图例

🔴 红色（文件） - 源代码文件
🟡 黄色（类） - 类定义
🟢 绿色（函数） - 函数声明
🔵 蓝色（组件） - React 组件
🟣 紫色（接口） - TypeScript 接口

🛠️ 技术栈

前端框架

React 18 - 用户界面库
TypeScript - 类型安全的 JavaScript
Vite - 下一代前端构建工具

可视化

Cytoscape.js - 图形可视化库
Dagre - 层次布局算法
Cola - 力导向布局算法

代码分析

@babel/parser - JavaScript/TypeScript 解析器
@babel/traverse - AST 遍历工具
@babel/types - AST 节点类型定义

状态管理

Zustand - 轻量级状态管理

UI/UX

Framer Motion - 动画库
Lucide React - 图标库
自定义 CSS - 赛博朋克风格设计

📁 项目结构

code-architect/
├── src/
│   ├── components/          # React 组件
│   │   ├── Sidebar.tsx      # 侧边栏（代码输入）
│   │   ├── Toolbar.tsx      # 工具栏（布局切换）
│   │   └── GraphCanvas.tsx  # 图形画布
│   ├── store/               # 状态管理
│   │   └── appStore.ts      # 应用状态
│   ├── utils/               # 工具函数
│   │   └── codeAnalyzer.ts  # 代码分析器
│   ├── App.tsx              # 主应用组件
│   ├── main.tsx             # 应用入口
│   └── index.css            # 全局样式
├── index.html               # HTML 模板
├── package.json             # 项目配置
├── tsconfig.json            # TypeScript 配置
├── vite.config.ts           # Vite 配置
└── README.md                # 项目文档

🎯 核心功能实现

代码解析

使用 Babel 解析器将代码转换为 AST，然后遍历 AST 提取结构信息：

const ast = parser.parse(code, {
  sourceType: 'module',
  plugins: ['typescript', 'jsx', 'decorators-legacy'],
});

traverse(ast, {
  ClassDeclaration: (path) => {
    // 提取类信息
  },
  FunctionDeclaration: (path) => {
    // 提取函数信息
  },
  // ... 更多节点类型
});

图形渲染

使用 Cytoscape.js 渲染交互式图形：

cytoscape({
  container: containerRef.current,
  elements: [...nodes, ...edges],
  style: [...nodeStyles, ...edgeStyles],
  layout: { name: 'dagre' },
});

🎨 设计理念

视觉风格

赛博朋克主题 - 使用霓虹色彩和未来感设计
独特字体 - JetBrains Mono 等编程字体
流畅动画 - 使用 CSS 动画和 Framer Motion
深色模式 - 护眼的深色配色方案

用户体验

直观操作 - 简单的三步流程：输入 → 分析 → 探索
即时反馈 - 实时显示分析进度和结果
响应式设计 - 适配不同屏幕尺寸
性能优化 - 流畅处理大型代码库

🔮 未来计划

[ ] 支持更多编程语言（Python、Java、Go 等）
[ ] AI 辅助代码理解和注释生成
[ ] 代码质量分析和建议
[ ] 3D 可视化模式
[ ] 实时协作功能
[ ] VS Code 插件
[ ] 命令行工具
[ ] 云端保存和分享
[ ] 自定义主题和样式
[ ] 导出为 Mermaid、PlantUML 等格式

🤝 贡献

欢迎贡献代码、报告问题或提出建议！

Fork 本仓库
创建特性分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
开启 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

🙏 致谢

Cytoscape.js - 强大的图形可视化库
Babel - JavaScript 编译器
React - 用户界面库
Vite - 构建工具

📧 联系方式

项目主页: https://github.com/yourusername/code-architect
问题反馈: Issues

Made with ❤️ by Code Architect Team

⭐ 如果这个项目对你有帮助，请给个 Star！