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

%%{
  init: {
    "theme":"base",
  "fontFamily": "Forth Bold",
  "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!
      

      %%{init: {"layout": "elk", "mergeEdges": true} }%%
stateDiagram
  direction TB
  T00 --> T0
  T00 --> T1
      

      %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "NETWORK_SIMPLEX"} }%%
stateDiagram
  State T0 {
    direction LR
    A --> B
  }
  State T1 {
    [*] --> NumLockOff
    NumLockOff --> NumLockOn : EvNumLockPressed
    NumLockOn --> NumLockOff : EvNumLockPressed
  }
      

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