    stateDiagram-v2
        [*] --> Still
        Still --> [*]
        Still --> Moving
        Moving --> Still
        Moving --> Crash
        Crash --> [*]

    flowchart RL
        subgraph "`one`"
          a1 -- l1 --> a2
          a1 -- l2 --> a2
        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

<scrpt> // import mindmap from '../../packages/mermaid-mindmap/src/detector'; // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs'; import mermaid from './mermaid.esm.mjs'; // await mermaid.registerExternalDiagrams([example]); mermaid.parseError = function (err, hash) { // console.error('Mermaid error: ', err); }; mermaid.initialize({ // theme: 'forest', startOnLoad: true, logLevel: 0, flowchart: { // defaultRenderer: 'elk', useMaxWidth: false, // htmlLabels: false, htmlLabels: true, }, // htmlLabels: false, gantt: { useMaxWidth: false, }, useMaxWidth: false, }); function callback() { alert('It worked'); } mermaid.parseError = function (err, hash) { console.error('In parse error:'); console.error(err); }; // mermaid.test1('first_slow', 1200).then((r) => console.info(r)); // mermaid.test1('second_fast', 200).then((r) => console.info(r)); // mermaid.test1('third_fast', 200).then((r) => console.info(r)); // mermaid.test1('forth_slow', 1200).then((r) => console.info(r)); </scrpt>