还在手写 docker-compose.yml？这款开源神器让我 5 分钟搭完本地开发环境
原创 · 开发者工具种草开源 · MIT 协议
每次新项目都要查文档、拼端口、写 depends_on、配 healthcheck……
如果你也受够了「复制粘贴 + 改到崩溃」的 Compose 体验，今天这篇一定要看完。
Docker Compose Studio —— 一款面向本地开发的可视化编排平台，拖拽、配置、校验、导出、一键 Deploy，全流程在一个界面搞定。
React Flow 画布Monaco 编辑器AI 生成拓扑一键 Deploy开源免费
01 · 它是什么？
一句话：把 Docker Compose 变成「可拖拽的流程图」。你可以把它理解成「Docker Compose 的 Figma」——专注本地开发环境设计，而不是云部署平台。
左侧是服务市场，中间是可视化画布，右侧是配置面板 + Compose / Runtime / Templates / AI / Diff 五大功能区。从 0 到可运行的 docker-compose.yml，全程可视化。
▲ 整体界面：服务市场 + 可视化画布 + 配置面板 + Compose 编辑器，四栏布局一目了然
💡 核心亮点：Compose 生成器完全可在浏览器离线运行；接上后端后，还能一键 Deploy 到本机 Docker，并接入 Ollama / OpenAI 等 AI 模型。
02 · 服务市场：16+ 服务，拖拽即添加
内置 15 个常用服务 + 支持自定义扩展，按类别分组：
• 数据库：PostgreSQL、MySQL、MongoDB、Redis
• 消息队列：Kafka、RabbitMQ
• 存储 / 搜索：MinIO、Elasticsearch
• 开发框架：Spring Boot、Node.js、Python、Nginx
• AI 栈：Ollama、Open WebUI、Qdrant
每个服务都预置了最佳实践默认值：镜像版本、端口映射、数据卷、环境变量、健康检查。拖到画布上就能用，不用翻文档。
▲ 服务市场：Drag or click to add —— 拖拽或点击即可添加到画布
还可以点击右上角 「+」创建自定义服务，保存到浏览器本地，下次直接从市场复用。适合团队内部的私有镜像或内部中间件。
03 · 可视化画布：拓扑即架构
基于 React Flow 构建的可交互画布，支持：
• 拖拽移动节点，自动保存布局
• 连线建立 depends_on 依赖关系
• 缩放、平移、MiniMap 小地图导航
• Delete / Backspace 删除节点
• 节点按类别着色（数据库蓝、缓存黄、AI 紫……）
▲ 画布上的服务节点：显示镜像、端口，依赖关系一目了然
04 · 服务配置面板：所见即所配
点击画布上的任意节点，右侧配置面板立即展开，可编辑：
• 服务名称、Docker 镜像
• 端口映射（host:container）
• 数据卷（name:path）
• 环境变量（增删改）
• 启动命令（部分服务）
修改后实时同步到 Compose YAML，无需手动对齐两处配置。还可以把当前配置**「Save as Custom Service」**存回服务市场。
▲ 配置 PostgreSQL：镜像、端口、卷、环境变量一站式编辑
05 · Compose 编辑器：Monaco + 实时校验
右侧 Compose 标签页集成 Monaco Editor（VS Code 同款内核），特性包括：
• 画布变更 → YAML 自动生成（含 network、volumes、healthcheck、depends_on）
• 也可直接编辑 YAML，双向同步
• 语法高亮，深色/浅色主题跟随系统
• ValidationPanel 实时校验，Deploy 前拦截错误
▲ 校验面板：自动检测 depends_on 缺少 healthcheck 等隐患，点击可定位到对应服务
校验规则覆盖：
• 服务命名规范、重复检测
• 端口范围与冲突
• 卷映射格式
• 依赖关系完整性、循环依赖
• YAML 语法错误
06 · 环境模板：6 套开箱即用
不想从零搭？Templates 标签页提供 6 套内置模板，一键加载完整拓扑：
Spring Boot DevSpring Boot + PostgreSQL + Redis Python DevPython + PostgreSQL + Redis
RAG DevOllama + Open WebUI + Qdrant + PG AI DevOllama + Open WebUI
MicroservicesSpring Boot + Kafka + PG + Redis + Nginx Kafka ClusterKafka + Zookeeper
▲ 模板库：Built-in 内置模板 + My Templates 自定义模板
当前画布满意了？点 Save 保存为自定义模板，存在浏览器本地，下次秒开。团队同学也可以导出 YAML/ZIP 分享。
▲ 一键加载 RAG 开发环境：Ollama + Open WebUI + Qdrant + PostgreSQL 完整拓扑
07 · AI 助手：说人话，生成环境
这是我最爱的功能之一。AI 标签页里，用自然语言描述你想要的环境：
「我要搭建一个 Spring Boot + PostgreSQL + Redis 环境」
「我要一个本地 RAG 开发环境」
「微服务开发环境 with Kafka」
点击 Generate Topology，AI 自动生成服务拓扑并应用到画布。支持三层智能策略：
-
模板匹配 —— 精准命中内置模板（最快最准）
-
LLM 规划 —— Ollama 本地模型 / OpenAI 兼容 API（DeepSeek、Groq、Together、LM Studio…）
-
关键词规则 —— 离线降级，无后端也能用
▲ AI 助手：默认 Ollama，可切换任意 OpenAI 兼容 API，API Key 仅存浏览器本地
Model Settings 面板支持 7 种预设：Ollama、OpenAI、DeepSeek、Groq、Together AI、LM Studio、Custom。改 Base URL 和 Model 就能接入任何兼容 OpenAI 协议的模型。
08 · Diff 对比：改前改后一目了然
升级镜像版本？调整端口？Diff 标签页粘贴两份 Compose YAML，一键对比：
• + Added 新增的服务/字段
• − Removed 删除项
• ~ Changed 变更项（from → to）
支持「Use current」一键填入当前编辑器内容作为对比目标。纯前端运行，无需后端。
▲ Diff 面板：Source / Target 双栏输入，结构化 diff 结果
09 · Runtime：一键 Deploy + 实时日志
设计完不是终点，Runtime 标签页让你直接在本地 Docker 跑起来：
• Deploy —— 调用后端执行 docker compose up -d
• Stop —— 一键 docker compose down
• 容器列表 —— 实时状态、健康检查 badge
• CPU / 内存指标 —— 每个容器资源占用
• 日志流 —— WebSocket 实时推送，点击容器筛选
Deploy 有校验门禁：Compose 有 error 时禁止部署，避免「带病上线」。Header 上的绿色 Deploy 按钮可快速跳转到 Runtime 面板。
▲ Runtime 面板：Docker 连接状态、Deploy/Stop、容器监控与日志流
**⚙️ Deploy 配置提示：**后端需设置 DOCKER_ENABLED=true，并挂载 Docker Socket（/var/run/docker.sock）。本地开发推荐后端跑在宿主机；Docker 全栈模式根目录 compose 已预配好。
10 · 顶部工具栏：效率拉满
Header 集成了日常最高频的操作：
▲ 工具栏：撤销/重做 · 导入 · YAML 导出 · Deploy · ZIP 打包 · GitHub
• Undo / Redo —— 最多 50 步历史，支持 ⌘Z / ⌘⇧Z
• Import —— 上传现有 .yml，自动解析为可视化拓扑
• YAML —— 下载当前 compose 文件
• ZIP —— 打包 compose + README + .env.example
• Deploy —— 快捷跳转 Runtime，运行中显示 Running 状态
• 校验 Badge —— 有 error 时显示红色计数提醒
• 主题切换 —— 深色 / 浅色，Monaco 编辑器同步
11 · 深色模式：熬夜写配置也不累
一键切换深色主题，画布点阵、MiniMap、Monaco 编辑器、所有面板统一适配。偏好存在 localStorage，下次打开自动恢复。首次访问还会跟随系统主题。
▲ 深色模式：完整的暗色 UI，适合长时间使用
12 · 功能清单（一张表看完）
🛒 服务市场16+ 内置服务，拖拽/点击添加，自定义服务 🎨 可视化画布React Flow，连线依赖，MiniMap，缩放
⚙️ 配置面板镜像/端口/卷/环境变量实时编辑 📝 Compose 生成Monaco 编辑器，双向 YAML 同步
✅ 实时校验错误/警告分级，Deploy 门禁 📦 导入导出YAML 导入、YAML/ZIP 导出
📋 环境模板6 套内置 + 自定义模板 🤖 AI 助手Ollama / OpenAI 兼容，自然语言生成
🔀 Diff 对比两份 Compose 结构化 diff 🚀 一键 Deploydocker compose up/down
📊 容器监控CPU/内存指标，WebSocket 日志 ↩️ 撤销重做50 步历史，全局快捷键
🌙 深色主题全局暗色模式 💾 离线可用仅前端模式，无需后端
13 · 三种启动方式
⚡ 最快：仅前端（30 秒）
cd frontend && npm install && npm run dev 打开 http://localhost:5173，拖拽、生成 YAML、导出 ZIP，全部可用。
🔧 完整：本地全栈
docker compose up -d postgres redis DOCKER_ENABLED=true mvn spring-boot:run（后端） Deploy、AI LLM、项目持久化全开启。
🐳 一键：Docker 全栈
docker compose up -d Frontend :5173 · Backend :8080 · 已挂载 Docker Socket。
开源免费 · MIT 协议 · 个人 & 商业均可使用
⭐ GitHub：github.com/MMCISAGOODMAN/docker-compose-studio
写在最后
本地开发环境的搭建，不应该是每次新项目都重复的痛苦。Docker Compose Studio 想做的，就是把这件事变成可视化、可复用、可校验、可一键运行的愉快体验。
如果你经常搭 Spring Boot / Python / RAG / 微服务环境，强烈建议 Star 收藏，也欢迎提 Issue 和 PR 一起完善服务目录与模板库。
👇 觉得有用，转发给搭环境搭到崩溃的同事
— 关注公众号 —
专注后端架构 · Docker/K8s · 开源工具 · AI 工程化 每周分享能直接上手的实战干货，少讲空话，多给方案。
Docker 实战Spring Boot本地环境搭建开源项目解读AI 开发工具
👆 点击关注，不迷路
微信搜索「进阶技术客栈」即可关注 点赞、在看、转发，是对作者最大的支持 🙏
本文截图均为 Docker Compose Studio 真实运行界面 项目地址：https://github.com/MMCISAGOODMAN/docker-compose-studio