摘要：传统的流程图、二维图表在表达网络关系、云架构时常显得力不从心。一款优秀的三维等距图表工具，不仅能提升图表的美观度，更能增强信息传递的效率和准确性。
在信息化与数字化日益普及的今天，技术人员、运维工程师、产品经理等角色都需要以清晰、专业的方式展示复杂的基础设施架构。
传统的流程图、二维图表在表达网络关系、云架构时常显得力不从心。一款优秀的三维等距图表工具，不仅能提升图表的美观度，更能增强信息传递的效率和准确性。
今天要为大家介绍的，就是这样一款开源神器——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/FossFLOWcd FossFLOWnpm installnpm run build:libnpm run devpackages/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
来源：不秃头程序员
