ContainerStudio - Docker可视化编排工具

一个Web端的Docker可视化编排工具，通过拖拽画布方式设计容器架构，支持保存/加载画布，并可导出为不同版本的docker-compose.yaml文件。

📋 目录

功能特性
技术栈
快速开始
界面说明
使用说明
预定义模板
项目结构
Docker Compose版本支持
开发指南
注意事项
常见问题
许可证

✨ 功能特性

📦 分类组件库

55+ 预定义容器模板，按13个分类组织
可折叠分类，优化用户体验
支持自定义镜像组件
直观的拖拽式添加节点
每个分类显示模板数量徽章

🎨 画布编辑器

基于React Flow的专业画布
节点拖拽、删除、选择
可视化创建容器间依赖关系
画布缩放、平移、小地图
撤销/重做功能（最多50步）
节点根据镜像自动显示对应图标

🔗 智能连线管理

右键菜单：翻转方向、删除连线
双击删除：快速删除连线
连线列表面板：查看和管理所有依赖关系
批量管理：在列表中翻转或删除连线

⚙️ 属性编辑

服务名称和镜像配置
端口映射
环境变量
Volumes挂载
depends_on依赖关系
重启策略
资源限制

💾 数据管理

保存画布到LocalStorage
加载历史画布
画布列表管理
删除画布
时间戳记录

📤 导出功能

支持多个Docker Compose版本（v2.0 - v3.9）
实时预览YAML内容
一键下载docker-compose.yaml
复制YAML到剪贴板
版本兼容性自动处理

🎯 简洁界面设计

单个整合的顶部工具栏
所有功能按钮一目了然
左侧组件库 + 中间画布 + 右侧属性面板
响应式布局

🛠️ 技术栈

前端框架: React 18.2.0
类型系统: TypeScript 5.2.2
构建工具: Vite 5.0.8
画布库: React Flow 11.10.4
YAML处理: js-yaml 4.1.0
状态管理: React Hooks
本地存储: LocalStorage
代码规范: ESLint 8.55.0

🚀 快速开始

环境要求

Node.js >= 18.0.0（推荐使用Node.js 20 LTS）
npm >= 9.0.0 或 pnpm >= 8.0.0

安装依赖

# 使用npm
npm install

# 或使用pnpm（推荐）
pnpm install

启动开发服务器

npm run dev

开发服务器将在 http://localhost:5173 启动，同时监听 0.0.0.0:5173，可以从局域网内其他设备访问。

构建生产版本

npm run build

构建产物将输出到 dist 目录。

预览生产版本

npm run preview

🎯 界面说明

顶部工具栏

从左到右的按钮顺序：

按钮	图标	功能说明
Logo	🐳	ContainerStudio标志和名称
新建	➕	创建一个新的空白画布，清空当前所有节点和连线
保存	💾	保存当前画布到浏览器LocalStorage。首次保存需要输入画布名称
加载	📂	打开画布列表，可选择加载历史保存的画布或删除不需要的画布
分隔线	｜	视觉分隔
撤销	↶	撤销上一步操作（最多支持50步撤销）
重做	↷	重做刚才撤销的操作
版本选择	下拉框	选择要导出的Docker Compose版本（v2.0 - v3.9）
预览	👁️	弹出预览窗口，显示当前画布生成的完整YAML内容
复制	📋	将当前画布生成的docker-compose.yaml内容复制到剪贴板，弹出成功提示
下载	⬇️	将当前画布导出为docker-compose.yaml文件并自动下载
分隔线	｜	视觉分隔
连线列表	🔗	显示/隐藏连线列表面板

左侧组件库

元素	功能说明
分类标题	点击可展开/折叠该分类，箭头图标会旋转指示展开状态
分类徽章	显示该分类下的模板数量
模板卡片	显示图标、名称和镜像名，可拖拽到画布

中间画布区域

操作	方式	功能说明
缩放	鼠标滚轮 / 左下角控件	放大或缩小画布
平移	按住画布空白区域拖动	移动画布视图
选择节点	点击节点	选中节点，右侧显示属性面板
创建连线	从一个节点底部拖到另一个节点顶部	创建容器间的依赖关系（depends_on）
连线右键菜单	右键点击连线	翻转方向、删除连线
双击连线	双击连线	快速删除连线
小地图	右下角	显示画布整体缩略图，可快速跳转到指定区域

连线列表面板

功能	说明
显示所有依赖	列出画布中的所有连线关系
源/目标服务	用蓝色和绿色标签区分源和目标服务
翻转按钮	快速翻转连线的方向
删除按钮	从列表中删除连线

右侧属性面板（需选中节点）

