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/

操作流程：

1. 打开即用，左侧工具栏拖拽图标到画布
2. 按 C 或选择连接工具 → 依次点击起点与终点
3. 右上角导出 PNG / SVG / JSON
4. 浏览器提示「添加到主屏幕」安装为 PWA

方式二：Docker 自托管（推荐团队/长期使用）

mkdir fossflow-data && cd fossflow-data

cat > 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
EOF

docker compose up -d

访问 http://你的IP:8080
图表持久化保存在 ./diagrams 目录。

方式三：本地开发（定制图标/贡献代码）

git clone https://github.com/stan-smith/FossFLOW.git
cd FossFLOW

npm install
npm run build:lib        # 首次必须执行
npm run dev

打开 http://localhost:5173

5. 案例演示

案例 1：Kubernetes 集群概览

步骤：

1. 左侧选择 Kubernetes 分类图标
2. 拖入 3 个 Master Node + 5 个 Worker Node
3. 连接 etcd → kube-apiserver → controller-manager
4. 添加 Pod、Service、Ingress 图标
5. 文本标注流量路径（如 “Nginx Ingress → 外部”）
6. 切换暗色主题（右上角设置）
7. 导出 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