Skip to content

Block Diagram (WIP)

Knut Sveidqvist edited this page Jul 18, 2023 · 17 revisions

Syntax suggestion for layout (paperware)

Simple block

image
block
  columns 1
  block1[Block 1]

Blocks next to each other

image
block
  columns 2
  block1[Block 1]
  block2[Block 2]

Blocks in a column

image
block
  columns 1
  block1[Block 1]
  block2[Block 2]

Different widths

image
block
  columns 1
  block1[Block 1]
  
  block
     columns 2
     block2[Block 2]
     block3[Block 3]
  end %% End the compound block

Arrows

image
block
  columns 3
  block1[Block 1]
  <==>
  block2[Block 2]

or (equivalent)

block
  columns 3
  block1[Block 1] <==>  block2[Block 2]

Vertical arrow

image
block
  columns 1
  block1[Block 1]
  ^==v
  block2[Block 2]

Auto columns

Amount of columns are automatically calculated. So specifying it is redundant.

The only scenario where we would need to specify this columns 'H' is where we have some other default for the whole graph, e.g.

mermaid.initialize({
  theme: 'default',
  block: {
    columns: 3,
  },
});

and only then we would redefine this behavior for specific bock

block-beta

block
  block app
    columns auto %% or
    columns H %% or
    columns 5 
  end
end

I found auto keyword to be more descriptive than H letter. May be columns 0 is ok as a default value too

Clone this wiki locally