FossFLOW：开源等距投影图表编辑器

0. 为什么关注这个项目

在技术文档编写、架构设计或项目演示中，我们常常需要绘制美观的技术架构图。传统的绘图工具如 Visio 功能强大但收费昂贵，而在线工具又存在隐私和数据安全问题。我一直在寻找一款既开源免费、又能离线使用、还能创建精美 3D 风格技术架构图的工具。

直到我发现了 FossFLOW，这款专注于等距投影（Isometric）图表编辑的开源工具，完美契合了我的需求。

---

1. 项目概览

这个项目属于：

• 自托管工具
• 开发工具
• UI 组件

项目定位：一款基于浏览器的等距投影图表编辑器，用于创建美观的技术架构图

Github：https://github.com/stan-smith/FossFLOW

Star: 截至 2026 年 3 月，该项目已获得相当数量的关注（具体 Star 数请查看 GitHub 页面）

License：MIT

语言/技术栈：

• React（前端框架）
• Isoflow/Fossflow 库（底层绘图引擎）
• Progressive Web App（PWA，渐进式网页应用）

项目成熟度/复杂度：

• 生产可用
• 中等复杂度

---

2. 解决什么问题

2.1 这个领域原本怎么做

在传统的技术架构图绘制场景中，开发者通常有以下几种选择：

• 专业绘图软件：如 Microsoft Visio、Lucidchart 等，功能强大但价格昂贵
• 在线绘图工具：如 Draw.io、Excalidraw 等，免费但需要联网使用
• 代码生成工具：如 Graphviz、Mermaid 等，适合程序员但学习曲线陡峭
• 设计软件：如 Figma、Sketch 等，灵活但不够专业化

2.2 现有方案问题

1. 成本问题：商业软件授权费用高，不适合个人开发者或小团队
2. 隐私顾虑：在线工具需要将数据上传到第三方服务器
3. 网络依赖：部分工具必须联网才能使用，限制了使用场景
4. 专业性不足：通用绘图工具缺少针对技术场景的优化
5. 学习成本：部分工具需要投入大量时间学习

2.3 这个项目的思路

FossFLOW 采用了以下设计理念：

• 完全开源免费：MIT 许可证，允许任何人自由使用和修改
• 本地优先：作为 PWA 应用，可以在浏览器中完全离线运行
• 专注等距投影：专门针对 3D 风格技术架构图进行优化
• 开箱即用：无需安装复杂环境，打开浏览器即可使用
• 灵活部署：支持自托管，可部署在私有服务器上

---

3. 架构分析

3.1 整体架构

FossFLOW 采用单体仓库（Monorepo）结构，包含两个核心包：

FossFLOW/
├── packages/
│   ├── fossflow-lib    # React 组件库（绘图引擎）
│   └── fossflow-app    # PWA 应用（用户界面）
└── e2e-tests           # 端到端测试

3.2 关键模块

1. fossflow-lib（核心库）

   • 基于 React 构建的绘图组件库
   • 负责等距投影的渲染和交互逻辑
   • 提供丰富的节点和连接器类型
   • 已发布到 NPM，可独立使用

2. fossflow-app（应用层）

   • PWA 应用外壳
   • 提供用户界面和操作工具
   • 处理文件导入导出
   • 管理本地存储

3. 存储系统

   • Session Storage：临时保存会话数据
   • Export/Import：JSON 文件导入导出
   • Auto-Save：自动保存机制（每 5 秒）

---

4. 核心设计思想

4.1 技术选型分析

为什么使用：

• React：成熟的 UI 框架，组件化开发，生态丰富
• PWA：离线支持、跨平台、无需安装
• Monorepo：代码共享、版本管理、便于维护

为什么不使用：

• Electron：虽然也能跨平台，但体积更大，资源占用更多
• Canvas/SVG 直接操作：React 提供了更好的抽象层

4.2 设计思想分析

这个项目体现：

• 本地优先（Local-first）：数据优先保存在本地，减少对外部服务的依赖
• 渐进增强：作为 PWA，在不同环境下都能正常工作
• 模块化设计：库和应用分离，便于复用和维护
• 开源协作：欢迎社区贡献，保持项目活力

---

5. 功能分析

5.1 整体架构

• 纯前端应用（Pure Frontend）
• 前后端分离（可选自托管后端）
• PWA 架构

5.2 核心模块

画布系统：

