FossFLOW是什么？
FossFLOW 是一个强大的开源 Progressive Web App（PWA），专为创建美观的三维等距基础设施图表而打造。它基于 React 框架和 Isoflow（已 fork 并发布为 fossflow）库开发，完全在浏览器端运行，支持离线使用，兼容 Mac 和 Linux，并且永久免费。
主要功能
-
三维等距图表绘制：快速创建 3D 风格的技术架构图，拖拽组件、连接节点，网络结构一目了然。
-
自动保存与导入导出：每 5 秒自动保存一次，支持 JSON 文件导入导出，方便团队协作与知识沉淀。
-
PWA 支持：可安装为本地应用，离线使用体验佳，适合 Mac/Linux 用户。
-
隐私优先：数据默认本地存储，支持服务器端存储（Docker 部署），实现多设备同步访问。
-
自定义图标导入：支持 PNG/JPG/SVG 格式图标，自动缩放，3D/2D 风格随心切换。
-
丰富交互体验：支持多种热键配置、平移操作（鼠标拖拽、中键/右键、快捷键），连接器箭头显示/隐藏，工具选择可持久化。
-
Docker & CI/CD 支持：自动化构建，多架构镜像（amd64/arm64），一行命令快速部署。
-
单仓库架构：Monorepo 结构，库与应用统一管理，开发、构建、发布流程高效。
快速上手指南
1. 在线体验
无需安装，直接访问在线版：https://stan-smith.github.io/FossFLOW/
2. Docker 部署
# 推荐 Docker Compose 持久化存储
docker compose up
# 或直接拉取镜像并持久化
docker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest
图表默认保存至主机的 ./diagrams 目录。
3. 本地开发
git clone https://github.com/stan-smith/FossFLOW
cd FossFLOW
npm install
npm run build:lib
npm run dev
浏览器访问
项目架构与开发命令
FossFLOW 采用 Monorepo 架构，包含：
-
packages/fossflow-lib：绘图组件库（React + Webpack） -
packages/fossflow-app：PWA 应用（RSBuild）
常用命令：
npm run dev # 启动应用开发服务器
npm run dev:lib # 组件库开发模式
npm run build # 构建库和应用
npm run build:lib # 构建库
npm run build:app # 构建应用
npm test # 单元测试
npm run lint # 代码规范检查
npm run publish:lib # 发布组件库到 npm
基本使用流程
1. 添加组件
-
点击右上角 "+"，左侧弹出组件库
-
拖拽组件到画布
-
或右键网格选择“添加节点”
2. 连接组件
-
选择连接器工具（快捷键 C 或点击图标）
-
默认点击模式：点击第一个节点，再点击第二个节点
-
可切换为拖拽模式（设置 → Connectors）
3. 保存与导入导出
-
快速保存：直接存储至浏览器会话
-
导出：下载为 JSON 文件
-
导入：加载 JSON 文件
4. 存储方式
-
会话存储：浏览器关闭即清空
-
导入/导出：永久保存为 JSON 文件
-
自动保存：每 5 秒自动保存至会话
总结
FossFLOW 通过持续迭代，带来了诸如自定义图标、服务器存储、热键配置、丰富平移操作等实用功能，极大提升了技术架构图的可视化体验。能够自动保存、导入导出和 Docker 部署的特性，既方便个人快速上手，也适合企业级协作和多设备访问。开源社区的活跃贡献，使项目不断完善，成为架构师和开发者展示复杂系统结构的理想选择。
Github 项目地址：https://github.com/stan-smith/FossFLOW
AI工具的成熟，让程序员也有了以前不敢想象的能力。海外市场的广阔，给了我们更大的舞台。
如果你也在考虑新的出路，如果你也想尝试AI编程出海这个方向，欢迎加入我们。
扫码或搜索 257735 添加微信，发送暗号「美金」，了解详细信息。
文章评论