Visual Docker Compose — Docker Compose 可視化ジェネレータ

DevOps
Visual Docker Compose — Docker Compose 可視化ジェネレータ

Visual Docker Compose — Docker Compose 可視化ジェネレータ

React + TypeScript で作られた「Visual Docker Compose」は、ドラッグ＆ドロップでサービスを配置し、ノードの接続で依存関係を定義、視覚的に docker-compose.yml を生成できるツールです。デモサイトが公開されており、コンポーネントライブラリやテンプレート、エクスポート機能などを備え、開発者が直感的にコンテナ編成を設計できます（約300字）

https://github.com/Anarkh-Lee/visual-docker-compose

概要

Visual Docker Compose は、Docker Compose の設定ファイルを視覚的に組み立てられるモダンなジェネレータです。左側のコンポーネントライブラリからサービスをドラッグしてキャンバス上に配置し、ノードのポートをクリックして線で結ぶことでサービス間の依存関係やネットワーク、ポート割り当てなどを直感的に定義できます。React（v18）と TypeScript（v5）で構築され、Web ベースの UI を通じて docker-compose.yml を生成・プレビュー・エクスポートできることを目指しています。開発者や運用担当者が複雑なマルチコンテナ構成を視覚的に把握・編集しやすくする補助ツールです。

GitHub

リポジトリの統計情報

  • スター数: 37
  • フォーク数: 2
  • ウォッチャー数: 37
  • コミット数: 7
  • ファイル数: 16
  • メインの言語: TypeScript

主な特徴

  • ドラッグ＆ドロップでサービスをキャンバスに配置し、視覚的にアーキテクチャを設計できる
  • ノードのポートをクリックして自動的に接続（サービス依存・ネットワーク定義）を作成できる
  • docker-compose.yml の生成・プレビュー・エクスポートをサポート（README、デモページあり）
  • コンポーネントライブラリ（components.json による定義）やテンプレートを利用した迅速な構築

技術的なポイント

Visual Docker Compose はフロントエンド主導の Web アプリとして設計されており、React と TypeScript を基盤にしている点がまず特徴です。TypeScript による型安全なコードベースは、複雑なノードや接続の状態管理（サービス定義、ポート／ボリューム／環境変数など）を扱う際に有効で、UI の拡張や保守を容易にします。プロジェクトに bun.lockb が含まれていることから、パッケージ管理や実行環境に Bun を利用している可能性が高く、軽量で高速な開発体験を重視していることが伺えます。

アプリケーションの中心には「キャンバス」と「コンポーネントライブラリ」があり、components.json によって再利用可能なサービステンプレートを定義している点が注目に値します。これにより、よく使うミドルウェア（DB、リバースプロキシ、キャッシュなど）をテンプレート化して素早く配置でき、組織内で共通の構成を標準化できます。スマートな接続（「智能连线」）は、ノードのポートやエンドポイントを抽象化して接続操作を簡潔にし、内部では各サービスの依存関係やエイリアス、ネットワーク定義へと変換される実装になっているはずです。

エクスポート面では、視覚的に定義した構成を docker-compose.yml 形式に変換するロジックが肝です。YAML のスキーマ準拠（version、services、volumes、networks など）を保ちながら、ポートマッピングや環境変数、ボリュームの永続化設定を正しく出力する実装が求められます。さらに、UI 側ではキャンバス編集と YAML 表示（またはコードビュー）とを双方向に同期させることで、視覚編集とテキスト編集の両方を許容する設計が考えられます。

デプロイやホスティングに関する情報は DEPLOY.md にまとめられており、公開デモ（https://compose.anarkh.site）が存在する点は実運用や検証に有用です。拡張性としては、コンポーネント追加やテンプレートの外部読み込み、既存の docker-compose.yml のインポート、さらには Kubernetes など別のオーケストレーション形式への変換プラグインを後から組み込める設計にしておくと長期的に価値が高まります。全体として、TypeScript と Bun の組み合わせ、コンポーネント定義による再利用性、視覚エディタと YAML 生成を結ぶ変換ロジックが本リポジトリの技術的中核です。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .gitignore: file
  • DEPLOY.md: file
  • README.md: file
  • bun.lockb: file
  • components.json: file

…他 11 ファイル

まとめ

直感的な UI で docker-compose を組み立てられる実用的なビジュアルツール。

リポジトリ情報：

READMEの抜粋：

🐳 Docker Compose 可视化编排工具

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

Docker Compose Generator React TypeScript

**演示地址：**https://compose.anarkh.site

✨ 功能特性

🎨 可视化画布

  • 拖拽式操作：从左侧组件库拖拽服务到画布，直观构建架构
  • 智能连线：点击节点端口自动创建服务依赖关系 -…