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.11k stars 6.4k forks source link

nested block diagram's dynamic width not worked as expected #5470

Open Sean10 opened 5 months ago

Sean10 commented 5 months ago

When i use the block diagram, it's normal. But if i add a block which wrapped j and k, It would leave a space after it, it cannot use up of the rest space.

Before adding block which wrapped j and k

block-beta
  columns 3
  a:3
  block:group1:2
    columns 2
    h i 
      j k
  end
  g
  block:group2:3
    %% columns auto (default)
    columns 5
    l m n o p q r
  end

After adding block which wrapped j and k, which is not worked as expected

image

block-beta
  columns 3
  a:3
  block:group1:2
    columns 2
    h i 
    block:group3:2
      columns 2
      j k
    end
  end
  g
  block:group2:3
    %% columns auto (default)
    columns 5
    l m n o p q r
  end

expected result

image

Originally posted by @Sean10 in https://github.com/mermaid-js/mermaid/discussions/5467

Sean10 commented 2 months ago

Finally I found D2 could deal with this nested block diagram well.

Grid Diagrams | D2 Documentation

grid-columns: 2
a
a1
b: {
  c: {
    grid-rows: 2
    d
    e
    f
  }
}

image

Rojax commented 2 months ago

I'm having the same problem and suggest re-opening this issue. Just because another tool support this it, does not mean it is not an issue in mermaid.