Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Architecture diagram - non uniform spacing of icons #6167

Open
hakanson opened this issue Jan 6, 2025 · 0 comments
Open

Architecture diagram - non uniform spacing of icons #6167

hakanson opened this issue Jan 6, 2025 · 0 comments
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@hakanson
Copy link

hakanson commented Jan 6, 2025

Description

When the architecture-beta diagram is rendered, the layout engine does spaces out some icons farther from others. In the screenshot below:

  1. on the first row, the furthest right icon for Amazon S3 is has more spacing (is further away) that the rest of icons
  2. on the third row, the Amazon API Gateway icon is further down from Registration Page in the second row, that the second row from the first

Steps to reproduce

  1. render diagram with the link below or this mermaid source
architecture-beta
    service users[Customers]
    group awscloud(cloud)[AWS Cloud]
        service marketplace(server)[AWS Marketplace] in awscloud
        service edge(server)[Lambda Edge] in awscloud
        service cloudfront(internet)[Amazon CloudFront] in awscloud
        service s3(disk)[Amazon S3] in awscloud

        service page[Registration Page] in awscloud

        service api(internet)[Amazon API Gateway] in awscloud
        service lambda(server)[AWS Lambda] in awscloud
        service dynamodb(database)[Amazon DynamoDB] in awscloud

        users:R --> L:marketplace
        users:B --> L:page
        marketplace:B --> T:page
        marketplace:R --> L:edge
        edge:R --> L:cloudfront
        cloudfront:B --> R:page
        cloudfront:R --> L:s3

        page:B --> T:api

        api:R --> L:lambda
        lambda:R --> L:dynamodb

Screenshots

marketplace

This version is rendered with custom AWS icons

marketplace icons

Code Sample

https://develop.git.mermaid.live/edit#pako:eNqFU0tvwjAM_itRTp0EJ249TOKxTZNAQjBpB8rBbUyJaJMqjyGG-O9LHzQd1dYeqtjf99mOHV9pIhnSkIJKjtxgYqzCcYwGIkHcp1F98QSJdQe9m1ttZO5O-xpNlbQFgbNOMmlZUP2fdtPPLZmXx4bVjZODOqEpMkgwKH2oav7K-_eEizZmPwKy1EuXkMcMyIvzDcgq90FJYQIuDCqBxmXO4VuKutjXEhsIoicB4_rUCreTB0FfUkCKuw2mXBsFhjvRGnrF9mVQ8H6d0_U7eQODZ7gMFJpVffnV4bpVAzp2EZBLFgcMDMSgsc29qJDF7M_KqxcSbsh4_EyWYWfOj5RZQyk747GOoGF8_MO4pykfg2eUVgv5gXuC9zU5Ng85OoR7HD3p3rKkt_W5IXUxZ7aqegAeq-0WvveZjqhbpxw4cyt4LekRNUfMMaKhOzJ35YhG4uZ4YI3cXkRCQ6MsjqhbvfRIwwNk2lm2cBPDBYdUQd56kXEj1are8GrRbz_ss0aH

Setup

  • Mermaid version: 11.4.1 or develop
  • Browser and Version: Edge

Suggested Solutions

No response

Additional Context

No response

@hakanson hakanson added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Jan 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Development

No branches or pull requests

1 participant