{"id":51310155,"url":"https://github.com/diagrams-js/plugin-docker-compose","last_synced_at":"2026-07-01T03:00:49.653Z","repository":{"id":350956453,"uuid":"1208835182","full_name":"diagrams-js/plugin-docker-compose","owner":"diagrams-js","description":"Docker Compose import/export plugin for diagrams-js","archived":false,"fork":false,"pushed_at":"2026-05-03T22:25:33.000Z","size":170,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-04T00:25:55.423Z","etag":null,"topics":["diagrams-as-code","diagrams-js","docker-compose","plugin"],"latest_commit_sha":null,"homepage":"https://diagrams-js.hatemhosny.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/diagrams-js.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":"FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["hatemhosny"],"ko_fi":"hatemhosny","custom":["https://paypal.me/hatemhosni"]}},"created_at":"2026-04-12T20:00:54.000Z","updated_at":"2026-05-03T22:25:37.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/diagrams-js/plugin-docker-compose","commit_stats":null,"previous_names":["diagrams-js/plugin-docker-compose"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/diagrams-js/plugin-docker-compose","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diagrams-js%2Fplugin-docker-compose","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diagrams-js%2Fplugin-docker-compose/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diagrams-js%2Fplugin-docker-compose/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diagrams-js%2Fplugin-docker-compose/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/diagrams-js","download_url":"https://codeload.github.com/diagrams-js/plugin-docker-compose/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diagrams-js%2Fplugin-docker-compose/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34990845,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-01T02:00:05.325Z","response_time":130,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["diagrams-as-code","diagrams-js","docker-compose","plugin"],"created_at":"2026-07-01T03:00:48.637Z","updated_at":"2026-07-01T03:00:49.630Z","avatar_url":"https://github.com/diagrams-js.png","language":"TypeScript","funding_links":["https://github.com/sponsors/hatemhosny","https://ko-fi.com/hatemhosny","https://paypal.me/hatemhosni"],"categories":[],"sub_categories":[],"readme":"# @diagrams-js/plugin-docker-compose\n\nDocker Compose import/export plugin for diagrams-js. Convert between Docker Compose YAML files and architecture diagrams.\n\n## Installation\n\n```bash\nnpm install @diagrams-js/plugin-docker-compose\n```\n\n## Usage\n\n### Import from Docker Compose\n\n```typescript\nimport { Diagram } from \"diagrams-js\";\nimport { dockerComposePlugin } from \"@diagrams-js/plugin-docker-compose\";\n\nconst diagram = Diagram(\"My Application\");\n\n// Register the plugin\nawait diagram.registerPlugins([dockerComposePlugin]);\n\n// Import from Docker Compose YAML\nconst composeYaml = `\nversion: \"3.8\"\nname: my-app\nservices:\n  web:\n    image: nginx:latest\n    ports:\n      - \"80:80\"\n    depends_on:\n      - db\n  db:\n    image: postgres:13\n    environment:\n      POSTGRES_DB: mydb\n`;\n\nawait diagram.import(composeYaml, \"docker-compose\");\n\n// Render the diagram\nconst svg = await diagram.render();\n```\n\n### Export to Docker Compose\n\n```typescript\nimport { Diagram, Node } from \"diagrams-js\";\nimport { dockerComposePlugin } from \"@diagrams-js/plugin-docker-compose\";\n\nconst diagram = Diagram(\"My Application\");\n\n// Create nodes with Docker Compose metadata\nconst web = diagram.add(Node(\"web\"));\nweb.metadata = {\n  compose: {\n    image: \"nginx:latest\",\n    ports: [\"80:80\"],\n  },\n};\n\nconst db = diagram.add(Node(\"db\"));\ndb.metadata = {\n  compose: {\n    image: \"postgres:13\",\n    environment: { POSTGRES_DB: \"mydb\" },\n  },\n};\n\n// Create dependency\nweb.from(db);\n\n// Register plugin and export\nawait diagram.registerPlugins([dockerComposePlugin]);\nconst composeYaml = await diagram.export(\"docker-compose\");\n\nconsole.log(composeYaml);\n// Output:\n// version: \"3.8\"\n// name: my-application\n// services:\n//   web:\n//     image: nginx:latest\n//     ports:\n//       - \"80:80\"\n//     depends_on:\n//       - db\n//   db:\n//     image: postgres:13\n//     environment:\n//       POSTGRES_DB: mydb\n```\n\n## Features\n\n### Import\n\n- Parse Docker Compose YAML files\n- Create nodes for each service with Docker icons\n- Create clusters for compose projects\n- Create edges for service dependencies (`depends_on`)\n- Support for networks and volumes\n- Store compose-specific metadata on nodes\n\n### Export\n\n- Export diagrams to Docker Compose YAML format\n- Include service configuration (image, ports, environment, volumes, etc.)\n- Reconstruct dependencies from edges\n- Include networks and volumes\n- Generate valid Docker Compose files\n\n## Configuration\n\n### Custom Image Mappings\n\nYou can customize which icons are used for specific Docker images. The plugin supports multiple mapping formats:\n\n**Mapping Priority:**\n\n1. **Service name** (e.g., `my-custom-api`) - takes precedence\n2. **Image name** (e.g., `nginx`, `postgres`) - fallback\n\n```typescript\nimport { Diagram } from \"diagrams-js\";\nimport { createDockerComposePlugin } from \"@diagrams-js/plugin-docker-compose\";\n\nconst diagram = Diagram(\"My Application\");\n\n// Create plugin with custom image mappings\nconst plugin = createDockerComposePlugin({\n  imageMappings: {\n    // 1. Provider icon mapping - use built-in provider icons\n    \"my-custom-api\": {\n      provider: \"onprem\",\n      type: \"compute\",\n      resource: \"Server\",\n    },\n    \"company-db\": {\n      provider: \"onprem\",\n      type: \"database\",\n      resource: \"Postgresql\",\n    },\n\n    // 2. Direct URL string - use a custom image URL\n    \"my-frontend\": \"https://example.com/react-icon.png\",\n\n    // 3. URL object - same as string but as object\n    \"my-backend\": {\n      url: \"https://example.com/node-icon.svg\",\n    },\n\n    // 4. Iconify icon - use icons from Iconify (https://iconify.design/)\n    // Format: { iconify: \"prefix:name\" }\n    \"docker-service\": {\n      iconify: \"logos:docker\",\n    },\n    \"aws-service\": {\n      iconify: \"logos:aws\",\n    },\n    kubernetes: {\n      iconify: \"logos:kubernetes\",\n    },\n  },\n});\n\nawait diagram.registerPlugins([plugin]);\n```\n\n### `ImageMappings` Type\n\nExported TypeScript type for defining image mappings with full type safety:\n\n```typescript\nimport { createDockerComposePlugin, ImageMappings } from \"@diagrams-js/plugin-docker-compose\";\n\nconst mappings: ImageMappings = {\n  \"my-api\": { provider: \"onprem\", type: \"compute\", resource: \"Server\" },\n  \"my-app\": { iconify: \"logos:docker\" },\n  \"custom-service\": \"https://example.com/icon.svg\",\n};\n\nconst plugin = createDockerComposePlugin({ imageMappings: mappings });\n```\n\n## Working with Clusters\n\nClusters are created through the diagram instance, not by calling `Cluster()` directly:\n\n```typescript\nimport { Diagram, Node } from \"diagrams-js\";\nimport { ECS } from \"diagrams-js/aws/compute\";\n\nconst diagram = Diagram(\"My Architecture\");\n\n// ✅ Correct: Create cluster via diagram.cluster()\nconst cluster = diagram.cluster(\"Services\");\ncluster.add(Node(\"Web Server\"));\ncluster.add(ECS(\"API\"));\n\n// Nested clusters\nconst outer = diagram.cluster(\"Production\");\nconst inner = outer.cluster(\"Services\");\ninner.add(ECS(\"API\"));\n\n// ❌ Incorrect: Don't call Cluster() directly\n// const cluster = Cluster(\"VPC\"); // This will throw an error\n```\n\nThe Docker Compose plugin automatically creates clusters for each compose project during import.\n\n## Runtime Support\n\n- Browser ✅\n- Node.js ✅\n- Deno ✅\n- Bun ✅\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiagrams-js%2Fplugin-docker-compose","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiagrams-js%2Fplugin-docker-compose","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiagrams-js%2Fplugin-docker-compose/lists"}