Case 1

stateDiagram-v2
AState: Should NOT be white
BState
classDef exampleStyleClass fill:#fff,color: blue;
class AState,BState exampleStyleClass
style AState fill:#636,border:1px solid red,color:white;
      

        %%{init: {"look": "classic"} }%%
stateDiagram-v2
AState: Should NOT be white
BState
classDef exampleStyleClass fill:#fff,color: blue;
class AState,BState exampleStyleClass
style AState fill:#636,border:1px solid red,color:white;
      

stateDiagram-v2

classDef exampleStyleClass background:#bbb,border:1px solid red;
a --> b
class a exampleStyleClass
%% a:::exampleStyleClass
      

stateDiagram
   direction TB

   accTitle: This is the accessible title
   accDescr: This is an accessible description

   classDef notMoving fill:white
   classDef movement font-style:italic;
   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow

   [*] --> Still:::notMoving
   Still --> [*]
   Still --> Moving:::movement
   Moving --> Still
   Moving --> Crash:::movement
   Crash:::badBadEvent --> [*]
      

stateDiagram-v2
    MyState
    note left of MyState : I am a leftie
    note right of MyState : I am a rightie

      

stateDiagram
%% direction LR

        state C0 {
          A0 --> B0
        }

      C0 --> Apa0

      

stateDiagram
direction LR


        state C1 {
          A1 --> B1
        }

      C1 --> Apa1

      

Case 2

stateDiagram
direction LR
      state Gorilla0 {
        state Apa0 {
          A0 --> B0
        }

      }
      Apa --> Gorilla0:Label
      A0 --> C0
      %% C1: "`This is C`"
      

stateDiagram
direction LR
        state Apa1 {
          A1
        }

      Apa11 --> Apa1
      A1 --> C1
      %% C1: "`This is C`"
      

stateDiagram
    [*] --> Level1

    state Level1 {
        [*] --> Level2

        state Level2 {
            [*] --> level2
            level2 --> Level3

            state Level3 {
                [*] --> level3
                level3 --> [*]
            }
        }
    }
      

flowchart LR
subgraph Apa["Apa"]
    B["This is B"]
    A["Start"]
end
    A --> B & C["C"]
    Apa --> C
      

flowchart RL
subgraph Apa["Apa"]
  subgraph Gorilla
    A["Start"]
    B["This is B"]
  end
end
    A --> B & C["C"]
    Gorilla --> C
      

flowchart LR
subgraph Apa["Apa"]
  subgraph Gorilla
    A["Start"]
    B["This is B"]
  end
end
    A --> B & C["C"]
    Apa --> C
      

flowchart LR
subgraph Apa["Apa"]
  subgraph Gorilla
    B["This is B"]
    A["Start"]
  end
end
Apa --> C
A --> B & C["C"]
      

flowchart LR
    subgraph Gorilla
      subgraph Apa
        A[A] --- B
      end
    end
    Apa --- C
    A --x C
    

---
config:
  look: neo
  theme: neo
  layout: elk
  elk.mergeEdges: true
  themeVariables: {}
---
%% 'elk.stress',
%% 'elk.force'
%%'elk.mrtree'
%% 'elk.sporeOverlap
stateDiagram
  direction TB
  A --> B
  A --> C
  A --> D
  A --> E
  A --> F
  state F {
    Another
  }
  Another --> A


      

flowchart LR
    Apa --Hello--> C

      

      %%{init: {"layout": "dagre", "mergeEdges": false} }%%
flowchart LR
      A ==> B(This is B)
    A[Start] --> B(Is it?)
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -. No ...-> E[End]


      

      %%{init: {"layout": "elk", "mergeEdges": true} }%%
flowchart
      A --> B(This is B)
      

      %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
      stateDiagram
    state if_state <<choice>>
    [*] --> IsPositive
    IsPositive --> if_state
    if_state --> False: if n < 0
    if_state --> True : if n >= 0
      

      %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
      stateDiagram
    state if_state <<choice>>
    [*] --> IsPositive
    IsPositive --> if_state
    if_state --> False: if n < 0
    if_state --> True : if n >= 0
      

      %%{init: {"layout": "dagre", "mergeEdges": true} }%%
stateDiagram
  direction TB
  State T1 {
    T12--> T11
  }
  T1 --> T2
  T11 --> T2
      

      %%{init: {"layout": "dagre", "mergeEdges": true} }%%
stateDiagram
State T1 {
    T21
    --
    T22
    }
      

      %%{init: {"layouts": "elk2", "mergeEdges": true} }%%
      stateDiagram
      State S1 {
    direction TB
    S11
  }
  S1 --> S2
      

      %%{init: {"layout": "elk", "mergeEdges": true} }%%
stateDiagram
State T1 {
    T21
    --
    T22
    }
      

      %%{init: {"layout": "elk", "mergeEdges": true} }%%
stateDiagram
  [*] --> T1
  T1 --> T2
  T1 --> T3
  T1 --> T4
      

      %%{init: {"layout": "elk"} }%%
stateDiagram
  [*] --> T1
  T1 --> T2
  T2 --> T3
  T3 --> T1
  T1 --> T3
      

stateDiagram
  State1: The state with a note
  note right of State1
      Important information! You can write
      notes.
  end note
      

stateDiagram-v2
    direction LR
    [*] --> Active

    state Active {
      direction BT
        [*] --> Inner
        Inner --> NumLockOn : EvNumLockPressed
    }
    %% Outer --> Inner