block-beta
  blockArrowId<["Label"]>(right)
  blockArrowId2<["Label"]>(left)
  blockArrowId3<["Label"]>(up)
  blockArrowId4<["Label"]>(down)
  blockArrowId5<["Label"]>(x)
  blockArrowId6<["Label"]>(y)
  blockArrowId6<["Label"]>(x, down)
    

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

    

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

    

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

    

flowchart LR
  X-- "y" -->z
    

block-beta
columns 5
   A space B
   A --x B
    

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

block-beta
  block:e
      f
  end
    

block-beta
  columns 3
  a:3
  block:e:3
      f
  end
  g
    

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

    

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

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

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
    

block-beta
  columns 5
  A1:3
  A2:1
  A3
  B1 B2 B3:3
    

block-beta
  block
    D
    E
  end
  db("This is the text in the box")
    

block-beta

      block
        D
      end
      A["A: I am a wide one"]
    

block-beta
    A["square"]
    B("rounded")
    C(("circle"))
    

block-beta
    A>"rect_left_inv_arrow"]
    B{"diamond"}
    C{{"hexagon"}}
    

block-beta
    A(["stadium"])
    

block-beta
    %% A[["subroutine"]]
    %% B[("cylinder")]
    C>"surprise"]
    

block-beta
    A[/"lean right"/]
    B[\"lean left"\]
    C[/"trapezoid"\]
    D[\"trapezoid"/]
    

flowchart
      B
      style B fill:#f9F,stroke:#333,stroke-width:4px
    

      flowchart LR
      a1 -- apa --> b1
    

flowchart RL
  subgraph "`one`"
    id
  end
    

flowchart RL
    subgraph "`one`"
      a1 -- l1 --> a2
      a1 -- l2 --> a2
    end
    

flowchart
id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]

flowchart LR
    A[A text that needs to be wrapped wraps to another line]
    B[A text that needs to be
wrapped wraps to another line]
    C["`A text that needs to be wrapped to another line`"]

flowchart LR
    C["`A text
        that needs
        to be wrapped
        in another
        way`"]
  

      classDiagram-v2
        note "I love this diagram!\nDo you love it?"
    

    stateDiagram-v2
    State1: The state with a note with minus - and plus + in it
    note left of State1
      Important information! You can write
      notes with . and  in them.
    end note    

mindmap
root
  Child3(A node with an icon and with a long text that wraps to keep the node size in check)

      %%{init: {"theme": "forest"} }%%
mindmap
    id1[**Start2**
end]
      id2[**Start2**
end]
      %% Another comment
      id3[**Start2**
end] %% Comment
      id4[**Start2**
end
the very end]
    

mindmap
    id1["`**Start2**
    second line 😎 with long text that is wrapping to the next line`"]
      id2["`Child **with bold** text`"]
      id3["`Children of which some
      is using *italic type of* text`"]
      id4[Child]
      id5["`Child
      Row
      and another
      `"]
    

mindmap
    id1("`**Root**`"]
      id2["`A formatted text... with **bold** and *italics*`"]
      id3[Regular labels works as usual]
      id4["`Emojis and unicode works too: 🤓
      शान्तिः سلام  和平 `"]

    

%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
flowchart TB
  %% I could not figure out how to use double quotes in labels in Mermaid
  subgraph ibm[IBM Espresso CPU]
    core0[IBM PowerPC Broadway Core 0]
    core1[IBM PowerPC Broadway Core 1]
    core2[IBM PowerPC Broadway Core 2]

    rom[16 KB ROM]

    core0 --- core2

    rom --> core2
  end

  subgraph amd["`**AMD** Latte GPU`"]
    mem[Memory & I/O Bridge]
    dram[DRAM Controller]
    edram[32 MB EDRAM MEM1]
    rom[512 B SEEPROM]

    sata[SATA IF]
    exi[EXI]

    subgraph gx[GX]
      sram[3 MB 1T-SRAM]
    end

    radeon[AMD Radeon R7xx GX2]

    mem --- gx
    mem --- radeon

    rom --- mem

    mem --- sata
    mem --- exi

    dram --- sata
    dram --- exi
  end

  ddr3[2 GB DDR3 RAM MEM2]

  mem --- ddr3
  dram --- ddr3
  edram --- ddr3

  core1 --- mem

  exi --- rtc
  rtc{{rtc}}

%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
flowchart TB
  %% I could not figure out how to use double quotes in labels in Mermaid
  subgraph ibm[IBM Espresso CPU]
    core0[IBM PowerPC Broadway Core 0]
    core1[IBM PowerPC Broadway Core 1]
    core2[IBM PowerPC Broadway Core 2]

    rom[16 KB ROM]

    core0 --- core2

    rom --> core2
  end

  subgraph amd["`**AMD** Latte GPU`"]
    mem[Memory & I/O Bridge]
    dram[DRAM Controller]
    edram[32 MB EDRAM MEM1]
    rom[512 B SEEPROM]

    sata[SATA IF]
    exi[EXI]

    subgraph gx[GX]
      sram[3 MB 1T-SRAM]
    end

    radeon[AMD Radeon R7xx GX2]

    mem --- gx
    mem --- radeon

    rom --- mem

    mem --- sata
    mem --- exi

    dram --- sata
    dram --- exi
  end

  ddr3[2 GB DDR3 RAM MEM2]

  mem --- ddr3
  dram --- ddr3
  edram --- ddr3

  core1 --- mem

  exi --- rtc
  rtc{{rtc}}

flowchart TB
  %% I could not figure out how to use double quotes in labels in Mermaid
  subgraph ibm[IBM Espresso CPU]
    core0[IBM PowerPC Broadway Core 0]
    core1[IBM PowerPC Broadway Core 1]
    core2[IBM PowerPC Broadway Core 2]

    rom[16 KB ROM]

    core0 --- core2

    rom --> core2
  end

  subgraph amd[AMD Latte GPU]
    mem[Memory & I/O Bridge]
    dram[DRAM Controller]
    edram[32 MB EDRAM MEM1]
    rom[512 B SEEPROM]

    sata[SATA IF]
    exi[EXI]

    subgraph gx[GX]
      sram[3 MB 1T-SRAM]
    end

    radeon[AMD Radeon R7xx GX2]

    mem --- gx
    mem --- radeon

    rom --- mem

    mem --- sata
    mem --- exi

    dram --- sata
    dram --- exi
  end

  ddr3[2 GB DDR3 RAM MEM2]

  mem --- ddr3
  dram --- ddr3
  edram --- ddr3

  core1 --- mem

  exi --- rtc
  rtc{{rtc}}

      flowchart LR
  B1 --be be--x B2
  B1 --bo bo--o B3
  subgraph Ugge
      B2
      B3
      subgraph inner
          B4
          B5
      end
      subgraph inner2
        subgraph deeper
          C4
          C5
        end
        C6
      end

      B4 --> C4

      B3 -- X --> B4
      B2 --> inner

      C4 --> C5
  end

  subgraph outer
      B6
  end
  B6 --> B5
  

sequenceDiagram
    Customer->>+Stripe: Makes a payment request
    Stripe->>+Bank: Forwards the payment request to the bank
    Bank->>+Customer: Asks for authorization
    Customer->>+Bank: Provides authorization
    Bank->>+Stripe: Sends a response with payment details
    Stripe->>+Merchant: Sends a notification of payment receipt
    Merchant->>+Stripe: Confirms the payment
    Stripe->>+Customer: Sends a confirmation of payment
    Customer->>+Merchant: Receives goods or services
        

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness
and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
    

  example-diagram