文章摘要
OpenFLOW是一款基于React和Isoflow库的开源渐进式Web应用，专为创建精美的等距图而设计。它支持离线操作，所有数据均存储在本地浏览器中，具备自动保存、导入导出JSON文件等功能。用户可以通过拖放组件、连接关系、自定义属性等方式轻松创建3D风格的技术图表。项目提供了详细的贡献指南和快速启动说明，便于开发者参与和本地运行。
文章总结
OpenFLOW 是一款功能强大的开源渐进式网页应用（PWA），专为创建精美的等距图表而设计。它基于 React 和 Isoflow 库构建，完全在浏览器中运行，并支持离线使用。
主要特点
- 等距图表绘制：能够创建令人惊叹的 3D 风格技术图表。
- 自动保存：每 5 秒自动保存一次工作内容。
- 隐私优先：所有数据都存储在本地浏览器中，确保隐私安全。
- 导入/导出：可以将图表以 JSON 文件的形式分享。
- 离线支持：无需网络连接即可工作。
快速开始
- 本地运行：
- 克隆仓库：
git clone https://github.com/stan-smith/OpenFLOW - 安装依赖：
npm install - 启动开发服务器：
npm start - 在浏览器中打开
http://localhost:3000。
- 克隆仓库：
使用指南
- 创建图表：
- 添加项目：从库中拖放组件到画布上。
- 连接项目：使用连接器显示组件之间的关系。
- 自定义：更改颜色、标签和项目属性。
- 导航：平移和缩放以处理不同区域。
- 保存工作：
- 自动保存：每 5 秒自动保存到浏览器存储。
- 快速保存：点击“快速保存（会话）”进行即时保存。
- 另存为：使用“保存新”创建不同名称的副本。
- 管理图表：
- 加载：点击“加载”查看所有保存的图表。
- 导入：从他人分享的 JSON 文件加载图表。
- 导出：将图表下载为 JSON 文件以分享或备份。
- 存储：使用“存储管理器”管理浏览器存储空间。
键盘快捷键
- 删除：移除选中的项目。
- Ctrl/Cmd + Z：撤销（如果浏览器支持）。
- 鼠标滚轮：放大/缩小。
- 点击并拖动：平移画布。
生产环境构建
- 创建优化生产构建：
npm run build - 本地服务生产构建：
npx serve -s build - 构建文件夹包含所有部署所需的文件。
部署
- 静态托管：将构建文件夹部署到任何静态托管服务，如 GitHub Pages、Netlify、Vercel、AWS S3 或任何 Web 服务器。
重要提示
- HTTPS 要求：PWA 功能需要 HTTPS（localhost 除外）。
- 浏览器存储：图表保存在浏览器的 localStorage 中（约 5-10MB 限制）。
- 备份：定期将重要图表导出为 JSON 文件。
浏览器支持
- Chrome/Edge（推荐）：✅
- Firefox：✅
- Safari：✅
- 支持 PWA 的移动浏览器：✅
故障排除
- 存储空间不足：使用存储管理器释放空间，导出并删除旧图表，或清除浏览器数据（最后手段）。
- 无法安装 PWA：确保使用 HTTPS，尝试 Chrome 或 Edge 浏览器，检查是否已安装。
- 丢失图表：检查浏览器的 localStorage，查找自动保存的版本，始终导出重要工作。
技术栈
- React：UI 框架。
- TypeScript：类型安全。
- Isoflow：等距图表引擎。
- PWA：离线优先的网页应用。
贡献
- 欢迎贡献！请随时提交 Pull Request。
许可证
- MIT：Isoflow 社区版在 MIT 许可证下发布。
- Unlicense：OpenFLOW 在 Unlicense 许可证下发布，可以自由修改和分发。
致谢
- 使用 ISOFLOW 库（https://github.com/markmanx/isoflow）构建。
- 访问我的网站：x0z.co。
评论总结
评论内容总结：
项目功能与改进：
- x0z 表示该项目是对 ISOFLOW 社区版的封装，使其更易于设置和运行，并支持导出和加载 JSON 备份，突破了社区版的限制。
- 引用："just wrapped the community edition of ISOFLOW... made it dead easy to set up and run."
- zero0529 询问是否支持除 JSON 外的其他导出格式。
- 引用："Can you export to other formats than JSON?"
- x0z 表示该项目是对 ISOFLOW 社区版的封装，使其更易于设置和运行，并支持导出和加载 JSON 备份，突破了社区版的限制。
项目评价与反馈：
- martypitt 认为图表看起来很棒，但提醒底部的链接已失效。
- 引用："Diagrams look great - well done... your 'Built with the Isoflow library' link 404's."
- dr_kretyn 对“美丽”一词表示质疑，认为图表看起来像营销团队的 PowerPoint 演示。
- 引用："'beautiful' here is definitely subjective... looks like from PowerPoint presentation."
- martypitt 认为图表看起来很棒，但提醒底部的链接已失效。
技术讨论与建议：
- 9dev 提出了一种可视化软件系统组成的新方法，建议使用图数据库和可扩展的工具来描述和查看系统的不同层面。
- 引用："I've wondered for a while if there's a better way to visualise the composition of software systems... a graph database that contains all components and the edges between them."
- b0a04gl 建议将图表与实际基础设施同步，使其成为活的文档而非历史记录。
- 引用："you need the diagram to pull from the same source of truth as your actual infrastructure."
- 9dev 提出了一种可视化软件系统组成的新方法，建议使用图数据库和可扩展的工具来描述和查看系统的不同层面。
与其他工具的对比：
- gtirloni 认为 Mermaid.js 丑陋且语法复杂，希望 Isoflow 能像 Mermaid.js 一样嵌入 Markdown。
- 引用："I find Mermaid.js ugly and the syntax difficult/buggy... it'd be awesome to have Isoflow diagrams embedded in Markdown."
- wooptoo 提到 diagrams.mingrammer.com 也是一个很棒的工具。
- 引用："There's also diagrams.mingrammer.com which is a fantastic tool."
- gtirloni 认为 Mermaid.js 丑陋且语法复杂，希望 Isoflow 能像 Mermaid.js 一样嵌入 Markdown。
命名与混淆：
- knorker 指出“openflow”图表中的网络组件与 OpenFlow 协议无关，可能存在命名冲突。
- 引用："It's a bit confusing to see 'openflow' diagrams that include network components, that have nothing to do with OpenFlow."
- knorker 指出“openflow”图表中的网络组件与 OpenFlow 协议无关，可能存在命名冲突。
3D 图表的争议：
- fnord77 赞同 Edward Tufte 的观点，认为 3D 部分并未为图表增加信息，显得多余。
- 引用："the 3D part doesn't add any information to the diagrams, so it is superfluous."
- fnord77 赞同 Edward Tufte 的观点，认为 3D 部分并未为图表增加信息，显得多余。
项目发现与竞争：
- kingnothing 提醒 Snowflake 最近推出了名为 Openflow 的产品，可能导致该项目难以被发现。
- 引用："Snowflake launched a product called Openflow less than a month ago. Yours will probably be very difficult to discover."
- kingnothing 提醒 Snowflake 最近推出了名为 Openflow 的产品，可能导致该项目难以被发现。