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

Allow centering and row height in Block diagrams #5561

Open RichardJECooke opened 3 weeks ago

RichardJECooke commented 3 weeks ago

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