flowchart
          A --> B
      subgraph hello
          C --> D
        end
      

      flowchart
      A --> B
      A --> B
      

        flowchart
          A[hello] --> A
        

        flowchart
          subgraph C
          c
        end
        A --> C
        

        flowchart
          subgraph C
            c
          end
        A --> c
        

      flowchart TD
      subgraph D
        A --> B
        A --> B
        B --> A
        B --> A
      end
      

flowchart
subgraph B2
A --> B --> C
B --> D
end

B2 --> X

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

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }
      

flowchart TD
        P1
        P1 -->P1.5
        subgraph P1.5
          P2
          P2.5(( A ))
          P3
        end
        P2 --> P4
        P3 --> P6
        P1.5 --> P5
    

      %% Length of edges
flowchart TD
      L1 --- L2
      L2 --- C
      M1 ---> C
      R1 .-> R2
      R2 <.-> C
      C -->|Label 1| E1
      C <-- Label 2 ---> E2
      C ----> E3
      C <-...-> E4
      C ======> E5
    

      %% Stadium shape
flowchart TD
      A([stadium shape test])
      A -->|Get money| B([Go shopping])
      B --> C([Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?])
      C -->|One| D([Laptop])
      C -->|Two| E([iPhone])
      C -->|Three| F([Car
wroom wroom])
      click A "index.html#link-clicked" "link test"
      click B testClick "click test"
      classDef someclass fill:#f96;
      class A someclass;
      class C someclass;
    

      %% should render escaped without html labels
flowchart TD
        a["Haiya"]---->b
    

      %% nested subgraphs in reverse order
flowchart LR
        a -->b
        subgraph A
        B
        end
        subgraph B
        b
        end
    

      %% nested subgraphs in several levels
flowchart LR
    b-->B
    a-->c
    subgraph O
      A
    end
    subgraph B
      c
    end
    subgraph A
        a
        b
        B
    end
    

      %% nested subgraphs with edges in and out
flowchart LR
  internet
  nat
  routeur
  lb1
  lb2
  compute1
  compute2
  subgraph project
  routeur
  nat
    subgraph subnet1
      compute1
      lb1
    end
    subgraph subnet2
      compute2
      lb2
    end
  end
  internet --> routeur
  routeur --> subnet1 & subnet2
  subnet1 & subnet2 --> nat --> internet
    

      %% nested subgraphs with outgoing links
flowchart LR
  subgraph  main
    subgraph subcontainer
      subcontainer-child
    end
     subcontainer-child--> subcontainer-sibling
  end
    

      %% nested subgraphs with ingoing links
flowchart LR
subgraph one[One]
    subgraph sub_one[Sub One]
        _sub_one
    end
    subgraph sub_two[Sub Two]
        _sub_two
    end
    _one
end

%% here, either the first or the second one
sub_one --> sub_two
_one --> b
    

      %% nested subgraphs with outgoing links 3
flowchart LR
  subgraph container_Beta
    process_C-->Process_D
  end
  subgraph container_Alpha
    process_A-->process_B
    process_A-->|messages|process_C
    end
    process_B-->|via_AWSBatch|container_Beta
    

      %% nested subgraphs with outgoing links 4
flowchart LR
subgraph A
a -->b
end
subgraph B
b
end
    

      %% nested subgraphs with outgoing links 2
flowchart LR
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2
    

      %% nested subgraphs with outgoing links 5
flowchart LR
  subgraph container_Beta
    process_C-->Process_D
  end
  subgraph container_Alpha
    process_A-->process_B
    process_B-->|via_AWSBatch|container_Beta
    process_A-->|messages|process_C
  end
    

      %% More subgraphs
      flowchart LR
    subgraph two
    b1
    end
    subgraph three
    c2
    end

    three --> two
    two --> c2
    note[There are two links in this diagram]
    

      %% nested subgraphs with outgoing links 5
