Block Diagram (WIP)

Nikolay Rozhkov edited this page 2023-07-23 15:25:40 +03:00

Table of Contents

• Syntax suggestion for layout (paperware)
• Simple block
• Blocks next to each other
• Blocks in a column
• Different widths
• Block Arrows
• Vertical arrow
• Edges
• Combined edges / Block arrows
• Auto columns
• Layout direction
• Layout direction auto-change
• Width
• Space
• Padding and border
• classDef

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"]

Edges

The edges works as they do in flowcharts. From one node to the other based on the id. There will be no auto-layout but a a line from one node to the other.

block
  A --> B

Would render like this:

If nodes do not have overlapping the arrow would be between their centers.

If nodes overlap then arrows must connect middles of overlapping parts

Combined edges / Block arrows

In some cases an edge can take size of the whole block

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

If you have discrepancies the missing blocks are empty. For instance in the following block diagram you have full width block followed with another row with one block, B, using 2/3 of the width:

block
   direction TB
   A
   block
     columns 3
     B:2
   end

Here you can se this rendered:

The default width for a block is 1. In the example below A will use half of the space.

block
   columns 2
   A

Space

Sometimes you might want to insert an empty block that still use space. This can be facilitated using a space block. as per the following example:

block
   block
     space:2 id1["X"]
   end
   block
     space id2["X"]
   end
   block
     id3["X"]
   end

In the rendered image you can see the nameless blocks with a dashed border, in a real diagram they would be invisisble.

Padding and border

We need an intuitive way to specify if a block should have padding or not and it should have a border...

classDef

These statements should work in the same way as in flowcharts

footer