Mermaid 4

<h1>Block diagram demos</h1>
block-beta
columns 1
  db(("DB"))
  blockArrowId6(down)
  block:ID
    A
    B["A wide one in the middle"]
    C
  end
  space
  D
  ID --> D
  C --> D
  style B fill:#f9F,stroke:#333,stroke-width:4px

There

block-beta
columns 1
  db(("DB"))
  blockArrowId6<["   "]>(down)
  block:ID
    A
    B["A wide one in the middle"]
    C
  end
  space
  D
  ID --> D
  C --> D
  style B fill:#f9F,stroke:#333,stroke-width:4px

Here

block-beta
    A1["square"]
    B1("rounded")
    C1(("circle"))
    A2>"rect_left_inv_arrow"]
    B2{"diamond"}
    C2{{"hexagon"}}

More

block-beta
    A1(["stadium"])
    A2[["subroutine"]]
    B1[("cylinder")]
    C1>"surprise"]
    A3[/"lean right"/]
    B2["lean left"]
    C2[/"trapezoid"]
    D2["trapezoid"/]

Less

block-beta
 block:e:4
    columns 2
      f
      g
  end

before

block-beta
  block:e:4
    columns 2
      f
      g
      h
  end

<pre id="diagram" class="mermaid">

block-beta
columns 3
a:3
block:e:3
f
g
end
h
i
j

</pre>
<pre id="diagram" class="mermaid">

block-beta
columns 4
a b c d
block:e:4
columns 2
f
g
h
end
i:4

</pre>
<pre id="diagram" class="mermaid">

flowchart LR
X– “a label” –>z

block-beta
columns 5
   A space B
   A --x B
    
<pre id="diagram" class="mermaid">

block-beta
columns 3
a[“A wide one”] b:2 c:2 d

<pre id="diagram" class="mermaid">

block-beta
columns 3
a b c
e:3
f g h

<pre id="diagram" class="mermaid">

block-beta

A1:3
A2:1
A3