FossFLOW：开源伪3D等距投影架构图工具，基于React与Docker一键部署

FossFLOW（原 Isoflow 社区分支）是一款基于 React 开发的开源等距投影图表工具，专为绘制具有立体感的技术架构图、网络拓扑图和云原生系统可视化而设计。它采用固定的30°等距投影视角，无需专业3D知识即可轻松创建视觉效果出众的图表。

一、核心定位与特性

1. 伪 3D 等距投影
采用固定 30° 视角的等距投影技术，赋予图表立体感，无需专业 3D 建模知识即可实现类似专业设计软件的效果。

2. 完全离线与隐私优先

• 数据存储于浏览器本地（IndexedDB/LocalStorage），无需注册或上传至服务器。
• 支持 PWA（渐进式 Web 应用），可安装为桌面/手机应用，断网时仍可编辑和查看。

3. 工程师友好设计

• 拖拽式操作 + 快捷键辅助，5 秒自动保存，降低学习成本。
• 内置 AWS、Azure、GCP、Kubernetes 等云厂商图标库，支持自定义图标导入（PNG/JPG/SVG）。

4. 开源与可扩展性

• MIT 许可证，允许自由修改和分发。
• 提供 Docker 一键部署方案，支持团队共享和持久化存储。

5. 跨平台兼容性

• 响应式设计适配各种设备尺寸，支持导出 PNG/SVG/JSON 格式。

二、适用场景

• 云原生架构图：绘制 Kubernetes 集群、微服务依赖关系等。
• 网络拓扑图：展示防火墙、负载均衡器（LB）、CDN 等组件连接。
• 技术提案与演示：生成高视觉冲击力的 PPT 用图，接近官方云厂商风格。
• 自托管服务组合：可视化 NPM、Vault、Nextcloud 等服务的交互关系。
• 教育与研究：技术布道、学术研究中的系统架构展示。

三、部署与安装指南

1. Docker 自托管（推荐团队/长期使用）

• 步骤：
  1. 创建持久化存储目录：

     mkdir fossflow-data && cd fossflow-data

  2. 编写 docker-compose.yml 文件：

     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

  3. 启动服务：

     docker-compose up -d

  4. 访问 http://你的IP:8080，图表将持久化保存在 ./diagrams 目录。
• 禁用服务器存储（纯本地模式）：
  在 docker run 命令中添加 -e ENABLE_SERVER_STORAGE=false 参数。

2. 本地开发环境（定制图标/贡献代码）

• 步骤：
  1. 克隆仓库：

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

  2. 安装依赖：

     npm install

  3. 构建库（首次必须执行）：

     npm run build:lib

  4. 启动开发服务器：

     npm run dev

  5. 访问 http://localhost:5173（或根据控制台输出调整端口）。

3. 生产环境构建

• 步骤：
  1. 构建生产版本：

     npm run build

  2. 启动生产服务器：

     npm start

  3. 访问 http://localhost:3000（默认端口，可通过 .env 文件修改）。

四、开源与文档资源

资源类型	地址
GitHub 仓库	https://github.com/stan-smith/FossFLOW
官方文档	仓库内 README.md 文件（含详细 API 参考和示例）

五、核心功能与操作示例

1. 基础操作流程

// 创建新图表
const diagram = fossflow.createDiagram('Network Architecture');

// 添加服务器节点
const webServer = diagram.addNode('Web Server', {
  type: 'server',
  position: { x: 100, y: 50, z: 0 },
  icon: 'server'
});

// 添加数据库节点
const database = diagram.addNode('Database', {
  type: 'database',
  position: { x: 300, y: 50, z: 0 },
  icon: 'database'
});

// 连接节点
diagram.addConnection(webServer, database, {
  type: 'network',
  label: 'API Calls'
});

// 保存图表
diagram.saveToSession();

2. 自定义图标导入

<!-- 通过 UI 上传自定义图标 -->
<div class="icon-upload">
  <input type="file" accept=".png,.jpg,.svg" id="icon-upload">
  <label for="icon-upload">上传自定义图标</label>
</div>

<script>
  document.getElementById('icon-upload').addEventListener('change', (event) => {
    const file = event.target.files[0];
    fossflow.importCustomIcon(file, {
      name: 'custom-server',
      category: 'Servers',
      isometric: true, // 或 false 用于平面图标
      scale: 1.2
    });
  });
</script>

3. 批量操作 API

// 批量添加节点
const nodes = [
  { name: 'Load Balancer', type: 'network', icon: 'load-balancer' },
  { name: 'API Gateway', type: 'network', icon: 'api-gateway' }
];

nodes.forEach(node => {
  diagram.addNode(node.name, {
    type: node.type,
    icon: node.icon
  });
});

六、对比其他工具（以 draw.io 为例）

特性	FossFLOW	draw.io (diagrams.net)
视觉效果	伪 3D 等距投影，立体感强	平面图表，通用性强
隐私保护	数据完全本地存储	支持云端存储（可禁用）
自托管难度	Docker 一键部署，简单	需手动配置服务器
适用场景	提案演示、云原生架构	通用图表、团队协作
学习曲线	低（拖拽 + 快捷键）	低（功能全面但复杂）

总结：

• 若需快速生成高视觉冲击力的 3D 风格架构图，FossFLOW 是首选。
• 若需通用性强的图表工具（如流程图、UML），draw.io 更合适。
• 可混合使用：FossFLOW 生成展示版，draw.io 维护详细版本。

七、总结与推荐

FossFLOW 以其独特的伪 3D 等距投影、完全离线能力和极简操作流程，成为技术架构可视化的利器。尤其适合：

• 追求图表美观性的技术布道者。
• 需要保护数据隐私的企业团队。
• 对包体积敏感的移动端或低带宽场景。

它是一个典型的工程师思维产物，用技术解决展示痛点。如果你想寻找更多类似的优质工具或技术实践，欢迎来 云栈社区 的 开源实战 板块交流探讨。