Block Diagram (WIP)

Syntax suggestion for layout (paperware)

Simple block

block
  block1["Block 1"]

Blocks next to each other

block
  block1["Block 1"]
  block2["Block 2"]

Blocks in a column

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

or

block
  direction TB
  block1["Block 1"]
  block2["Block 2"]

Different widths

block
  direction TB
  block1["Block 1"]
  
  block
     block2["Block 2"]
     block3["Block 3"]
  end %% End the compound block

Block Arrows

This differs from regular edges as the arrow is really a block.

block
  direction LR
  block1["Block 1"]
  <=1,1=>
  block2["Block 2"]

or (equivalent)

block
  direction LR
  block1["Block 1"] <=1,1=>  block2["Block 2"]

Vertical arrow

block
  direction TB
  block1["Block 1"]
  <=1,1=>
  block2["Block 2"]

Auto columns

Amount of columns are automatically calculated. So specifying it is redundant unless you specifically want to set to a value. This could for instance be the case where you want a block to take half of the space. The default state is columns auto.

block-beta

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

Layout direction

block-beta

block app["Application"]
direction LR
app --> client
app --> admin
client <--> admin
client["Client Application"]
admin["Admin Application"]
end

alt

block-beta

block app["Application"]
app 
<=0,2=>
block
  client <= 1,1 => admin
end

direction=TB

direction=LR

Direction is inspired by dot language as well as flex-direction attribute.

Layout direction auto-change

Layout direction for nested blocks must be switched automatically

block-beta
direction TB

block row1
  col1
  col2
  col3
end
block row2
  col1
  col2
  col3
end
block row3
  col1
  col2
  col3
end

The same graph with direction LR

Width

A block with a width attached will use multiple blocks. For instance:

block
   A:2 B

UserInterface("User Interface (WPF, HTML5/CSS3, Swing)"):3

But in that very example it must be omitted, I think the default behavior should be 'max' (or may be 'min'), depending on graph properties. And that is not obvious what to do in case if one line contains 2 elements and the other contains 3. Perhaps we need a percentage. If a child block is only one, that its width is 100%. If there are 2 blocks, and they have like width modifiers set to 1 and 3 respectively, than their width is 25% and 75%. By default that modifier should be equal to 1. Or may be we need to support any other css / svg attributes