Description:

Hello, I’m using Mermaid diagrams for AWS architecture in my documentation and I’ve encountered a few usability issues that I’d like to address. Specifically, I’m working with horizontal diagrams that appear squeezed or distorted on the screen, making the text difficult to read. I'd like to request the following enhancements to improve the user experience with these diagrams:

1. Zoom In/Out with Buttons, Mouse, and Reset:

• It would be incredibly helpful to have zooming functionality for the Mermaid diagrams. The zoom should be controllable via:

  • Zoom buttons (e.g., zoom in/out buttons).
  • Mouse interactions (e.g., scrolling or using pinch-to-zoom on touch devices).

• Reset Button: In addition to zooming in and out, it would be great to have a reset button that returns the diagram to its original state (i.e., no zoom or panning applied). This would make it easy for users to quickly revert to the default view.

• These zoom and reset features would improve the visibility of complex diagrams and prevent text clipping, especially for diagrams that are too large or small.

2. Full-Screen Mode with Zoom:

• A full-screen mode feature would allow users to view the diagrams in an expanded state, without distractions from surrounding content. The zoom functionality should remain consistent and persistent even when switching to full-screen mode, similar to the behavior of older image viewers (like Picasa).

3. Panning (Dragging After Zooming):

• For larger diagrams, after zooming in, it would be great to have a panning (dragging) feature, allowing users to move around the diagram and view different sections. This would enhance the navigation experience, especially for large diagrams that extend beyond the screen.

4. Horizontal Diagrams Look Squeezed:

• Horizontal diagrams (such as the example in my code below) are appearing squeezed horizontally. This results in the text becoming difficult to read, and the diagram becoming hard to interpret. I’ve attached screenshots to show the issue more clearly:

AWS Mermaid Code Example:

graph TD
    %% Global Subgraph for the Cloud Boundary
    subgraph Cloud_Provider [AWS Cloud - Production Environment]
        
        %% External Traffic Flow
        User((End User)) -->|HTTPS/443| R53[Route 53 DNS]
        R53 -->|Global Routing| WAF[AWS WAF]
        WAF -->|Clean Traffic| ALB(Application Load Balancer)

        %% VPC / Cluster Subgraph
        subgraph VPC_Network [Private VPC - us-east-1]
            direction TB
            
            subgraph K8s_Cluster [EKS Cluster / Control Plane]
                ALB -->|Forward| Ingress[Nginx Ingress]
                Ingress -->|Route| ServiceA[Microservice A]
                Ingress -->|Route| ServiceB[Microservice B]
            end

            %% Data Persistence Layer
            subgraph Persistence [Data Layer]
                ServiceA -->|gRPC| Redis[(Redis Cache)]
                ServiceB -->|SQL| RDS[(PostgreSQL Primary)]
                RDS --- Standby[(RDS Standby)]
            end
        end

        %% External Integration
        ServiceA -->|Events| SQS[AWS SQS]
        SQS -->|Consume| Lambda[Serverless Processor]
        Lambda -->|Store| S3[S3 Bucket - Logs]
    end

graph TD
    %% Global Subgraph for the Cloud Boundary
    subgraph Cloud_Provider [AWS Cloud - Production Environment]
        
        %% External Traffic Flow
        User((End User)) -->|HTTPS/443| R53[Route 53 DNS]
        R53 -->|Global Routing| WAF[AWS WAF]
        WAF -->|Clean Traffic| ALB(Application Load Balancer)

        %% VPC / Cluster Subgraph
        subgraph VPC_Network [Private VPC - us-east-1]
            direction TB
            
            subgraph K8s_Cluster [EKS Cluster / Control Plane]
                ALB -->|Forward| Ingress[Nginx Ingress]
                Ingress -->|Route| ServiceA[Microservice A]
                Ingress -->|Route| ServiceB[Microservice B]
            end

            %% Data Persistence Layer
            subgraph Persistence [Data Layer]
                ServiceA -->|gRPC| Redis[(Redis Cache)]
                ServiceB -->|SQL| RDS[(PostgreSQL Primary)]
                RDS --- Standby[(RDS Standby)]
            end
        end

        %% External Integration
        ServiceA -->|Events| SQS[AWS SQS]
        SQS -->|Consume| Lambda[Serverless Processor]
        Lambda -->|Store| S3[S3 Bucket - Logs]
    end

Simplified Example Code (Squeezing Issue):

graph TD
    A[User Request] -->|Route 53| B(ALB)
    B --> C{Target Group}
    C -->|Healthy| D[EKS Pods]
    C -->|Unhealthy| E[Error 503]
    D -->|Query| F[(RDS Database)]

graph TD
    A[User Request] -->|Route 53| B(ALB)
    B --> C{Target Group}
    C -->|Healthy| D[EKS Pods]
    C -->|Unhealthy| E[Error 503]
    D -->|Query| F[(RDS Database)]

Screenshot Details:

• Without CSS ( Diagram): This shows the diagram before applying any CSS adjustments. It appears to be left aligned

• With CSS (Centered Diagram): This shows the diagram after applying custom CSS to center the diagram and improve layout.

• Horizontal Diagram Squeezing Issue: A screenshot of the horizontal diagram as it looks squeezed on the page (this will illustrate the issue you're facing with distorted horizontal diagrams).

• Zooming and Panning Example: A screenshot of the Mermaid Live Editor website demonstrating the zoom and panning functionality for reference.

5. Centering Diagrams:

• I’ve used the following custom CSS to center the diagrams, which helps with layout. However, I’d like to know if it’s possible to implement this centering behavior by default or if there’s a better way to achieve this without custom code:

/* Centering Mermaid diagrams */
.mermaid {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 2rem auto;
    background: transparent !important;
}

.mermaid svg {
    max-width: 100%;
    height: auto !important;
}

6. GitHub Functionality (Zoom, Panning, etc.):

• GitHub supports zooming, panning, and other similar functionalities for Mermaid diagrams, but these features are not available in the Blowfish theme. It would be great if the Blowfish theme could implement these features to enhance the diagram navigation experience in my documentation

My Goal:

The ideal solution would allow users to zoom, pan, reset, and view horizontal diagrams without them becoming distorted or squeezed. The ultimate goal is to create a more interactive and user-friendly experience, especially for larger and more complex diagrams.

If these features are not currently supported, I would appreciate any guidance on how to implement them or if there are existing workarounds.

Thank you for your help!