在VPS或者NAS上使用Docker部署FossFLOW-轻松创建精美的3D等距技术图表

yyzq

2025-10-12 / 0 评论 / 1 点赞 / 45 阅读 / 1,222 字

10/12

前言

在现代开发和技术管理中，图表和流程图是不可或缺的工具。它们帮助团队更好地理解复杂的概念和流程，特别是在需要呈现多维度技术信息时。FossFLOW 是一个开源的图表创建工具，可以帮助用户轻松地绘制出精美的 3D 等距技术图表。通过使用 Docker 在 VPS 或 NAS 上部署 FossFLOW，您可以在任何地方随时随地快速生成图表，而无需依赖复杂的本地安装和配置。

本教程将引导您一步步通过 Docker 部署 FossFLOW，帮助您高效地创建和管理图表。无论是用于技术文档、项目规划还是团队协作，FossFLOW 都能为您的工作带来更多便利与创意。

项目简介

FossFLOW 是一款功能强大的开源渐进式 Web 应用 (PWA)，可用于创建精美的等距图。它基于 React 和Isoflow（现已 fork 并发布到 NPM，更名为 fossflow）库构建，完全在浏览器中运行，并支持离线。

功能特点

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

demo

https://stan-smith.github.io/FossFLOW/

项目图片

部署方法

使用Docker安装

本教程使用docker的方式安装部署,简单便捷
164b6ac419e23bc5390dc46601a202bf

准备条件

1）一台服务器

我们使用莱卡云VPS和飞牛云NAS来演示

需要vps的可以看以下信息配置可以参考以下资源占用情况
莱卡云官网

本期docker容器占用资源情况如下仅供参考,总体占用内存不足50M

2）本项目使用到的开源项目

https://github.com/stan-smith/FossFLOW
更多功能或者二次修改可以访问开源项目地址

3）域名(可选)

域名可以根据自己的需求绑定，建议绑定下域名

① VPS部署

一、Docker环境部署

在vps安装docker和docker-compose
Docker官方安装文档（英文）
https://duan.yyzq.eu.org/docker-001
Docker-Compose官方安装文档（英文)
https://duan.yyzq.eu.org/docker-002
Centos安装Docker和Docker-compose（中文）
https://duan.yyzq.eu.org//03
Ubuntu安装Docker和Docker-compose（中文）
https://duan.yyzq.eu.org//04

推荐直接用一键脚本

docker安装脚本

bash <(curl -sSL https://cdn.jsdelivr.net/gh/SuperManito/LinuxMirrors@main/DockerInstallation.sh)

docker-compose安装脚本

curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose && chmod +x /usr/local/bin/docker-compose

二、创建docker-compose.yml文件

登录服务器使用root账户执行以下步骤

mkdir  fossflow;cd fossflow

然后再新建docker-compose.yml

vim docker-compose.yml

services:
  fossflow:
    image: stnsmith/fossflow:latest  # 使用的镜像
    pull_policy: always  # 始终拉取最新版本
    ports:
      - 8012:80  # 将容器的80端口映射到主机的8012端口
    environment:
      - NODE_ENV=production  # 设置环境为生产环境
      - ENABLE_SERVER_STORAGE=true  # 启用服务器存储
      - STORAGE_PATH=/data/diagrams  # 存储路径为/data/diagrams
      - ENABLE_GIT_BACKUP=false  # 禁用Git备份
    volumes:
      - ./diagrams:/data/diagrams  # 将主机的./diagrams目录挂载到容器的/data/diagrams目录

三、执行容器运行命令

docker-compose up -d #运行容器

docker-compose ps  #查看是否启动成功

正常启动如下所示

docker-compose ps  #查看是否启动成功
NAME                  IMAGE                      COMMAND                  SERVICE    CREATED              STATUS          PORTS
fossflow-fossflow-1   stnsmith/fossflow:latest   "/docker-entrypoint.…"   fossflow   About a minute ago   Up 59 seconds   3001/tcp, 0.0.0.0:8012->80/tcp, [::]:8012->80/tcp

四、打开web页面使用

成功以后需要打开自己相应的端口8012)防火墙就可以web端访问了

主界面

http://ip:8012

开箱即用

②飞牛云NAS部署

新建项目

fossflow

复制以上vps上的yaml文件

直接新建项目启动即可注意默认端口8012

绑定域名

建议绑定下域名

视频教程

B站

YouTube

绑定域名可以参考
NginxProxyManager
https://duan.yyzq.eu.org//npm-ch

有任何问题可以直接留言或者问我
有任何问题可以直接留言或者问我
有任何问题可以直接留言或者问我

欢迎关注我们的微信公众号！

目录CONTENT