xkcoding/dag-visualization

DAG Visualizer 是一个专业级的有向无环图（DAG）工作流可视化Chrome扩展，采用现代化的React技术栈构建。项目专注于为开发者、数据分析师和工作流设计师提供直观、高效、专业的DAG可视化体验。

🎯 DAG Visualizer

专业的工作流可视化工具 - 基于React + ReactFlow的Chrome扩展

📖 项目简介

DAG Visualizer 是一个专业级的有向无环图（DAG）工作流可视化Chrome扩展，采用现代化的React技术栈构建。项目专注于为开发者、数据分析师和工作流设计师提供直观、高效、专业的DAG可视化体验。

🎯 设计理念

• 专业工具体验 - Fe-Helper级别的专业用户界面
• 智能化处理 - 自研智能布局算法，自动优化连线布局
• 现代化技术 - React 18 + ReactFlow 11 + Monaco Editor
• 用户体验优先 - 每个细节都经过精心打磨

✨ 核心特性

🧠 智能布局系统

• 自动连线优化 - 智能检测和避免连线穿越问题
• 层级感知布局 - 基于拓扑排序的智能节点分层
• 多种布局模式 - 支持纵向/横向布局切换
• 智能对齐 - 网格对齐、边缘对齐、中心对齐

🎨 专业编辑体验

• Monaco Editor集成 - VS Code级别的JSON编辑体验，完全本地化
• 离线编辑器 - Monaco Editor 0.52.2本地资源，无CDN依赖
• 实时语法验证 - JSON格式检查和错误提示
• 智能节点创建 - 右键创建，支持4种预设类型 + 自定义类型
• 可视化编辑 - 双击编辑节点属性，拖拽调整布局

🎛️ 强大的功能集

• 多格式导出 - PNG/JPG/SVG高质量图片导出
• 节点颜色管理 - 批量颜色控制 + localStorage持久化
• 连线删除 - 支持单个和批量连线删除
• 画布操作 - 缩放、平移、小地图导航

🔧 便捷的数据输入

• 多种输入方式 - 手动输入、剪贴板粘贴、文件上传
• 示例数据 - 内置工作流示例，快速上手
• 格式化工具 - 一键JSON格式化和验证
• 历史管理 - 操作历史和文件历史

🏗️ 技术架构

💻 技术栈

Frontend Framework: React 18 + TypeScript 5.3
Visualization Engine: ReactFlow 11.11.4
Code Editor: Monaco Editor (@monaco-editor/react)
Extension Platform: Chrome Extension Manifest V3
Build System: Vite 7.0 + ESLint
State Management: React Context + useReducer
Storage: localStorage + Chrome Storage API
Styling: CSS Grid + Flexbox + Modern Design System

🏛️ 项目结构

dag_visualization/
├── 📁 memory-bank/                    # 项目文档和知识库
│   ├── 📄 tasks.md                   # 任务管理
│   ├── 📄 progress.md                # 进度跟踪
│   ├── 📁 archive/                   # 阶段归档
│   ├── 📁 creative/                  # 创意设计
│   └── 📁 reflection/                # 反思总结
├── 📁 dag-visualizer-extension/       # Chrome扩展主体
│   ├── 📁 public/                    # 静态资源
│   │   ├── manifest.json            # Extension配置
│   │   ├── background.js             # Service Worker
│   │   └── *.png                     # 图标资源
│   ├── 📁 src/                       # React应用源码
│   │   ├── 📁 components/            # UI组件库
│   │   │   ├── DAGVisualizer.tsx    # 主可视化组件
│   │   │   ├── JSONInputArea.tsx    # Monaco编辑器
│   │   │   ├── NodeCreationDialog.tsx # 节点创建
│   │   │   └── ...                  # 其他组件
│   │   ├── 📁 context/               # 状态管理
│   │   ├── 📁 utils/                 # 工具函数
│   │   │   ├── layoutUtils.ts       # 智能布局算法
│   │   │   ├── nodeTypeManager.ts   # 节点管理
│   │   │   └── ...                  # 其他工具
│   │   ├── 📁 types/                 # TypeScript类型
│   │   └── 📁 styles/                # 样式系统
│   └── 📁 dist/                      # 构建输出
└── 📄 *.json                         # 测试数据文件

