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
69.21k stars 6.12k forks source link

support for Block diagrams to merge row blocks #5379

Open jgunstone opened 4 months ago

jgunstone commented 4 months ago

Description

within a Block diagram you specify the columns and then each new line is a row. it would be awesome if row blocks could be merged

Steps to reproduce

see code sample.

NOTE - this isn't a bug - it is a feature request for an existing diagram type (which I couldn't see a issue-type for).

Screenshots

I would like to create this: image

the closest I could get is this: image

Code Sample

block-beta
  columns 6
  a0:6
  a1:1 c1:4 b1:1
  a2:1 c2:4 b2:1
  a3:1 c3:4 b3:1
  a4:1 c4:4 b4:1
  a5:1 c5:4 b5:1

  classDef front fill:#696,stroke:#333;
  classDef back fill:#969,stroke:#333;
  class a0,a1,a2,a2,a3,a4,a5,b0,b1,b2,b2,b3,b4,b5 front
  class c1,c2,c3,c4 back

Setup

Suggested Solutions

No response

Additional Context

No response

sysescool commented 2 weeks ago

I can give you another example:

But the a0 block is too high, and I don't know how to control it. It is really ugly.

block-beta
  columns 6
  a0:6
  a1:1
  block:cgroup:4
    columns 1
    c1
    c2
    c3
    c4
    c5
  end
  b1:1
block-beta
  columns 6
  a0:6
  a1:1
  block:cgroup:4
    columns 1
    c1
    c2
    c3
    c4
    c5
  end
  b1:1