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
68.63k stars 6.05k forks source link

Block Diagrams - variable resuse in groups and group labels #5588

Open andar1an opened 1 week ago

andar1an commented 1 week ago

Description

When creating Groups in a block diagram, it may be expected that the same variables can be used to represent port numbers for example. Also, it would be nice to be able to include a label in a group graphical area instead of being required to use additional column space or a block.

Steps to reproduce

For variable replication you can use the following:

block-beta
  columns 12
    %% horizontal spacing for centering
    space:3
    %% router block
    id1("router"):1
    block:router:5
      columns 6
      1 2 3 4 5 6
    end
    %% horizontal spacing for centering
    space:3
    %% vertical spacing
    space 12
    %% wireless ap block
    id3("wireless ap"):1
    block:ap:5
      columns 6
      1 2 3 4 5 6
    end

For Labeling, there are many ways one can try to include labels, I found the easiest to be a side block, because trying to add a label into a group would not allow for a block to take up full width of group columns. e.g.

    block:router:5
      columns 6
      t["router"]:6
      r1 r2 r3 r4 r5 r6
    end

Screenshots

image image

Code Sample

code samples in steps to reproduce

Setup

Suggested Solutions

workaround is currently to prefix with a letter to differentiate variables, solution would likely revolve around when code is parsing variables in a group some logic or a macro may add context of group to the variable name to prevent conflicts.

Additional Context

No response