Edit in JSFiddle

// TCP State machine 
var text = "";
var protokollaTila = -1;
var hosts = {
  "h1": "TCP_Asiakas",
  "h2": "TCP_Palvelin"
};
var synArray = new Array("[SYN] SEQ=1000", "[SYN ACK] SEQ=5000 ACK=1001", "[ACK] SEQ=1001 ACK=5001");
var tcpArray = new Array("[GET www sivu] LEN=400 SEQ=1001 ACK=5001", "[ACK] SEQ=5001 ACK=1401(1001+400)", "[HTTP/1.1 200 OK] LEN=660 SEQ=5001 ACK=1401", "[ACK] SEQ=1401 ACK=5661");
var finArray = new Array("[FIN, ACK] SEQ=5661 ACK 1401", "[ACK] SEQ=1401 ACK=5662", "[FIN, ACK] SEQ=1401 ACK 5662", "[ACK] SEQ=5662 ACK=1402");
$(document).ready(function() {
  alusta();
  piirra();
  $('a').click(function(event) {
    var tila = this.id;
    switch (tila) {
      case "tcp":
        switch (protokollaTila) {
          case -1:
            $('#tcp').fadeOut(500);

            $('#tcp').fadeIn(500, function() {
              $('#tcp').html('Seuraava viesti');
            });
            protokollaTila += 1;
            $('#serverState').html('LISTEN');
            break;
          case 0:
            piirra_nuoli("h1", "h2", synArray[protokollaTila]);
            protokollaTila += 1;
            $('#clientState').html('SYN SENT');
            break;
          case 2:
            piirra_nuoli("h1", "h2", synArray[protokollaTila]);
            protokollaTila += 1;
            $('#clientState').html('ESTABLISHED');
            $('#serverState').html('ESTABLISHED');
            break;
          case 1:
            $('#serverState').html('SYN RECEIVED');
            piirra_nuoli("h2", "h1", synArray[protokollaTila]);
            protokollaTila += 1;
            break;
          case 4:
          case 5:
            piirra_nuoli("h2", "h1", tcpArray[protokollaTila - 3]);
            protokollaTila += 1;
            break;
          case 3:
          case 6:
            piirra_nuoli("h1", "h2", tcpArray[protokollaTila - 3]);
            protokollaTila += 1;
            break;
          case 8:
            $('#clientState').html('CLOSE WAIT');
            piirra_nuoli("h1", "h2", finArray[protokollaTila - 7]);
            protokollaTila += 1;
            break;
          case 9:
            $('#clientState').html('LAST ACK');
            piirra_nuoli("h1", "h2", finArray[protokollaTila - 7]);
            protokollaTila += 1;
            break;
          case 7:
            $('#serverState').html('FIN WAIT 1');
            piirra_nuoli("h2", "h1", finArray[protokollaTila - 7]);
            protokollaTila += 1;
            break;
          case 10:
            $('#serverState').html('FIN WAIT 2');
            piirra_nuoli("h2", "h1", finArray[protokollaTila - 7]);
            protokollaTila += 1;
            break;
          case 11:
            text = text.concat("\nNote right of " + hosts["h1"] + ": Kommunikaatio päättyi");
            $('#clientState').html('CLOSED');
            $('#serverState').html('TIME WAIT');
            protokollaTila += 1;
            break;
          case 12:
            text = text.concat("\nNote left of " + hosts["h2"] + ": Timeout");
            $('#clientState').html('CLOSED');
            $('#serverState').html('CLOSED');
            protokollaTila = -1;
            break;
        }
        break;
      case "aa":
        alusta();
        break;
      default:
        break;
    } // switch
    piirra();
  });
});

function piirra_nuoli(h1, h2, viesti) {
  text = text.concat("\n" + hosts[h1] + "->" + hosts[h2] + ": ");
  text = text.concat(viesti);
}

function alusta() {
  text = "title: TCP protokollan toiminta";
  protokollaTila = -1;
  kuvia = 0;
  $('#tcp').fadeIn(500, function() {
    $('#tcp').html('TCP protokolla');
  });
}

function piirra() {
  $('#diagram').html('');
  var diagram = Diagram.parse(text);
  diagram.drawSVG("diagram", {
    //theme: 'hand'
    //theme: 'simple'
    theme: $('.theme').val()
  });
}

<a id="tcp" href="javascript:void(0);">TCP kommunikaatio</a>
<a id="aa" href="javascript:void(0);">Aloita alusta</a> Theme:
<select class="theme" style="margin-left:0.1cm;">
  <option value="simple" selected>Simple</option>
  <option value="hand">Hand drawn</option>
</select>
<div style="display: inline-block;">TCP Asiakkaan tila: </div>
<div id="clientState" style="display: inline-block; background-color: cyan"></div>
<div style="display: inline-block;">TCP Palvelimen tila: </div>
<div style="display: inline-block; background-color: yellow" id="serverState"></div>
<div id="diagram"></div>

a {
  background-color: #FFFFCC;
  width: 100px;
  font-size: 1em;
  border: 2px solid black;
  border-radius: 5px;
  float: top;
  margin-left: 0.1cm;
}