skonik / docker-compose-diagram

🐳docker-compose + 🎨diagrams = docker-compose-diagram 🐳🎨
https://skonik.github.io/docker-compose-diagram
MIT License
74 stars 7 forks source link

svg images not loading in final diagram png #5

Open manjeshpv opened 1 year ago

manjeshpv commented 1 year ago

i downloaded svg from https://simpleicons.org/?q=react

some images are loading some images are not loading

i places all svg files on same folder

version: '3.8'
services:
  postgresql:
    image: postgres:15.3
    restart: always
    volumes:
      - postgresql_data:/var/lib/postgresql/data
    labels:
      "docker_compose_diagram.cluster": "DB"

  hasura-graphql-service:
    image: hasura/graphql-engine:v2.27.0
    restart: always
    ports:
      - 8080:8080
    labels:
      "docker_compose_diagram.icon": "graphql.svg"
      "docker_compose_diagram.cluster": "DB"

  iam-api-gtw:
    image: elivaas/iam-api-gtw:v1.11.0
    restart: always
    ports:
      - 4003:4003
    environment:
      - DATABASE_URL=
    depends_on:
      - hasura-graphql-service
      - user-omnilogin-microservice
    labels:
      "docker_compose_diagram.icon": "nodedotjs.svg"
      "docker_compose_diagram.cluster": "IAM"
      "docker_compose_diagram.description": "API Gateway"

  user-omnilogin-microservice:
    image: elivaas/iam-svc-oauth:v1.11.0
    depends_on:
      - postgresql
    labels:
      "docker_compose_diagram.icon": "nodedotjs.svg"
      "docker_compose_diagram.cluster": "IAM"

  ory-hydra:
    image: oryd/hydra:v1.11.0
    restart: always
    ports:
      - 9000:9000
    depends_on:
      - postgresql
    labels:
      "docker_compose_diagram.icon": "goland.svg"
      "docker_compose_diagram.cluster": "IAM"

  cms-www:
    image: elivaas/cms-www:v1.11.0
    depends_on:
      - cms-api-gtw
    labels:
      "docker_compose_diagram.icon": "react.svg"
      "docker_compose_diagram.cluster": "Website"

  cms-api-gtw:
    image: elivaas/cms-api-gtw:v1.11.0
    depends_on:
      - cms-strapi-admin
    labels:
      "docker_compose_diagram.icon": "nodedotjs.svg"
      "docker_compose_diagram.cluster": "CMSAdmin"

  cms-strapi-admin:
    image: elivaas/cms-strapi-admin:v1.11.0
    depends_on:
      - postgresql
    labels:
      "docker_compose_diagram.icon": "strapi.svg"
      "docker_compose_diagram.cluster": "CMSAdmin"
  pms-admin:
    image: elivaas/pms-admin:v1.11.0
    depends_on:
      - pms-api-gtw
    labels:
      "docker_compose_diagram.icon": "react.svg"
      "docker_compose_diagram.cluster": "ProperyAdmin"
  pms-api-gtw:
    image: elivaas/pms-api-gtw:v1.11.0
    depends_on:
      - hasura-graphql-service
    labels:
      "docker_compose_diagram.icon": "nodedotjs.svg"
      "docker_compose_diagram.cluster": "ProperyAdmin"
  owner-app-api-gtw:
    image: elivaas/owner-app-api-gtw:v1.11.0
    depends_on:
      - hasura-graphql-service
    labels:
      "docker_compose_diagram.icon": "nodedotjs.svg"
      "docker_compose_diagram.cluster": "OwnerApp"
volumes:
  postgresql_data:

docker-compose

skonik commented 1 year ago

Hi. Thank you for posting your issue.

Currently custom images are not supported. Current implementation parses docker_compose_diagram.icon and searches images inside diagrams package with the specified pattern in name(node, react).

But I'll try to add such possibility. It's a good idea. Thanks

skonik commented 12 months ago

In the latest release I've added possiblity to use .png images. .svg images are not reconginzable by diagrams package. In your case I converted your .svg images into a bunch of .png images and changed docker-compose file.

Here is what I get now: docker-compose

You can find files here: docker_compose_diagram_custom.zip

Hope this resolves your issue.