flowchart LR
      A[red text] -->|default style| B(blue text)
      C([red text]) -->|default style| D[[blue text]]
      E[(red text)] -->|default style| F((blue text))
      G>red text] -->|default style| H{blue text}
      I{{red text}} -->|default style| J[/blue text/]
      K[\\ red text\\] -->|default style| L[/blue text\\]
      M[\\ red text/] -->|default style| N[blue text];
      O(((red text))) -->|default style| P(((blue text)));
      linkStyle default color:Sienna;
      style A stroke:#ff0000,fill:#ffcccc,color:#ff0000;
      style B stroke:#0000ff,fill:#ccccff,color:#0000ff;
      style C stroke:#ff0000,fill:#ffcccc,color:#ff0000;
      style D stroke:#0000ff,fill:#ccccff,color:#0000ff;
      style E stroke:#ff0000,fill:#ffcccc,color:#ff0000;
      style F stroke:#0000ff,fill:#ccccff,color:#0000ff;
      style G stroke:#ff0000,fill:#ffcccc,color:#ff0000;
      style H stroke:#0000ff,fill:#ccccff,color:#0000ff;
      style I stroke:#ff0000,fill:#ffcccc,color:#ff0000;
      style J stroke:#0000ff,fill:#ccccff,color:#0000ff;
      style K stroke:#ff0000,fill:#ffcccc,color:#ff0000;
      style L stroke:#0000ff,fill:#ccccff,color:#0000ff;
      style M stroke:#ff0000,fill:#ffcccc,color:#ff0000;
      style N stroke:#0000ff,fill:#ccccff,color:#0000ff;
      style O stroke:#ff0000,fill:#ffcccc,color:#ff0000;
      style P stroke:#0000ff,fill:#ccccff,color:#0000ff;
    

      %% labels on edges in a cluster
flowchart RL
    subgraph one
      a1 -- I am a long label --> a2
      a1 -- Another long label --> a2
    end
    

      %% labels on edges in a cluster
flowchart RL
    subgraph one
      a1[Iam a node with a super long label] -- I am a long label --> a2[I am another node with a mega long label]
      a1 -- Another long label --> a2
      a3 --> a1 & a2 & a3 & a4
      a1 --> a4
    end
    

      %% labels on edges in a cluster
flowchart RL
    subgraph one
      a1[Iam a node with a super long label]
      a2[I am another node with a mega long label]
      a3[I am a node with a super long label]
      a4[I am another node with a mega long label]
      a1 -- Another long label --> a2
      a3 --> a1 & a2 & a3 & a4
      a1 --> a4
    end
    

      %% labels on edges in a cluster
flowchart RL
      a1[I am a node with a super long label. I am a node with a super long label. I am a node with a super long label. I am a node with a super long label. I am a node with a super long label. ]
      a2[I am another node with a mega long label]
      a3[I am a node with a super long label]
      a4[I am another node with a mega long label]
      a1 & a2 & a3 & a4 -->  a5 & a6 & a7 & a8 & a9 & a10

    

         flowchart
        subgraph Z
        subgraph X
        a --> b
        end
        subgraph Y
        c --> d
        end
        end
        Y --> X
        X --> P
        P --> Y
    
        

            flowchart
            
            a --> b
            b --> c
            b --> d
            c --> a
            
                    

flowchart TD
  Start([Start]) --> Prep[Preparation Step]
  Prep --> Split{Ready to Process?}
  Split -->|Yes| T1[Task A]
  Split -->|Yes| T2[Task B]
  T1 --> Merge
  T2 --> Merge
  Merge((Join Results)) --> Finalize[Finalize Process]
  Finalize --> End([End])

flowchart TD
  A[Start Build] --> B[Compile Source]
  B --> C[Test Suite]
  C --> D{Tests Passed?}
  D -->|No| E[Notify Developer]
  E --> A
  D -->|Yes| F[Build Docker Image]

  subgraph Deploy Pipeline
    F --> G[Deploy to Staging]
    G --> H[Run Integration Tests]
    H --> I{Tests Passed?}
    I -->|No| J[Rollback & Alert]
    I -->|Yes| K[Deploy to Production]
  end

  K --> L([Success])

classDiagram
class Controller {
  +handleRequest(): void
}

class View {
  +render(): void
}

class Model {
  +getData(): any
  +setData(data: any): void
}

Controller --> Model
Controller --> View
Model --> View : notifyChange()

classDiagram
class AuthService {
  +login(username: string, password: string): boolean
  +logout(): void
  +register(): void
}

class User {
  -username: string
  -password: string
  -role: Role
  +changePassword(): void
}

class Role {
  -name: string
  -permissions: string[]
  +hasPermission(): boolean
}

AuthService --> User
User --> Role