Allow centering and row height in Block diagrams

[RichardJECooke]

Proposal

No idea what the syntax should be, maybe centered blocks by default? See how bad the current Block diagram looks without it.

And we should be able to set row height eithr in CSS style or with something like height:0.5.

Example

block-beta
  columns 5
  block:A:3
    columns 3
    space
    W["Your server"]
    space
    block:B
      columns 1
      Z["Docker"]
      space
      space
      space
      H["Postgresql"]
    end
    block:C
      columns 1
      X["Docker"]
      space
      D("OpenTelemetry for Java")
      space
      E("FusionAuth")
    end
    block:G
      columns 1
      Y["Docker"]
      space
      I("Splunk OpenTelemetry collector")
      space
      space
    end
  end
  space
  F("Splunk web server")
  I-->F
  D-->I
  D-->E
  E-->H
  style Z fill:#0000,stroke:#0000,stroke-width:0
  style X fill:#0000,stroke:#0000,stroke-width:0
  style Y fill:#0000,stroke:#0000,stroke-width:0
  style W fill:#0000,stroke:#0000,stroke-width:0

Screenshots

block-beta
  columns 5
  block:A:3
    columns 3
    space
    W["Your server"]
    space
    block:B
      columns 1
      Z["Docker"]
      space
      space
      space
      H["Postgresql"]
    end
    block:C
      columns 1
      X["Docker"]
      space
      D("OpenTelemetry for Java")
      space
      E("FusionAuth")
    end
    block:G
      columns 1
      Y["Docker"]
      space
      I("Splunk OpenTelemetry collector")
      space
      space
    end
  end
  space
  F("Splunk web server")
  I-->F
  D-->I
  D-->E
  E-->H
  style Z fill:#0000,stroke:#0000,stroke-width:0
  style X fill:#0000,stroke:#0000,stroke-width:0
  style Y fill:#0000,stroke:#0000,stroke-width:0
  style W fill:#0000,stroke:#0000,stroke-width:0

Loading

[KemalSoysal]

I need different row heights in the block diagram.
I admit I wanted to use block diagram for simple UI wire frames.
Maybe besides centering it would help to provide the alignment individually on each column.

[1066design]

This would be an amazing feature... This can be achieved by stacking charts :) and creative spacing...

[dcooper-database9]

I noticed that your color variables were not valid, causing your style statements to break. I did some playing around in the live editor and got the dimensions to work, somewhat, but not alignment. I actually had more success with dimensions when the diagrams are complex. Here's the most simple diagram I could create that came out correctly:

%%working example
block-beta
  block:A:3
    columns 3
    block:B
      columns 1
      GreenBox["Box 1"]
    end
    block:C
      columns 1
      BlueBox["Box 2"]
    end
    block:G
      columns 1
      RedBox["Box 3"]
    end
  end
  style GreenBox height:200px,width:100px,fill:#0f0,stroke:#0,stroke-width:1
  style BlueBox height:100px,width:200px,fill:#0ff,stroke:#0,stroke-width:1
  style RedBox height:200px,width:200px,fill:#f00,stroke:#0,stroke-width:1

When I simplified it further, the text showed up outside the box, or the box resized to fill the space. Here's an example that didn't work:

%%oversimplified
block-beta
  columns 3
  GreenDocker["Docker 1"]
  BlueDocker["Docker 2"]
  RedDocker["Docker 3"]

  style GreenDocker width:200px,height:100px,fill:#0f0,stroke:#0,stroke-width:1
  style BlueDocker width:100px,height:200px,fill:#0ff,stroke:#0,stroke-width:1
  style RedDocker width:200px,height:200px,fill:#f00,stroke:#0,stroke-width:1