---
      config:
        layout: elk
      ---
      flowchart-elk TB
      c1-->a2
      subgraph one
      a1-->a2
      end
      subgraph two
      b1-->b2
      end
      subgraph three
      c1-->c2
      end
      one --> two
      three --> two
      two --> c2

      ---
      config:
        layout: elk
      ---
      flowchart TB

        process_C
      subgraph container_Alpha
        subgraph process_B
          pppB
        end
        subgraph process_A
          pppA
        end
        process_B-->|via_AWSBatch|container_Beta
        process_A-->|messages|container_Beta
      end

      ---
      config:
        layout: elk
      ---
      flowchart TB
      subgraph container_Beta
        process_C
      end
      subgraph container_Alpha
        subgraph process_B
          pppB
        end
        subgraph process_A
          pppA
        end
        process_B-->|via_AWSBatch|container_Beta
        process_A-->|messages|container_Beta
      end

      ---
      config:
        layout: elk
      ---
      flowchart TB
      subgraph container_Beta
        process_C
      end

        process_B-->|via_AWSBatch|container_Beta

      ---
      config:
        layout: elk
      ---
      classDiagram
      note "I love this diagram!\nDo you love it?"
      Class01 <|-- AveryLongClass : Cool
      <<interface>> Class01
      Class03 "1" *-- "*" Class04
      Class05 "1" o-- "many" Class06
      Class07 "1" .. "*" Class08
      Class09 "1" --> "*" C2 : Where am i?
      Class09 "*" --* "*" C3
      Class09 "1" --|> "1" Class07
      Class12 <|.. Class08
      Class11 ..>Class12
      Class07 : equals()
      Class07 : Object[] elementData
      Class01 : size()
      Class01 : int chimp
      Class01 : int gorilla
      Class01 : -int privateChimp
      Class01 : +int publicGorilla
      Class01 : #int protectedMarmoset
      Class08 <--> C2: Cool label
      class Class10 {
        <<service>>
        int id
        test()
      }
      note for Class10 "Cool class\nI said it's very cool class!"

      ---
      config:
        layout: elk
      ---
      requirementDiagram
        requirement test_req {
        id: 1
        text: the test text.
        risk: high
        verifymethod: test
        }

        element test_entity {
        type: simulation
        }

        test_entity - satisfies -> test_req

      ---
      config:
        layout: elk
      ---
      flowchart-elk TB
      internet
      nat
      router
      compute1

      subgraph project
      router
      nat
        subgraph subnet1
          compute1
        end
      end

      %% router --> subnet1
      subnet1  --> nat
      %% nat --> internet

      ---
      config:
        layout: elk
      ---
      flowchart-elk TB
      internet
      nat
      router
      lb1
      lb2
      compute1
      compute2
      subgraph project
      router
      nat
        subgraph subnet1
          compute1
          lb1
        end
        subgraph subnet2
          compute2
          lb2
        end
      end
      internet --> router
      router --> subnet1 & subnet2
      subnet1 & subnet2 --> nat --> internet

---
config:
  layout: elk
  elk:
    mergeEdges: false
    forceNodeModelOrder: false
    considerModelOrder: NONE

---
            flowchart TB
              a --> a1 & a2 & a3 & a4
              b --> b1 & b2
              b2 --> b3
              b1 --> b4

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

    

      ---
      config:
        layout: elk
        flowchart:
          curve: rounded
      ---
      flowchart LR
          I["fa:fa-code Text"] -- Mermaid js --> D["Use
the
editor!"]
          I --> D & D
          D@{ shape: question}
          I@{ shape: question}

    

      ---
      config:
        layout: tidy-tree
      ---
      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

    

      ---
      config:
        layout: elk
        flowchart:
          curve: linear
      ---
      flowchart LR
          A[A] --> B[B]
          A[A] --- B([C])
          A@{ shape: diamond}
          %%B@{ shape: diamond}

    

      ---
      config:
        layout: elk
        flowchart:
          curve: linear
      ---
      flowchart LR
          A[A] -- Mermaid js --> B[B]
          A[A] -- Mermaid js --- B[B]
          A@{ shape: diamond}
          B@{ shape: diamond}

    

      ---
      config:
        layout: elk
        flowchart:
          curve: rounded
      ---
      flowchart LR
          D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
          I --> D & D
          D@{ shape: question}
          I@{ shape: question}
    

      ---
      config:
        layout: elk
        flowchart:
          curve: rounded
        elk:
          nodePlacementStrategy: NETWORK_SIMPLEX
      ---
      flowchart LR
          D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
          D --> I & I
          a["a"]
          D@{ shape: trap-b}
          I@{ shape: lean-l}
    

---
config:
  layout: elk

---
flowchart LR
 %% subgraph s1["Untitled subgraph"]
        C["Evaluate"]
 %% end

    B --> C
    

---
config:
  layout: elk
  flowchart:
    //curve: linear
---
flowchart LR
%% A ==> B
%% A2 --> B2
A{A} --> B((Bo boo)) & B & B & B

    

      ---
      config:
        layout: elk
        theme: default
        look: classic
      ---
      flowchart LR
       subgraph s1["APA"]
              D{"Use the editor"}
        end
       subgraph S2["S2"]
              s1
              I>"fa:fa-code Text"]
              E["E"]
        end
          D -- Mermaid js --> I
          D --> I & E
          E --> I
    

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