🧠 核心算法

智能布局算法 (自主研发)

/**
 * 智能布局系统 - 自动优化DAG连线布局
 * 
 * 特性：
 * - 层级感知：基于拓扑排序计算节点层级
 * - 穿越检测：几何算法精确识别连线穿越
 * - 智能绕行：动态计算最优绕行路径
 * - 用户友好：保持直接连线的直观性
 */
function calculateSmartLayout(nodes, edges) {
  const levels = calculateNodeLevels(nodes, edges);
  const crossings = detectEdgeCrossings(nodes, edges, levels);
  
  return crossings.length > 0 
    ? optimizeLayoutForEdgeCrossings(nodes, edges, crossings)
    : nodes;
}

🚀 快速开始

📦 安装与运行

1. 克隆项目

git clone https://github.com/xkcoding/dag-visualization.git
cd dag-visualization/dag-visualizer-extension

2. 安装依赖

npm install

3. 开发模式

npm run dev
# 访问 http://localhost:5173

4. 构建扩展

npm run build
# 输出到 dist/ 目录

🔧 Chrome扩展安装

1. 打开Chrome扩展管理页面

   chrome://extensions/
   

2. 启用开发者模式

   • 点击右上角"开发者模式"开关

3. 加载扩展

   • 点击"加载已解压的扩展程序"
   • 选择 dag-visualizer-extension/dist 目录

4. 使用扩展

   • 点击扩展图标或使用快捷键打开

📊 使用指南

🎯 基本流程

1. 输入JSON数据

   • 手动输入：在左侧Monaco编辑器中输入工作流JSON
   • 文件导入：点击"📁 文件"按钮选择JSON文件
   • 示例数据：点击"加载示例数据"快速体验

2. 查看可视化效果

   • 自动生成：输入有效JSON后自动渲染DAG图
   • 智能布局：点击"智能布局"优化节点排列
   • 交互操作：缩放、平移、节点拖拽

3. 编辑和优化

   • 创建节点：右键空白处创建新节点
   • 编辑节点：双击节点编辑属性
   • 删除连线：选中连线按Delete键删除
   • 颜色管理：批量调整同类型节点颜色

4. 导出和分享

   • 图片导出：Ctrl+E或点击导出按钮
   • JSON导出：点击"导出配置"保存工作流
   • 格式选择：PNG/JPG/SVG多种格式

📝 JSON格式规范

{
  "nodes": [
    {
      "taskId": "START_NODE",        // 节点唯一标识
      "taskType": "PROMPT_BUILD",    // 节点类型
      "dependencies": []             // 依赖的前置节点
    },
    {
      "taskId": "API_CALL",
      "taskType": "CALL_LLM", 
      "dependencies": ["START_NODE"]
    },
    {
      "taskId": "END_NODE",
      "taskType": "RESULT_OUTPUT",
      "dependencies": ["API_CALL"]
    }
  ]
}

🎨 预设节点类型

类型	图标	说明	默认颜色
PROMPT_BUILD	🔧	提示词构建	绿色
CALL_LLM	🤖	LLM调用	蓝色
HTTP_REQUEST	🌐	HTTP请求	橙色
CODE_EXEC	💻	代码执行	紫色
CUSTOM	⚙️	自定义类型	灰色

📦 版本发布

🎉 最新版本: v2.7.0 (2025-08-01)

🌟 主要新功能

• 🔧 Monaco Editor完全本地化

  • 内置Monaco Editor 0.52.2完整资源（约1.8MB）
  • 解决Chrome扩展无法加载外部CDN的问题
  • 支持完全离线使用，无需网络连接
  • 包含所有语言包和Worker文件

• 📱 响应式布局全面优化

  • 三级响应式设计：大屏幕/中等屏幕/小屏幕
  • 解决空状态卡片与工具栏重叠问题
  • PC端空状态内容完全在一屏内显示
  • 空间压缩50%，节省约180px高度

