{"id":30184566,"url":"https://github.com/xkcoding/dag-visualization","last_synced_at":"2025-08-12T12:40:58.303Z","repository":{"id":307545631,"uuid":"1029712720","full_name":"xkcoding/dag-visualization","owner":"xkcoding","description":"DAG Visualizer 是一个专业级的有向无环图（DAG）工作流可视化Chrome扩展，采用现代化的React技术栈构建。项目专注于为开发者、数据分析师和工作流设计师提供直观、高效、专业的DAG可视化体验。","archived":false,"fork":false,"pushed_at":"2025-07-31T18:51:55.000Z","size":8533,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-31T21:58:54.949Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xkcoding.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-31T13:05:49.000Z","updated_at":"2025-07-31T18:52:01.000Z","dependencies_parsed_at":"2025-07-31T22:15:33.012Z","dependency_job_id":null,"html_url":"https://github.com/xkcoding/dag-visualization","commit_stats":null,"previous_names":["xkcoding/dag-visualization"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/xkcoding/dag-visualization","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xkcoding%2Fdag-visualization","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xkcoding%2Fdag-visualization/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xkcoding%2Fdag-visualization/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xkcoding%2Fdag-visualization/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xkcoding","download_url":"https://codeload.github.com/xkcoding/dag-visualization/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xkcoding%2Fdag-visualization/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270063518,"owners_count":24520790,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-12T12:40:41.292Z","updated_at":"2025-08-12T12:40:58.269Z","avatar_url":"https://github.com/xkcoding.png","language":"TypeScript","readme":"# 🎯 DAG Visualizer\n\n\u003e **专业的工作流可视化工具** - 基于React + ReactFlow的Chrome扩展\n\n[![Chrome Extension](https://img.shields.io/badge/Chrome-Extension-blue.svg)](https://github.com/xkcoding/dag-visualization)\n[![React](https://img.shields.io/badge/React-18.x-blue.svg)](https://reactjs.org/)\n[![ReactFlow](https://img.shields.io/badge/ReactFlow-11.x-orange.svg)](https://reactflow.dev/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue.svg)](https://www.typescriptlang.org/)\n[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)\n\n![DAG Visualizer](https://img.shields.io/badge/Status-Production%20Ready-brightgreen)\n![Phase](https://img.shields.io/badge/Phase-2%20Complete-success)\n![Quality](https://img.shields.io/badge/Quality-Professional-gold)\n\n## 📖 项目简介\n\nDAG Visualizer 是一个专业级的有向无环图（DAG）工作流可视化Chrome扩展，采用现代化的React技术栈构建。项目专注于为开发者、数据分析师和工作流设计师提供直观、高效、专业的DAG可视化体验。\n\n### 🎯 **设计理念**\n- **专业工具体验** - Fe-Helper级别的专业用户界面\n- **智能化处理** - 自研智能布局算法，自动优化连线布局\n- **现代化技术** - React 18 + ReactFlow 11 + Monaco Editor\n- **用户体验优先** - 每个细节都经过精心打磨\n\n## ✨ 核心特性\n\n### 🧠 **智能布局系统**\n- **自动连线优化** - 智能检测和避免连线穿越问题\n- **层级感知布局** - 基于拓扑排序的智能节点分层\n- **多种布局模式** - 支持纵向/横向布局切换\n- **智能对齐** - 网格对齐、边缘对齐、中心对齐\n\n### 🎨 **专业编辑体验**\n- **Monaco Editor集成** - VS Code级别的JSON编辑体验，完全本地化\n- **离线编辑器** - Monaco Editor 0.52.2本地资源，无CDN依赖\n- **实时语法验证** - JSON格式检查和错误提示\n- **智能节点创建** - 右键创建，支持4种预设类型 + 自定义类型\n- **可视化编辑** - 双击编辑节点属性，拖拽调整布局\n\n### 🎛️ **强大的功能集**\n- **多格式导出** - PNG/JPG/SVG高质量图片导出\n- **节点颜色管理** - 批量颜色控制 + localStorage持久化\n- **连线删除** - 支持单个和批量连线删除\n- **画布操作** - 缩放、平移、小地图导航\n\n### 🔧 **便捷的数据输入**\n- **多种输入方式** - 手动输入、剪贴板粘贴、文件上传\n- **示例数据** - 内置工作流示例，快速上手\n- **格式化工具** - 一键JSON格式化和验证\n- **历史管理** - 操作历史和文件历史\n\n## 🏗️ 技术架构\n\n### 💻 **技术栈**\n```yaml\nFrontend Framework: React 18 + TypeScript 5.3\nVisualization Engine: ReactFlow 11.11.4\nCode Editor: Monaco Editor (@monaco-editor/react)\nExtension Platform: Chrome Extension Manifest V3\nBuild System: Vite 7.0 + ESLint\nState Management: React Context + useReducer\nStorage: localStorage + Chrome Storage API\nStyling: CSS Grid + Flexbox + Modern Design System\n```\n\n### 🏛️ **项目结构**\n```\ndag_visualization/\n├── 📁 memory-bank/                    # 项目文档和知识库\n│   ├── 📄 tasks.md                   # 任务管理\n│   ├── 📄 progress.md                # 进度跟踪\n│   ├── 📁 archive/                   # 阶段归档\n│   ├── 📁 creative/                  # 创意设计\n│   └── 📁 reflection/                # 反思总结\n├── 📁 dag-visualizer-extension/       # Chrome扩展主体\n│   ├── 📁 public/                    # 静态资源\n│   │   ├── manifest.json            # Extension配置\n│   │   ├── background.js             # Service Worker\n│   │   └── *.png                     # 图标资源\n│   ├── 📁 src/                       # React应用源码\n│   │   ├── 📁 components/            # UI组件库\n│   │   │   ├── DAGVisualizer.tsx    # 主可视化组件\n│   │   │   ├── JSONInputArea.tsx    # Monaco编辑器\n│   │   │   ├── NodeCreationDialog.tsx # 节点创建\n│   │   │   └── ...                  # 其他组件\n│   │   ├── 📁 context/               # 状态管理\n│   │   ├── 📁 utils/                 # 工具函数\n│   │   │   ├── layoutUtils.ts       # 智能布局算法\n│   │   │   ├── nodeTypeManager.ts   # 节点管理\n│   │   │   └── ...                  # 其他工具\n│   │   ├── 📁 types/                 # TypeScript类型\n│   │   └── 📁 styles/                # 样式系统\n│   └── 📁 dist/                      # 构建输出\n└── 📄 *.json                         # 测试数据文件\n```\n\n### 🧠 **核心算法**\n\n#### **智能布局算法** (自主研发)\n```typescript\n/**\n * 智能布局系统 - 自动优化DAG连线布局\n * \n * 特性：\n * - 层级感知：基于拓扑排序计算节点层级\n * - 穿越检测：几何算法精确识别连线穿越\n * - 智能绕行：动态计算最优绕行路径\n * - 用户友好：保持直接连线的直观性\n */\nfunction calculateSmartLayout(nodes, edges) {\n  const levels = calculateNodeLevels(nodes, edges);\n  const crossings = detectEdgeCrossings(nodes, edges, levels);\n  \n  return crossings.length \u003e 0 \n    ? optimizeLayoutForEdgeCrossings(nodes, edges, crossings)\n    : nodes;\n}\n```\n\n## 🚀 快速开始\n\n### 📦 **安装与运行**\n\n#### 1. **克隆项目**\n```bash\ngit clone https://github.com/xkcoding/dag-visualization.git\ncd dag-visualization/dag-visualizer-extension\n```\n\n#### 2. **安装依赖**\n```bash\nnpm install\n```\n\n#### 3. **开发模式**\n```bash\nnpm run dev\n# 访问 http://localhost:5173\n```\n\n#### 4. **构建扩展**\n```bash\nnpm run build\n# 输出到 dist/ 目录\n```\n\n### 🔧 **Chrome扩展安装**\n\n1. **打开Chrome扩展管理页面**\n   ```\n   chrome://extensions/\n   ```\n\n2. **启用开发者模式**\n   - 点击右上角\"开发者模式\"开关\n\n3. **加载扩展**\n   - 点击\"加载已解压的扩展程序\"\n   - 选择 `dag-visualizer-extension/dist` 目录\n\n4. **使用扩展**\n   - 点击扩展图标或使用快捷键打开\n\n## 📊 使用指南\n\n### 🎯 **基本流程**\n\n1. **输入JSON数据**\n   - 手动输入：在左侧Monaco编辑器中输入工作流JSON\n   - 文件导入：点击\"📁 文件\"按钮选择JSON文件\n   - 示例数据：点击\"加载示例数据\"快速体验\n\n2. **查看可视化效果**\n   - 自动生成：输入有效JSON后自动渲染DAG图\n   - 智能布局：点击\"智能布局\"优化节点排列\n   - 交互操作：缩放、平移、节点拖拽\n\n3. **编辑和优化**\n   - 创建节点：右键空白处创建新节点\n   - 编辑节点：双击节点编辑属性\n   - 删除连线：选中连线按Delete键删除\n   - 颜色管理：批量调整同类型节点颜色\n\n4. **导出和分享**\n   - 图片导出：Ctrl+E或点击导出按钮\n   - JSON导出：点击\"导出配置\"保存工作流\n   - 格式选择：PNG/JPG/SVG多种格式\n\n### 📝 **JSON格式规范**\n\n```json\n{\n  \"nodes\": [\n    {\n      \"taskId\": \"START_NODE\",        // 节点唯一标识\n      \"taskType\": \"PROMPT_BUILD\",    // 节点类型\n      \"dependencies\": []             // 依赖的前置节点\n    },\n    {\n      \"taskId\": \"API_CALL\",\n      \"taskType\": \"CALL_LLM\", \n      \"dependencies\": [\"START_NODE\"]\n    },\n    {\n      \"taskId\": \"END_NODE\",\n      \"taskType\": \"RESULT_OUTPUT\",\n      \"dependencies\": [\"API_CALL\"]\n    }\n  ]\n}\n```\n\n### 🎨 **预设节点类型**\n\n| 类型 | 图标 | 说明 | 默认颜色 |\n|------|------|------|----------|\n| `PROMPT_BUILD` | 🔧 | 提示词构建 | 绿色 |\n| `CALL_LLM` | 🤖 | LLM调用 | 蓝色 |\n| `HTTP_REQUEST` | 🌐 | HTTP请求 | 橙色 |\n| `CODE_EXEC` | 💻 | 代码执行 | 紫色 |\n| `CUSTOM` | ⚙️ | 自定义类型 | 灰色 |\n\n## 📦 版本发布\n\n### 🎉 **最新版本: v2.7.0** (2025-08-01)\n\n#### 🌟 **主要新功能**\n- **🔧 Monaco Editor完全本地化**\n  - 内置Monaco Editor 0.52.2完整资源（约1.8MB）\n  - 解决Chrome扩展无法加载外部CDN的问题\n  - 支持完全离线使用，无需网络连接\n  - 包含所有语言包和Worker文件\n\n- **📱 响应式布局全面优化**\n  - 三级响应式设计：大屏幕/中等屏幕/小屏幕\n  - 解决空状态卡片与工具栏重叠问题\n  - PC端空状态内容完全在一屏内显示\n  - 空间压缩50%，节省约180px高度\n\n- **🎨 视觉设计改进**\n  - 扁平化设计，移除阴影效果\n  - 页脚紧凑化为单行水平布局\n  - 字体系统优化（32px到10px缩放）\n  - 20px统一圆角设计\n\n#### 📊 **版本对比**\n| 特性 | v2.6.0 | v2.7.0 |\n|------|--------|--------|\n| Monaco Editor | CDN加载 | 本地资源 |\n| 包大小 | ~156KB | ~3.3MB |\n| 离线支持 | ❌ | ✅ |\n| 响应式布局 | 基础 | 三级优化 |\n| 加载速度 | 依赖网络 | 本地秒开 |\n\n#### 🔗 **下载链接**\n- [DAG-Visualizer-v2.7.0-20250801.zip](./DAG-Visualizer-v2.7.0-20250801.zip) (3.3MB)\n- [DAG-Visualizer-v1.0.0-20250730.zip](./DAG-Visualizer-v1.0.0-20250730.zip) (134KB)\n\n## 🎖️ 项目里程碑\n\n### ✅ **第一阶段 - React应用框架搭建** (已完成)\n- [x] Chrome Extension基础架构\n- [x] React + ReactFlow技术栈集成\n- [x] Fe-Helper风格UI实现\n- [x] 核心功能验证\n- [x] 用户验收测试通过\n\n### ✅ **第二阶段 - 核心功能开发** (已完成)\n- [x] **Phase 2.1** - Monaco Editor专业编辑器集成\n- [x] **Phase 2.2** - 智能节点创建和可视化编辑\n- [x] **Phase 2.3** - 图片导出功能(PNG/JPG/SVG)\n- [x] **Phase 2.4** - 智能布局增强(拓扑排序+自动对齐)\n- [x] **Phase 2.5** - 智能布局连线重叠优化\n- [x] **Phase 2.6** - 节点颜色管理系统\n- [x] **Phase 2.7** - 用户界面体验优化\n- [x] **Phase 2.8** - Monaco Editor本地化 + 响应式布局优化 (v2.7.0)\n\n### 🎯 **第三阶段 - 功能完善和优化** (规划中)\n- [ ] 性能优化 - 大型DAG支持和Web Worker\n- [ ] 导出功能完善 - 更多格式和批量处理\n- [ ] ELKjs技术评估 - 布局引擎迁移\n- [ ] 用户偏好系统 - 个性化设置和历史管理\n\n## 📈 性能指标\n\n| 指标 | 目标值 | 当前值 | 状态 |\n|------|--------|--------|------|\n| 构建时间 | \u003c 2秒 | ~1秒 | ✅ |\n| 启动时间 | \u003c 3秒 | ~2秒 | ✅ |\n| 节点创建响应 | \u003c 300ms | ~200ms | ✅ |\n| 布局计算时间 | \u003c 1秒 | ~500ms | ✅ |\n| 支持节点数 | 1000+ | 100+ | 🔄 |\n| 内存稳定性 | 无泄漏 | 稳定 | ✅ |\n\n## 🛠️ 开发指南\n\n### 🔧 **本地开发**\n\n```bash\n# 安装依赖\nnpm install\n\n# 启动开发服务器\nnpm run dev\n\n# 类型检查\nnpm run type-check\n\n# 代码格式化\nnpm run format\n\n# 构建项目\nnpm run build\n```\n\n### 📋 **代码规范**\n\n- **TypeScript**: 100% 类型安全覆盖\n- **ESLint**: 严格的代码规范检查\n- **Prettier**: 统一的代码格式化\n- **组件化**: React最佳实践\n- **文档化**: 详细的注释和文档\n\n### 🧪 **测试策略**\n\n- **手动测试**: 核心功能完整验证\n- **用户测试**: 真实场景使用验证\n- **兼容性测试**: Chrome浏览器多版本测试\n- **性能测试**: 响应时间和内存使用监控\n\n## 🤝 贡献指南\n\n### 📝 **如何贡献**\n\n1. **Fork项目** - 点击右上角Fork按钮\n2. **创建分支** - `git checkout -b feature/amazing-feature`\n3. **提交更改** - `git commit -m 'Add amazing feature'`\n4. **推送分支** - `git push origin feature/amazing-feature`\n5. **提交PR** - 创建Pull Request\n\n### 🐛 **问题反馈**\n\n- **Bug报告**: 请使用Issue模板详细描述问题\n- **功能建议**: 欢迎提出新功能想法\n- **文档改进**: 帮助改善项目文档\n\n### 🏆 **贡献者**\n\n感谢所有为项目做出贡献的开发者！\n\n## 📄 许可证\n\n本项目采用 [MIT许可证](LICENSE)。\n\n## 👥 团队信息\n\n- **创作者**: 柏玄 ([@xkcoding](https://github.com/xkcoding))\n- **开发工具**: Cursor AI\n- **技术栈**: React + ReactFlow + TypeScript\n- **设计理念**: 专业工具 + 用户体验\n\n## 🔗 相关链接\n\n- [📚 项目文档](./memory-bank/)\n- [🎨 设计文档](./memory-bank/creative/)\n- [🤔 开发反思](./memory-bank/reflection/)\n- [📁 阶段归档](./memory-bank/archive/)\n- [📊 技术架构](./memory-bank/systemPatterns.md)\n\n## 🌟 致谢\n\n特别感谢：\n- [ReactFlow](https://reactflow.dev/) - 专业的图形可视化库\n- [Monaco Editor](https://microsoft.github.io/monaco-editor/) - VS Code级编辑器\n- [React](https://reactjs.org/) - 现代化前端框架\n- [Vite](https://vitejs.dev/) - 快速构建工具\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**🎉 第二阶段完成，用户满意度 95%+ ！**\n\n**⚡ DAG Visualizer - 让工作流可视化更简单**\n\n[![Star this repo](https://img.shields.io/github/stars/xkcoding/dag-visualization?style=social)](https://github.com/xkcoding/dag-visualization)\n[![Follow](https://img.shields.io/github/followers/xkcoding?style=social)](https://github.com/xkcoding)\n\n*🚀 专业的工作流可视化工具，让复杂的DAG变得简单直观*\n\n\u003c/div\u003e","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxkcoding%2Fdag-visualization","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxkcoding%2Fdag-visualization","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxkcoding%2Fdag-visualization/lists"}