🐳 Docker Compose 可视化编排工具

一款现代化的 Docker Compose 可视化生成器，通过拖拽操作快速构建容器编排配置文件。

✨ 功能特性

🎨 可视化画布

• 拖拽式操作：从左侧组件库拖拽服务到画布，直观构建架构
• 智能连线：点击节点端口自动创建服务依赖关系
• 实时预览：右侧实时生成标准 docker-compose.yml 代码

📦 全能组件库 (40+ 服务)

分类	包含服务
🚀 语言运行环境	Spring Boot, Node.js, Python/Flask, Go, PHP-FPM, OpenJDK
🗄️ 数据库	MySQL, PostgreSQL, MongoDB, Redis, MariaDB, Neo4j, ClickHouse
🤖 AI & 向量数据库	Ollama, Milvus, ChromaDB, PgVector
📨 消息队列	RabbitMQ, Kafka, Zookeeper, RocketMQ, Mosquitto (MQTT)
☁️ 微服务组件	Nacos, Sentinel, Gateway, Seata
📊 监控与日志	Prometheus, Grafana, Elasticsearch, Kibana, Zipkin
🔐 安全与网关	Nginx, Traefik, Keycloak
🛠️ 开发工具	Jenkins, GitLab Runner, MinIO, Mailhog, Portainer, K3s (轻量级 K8s), Docker Dind

⚡ 快速模板

一键生成常用架构：

• Spring Cloud 全家桶：Nacos + Redis + MySQL + Gateway + 微服务
• ELK 日志栈：Elasticsearch + Logstash + Kibana
• LNMP 架构：Linux + Nginx + MySQL + PHP
• AI 开发环境：Ollama + ChromaDB + Python

🔧 高级配置

• 数据卷挂载：可视化配置 Host:Container 路径映射
• 环境变量：支持 Key-Value 和 .env 文本批量导入两种模式
• 端口映射：灵活配置服务端口
• 依赖管理：通过连线自动生成 depends_on

🔐 全局环境变量 (.env) 管理器

• GUI 模式：Key-Value 表格编辑，Key 自动大写，支持密文切换（眼睛图标隐藏敏感值）
• 文本模式：直接粘贴 .env 文件内容，自动解析为表格
• 变量引用：在服务配置中使用 ${VARIABLE_NAME} 格式引用全局变量
• 独立下载：分别下载 docker-compose.yml 和 .env 文件

📥 导入导出

• 导出 YAML：一键复制或下载生成的 docker-compose.yml
• 导出 .env：下载全局环境变量配置文件
• 导入 YAML：粘贴现有配置，自动反向生成可视化节点

🚀 快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

📖 使用指南

基本操作

1. 添加服务：从左侧组件库拖拽服务到画布
2. 配置属性：点击节点，在右侧面板编辑配置
3. 创建依赖：从一个节点的输出端口拖拽到另一个节点的输入端口
4. 生成配置：右侧面板实时显示生成的 YAML 代码
5. 复制使用：点击"复制代码"按钮，粘贴到项目中使用

快捷操作

• 使用模板：点击顶部"快速模板"下拉菜单，一键生成常用架构
• 导入现有配置：点击"导入 YAML"按钮，粘贴现有 docker-compose.yml
• 清空重来：点击"清空画布"按钮重置

配置数据卷

1. 选中需要配置的服务节点
2. 在右侧面板找到"数据卷 (Volumes)"区域
3. 点击"+"添加挂载规则
4. 填写宿主机路径和容器路径

批量添加环境变量

1. 选中服务节点
2. 点击环境变量区域的"文本模式"按钮
3. 粘贴 .env 格式的配置：

   MYSQL_ROOT_PASSWORD=123456
   MYSQL_DATABASE=myapp
   

4. 切换回表单模式自动解析

使用全局环境变量管理器

1. 点击顶部工具栏的 "环境变量 (.env)" 按钮
2. 在弹出的抽屉中添加全局变量（如 MYSQL_ROOT_PASSWORD=secret123）
3. 在服务节点的环境变量配置中，使用 ${MYSQL_ROOT_PASSWORD} 格式引用变量
4. 生成的 YAML 会保留变量引用格式
5. 分别下载 .yml 和 .env 文件，放在同一目录下运行 docker-compose up

🛠️ 技术栈

• 前端框架：React 18 + TypeScript
• 构建工具：Vite
• UI 组件：shadcn/ui + Radix UI
• 样式方案：Tailwind CSS
• 流程图引擎：React Flow
• YAML 处理：js-yaml
• 数据分析：Google Analytics 4

📁 项目结构

src/
├── components/
│   ├── CanvasFlow.tsx      # 画布核心组件
│   ├── ServiceNode.tsx     # 服务节点组件
│   ├── ServiceSidebar.tsx  # 左侧组件库
│   ├── PropertiesPanel.tsx # 右侧属性面板
│   ├── YamlPreview.tsx     # YAML 预览组件
│   ├── EnvManager.tsx      # 全局环境变量管理器
│   └── ImportYamlDialog.tsx# 导入对话框
├── hooks/
│   ├── useDockerCompose.ts # Docker Compose 生成逻辑
│   └── useEnvVariables.ts  # 环境变量管理逻辑
├── lib/
│   ├── analytics.ts        # Google Analytics 4 集成
│   └── utils.ts            # 工具函数
├── types/
│   └── docker.ts           # 类型定义与服务模板
└── pages/
    └── Index.tsx           # 主页面

📊 使用统计与分析

本项目已集成 Google Analytics 4 (GA4)，用于收集匿名使用数据以改进产品体验。

跟踪的数据

• 页面浏览量
• 服务添加/删除操作
• YAML 导入/导出操作
• 模板使用情况
• 节点复制和连接创建

关键功能事件跟踪

已在以下位置添加事件跟踪：

功能	文件	事件名称
添加服务	Index.tsx	Canvas > Add Service
删除服务	Index.tsx	Canvas > Remove Service
复制节点	Index.tsx	Canvas > Duplicate Node
创建连接	Index.tsx	Canvas > Create Connection
清空画布	Index.tsx	Canvas > Clear All
导出 YAML	useDockerCompose.ts	Export > Download YAML
复制 YAML	useDockerCompose.ts	Export > Copy YAML
导入 YAML	Index.tsx	Import > Import YAML
使用模板	Index.tsx	Template > Use Template

配置 GA4（开发者）

1. 获取 GA4 衡量 ID

   • 访问 Google Analytics
   • 创建账号和属性，获取 G-XXXXXXXXXX 格式的衡量 ID

2. 设置环境变量

   # 复制环境变量模板
   cp .env.example .env
   
   # 编辑 .env 文件，填入你的 GA4 ID
   VITE_GA_MEASUREMENT_ID=G-你的衡量ID

3. 验证集成

   # 构建生产版本
   npm run build
   npm run preview
   
   # 访问预览地址，然后在 GA4 控制台查看实时数据

隐私说明

• GA4 仅在生产环境启用（开发环境不收集数据）
• 不收集个人身份信息
• 所有数据用于改进产品功能

🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支：git checkout -b feature/amazing-feature
3. 提交更改：git commit -m 'Add amazing feature'
4. 推送分支：git push origin feature/amazing-feature
5. 提交 Pull Request

📄 开源协议

本项目采用 MIT 协议开源。

🌟 Star History

如果这个项目对你有帮助，请给一个 ⭐ Star 支持！

---

Made with ❤️ by the Community