字段/按钮	功能说明
服务名称	容器服务的名称，必须符合命名规则（字母、数字、下划线、连字符）
镜像	Docker镜像名称和标签，如 `nginx:latest`
端口映射	端口映射列表，格式：`宿主机端口:容器端口`
+ 添加（端口）	添加一条新的端口映射配置，默认值为 `8080:80`
×（删除端口）	删除对应的端口映射
环境变量	键值对形式的环境变量配置
+ 添加（环境变量）	添加一条新的环境变量，默认键为 `NEW_KEY`，值为 `value`
Volumes	数据卷挂载列表，格式：`宿主机路径:容器路径`
+ 添加（Volumes）	添加一条新的数据卷挂载配置
×（删除Volume）	删除对应的数据卷挂载
重启策略	下拉选择容器重启策略： - `不设置`：不配置重启策略 - `no`：不自动重启 - `always`：总是自动重启 - `on-failure`：失败时重启 - `unless-stopped`：除非手动停止否则重启
🗑️ 删除节点	从画布中删除当前选中的节点及其所有连接

📦 预定义模板

ContainerStudio包含55+个预定义模板，按以下分类组织：

🌐 Web服务器 (3个)

Nginx - 高性能Web服务器和反向代理
Apache - 经典Web服务器
Traefik - 现代云原生反向代理和负载均衡器

🗄️ 数据库 (9个)

MySQL - 最流行的开源关系型数据库
PostgreSQL - 高级开源关系型数据库
MongoDB - 灵活的NoSQL文档数据库
Redis - 高性能内存数据存储
MariaDB - MySQL的开源分支
Elasticsearch - 分布式搜索和分析引擎
Kibana - Elasticsearch数据可视化
ClickHouse - 高性能列式数据库
Cassandra - 分布式NoSQL数据库

📨 消息队列 (3个)

RabbitMQ - 功能丰富的消息代理
Kafka - 高吞吐量分布式流平台
ZooKeeper - 分布式协调服务

💻 编程语言 (7个)

Node.js - JavaScript运行时
Python - 通用编程语言
OpenJDK - Java开发工具包
Go - Google的编程语言
Ruby - 动态编程语言
PHP - Web开发语言
Rust - 系统编程语言

🐧 操作系统 (5个)

Ubuntu - 最流行的Linux发行版
Debian - 稳定的Linux发行版
Alpine - 轻量级Linux发行版
CentOS - 企业级Linux发行版
Fedora - 创新的Linux发行版

🎨 缓存代理 (2个)

Varnish - HTTP加速器
HAProxy - 高可用性负载均衡器

📈 监控日志 (2个)

Prometheus - 监控和警报工具
Grafana - 数据可视化和监控仪表板

🔧 CI/CD (2个)

Jenkins - 自动化服务器
GitLab - 完整的DevOps平台

📦 存储 (1个)

MinIO - 高性能对象存储

👨‍💻 开发工具 (3个)

phpMyAdmin - MySQL Web管理界面
Adminer - 数据库管理工具
pgAdmin - PostgreSQL管理工具

🤖 AI/ML (10个)

TensorFlow - Google机器学习框架
PyTorch - Meta深度学习框架
Jupyter - 交互式数据科学Notebook
Ollama - 本地大语言模型运行工具
LocalAI - 本地AI API服务
Stable Diffusion - 文本到图像生成
LangChain - LLM应用开发框架
HuggingFace - Transformers模型库
MLflow - 机器学习生命周期管理
Weights & Biases - 模型实验追踪

📝 其他服务 (6个)

WordPress - 内容管理系统
Drupal - 企业级内容管理框架
Ghost - 现代博客平台
Nextcloud - 自托管云存储
Bitwarden - 密码管理器
Portainer - Docker管理UI

📦 自定义 (1个)

Custom - 自定义镜像，支持任意Docker镜像

📖 使用说明

1. 添加容器节点

在左侧组件库中找到需要的分类
点击分类标题展开/折叠该分类
将模板拖拽到中间的画布区域
节点会自动添加到画布中，并显示默认配置

2. 配置节点属性

点击画布上的任意节点
右侧属性面板会显示该节点的配置
根据需要修改各项参数：
- 服务名称：必须符合 ^[a-zA-Z0-9][a-zA-Z0-9_-]*$ 格式
- 镜像：Docker镜像名称，如 nginx:latest
- 端口映射：格式为 宿主机端口:容器端口，如 8080:80
- 环境变量：键值对形式的环境变量
- Volumes：数据卷挂载配置
- 重启策略：容器重启行为

3. 创建和管理连线

创建连线：

从一个节点的底部（源点）开始拖拽
连接到另一个节点的顶部（目标点）
释放鼠标完成连接
连线表示 depends_on 依赖关系

管理连线：

右键菜单：右键点击连线，选择「翻转方向」或「删除连线」
双击删除：直接双击连线快速删除
连线列表：点击顶部「🔗 连线列表」按钮，在面板中查看和管理所有连线

4. 导出docker-compose

在顶部工具栏选择需要的Compose版本（默认为v3.8）
点击 👁️ 预览 查看生成的YAML内容
点击 📋 复制 将YAML复制到剪贴板
点击 ⬇️ 下载 保存为 docker-compose.yaml 文件

5. 保存和加载画布

保存画布：

点击顶部工具栏的 💾 保存
输入画布名称
点击保存

