mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
71.3k stars 6.43k forks source link

Teleporting nodes in subgraphs #2861

Open anotherglitchinthematrix opened 2 years ago

anotherglitchinthematrix commented 2 years ago

Describe the bug Probably a neglectable inconvenience rather than a bug.

The nodes defined in another subgraph teleports to first referenced subgraph if they're referenced before their definition in the second subgraph, probably because now they're defined in the referenced subgraph before the second subgraph. But if the referencing comes before or after all of the definitions it's working as expected. See the "working example" to understand what I mean.

To Reproduce Steps to reproduce the behavior:

  1. Define the subgraph SG1 and put the node N1 in it.
  2. Define the subgraph SG2 and put the node N2 in it.
  3. Reference to N2 in SG1 using N1-->N2.
  4. See N2 teleports to SG1.

Expected behavior I'm not sure if this is the expected outcome, but I wasn't expecting the node to be teleported and it got me confused. It has a very easy workaround on well organized structure, if the definitions made before references, everything should be working as expected.

Screenshots

Code Sample Preview on mermaid live editor

flowchart TB
    subgraph SG1 ["Broken Example"]
        direction TB
        subgraph SG11 ["Group 1"]
            direction LR
            N11(I'm belong to Group 1)
            N11-->N2
        end

        subgraph SG12 ["Group 2"]
            direction LR
            N2(I'm belong to Group 2)
        end
    end

    subgraph SG2 ["Working example"]
        A2-->B2

        subgraph SG21 ["Group 1"]
            direction LR
            A2(I'm belong to Group 1)
        end

        subgraph SG122 ["Group 2"]
            direction LR
            B2(I'm belong to Group 2)
        end
    end
flowchart TB
    subgraph SG1 ["Broken Example"]
        direction TB
        subgraph SG11 ["Group 1"]
            direction LR
            N11(I'm belong to Group 1)
            N11-->N2
        end

        subgraph SG12 ["Group 2"]
            direction LR
            N2(I'm belong to Group 2)
        end
    end

    subgraph SG2 ["Working example"]
        A2-->B2

        subgraph SG21 ["Group 1"]
            direction LR
            A2(I'm belong to Group 1)
        end

        subgraph SG122 ["Group 2"]
            direction LR
            B2(I'm belong to Group 2)
        end
    end
knsv commented 2 years ago

@anotherglitchinthematrix Sorry for the late response. I have avoided the issues during the spring as it would eat all of the available time for the project. Anyway, this is actually the intended behaviour. The alternative, to have the subgraph "stick" to the subgraph it last appeared in was the initial implementation and more inline with how other parts work like node title and type for instance. This resulted in many bug reports where users were surprised at where nodes ended up. Even though I like your suggestion it is not possible to modify this anymore as this would change many rendered diagrams out there.

anotherglitchinthematrix commented 2 years ago

@knsv No problem about the late response. Since the issue can be easily avoided by having a well organized flow. Do you think mentioning this behaviour in the documentation would be better?