%%{
  init: {
  "theme":"base",
  "fontFamily": "Kalam",
  "themeVariables":
    {
      "background": "#FFFFFF",
      "primaryColor": "#7bdfa7",
      "primaryTextColor": "#3c3c3b",
      "secondaryColor": "#642470",
      "secondaryTextColor": "#3c3c3b",
      "tertiaryColor": "#1c736D",
      "tertiaryTextColor": "#3c3c3b",
      "noteBkgColor": "#9fd8ef",
      "loopTextColor": "#636362",
      "labelBoxBkgColor": "#642470",
      "labelBoxBorderColor": "#642470",
      "labelTextColor": "#d4d4d4",
      "signalTextColor": "#636362",
      "signalColor": "#642470"
    }
  }
}%%
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
      

stateDiagram
  S:Stillas
  T:Tiger
  U:Ulv
      

stateDiagram
  state "This is a state description" as S
      

      %%{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 {
    T11
  }
      

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

      %%{init: {"layout": "elk", "mergeEdges": true} }%%
stateDiagram
  direction TB
  State T1 {
    T11
  }
      

      %%{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