• 🎨 视觉设计改进

  • 扁平化设计，移除阴影效果
  • 页脚紧凑化为单行水平布局
  • 字体系统优化（32px到10px缩放）
  • 20px统一圆角设计

📊 版本对比

特性	v2.6.0	v2.7.0
Monaco Editor	CDN加载	本地资源
包大小	~156KB	~3.3MB
离线支持	❌	✅
响应式布局	基础	三级优化
加载速度	依赖网络	本地秒开

🔗 下载链接

• DAG-Visualizer-v2.7.0-20250801.zip (3.3MB)
• DAG-Visualizer-v1.0.0-20250730.zip (134KB)

🎖️ 项目里程碑

✅ 第一阶段 - React应用框架搭建 (已完成)

• Chrome Extension基础架构
• React + ReactFlow技术栈集成
• Fe-Helper风格UI实现
• 核心功能验证
• 用户验收测试通过

✅ 第二阶段 - 核心功能开发 (已完成)

• Phase 2.1 - Monaco Editor专业编辑器集成
• Phase 2.2 - 智能节点创建和可视化编辑
• Phase 2.3 - 图片导出功能(PNG/JPG/SVG)
• Phase 2.4 - 智能布局增强(拓扑排序+自动对齐)
• Phase 2.5 - 智能布局连线重叠优化
• Phase 2.6 - 节点颜色管理系统
• Phase 2.7 - 用户界面体验优化
• Phase 2.8 - Monaco Editor本地化 + 响应式布局优化 (v2.7.0)

🎯 第三阶段 - 功能完善和优化 (规划中)

• 性能优化 - 大型DAG支持和Web Worker
• 导出功能完善 - 更多格式和批量处理
• ELKjs技术评估 - 布局引擎迁移
• 用户偏好系统 - 个性化设置和历史管理

📈 性能指标

指标	目标值	当前值	状态
构建时间	< 2秒	~1秒	✅
启动时间	< 3秒	~2秒	✅
节点创建响应	< 300ms	~200ms	✅
布局计算时间	< 1秒	~500ms	✅
支持节点数	1000+	100+	🔄
内存稳定性	无泄漏	稳定	✅

🛠️ 开发指南

🔧 本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 类型检查
npm run type-check

# 代码格式化
npm run format

# 构建项目
npm run build

📋 代码规范

• TypeScript: 100% 类型安全覆盖
• ESLint: 严格的代码规范检查
• Prettier: 统一的代码格式化
• 组件化: React最佳实践
• 文档化: 详细的注释和文档

🧪 测试策略

• 手动测试: 核心功能完整验证
• 用户测试: 真实场景使用验证
• 兼容性测试: Chrome浏览器多版本测试
• 性能测试: 响应时间和内存使用监控

🤝 贡献指南

📝 如何贡献

1. Fork项目 - 点击右上角Fork按钮
2. 创建分支 - git checkout -b feature/amazing-feature
3. 提交更改 - git commit -m 'Add amazing feature'
4. 推送分支 - git push origin feature/amazing-feature
5. 提交PR - 创建Pull Request

🐛 问题反馈

• Bug报告: 请使用Issue模板详细描述问题
• 功能建议: 欢迎提出新功能想法
• 文档改进: 帮助改善项目文档

🏆 贡献者

感谢所有为项目做出贡献的开发者！

📄 许可证

本项目采用 MIT许可证。

👥 团队信息

• 创作者: 柏玄 (@xkcoding)
• 开发工具: Cursor AI
• 技术栈: React + ReactFlow + TypeScript
• 设计理念: 专业工具 + 用户体验

🔗 相关链接

• 📚 项目文档
• 🎨 设计文档
• 🤔 开发反思
• 📁 阶段归档
• 📊 技术架构

🌟 致谢

特别感谢：

• ReactFlow - 专业的图形可视化库
• Monaco Editor - VS Code级编辑器
• React - 现代化前端框架
• Vite - 快速构建工具

---

🎉 第二阶段完成，用户满意度 95%+ ！

⚡ DAG Visualizer - 让工作流可视化更简单

🚀 专业的工作流可视化工具，让复杂的DAG变得简单直观