FossFLOW：轻松创建精美的3D等距技术图表

发表于 分类于 Waline： 阅读次数： 本文字数： 2.1k 阅读时长 ≈ 2 分钟
FossFLOW 是一个开源的渐进式 Web 应用程序 (PWA)，用于创建美观的等距基础设施图表。

简介

什么是 FossFLOW？

FossFLOW 是一个开源的渐进式 Web 应用程序 (PWA)，用于创建美观的等距基础设施图表。 它的主要目的是让用户能够轻松绘制出具有 3D 风格的技术图表，无论是用于文档、演示还是个人笔记。

主要特点

  • 🎨等距图表- 创建令人惊叹的 3D 风格技术图表
  • 💾自动保存- 您的工作每 5 秒自动保存一次
  • 📱 PWA 支持- 在 Mac 和 Linux 上作为原生应用安装
  • 🔒隐私第一- 所有数据都本地存储在您的浏览器中
  • 📤导入/导出- 以 JSON 文件形式共享图表
  • 🎯会话存储- 无需对话框即可快速保存
  • 🌐离线支持- 无需网络连接即可工作
  • 🗄️服务器存储- 使用 Docker 时可选的持久存储（默认启用）

应用场景

  • 系统架构设计：为软件工程师和架构师提供绘制清晰系统架构图的工具
  • 网络拓扑可视化：帮助网络工程师直观地展示复杂的网络布局
  • 技术文档插图：为技术文档和博客文章创建高质量、专业外观的插图
  • 教学与演示：在教学或技术分享会上，以生动的图表解释复杂概念
  • 项目管理：在项目规划和管理中，使用可视化图表来展示资源和流程
  • 设计与规划：用于设计和规划各种基础设施，包括网络、数据中心、云架构等

FossFLOW 的易用性和功能强大，使其成为创建和管理基础设施图的理想选择

安装

在群晖上以 Docker 方式安装。

在注册表中搜索 isoflow ，选择第一个 stnsmith/fossflow，版本选择 latest。

本文写作时， latest 版本对应为 master-2733f0b；

软件对应的版本是 v1.0.5

卷

在 docker 文件夹中，创建一个新文件夹 fossflow，并在其中建一个子文件夹 diagrams

文件夹 装载路径 说明
docker/fossflow/diagrams /data/diagrams 存放图表数据和自定义图标

端口

本地端口不冲突就行。

本地端口 容器端口
8332 80

默认暴露了 2 个端口

其中 3001 是后端运行的端口，可以不暴露出来

环境

该项目通过卷来持久化数据，可以无需配置额外的环境变量

环境变量 说明
ENABLE_SERVER_STORAGE 设置为 true 启用服务器端存储，以支持多设备访问。默认值为 true，图表保存到主机上的 ./diagrams 目录。
ENABLE_GIT_BACKUP 设置为 true 以自动将更改提交到 Git（可选）。默认值为 false。
STORAGE_PATH 存储路径（容器内），映射到主机上的 ./diagrams 目录。
BACKEND_PORT 后端运行的端口，通常不需要更改，默认值为 3001。

命令行安装

如果你熟悉命令行，可能用 docker cli 更快捷。

1
2
3
4
5
6
7
8
9
10
11
12
13
# 新建文件夹 fossflow 和 子目录
mkdir -p /volume1/docker/fossflow/diagrams

# 进入 fossflow 目录
cd /volume1/docker/fossflow

# 运行容器
docker run -d \
   --restart unless-stopped \
   --name fossflow \
   -p 8332:80 \
   -v $(pwd)/diagrams:/data/diagrams \
   stnsmith/fossflow:latest

该项目没有提供官方的 docker-compose.yml 文件，但你可以自己创建一个，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
services:
  fossflow:
    image: stnsmith/fossflow:latest
    pull_policy: always
    ports:
      - 8332:80
    environment:
      - NODE_ENV=production
      - ENABLE_SERVER_STORAGE=true
      - STORAGE_PATH=/data/diagrams
      - ENABLE_GIT_BACKUP=false
    volumes:
      - ./diagrams:/data/diagrams

然后执行下面的命令：

1
2
3
4
5
6
7
8
9
10
# 新建文件夹 fossflow 和 子目录
mkdir -p /volume1/docker/fossflow/diagrams

# 进入 fossflow 目录
cd /volume1/docker/fossflow

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

运行

在浏览器中输入 http://群晖IP:8332 就能看到主界面

点右上角菜单上的 “+” 按钮，组件库会出现在左侧

可以将组件从库拖放到画布上

也可以通过右键 Add Node 添加节点

最终可实现的效果

参考文档

stan-smith/FossFLOW: Make beautiful isometric infrastructure diagrams
地址：https://github.com/stan-smith/FossFLOW

FossFLOW - Isometric Diagramming Tool : r/selfhosted
地址：https://www.reddit.com/r/selfhosted/comments/1m5mn0v/fossflow_isometric_diagramming_tool/