FSM

digraph checkout_fsm {
  graph [ dpi = 300 ];
  splines=true;
  esep=5;
  rankdir=LR;

  size="8,5";

  edge [ fontname = "Cabin Italic" ];
  node [ fontname = "Cabin Bold" ];

  node [shape = point, width = .25, height = .25 ];
  Start;
  End;

  node [shape = circle];
  ItemsSelected;
  CouponEntered;
  CardSelected;
  Confirmed;
  Cancelled [ color = grey , fontcolor = grey ];

  Start -> ItemsSelected [ label = "select" ];
  ItemsSelected -> CouponEntered [ label = "enterCoupon" ];
  ItemsSelected -> CardSelected [ label = "selectCard" ];
  CouponEntered -> CardSelected [ label = "selectCard" ];
  CardSelected -> Confirmed [ label = "confirm" ];

  ItemsSelected -> Cancelled [ label = "cancel", color = grey , fontcolor = grey];
  CouponEntered -> Cancelled [ label = "cancel", color = grey , fontcolor = grey];
  CardSelected -> Cancelled [ label = "cancel", color = grey , fontcolor = grey];

  Confirmed -> End;
  Cancelled -> End;
}