• 无限画布支持
• 网格对齐辅助
• 缩放和平移导航

组件库：

• 丰富的预定义等距图标（服务器、数据库、网络设备等）
• 支持自定义图标导入
• 拖拽式添加元素

连接工具：

• 智能连接器（支持点击和拖拽两种模式）
• 自动路径规划
• 连接器样式自定义

文件管理：

• Quick Save：快速保存到浏览器会话
• Export：导出为 JSON 文件
• Import：从 JSON 文件加载
• Auto-Save：自动保存（每 5 秒）

部署选项：

• 在线版本：https://stan-smith.github.io/FossFLOW/
• Docker 部署：支持一键部署
• 本地开发：完整的开发环境

5.3 数据流分析

用户操作
 ↓
React 组件状态更新
 ↓
fossflow-lib 渲染引擎
 ↓
Canvas/SVG 绘制
 ↓
浏览器显示

保存流程：

用户保存
 ↓
序列化为 JSON
 ↓
Session Storage / 文件下载

---

6. 部署与体验

6.1 部署难度

在线版本：

• 零部署，直接访问 https://stan-smith.github.io/FossFLOW/ 即可使用
• 适合作为临时或轻度使用

Docker 部署（推荐）：

# 使用 Docker Compose（推荐，包含持久化存储）
docker compose up

# 或直接运行
docker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest

HTTP 基础认证（可选）：

docker run -p 80:80 \
  -e HTTP_AUTH_USER=admin \
  -e HTTP_AUTH_PASSWORD=secret \
  stnsmith/fossflow:latest

本地开发：

git clone https://github.com/stan-smith/FossFLOW
cd FossFLOW
npm install
npm run build:lib
npm run dev

总体来说，部署难度较低，Docker 一键部署非常适合生产环境。

6.2 资源占用

• 客户端：作为 PWA 应用，资源占用主要取决于浏览器和图表复杂度
• 服务端（自托管）：Nginx 静态服务，资源占用极低
• 存储： diagrams 目录用于存储导出的 JSON 文件，占用空间很小

6.3 使用体验

优点：

• 界面简洁直观，上手容易
• 拖拽操作流畅，响应迅速
• 等距投影效果出色，图表美观
• 离线工作无压力，数据安全有保障
• 导出格式标准，便于分享和备份

改进空间：

• 组件库相对有限，需要自行导入自定义图标
• 缺少协作功能，不适合团队实时协作
• 中文文档较少，主要依赖英文文档

---

7. 类似项目对比

项目	复杂度	技术栈	适用场景
FossFLOW	中等	React + PWA	等距技术架构图
Draw.io	复杂	JavaScript	通用流程图
Excalidraw	中等	React	手绘风格图表
Mermaid	简单	JavaScript	代码生成图表
Graphviz	复杂	C/C++	自动布局图论

FossFLOW 的独特优势在于专注于等距投影风格，特别适合绘制 3D 视觉效果的技术架构图，如云基础设施、网络拓扑等。

---

8. 优缺点分析

优点：

• 完全开源免费，MIT 许可证
• 离线优先，数据隐私有保障
• 等距投影效果专业，图表美观
• 部署简单，支持 Docker 一键部署
• PWA 特性，跨平台兼容性好
• Monorepo 结构，代码组织清晰

缺点：

• 社区规模相对较小
• 中文文档和资源较少
• 组件库有待丰富
• 缺少实时协作功能
• 高级功能（如批量操作）有限

---

9. 我的判断

我认为：

这个项目适合：

• 需要频繁绘制技术架构图的开发者
• 注重数据隐私和离线使用的用户
• 喜欢 3D 等距投影风格的创作者
• 寻求 Visio 等商业软件替代方案的个人或团队
• 需要在文档、演示中使用精美图表的技术作者

这个项目不适合：

• 需要复杂协作功能的团队
• 需要大量预制模板的企业用户
• 对图表样式有特殊定制需求的场景

未来发展：
随着远程办公和在线协作的普及，开源绘图工具的需求会持续增长。FossFLOW 如果能够：

1. 丰富组件库，提供更多行业专用图标
2. 增加协作功能，支持多人实时编辑
3. 完善文档和本地化，降低使用门槛
4. 与其他工具集成（如 Markdown 编辑器、文档系统）

有望成为技术架构图领域的重要选择。对于个人开发者和小型团队来说，FossFLOW 已经是一款足够优秀的工具，值得尝试和推荐。

---