    treemap
    "Section 1"
        "Leaf 1.1": 12
        "Section 1.2":::class1
          "Leaf 1.2.1": 12
    "Section 2"
        "Leaf 2.1": 20:::class1
        "Leaf 2.2": 25
        "Leaf 2.3": 12

    classDef class1   fill:red,color:blue,stroke:#FFD600;

    ---
    config:
      treemap:
        valueFormat: '$0,0'
    ---
    treemap
    "Budget"
        "Operations"
            "Salaries": 7000
            "Equipment": 2000
            "Supplies": 1000
        "Marketing"
            "Advertising": 4000
            "Events": 1000

        treemap
          title Accessible Treemap Title
          "Category A"
              "Item A1": 10
              "Item A2": 20
          "Category B"
              "Item B1": 15
              "Item B2": 25

          flowchart LR
            AB["apa@apa@"] --> B(("`apa@apa`"))

          flowchart
            D(("for D"))

          flowchart LR
            A e1@==> B
            e1@{ animate: true}

    flowchart LR
      A e1@--> B
      classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
      class e1 animate

## infinite

    flowchart LR
      A e1@--> B
      classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
      class e1 animate

## Mermaid - edge-animation-slow

    flowchart LR
      A e1@--> B
    e1@{ animation: fast}

## Mermaid - edge-animation-fast

    flowchart LR
      A e1@--> B
      classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
      class e1 edge-animation-fast

    info

    ---
    config:
      layout: elk
    ---
          flowchart LR
          a
          subgraph s0["APA"]
          subgraph s8["APA"]
          subgraph s1["APA"]
            D{"X"}
            E[Q]
          end
          subgraph s3["BAPA"]
            F[Q]
            I
          end
                D --> I
                D --> I
                D --> I

          I{"X"}
          end
          end

    ---
    config:
      layout: elk
    ---
          flowchart LR
          a
            D{"Use the editor"}

          D -- Mermaid js --> I{"fa:fa-code Text"}
          D-->I
          D-->I

    ---
    config:
      layout: elk
    ---
    flowchart LR
     subgraph s1["Untitled subgraph"]
            n1["Evaluate"]
            n2["Option 1"]
            n3["Option 2"]
            n4["fa:fa-car Option 3"]
      end
     subgraph s2["Untitled subgraph"]
            n5["Evaluate"]
            n6["Option 1"]
            n7["Option 2"]
            n8["fa:fa-car Option 3"]
      end
        A["Start"] -- Some text --> B("Continue")
        B --> C{"Evaluate"}
        C -- One --> D["Option 1"]
        C -- Two --> E["Option 2"]
        C -- Three --> F["fa:fa-car Option 3"]
        n1 -- One --> n2
        n1 -- Two --> n3
        n1 -- Three --> n4
        n5 -- One --> n6
        n5 -- Two --> n7
        n5 -- Three --> n8
        n1@{ shape: diam}
        n2@{ shape: rect}
        n3@{ shape: rect}
        n4@{ shape: rect}
        n5@{ shape: diam}
        n6@{ shape: rect}
        n7@{ shape: rect}
        n8@{ shape: rect}

    ---
    config:
      layout: elk
    ---
    flowchart LR
     subgraph s1["Untitled subgraph"]
            n1["Evaluate"]
            n2["Option 1"]
      end
        n1 -- One --> n2

    ---
    config:
      layout: elk
    ---
    flowchart LR
        A{A} --> B & C

    ---
    config:
      layout: elk
    ---
    flowchart LR
        A{A} --> B & C
        subgraph "subbe"
          A
        end

    ---
    config:
      layout: elk
    ---
    flowchart LR
        n2@{ shape: rect}
        n3@{ shape: rect}
        n4@{ shape: rect}
        A["Start"] -- Some text --> B("Continue")
        B --> C{"Evaluate"}
        C -- One --> D["Option 1"]
        C -- Two --> E["Option 2"]
        C -- Three --> F["fa:fa-car Option 3"]
        %% C@{ shape: hexagon}

    ---
    config:
      kanban:
        ticketBaseUrl: 'https://github.com/your-repo/issues/#TICKET#'
    ---
    kanban
      Backlog
        task1[📝 Define project requirements]@{ ticket: a101 }
      To Do
        task2[🔍 Research technologies]@{ ticket: a102 }
      Review
        task4[🔍 Code review for login feature]@{ ticket: a104 }
      Done
        task5[✅ Deploy initial version]@{ ticket: a105 }
      In Progress
        task3[💻 Develop login feature]@{ ticket: 103 }

    flowchart LR
    nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }

    flowchart LR
    nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
    style A fill:#f9f,stroke:#333,stroke-width:4px

    flowchart LR
    nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
    A:::AClass
    classDef AClass fill:#f9f,stroke:#333,stroke-width:4px

    flowchart LR
      nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }

    flowchart LR
    nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }

    flowchart LR
    nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
    style A fill:#f9f,stroke:#333,stroke-width:4px

    flowchart LR
    nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
    A:::AClass
    classDef AClass fill:#f9f,stroke:#333,stroke-width:4px

    flowchart LR
      nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }

    flowchart LR
    nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }

    flowchart LR
    nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
    style A fill:#f9f,stroke:#333,stroke-width:4px

    flowchart LR
    nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
    A:::AClass
    classDef AClass fill:#f9f,stroke:#333,stroke-width:4px

    flowchart LR
      nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
      A:::AClass
      classDef AClass fill:#f9f,stroke:#333,stroke-width:4px

    flowchart LR
      nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
      style A fill:#f9f,stroke:#333,stroke-width:4px

    kanban
      id2[In progress]
        docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }

    ---
    config:
      kanban:
        ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
        # sectionWidth: 300
    ---
    kanban
      Todo
        [Create Documentation]
        docs[Create Blog about the new diagram]
      id7[In progress]
        id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
      id9[Ready for deploy]
        id8[Design grammar]@{ assigned: 'knsv' }
      id10[Ready for test]
        id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
        id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
      id11[Done]
        id5[define getData]
        id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
        id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }

      id12[Can't reproduce]
        id3[Weird flickering in Firefox]