FossFLOW完全指南：从Docker部署到多设备同步的一站式解决方案
【免费下载链接】OpenFLOW 
项目地址: https://gitcode.com/gh_mirrors/openflow1/OpenFLOW
你还在为复杂的图表工具部署流程感到困扰？是否渴望一个既能本地运行又支持多设备同步的 diagram 解决方案？本文将带你从零开始，通过 Docker 快速部署 FossFLOW，并深入探索其多设备同步功能，让你轻松管理和共享你的流程图。读完本文，你将掌握 Docker 部署、数据持久化、多设备访问以及高级功能配置的全部技巧。
关于FossFLOW
FossFLOW 是一款功能强大的开源渐进式 Web 应用（PWA），用于创建精美的等距图。它基于 React 和 Isoflow 库构建，可完全在浏览器中运行并支持离线使用。无论是网络拓扑图、系统架构图还是流程图，FossFLOW 都能满足你的需求。
主要特点包括：
- 等距图绘制功能，创建令人惊艳的3D风格技术图表
- 自动保存功能，每5秒自动保存你的工作
- PWA支持，可在Mac和Linux上作为原生应用安装
- 隐私优先设计，所有数据存储在本地浏览器中
- 导入/导出功能，支持JSON文件格式的图表分享
- 会话存储，无需对话框即可快速保存
- 离线支持，无网络连接也能继续工作
- 服务器存储支持，使用Docker部署时可实现持久化存储
Docker快速部署
使用Docker Compose部署（推荐）
Docker Compose 提供了最简单的部署方式，并且默认包含持久化存储功能。只需执行以下命令：
# 使用Docker Compose部署（推荐 - 包含持久化存储）
docker compose up
直接从镜像仓库运行
如果你更喜欢直接使用docker run命令，可以执行：
# 从镜像仓库运行并带有持久化存储
docker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest
禁用服务器存储
默认情况下，Docker部署启用服务器存储。如果需要禁用，可以通过环境变量设置：
docker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest
Docker容器启动流程解析
FossFLOW的Docker容器启动流程由docker-entrypoint.sh脚本控制，该脚本负责：
- 检查是否启用服务器存储（默认启用）
- 如果启用，启动Node.js后端服务：
- 安装生产依赖
- 启动server.js
- 启动Nginx服务，提供前端应用
具体流程如下：
多设备同步方案
服务器存储工作原理
FossFLOW的服务器存储功能提供了多设备同步的解决方案，其工作原理如下：
- 图表保存到服务器文件系统，跨浏览器会话持久化
- 支持多设备访问，只要使用Docker部署
- 当服务器存储可用时，UI会自动显示相关选项
- 保存重复名称时提供确认对话框，防止意外覆盖
- Docker部署中默认启用服务器存储
多设备访问配置
要实现多设备访问，只需确保所有设备都能访问到运行FossFLOW Docker容器的服务器。可以通过以下方式配置：
- 本地网络访问：确保服务器和设备在同一局域网内，使用服务器IP地址访问
- 互联网访问：配置端口转发和动态DNS，实现外部网络访问
- 安全考虑：对于互联网访问，建议配置HTTPS和访问控制
数据备份策略
为确保你的图表数据安全，建议实施以下备份策略：
- 利用Git备份：启用Git备份功能（通过设置ENABLE_GIT_BACKUP=true）
- 定期导出：重要图表定期导出为JSON文件
- 外部存储备份：定期备份服务器上的./diagrams目录
基本使用指南
创建图表
-
添加项目：
- 点击右上角菜单中的"+"按钮，左侧会显示组件库
- 将组件从库中拖放到画布上
- 或在网格上右键点击并选择"添加节点"
-
连接项目：
- 选择连接器工具（按'C'或点击连接器图标）
- 点击模式（默认）：点击第一个节点，然后点击第二个节点
- 拖动模式（可选）：从第一个节点点击并拖动到第二个节点
- 在设置→连接器选项卡中切换模式
-
保存工作：
- 快速保存 - 保存到浏览器会话
- 导出 - 下载为JSON文件
- 导入 - 从JSON文件加载
存储选项
FossFLOW提供多种存储方式，以满足不同需求：
- 会话存储：临时保存，浏览器关闭时清除
- 导出/导入：以JSON文件形式永久存储
- 自动保存：每5秒自动将更改保存到会话
- 服务器存储：仅在Docker部署中可用，实现多设备同步
高级功能配置
自定义图标导入
FossFLOW支持导入自定义图标，让你的图表更加个性化：
- 上传自定义图标（PNG、JPG、SVG格式）
- 图标会自动缩放为一致大小，确保专业外观
- 可选择图标显示方式：3D等距或平面2D
- 自定义图标与图表一起保存，适用于所有存储方式
连接器工具增强
最新版本的FossFLOW对连接器工具进行了显著改进：
- 基于点击的创建：新默认模式，点击第一个节点，然后点击第二个节点进行连接
- 拖动模式选项：原始拖放方式仍可通过设置使用
- 模式选择：在设置→连接器选项卡中切换点击和拖动模式
- 更高可靠性：点击模式提供更可预测的连接创建
交互功能增强
FossFLOW提供丰富的交互功能，提升用户体验：
- 可配置热键：三种配置文件（QWERTY、SMNRCT、无）用于工具选择，带有视觉指示器
- 高级平移控制：多种平移方法，包括空区域拖动、中/右键点击、修饰键（Ctrl/Alt）和键盘导航（箭头/WASD/IJKL）
- 切换连接器箭头：可选择显示/隐藏单个连接器上的箭头
- 持久工具选择：创建连接后连接器工具保持激活状态
- 设置对话框：集中配置热键和平移控制
开发与贡献
如果你对FossFLOW的开发感兴趣，可以通过以下步骤参与：
本地开发快速开始
# 克隆仓库
git clone https://gitcode.com/gh_mirrors/openflow1/OpenFLOW
cd OpenFLOW
# 安装依赖
npm install
# 构建库（首次必需）
npm run build:lib
# 启动开发服务器
npm run dev
在浏览器中打开http://localhost:3000即可开始开发。
项目结构
FossFLOW采用单体仓库（monorepo）结构，包含两个主要包：
packages/fossflow-lib- 用于绘制网络图的React组件库（使用Webpack构建）packages/fossflow-app- 用于创建等距图的渐进式Web应用（使用RSBuild构建）
开发命令
# 开发
npm run dev # 启动应用开发服务器
npm run dev:lib # 库开发的监视模式
# 构建
npm run build # 构建库和应用
npm run build:lib # 仅构建库
npm run build:app # 仅构建应用
# 测试和 linting
npm test # 运行单元测试
npm run lint # 检查 linting 错误
# 端到端测试（Selenium）
cd e2e-tests
./run-tests.sh # 运行端到端测试（需要Docker和Python）
# 发布
npm run publish:lib # 将库发布到npm
总结与展望
FossFLOW提供了从Docker部署到多设备同步的完整解决方案，无论是个人使用还是团队协作都能满足需求。通过本文介绍的方法，你可以快速搭建自己的FossFLOW环境，并充分利用其强大功能。
项目仍在持续发展中，未来计划包括更多高级功能和改进。你可以通过查看FOSSFLOW_TODO.md了解当前问题和路线图，或通过CONTRIBUTORS.md了解如何为项目做出贡献。
无论你是系统管理员、开发人员还是设计师，FossFLOW都能帮助你创建专业、精美的图表，提升你的工作效率。
如果你使用FossFLOW并觉得它对你有帮助，欢迎为项目贡献或提供反馈，共同推动这个优秀工具的发展。
【免费下载链接】OpenFLOW 项目地址: https://gitcode.com/gh_mirrors/openflow1/OpenFLOW
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