加载画布：

点击顶部工具栏的 📂 加载
在列表中选择需要的画布
点击加载按钮

删除画布：

在加载画布列表中找到目标画布
点击删除按钮

6. 画布操作

缩放：使用画布左下角的缩放控件或鼠标滚轮
平移：按住画布空白区域拖动
撤销：点击顶部工具栏的 ↶ 撤销
重做：点击顶部工具栏的 ↷ 重做
删除节点：选中节点后点击右侧属性面板的 🗑️ 删除节点

📁 项目结构

ContainerStudio/
├── src/
│   ├── components/
│   │   ├── CustomNode.tsx       # 自定义节点组件，显示服务信息
│   │   ├── Sidebar.tsx        # 左侧组件库（分类可折叠）
│   │   ├── PropertiesPanel.tsx # 右侧属性编辑面板
│   │   ├── EdgeContextMenu.tsx # 连线右键菜单（翻转、删除）
│   │   └── EdgeListPanel.tsx   # 连线列表面板
│   ├── utils/
│   │   ├── composeExporter.ts  # Docker Compose导出工具
│   │   └── storage.ts         # LocalStorage存储工具
│   ├── types.ts               # TypeScript类型定义
│   ├── constants.ts           # 常量定义（55+模板按分类组织）
│   ├── App.tsx                # 主应用组件
│   ├── main.tsx              # 应用入口
│   └── index.css              # 全局样式
├── examples/
│   └── web-stack.yaml        # 示例docker-compose文件
├── package.json
├── tsconfig.json
├── vite.config.ts            # Vite配置（已配置0.0.0.0监听）
├── .gitignore
└── README.md

🐳 Docker Compose版本支持

ContainerStudio支持以下Docker Compose版本：

v2.x系列：2.0, 2.1, 2.2, 2.3, 2.4
v3.x系列：3.0, 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.8, 3.9

版本差异说明

v2.x：支持 depends_on 的condition选项
v3.x：depends_on 仅影响启动顺序，不支持健康检查等待；资源限制需在 deploy.resources.limits 中配置

👨‍💻 开发指南

添加新的容器模板

编辑 src/constants.ts 中的 TEMPLATE_CATEGORIES 数组，找到对应分类并添加新模板：

{
  name: 'YourService',
  icon: '🎯',
  defaultImage: 'your-image:tag',
  defaultPorts: ['8080:8080'],
  defaultEnvironment: { KEY: 'value' },
  defaultVolumes: ['./data:/data']
}

添加新的分类

在 TEMPLATE_CATEGORIES 数组中添加新的分类对象：

{
  name: '分类名称',
  icon: '🎨',
  templates: [
    // 模板列表
  ]
}

扩展属性面板

编辑 src/components/PropertiesPanel.tsx 添加新的配置项。

自定义导出逻辑

编辑 src/utils/composeExporter.ts 中的 exportToCompose 函数。

代码规范

项目使用ESLint进行代码检查：

npm run lint

⚠️ 注意事项

服务命名规则：服务名必须符合正则表达式 ^[a-zA-Z0-9][a-zA-Z0-9_-]*$
端口映射格式：正确格式为 宿主机端口:容器端口，例如 8080:80
v3版本限制：v3版本的 depends_on 仅影响启动顺序，不支持健康检查等待
数据存储：画布数据保存在浏览器LocalStorage中，清除浏览器数据会丢失画布
网络访问：开发服务器监听0.0.0.0，确保防火墙允许5173端口访问
模板数量：项目包含55+个预定义模板，通过分类组织以便于查找
连线管理：支持右键菜单、双击删除和连线列表面板三种方式管理连线

❓ 常见问题

Q: 如何在其他设备上访问开发服务器？

A: 确保您的设备和开发机器在同一局域网内，然后访问 http://<开发机器IP>:5173

Q: 画布数据会永久保存吗？

A: 画布数据保存在浏览器LocalStorage中，清除浏览器数据或使用隐私模式会导致数据丢失。

Q: 支持导入现有的docker-compose.yaml吗？

A: 当前版本暂不支持YAML导入功能，这是未来的规划功能。

Q: 如何备份我的画布？

A: 您可以将画布导出为docker-compose.yaml文件作为备份，或者导出浏览器LocalStorage数据。

Q: 支持Docker Swarm模式吗？

A: 当前版本主要支持docker-compose单机模式，Swarm模式的支持在规划中。

Q: 如何快速找到需要的模板？

A: 使用左侧组件库的分类功能，点击分类标题可以展开/折叠该分类，每个分类都显示模板数量。

Q: 如何管理连线？

A: 有三种方式：

右键点击连线，使用右键菜单
双击连线快速删除
点击「🔗 连线列表」按钮，在面板中批量管理

📄 许可证

MIT License

🤝 贡献

欢迎提交Issue和Pull Request！

📧 联系方式

如有问题或建议，欢迎通过Issue反馈。

享受使用ContainerStudio！ 🎉

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
examples		examples
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
index.html		index.html
package.json		package.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation