Usage help and clarification

[max1c]

I am trying to show a relationship between the mariadb and mariadb-replica with a dotted line. However, when I add such relationship the whole right side moves to the left and down. My question is how do I prevent the graph from moving down? Or alternatively what is the best way to show such a relationship?

Before adding the relationship DB1 to DB2:

graph TD
    subgraph Hosting
        VM1[VMservice1]
        VM2[VMservice2]
        VM2 --> |service| MDB2[(mariadb-replica)]
        VM1 --> MDB3[(mariadb-stage)]
        VM1 --> MDB1[(mariadb)]
        VM1 --> MDB2[(mariadb-replica)]
        
        MDB1 --> DB1{prod_db}
        MDB2 --> DB2{prod_db}
        MDB3 --> DB3{stage_db}

        %% Not sure how to implement the DB1 to DB2 replication relationship
        %%DB1 -.-> DB2
    
    end

Loading

After adding the relationship DB1 to DB2:

graph TD
    subgraph Hosting
        VM1[VMservice1]
        VM2[VMservice2]
        VM2 --> |service| MDB2[(mariadb-replica)]
        VM1 --> MDB3[(mariadb-stage)]
        VM1 --> MDB1[(mariadb)]
        VM1 --> MDB2[(mariadb-replica)]
        
        MDB1 --> DB1{prod_db}
        MDB2 --> DB2{prod_db}
        MDB3 --> DB3{stage_db}

        %% Not sure how to implement the DB1 to DB2 replication relationship
        DB1 -.-> DB2
    
    end

Loading

[sidharthv96]

graph TD
    subgraph Hosting
        VM1[VMservice1]
        
        VM1 --> MDB3[(mariadb-stage)]
        MDB3 --> DB3{stage_db}

        VM1 --> MDB1[(mariadb)]
        MDB1 --> DB1{prod_db}
        
        DB1 -.-> DB2
        VM1 --> MDB2[(mariadb-replica)]
        
        VM2 --> |service| MDB2[(mariadb-replica)]
        VM2[VMservice2]
        MDB2 ---> DB2{prod_db}

    end

Loading

graph TD
    subgraph Hosting
        VM1[VMservice1]
        
        VM1 --> MDB3[(mariadb-stage)]
        MDB3 --> DB3{stage_db}

        VM1 --> MDB1[(mariadb)]
        MDB1 --> DB1{prod_db}
        
        DB1 -.-> DB2
        VM1 --> MDB2[(mariadb-replica)]
        
        VM2 --> |service| MDB2[(mariadb-replica)]
        VM2[VMservice2]
        %% Notice the three -
        MDB2 ---> DB2{prod_db}

    end

[sidharthv96]

@max1c, I just played around with the order of the lines and increased the line length for a single link.

Option + Up/Down is very useful in live editor to order lines.

[max1c]

@max1c, I just played around with the order of the lines and increased the line length for a single link.

Option + Up/Down is very useful in live editor to order lines.

Thank you! This is very helpful. However, the ordering is not very clear to me. Are there any rules to follow or is it essentially just random up and down ordering until you get something close to what you're looking for?

[sidharthv96]

Ordering has been a rough spot for us. We have plans to introduce some features to help with this in the future.

I'm not aware if there is any documentation for this, what I shared is from my personal trial and error method. The core principle seems to be that the code from top to bottom is drawn from left to right.