{"id":29181952,"url":"https://github.com/jacksonhe04/flow-flat","last_synced_at":"2026-04-20T13:07:14.416Z","repository":{"id":302136020,"uuid":"999492383","full_name":"JacksonHe04/flow-flat","owner":"JacksonHe04","description":"集成白板、Markdown、IDE 等多种工具，简洁 · 现代 · 高效的节点流程图平台","archived":false,"fork":false,"pushed_at":"2025-06-30T18:40:03.000Z","size":2552,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-30T19:33:23.567Z","etag":null,"topics":["markdown","monaco-editor","react-flow","zustand"],"latest_commit_sha":null,"homepage":"https://flow-flat.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JacksonHe04.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-06-10T10:33:17.000Z","updated_at":"2025-06-30T18:40:06.000Z","dependencies_parsed_at":"2025-06-30T19:44:33.034Z","dependency_job_id":null,"html_url":"https://github.com/JacksonHe04/flow-flat","commit_stats":null,"previous_names":["jacksonhe04/flow-flat"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JacksonHe04/flow-flat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacksonHe04%2Fflow-flat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacksonHe04%2Fflow-flat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacksonHe04%2Fflow-flat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacksonHe04%2Fflow-flat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JacksonHe04","download_url":"https://codeload.github.com/JacksonHe04/flow-flat/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacksonHe04%2Fflow-flat/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263029215,"owners_count":23402354,"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","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":["markdown","monaco-editor","react-flow","zustand"],"created_at":"2025-07-01T20:02:03.251Z","updated_at":"2026-04-20T13:07:14.381Z","avatar_url":"https://github.com/JacksonHe04.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flow Flat 🚀\n\n\u003e 一个集成了自研 React Flow 节点组件库的综合开发平台\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![React](https://img.shields.io/badge/React-20232A?logo=react\u0026logoColor=61DAFB)](https://reactjs.org/)\n[![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite\u0026logoColor=white)](https://vitejs.dev/)\n\n## 📖 项目概述\n\nFlow Flat 是一个现代化的可视化开发平台，集成了**节点流程图**、**富文本编辑器**、**代码编辑器**三大核心功能模块，提供了完整的节点流程图解决方案。项目采用 monorepo 架构，包含自研的 React Flow 节点组件库和基于该组件库的 Web 应用平台。其核心亮点是自研的 `custom-react-flow-node` 组件库，为 React Flow 提供了更加灵活和强大的节点系统。\n\n### 🎯 核心特性\n\n- 🎨 **自研节点组件库**：完全自主开发的 React Flow 节点系统，即 `custom-react-flow-node` 包。\n- 🔧 **完整 TypeScript 支持**：类型安全的开发体验。\n- 🔌 **高度可扩展**：支持自定义节点类型注册。\n- 📦 **轻量级设计**：最小化依赖，高性能表现。\n- 🎯 **多功能集成**：节点流程图 + 富文本编辑 + 代码编辑。\n- 🎪 **丰富的内置组件**：TextNode、CodeNode、ImageNode 等多种节点类型，以及各类编辑器组件。\n- 🌙 **主题系统**：统一的亮色/暗色主题支持。\n\n## 🏗️ 项目架构\n\n本仓库采用 **Monorepo** 架构，包含以下几个主要部分：\n\n```\nflow-flat/\n├── 📦 package-custom-react-flow-node/    # 自研 React Flow 节点组件库\n│   ├── src/\n│   │   ├── components/                   # 核心组件\n│   │   │   ├── Node.tsx                  # 通用节点组件\n│   │   │   ├── NodeContainer.tsx         # 节点容器\n│   │   │   ├── NodeHeader.tsx            # 节点头部\n│   │   │   ├── NodeStoreAdapter.tsx      # 状态适配器\n│   │   │   └── TextNode.tsx              # 文本节点\n│   │   └── types/                        # 类型定义\n│   └── dist/                             # 构建输出\n├── 🌐 flow-flat-app/                     # Web 应用平台\n│   ├── src/\n│   │   ├── components/\n│   │   │   ├── Node/                      # 节点系统\n│   │   │   │   ├── NodeLayout/            # 原项目节点布局\n│   │   │   │   ├── Nodes/                 # 内置节点类型\n│   │   │   │   ├── ImportExport/          # 导入导出功能\n│   │   │   │   └── custom-react-flow-node-test-demo/  # 本地包集成演示\n│   │   │   ├── Markdown/                  # 富文本编辑器模块\n│   │   │   └── CodeEditor/                # 代码编辑器模块\n│   │   ├── pages/                         # 页面组件\n│   │   ├── stores/                        # Zustand 状态管理\n│   │   └── utils/                         # 工具函数\n│   └── ...\n└── docs/                                  # 项目文档\n```\n\n## 📦 核心组件库：custom-react-flow-node\n\n### ✨ 特性\n\n- 🎨 **可定制节点**：支持自定义节点类型和样式。\n- 🔧 **类型安全**：完整的 TypeScript 支持。\n- 🎯 **易于使用**：简单的 API 设计。\n- 🔌 **可扩展**：支持注册自定义节点类型。\n- 📦 **轻量级**：最小化依赖。\n- 🎪 **内置组件**：提供常用的节点组件。\n\n### 🚀 快速开始\n\n```bash\n# 安装依赖\nnpm install custom-react-flow-node\n# 或\npnpm add custom-react-flow-node\n```\n\n### 📝 基础使用\n\n```tsx\nimport React from 'react';\nimport { ReactFlow, Node as FlowNode } from '@xyflow/react';\nimport { Node, BaseNodeData } from 'custom-react-flow-node';\n\n// 定义节点数据类型\ninterface MyNodeData extends BaseNodeData {\n  title: string;\n  content: string;\n}\n\n// 创建节点\nconst nodes: FlowNode\u003cMyNodeData\u003e[] = [\n  {\n    id: '1',\n    type: 'custom',\n    position: { x: 100, y: 100 },\n    data: {\n      nodeType: 'text',\n      title: '我的节点',\n      content: '这是节点内容'\n    }\n  }\n];\n\n// 定义节点类型\nconst nodeTypes = {\n  custom: Node\n};\n\nfunction App() {\n  return (\n    \u003cdiv style={{ height: '100vh' }}\u003e\n      \u003cReactFlow\n        nodes={nodes}\n        nodeTypes={nodeTypes}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### 🔧 自定义节点\n\n```tsx\nimport React from 'react';\nimport { CustomNodeProps, BaseNodeData, NodeContainer, NodeHeader } from 'custom-react-flow-node';\n\ninterface MyNodeData extends BaseNodeData {\n  value: number;\n}\n\nconst MyCustomNode: React.FC\u003cCustomNodeProps\u003cMyNodeData\u003e\u003e = ({ data, selected }) =\u003e {\n  const handleValueChange = (newValue: number) =\u003e {\n    if (data?.onDataChange) {\n      data.onDataChange({ value: newValue });\n    }\n  };\n\n  return (\n    \u003cNodeContainer selected={selected} onDelete={data?.onDelete}\u003e\n      \u003cNodeHeader\n        nodeType=\"custom\"\n        title={data?.title || '自定义节点'}\n        onTitleChange={(title) =\u003e data?.onDataChange?.({ title })}\n      /\u003e\n      \u003cdiv\u003e\n        \u003cinput\n          type=\"number\"\n          value={data?.value || 0}\n          onChange={(e) =\u003e handleValueChange(Number(e.target.value))}\n        /\u003e\n      \u003c/div\u003e\n    \u003c/NodeContainer\u003e\n  );\n};\n\n// 注册节点类型\nimport { registerNodeType } from 'custom-react-flow-node';\nregisterNodeType('myCustom', MyCustomNode);\n```\n\n## 🌐 Web 应用平台：flow-flat-app\n\n### 🎯 功能模块\n\n#### 1. 📊 节点流程图系统\n\n基于自研 `custom-react-flow-node` 包实现的可视化节点编辑器：\n\n- **核心组件展示**：NodeLayout、内置节点类型、导入导出功能。\n- **本地包集成演示**：完整的集成方案和示例。\n- **集成方案特点**：向后兼容、渐进式迁移、扩展能力、状态同步。\n- **原生节点支持**：TextNode、CodeNode、ImageNode、MarkdownNode、TodoNode。\n- **自定义节点演示**：CustomCodeNode、CustomImageNode。\n- **导入导出**：支持流程图的保存和加载。\n\n#### 2. 📝 富文本编辑器模块\n\n基于 TipTap 的完整富文本编辑解决方案：\n\n- **核心组件**：RichText、MarkdownNodeEditor。\n- **工具栏系统**：完整的格式化工具栏。\n- **扩展配置**：基础扩展、节点扩展、页面扩展。\n- **功能特性**：Markdown 支持、所见即所得、自动保存、主题支持。\n- 📝 **完整 Markdown 语法支持**。\n- 🎨 **所见即所得编辑体验**。\n- 💾 **自动保存功能**。\n- 🎯 **节点内嵌和页面级两种场景**。\n- 🌙 **亮色/暗色主题支持**。\n\n#### 3. 💻 代码编辑器模块\n\n基于 Monaco Editor 的专业代码编辑功能：\n\n- **核心组件**：MonacoEditor、LanguageSelector。\n- **功能特性**：语法高亮、智能提示、错误检测、主题支持。\n- **支持语言**：26+ 种编程语言。\n- 🔤 **支持 26+ 种编程语言语法高亮**。\n- 🧠 **智能代码补全和建议**。\n- 🔍 **实时语法和语义检查**。\n- 🎨 **主题支持**。\n- ⚙️ **高度可配置**。\n- 📱 **响应式设计**。\n\n### 🛠️ 技术栈\n\n- **框架**：React + TypeScript\n- **构建工具**：Vite + Rollup\n- **状态管理**：Zustand\n- **节点流程图**：React Flow + custom-react-flow-node\n- **富文本编辑**：TipTap\n- **代码编辑器**：Monaco Editor\n- **样式**：Tailwind CSS\n- **包管理**：pnpm\n\n## 🚀 快速开始\n\n### 📋 环境要求\n\n- Node.js \u003e= 16.0.0\n- pnpm \u003e= 7.0.0\n- React \u003e= 16.8.0\n- @xyflow/react \u003e= 12.0.0\n\n### 🔧 安装和运行\n\n```bash\n# 克隆仓库\ngit clone https://github.com/JacksonHe04/flow-flat.git\ncd flow-flat\n\n# 安装依赖\npnpm install\n\n# 构建组件库\ncd package-custom-react-flow-node\npnpm run build\n\n# 启动开发服务器\ncd ../flow-flat-app\npnpm run dev\n```\n\n### 🌐 访问应用\n\n开发服务器启动后，访问 [http://localhost:5173](http://localhost:5173) 即可体验完整功能。\n\n## 📚 使用场景\n\n### 🔬 节点流程图开发\n- **独立开发测试**：使用 `DemoBoard` 独立测试新节点类型。\n- **集成验证**：使用 `TestBoard` 验证与原项目的兼容性。\n- **生产替换**：使用 `NodeLayoutReplacement` 直接替换原项目的 NodeLayout。\n- **扩展开发**：参考自定义节点示例开发新的节点类型。\n\n### 📝 富文本编辑\n- **流程图节点内容编辑**：轻量级的节点内嵌编辑器。\n- **文档页面编辑**：完整的页面级编辑器。\n- **自定义编辑器**：根据需要进行配置的编辑器。\n\n### 💻 代码编辑\n- **代码节点编辑**：在流程图节点中编辑代码。\n- **独立代码编辑**：专业的代码编辑页面。\n- **多语言支持**：支持主流编程语言的语法高亮。\n\n## 🎨 技术亮点\n\n1. **🔧 自研组件包**：完全自主开发的 React Flow 节点组件库。\n2. **🔄 适配器模式**：通过 `NodeStoreAdapter` 实现与现有系统的无缝集成。\n3. **📈 渐进式迁移**：支持从原有系统平滑迁移到新的节点系统。\n4. **🎯 多场景支持**：同时支持节点内嵌和页面级的编辑场景。\n5. **🛡️ 完整的类型支持**：全面的 TypeScript 类型定义。\n6. **⚙️ 高度可配置**：丰富的配置选项满足不同需求。\n\n## 📖 文档\n\n- [组件库文档](./package-custom-react-flow-node/README.md) - custom-react-flow-node 详细文档\n- [Web应用文档](./flow-flat-app/README.md) - flow-flat-app 详细文档\n- [开发文档](./docs/)\n\n## 🤝 贡献\n\n我们欢迎所有形式的贡献！请查看我们的贡献指南：\n\n1. Fork 本仓库\n2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`)\n3. 提交你的更改 (`git commit -m 'Add some AmazingFeature'`)\n4. 推送到分支 (`git push origin feature/AmazingFeature`)\n5. 打开一个 Pull Request\n\n## 📄 许可证\n\n本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。\n\n## 👨‍💻 作者\n\n**Jackson He**\n- GitHub: [@JacksonHe04](https://github.com/JacksonHe04)\n- 项目链接: [https://github.com/JacksonHe04/flow-flat](https://github.com/JacksonHe04/flow-flat)\n\n## 🙏 致谢\n\n感谢以下开源项目的支持：\n\n- [React Flow](https://reactflow.dev/) - 强大的流程图库\n- [TipTap](https://tiptap.dev/) - 现代富文本编辑器\n- [Monaco Editor](https://microsoft.github.io/monaco-editor/) - VS Code 编辑器核心\n- [Tailwind CSS](https://tailwindcss.com/) - 实用优先的 CSS 框架\n- [Zustand](https://github.com/pmndrs/zustand) - 轻量级状态管理","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacksonhe04%2Fflow-flat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacksonhe04%2Fflow-flat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacksonhe04%2Fflow-flat/lists"}