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