FossFLOW 工具使用指南与 draw.io 对比分析
FossFLOW（原 Isoflow 社区 fork）是一个开源的等距（isometric）基础设施图绘制工具。它采用 React 开发，作为 Progressive Web App（PWA）运行，支持浏览器离线使用、自动保存、本地存储，极度注重隐私（数据永不上云）。
由开发者stan-smith维护并大幅优化，截至 2025 年 12 月，GitHub 星标已超 15k，项目活跃度高（最新 release 1.7.0 于 12 月发布），已成为自托管与开源社区中备受青睐的等距架构图工具。
1. 核心理念
- 隐私至上 & 完全本地化：图表数据存储于浏览器 IndexedDB / LocalStorage，无需注册、无服务器上传。
- 离线优先 + PWA 可安装：支持安装到桌面/手机，断网也能完整编辑与查看。
- 视觉美学优先：固定 30° 等距投影，赋予复杂云原生/基础设施图立体、专业、现代感。
- 工程师友好：拖拽为主、快捷键辅助，5 秒自动保存，极低学习曲线。
- 开源 & 易自托管：MIT 许可，Docker 一键部署，支持 fork 与图标定制。
2. 技术栈与设计模式
| 维度 | 技术/模式 | 说明 |
|---|---|---|
| 前端框架 | React + TypeScript | 函数组件 + Hooks 为主 |
| 核心绘图引擎 | @fossflow/react（fork 自 Isoflow） | 处理等距坐标转换、节点/连线渲染、拖拽交互 |
| 状态管理 | Zustand 或 Context | 轻量级全局状态（画布、选中项、历史） |
| 数据持久化 | IndexedDB（idb-keyval / dexie） | 自动保存 + JSON 导出；Docker 模式支持服务器端持久化 |
| 构建 & 部署 | Vite + Docker | 开发迅速，多架构镜像（amd64/arm64） |
| 交互设计 | 持久工具选择 + 命令模式 | 连接工具可连续绘制，无需反复切换 |
| 历史记录 | Undo/Redo 栈 | 基于 JSON 快照或 diff |
| 坐标转换核心 | 等距投影公式（简化版） | screenX = (x - y) × cos(30°)screenY = (x + y) × sin(30°) - z × sin(60°) |
3. 主要使用场景
- 云厂商架构图（AWS、Azure、GCP、阿里云图标支持良好）
- Kubernetes 集群拓扑与控制平面关系
- 微服务数据流 / 系统间依赖图
- 网络拓扑（防火墙、LB、CDN、VPN 等）
- 高层技术方案 / PPT / 提案用图（视觉冲击力强）
- 自托管服务组合展示（NPM + Vault + Nextcloud 等）
- 技术布道、营销材料中的美观架构图
4. 快速上手指南
方式一：在线试用（0 安装，推荐新手）
访问官方演示：
https://stan-smith.github.io/FossFLOW/
操作流程：
- 打开即用，左侧工具栏拖拽图标到画布
- 按C或选择连接工具 → 依次点击起点与终点
- 右上角导出 PNG / SVG / JSON
- 浏览器提示「添加到主屏幕」安装为 PWA
方式二：Docker 自托管（推荐团队/长期使用）
mkdirfossflow-data&&cdfossflow-datacat>docker-compose.yml<<'EOF' version: '3.8' services: fossflow: image: stnsmith/fossflow:latest container_name: fossflow restart: unless-stopped ports: - "8080:80" volumes: - ./diagrams:/data/diagrams environment: - NODE_ENV=production EOFdockercompose up-d访问http://你的IP:8080
图表持久化保存在./diagrams目录。
方式三：本地开发（定制图标/贡献代码）
gitclone https://github.com/stan-smith/FossFLOW.gitcdFossFLOWnpminstallnpmrun build:lib# 首次必须执行npmrun dev打开http://localhost:5173
5. 案例演示
案例 1：Kubernetes 集群概览
步骤：
- 左侧选择 Kubernetes 分类图标
- 拖入 3 个 Master Node + 5 个 Worker Node
- 连接 etcd → kube-apiserver → controller-manager
- 添加 Pod、Service、Ingress 图标
- 文本标注流量路径（如 “Nginx Ingress → 外部”）
- 切换暗色主题（右上角设置）
- 导出 PNG 插入 Notion / Confluence
效果：立体感远超平面工具，接近官方云厂商风格。
案例 2：极简 AWS EC2 → RDS 连接（JSON 导入示例）
{"version":"1.0","nodes":[{"id":"n1","type":"ec2","x":0,"y":0,"z":0,"label":"Web Server","color":"#FF9900"},{"id":"n2","type":"rds","x":4,"y":2,"z":0,"label":"MySQL","color":"#0077CC"}],"edges":[{"id":"e1","from":"n1","to":"n2","label":"TCP 3306","color":"#666"}],"viewport":{"x":-200,"y":-150,"zoom":1.2}}直接导入 JSON，即可看到简单连接图。
6. FossFLOW vs draw.io（diagrams.net）对比（2025 年 12 月视角）
| 维度 | FossFLOW | draw.io / diagrams.net | 明显胜出方 |
|---|---|---|---|
| 图表风格 | 固定等距 3D-like（30° isometric） | 2D 平面（支持少量伪 3D） | FossFLOW（美观） |
| 图标丰富度 | 中等（专注云/K8s/网络，约 300–500 + 自定义导入） | 极丰富（官方云图标 + 社区数千形状） | draw.io |
| 隐私 & 离线 | 完全本地 + PWA，Docker 简单持久化 | 桌面版优秀；在线版需云存储 | FossFLOW |
| 协作能力 | 无 | 优秀（实时多人、Atlassian 集成） | draw.io |
| 大图性能（200+ 节点） | 中等（复杂图易卡） | 较好（SVG + 优化成熟） | draw.io |
| 自定义图标 | 支持上传（PNG/JPG/SVG），需手动调整 | 极易（拖入 + 社区库） | draw.io |
| 学习曲线 | 极低（5 分钟上手） | 中等（功能繁多） | FossFLOW |
| 部署简易度 | Docker 一键 + PWA | 桌面版 / 自托管较复杂 | FossFLOW |
| 视觉冲击力 | ★★★★★（提案/布道神器） | ★★★☆☆（专业但常规） | FossFLOW |
| 适用范围 | 基础设施/云架构展示 | 几乎所有图表类型（流程、UML、ER、网络等） | draw.io |
场景推荐
- 追求“哇”效果、提案/客户演示、云原生架构→ FossFLOW 主用（美颜相机级别）
- 需要通用性、团队协作、超多图标、大规模图→ draw.io 主用（瑞士军刀）
- 混合使用→ FossFLOW 做展示版，draw.io 做详细/可维护版
- 极致隐私 + 自托管简单→ FossFLOW 更友好
一句话总结：
FossFLOW让基础设施图瞬间高端大气，但牺牲通用性；
draw.io什么都能画，却缺少那种令人惊艳的立体美感。
项目 GitHub：https://github.com/stan-smith/FossFLOW
