Edit in JSFiddle

// FTP
var text = "";
var protokollaTila = -1;
var hosts = {
  "h1": "FTP_Asiakas",
  "h2": "FTP_Palvelin"
};
var port = [21, 52247, 52828];
var porttiInd = 0;
var synArray = new Array("Avataanko yhteys? (TCP SYN)", "Avataan yhteys, ok? (TCP SYNACK)", "OK! (TCP ACK)");
var ftpArray = new Array("220 FTP Palvelin valmis", "USER anonymous", "331 Please specify the password.", "PASS anonymous", "230 Login successful.", "EPSV", "229 Extended Passive Mode Entered (|||52247|)", "LIST", "150 Here comes the directory listing.", "", "226 Directory send OK.", "QUIT", "221 Goodbye.");
var finArray = new Array("Suljetaanpa yhteys (TCP FIN)", "Suljetaan yhteys (TCP FIN)", "Okei! (TCP ACK)", "Ookoo! (TCP ACK)");
var listArray = new Array("-rw-r--r--    1 ftp      ftp           528 Nov 01  2007 README",
  "-rw-r--r--    1 ftp      ftp           561 Oct 03  2012 index.html",
  "drwxr-xr-x   41 ftp      ftp          4096 Mar 06 15:38 pub");
$(document).ready(function() {
  alusta();
  piirra();
  $('a').click(function(event) {
    var tila = this.id;
    switch (tila) {
      case "ftp":
        switch (protokollaTila) {
          case -1:
            $('#ftp').fadeOut(500);

            $('#ftp').fadeIn(500, function() {
              $('#ftp').html('Seuraava viesti');
            });
            protokollaTila += 1;
            // no break -> flow through
          case 0:
          case 2:
            piirra_nuoli("h1", "h2", synArray[protokollaTila], port[porttiInd]);
            if (porttiInd === 0) {
              protokollaTila += 1;
            } else if (porttiInd === 1 && protokollaTila === 2) {
              protokollaTila = 10;
              porttiInd = 0;
            } else {
              protokollaTila += 1;
            }
            break;
          case 1:
            piirra_nuoli("h2", "h1", synArray[protokollaTila], port[porttiInd]);
            protokollaTila += 1;
            break;
          case 3:
          case 5:
          case 7:
          case 11:
          case 13:
          case 15:
            piirra_nuoli("h2", "h1", ftpArray[protokollaTila - 3], port[porttiInd]);
            protokollaTila += 1;
            break;
          case 9:
            piirra_nuoli("h2", "h1", ftpArray[protokollaTila - 3], port[porttiInd]);
            protokollaTila = 0;
            porttiInd = 1;
            break;
          case 4:
          case 6:
          case 8:
          case 10:
          case 14:
            piirra_nuoli("h1", "h2", ftpArray[protokollaTila - 3], port[porttiInd]);
            protokollaTila += 1;
            break;
          case 12:
            porttiInd = 1;
            piirra_nuoli("h2", "h1", listArray[0], port[porttiInd]);
            piirra_nuoli("h2", "h1", listArray[1], port[porttiInd]);
            piirra_nuoli("h2", "h1", listArray[2], port[porttiInd]);
            protokollaTila = 16;
            break;

          case 16:
          case 18:
            piirra_nuoli("h1", "h2", finArray[protokollaTila - 16], port[porttiInd]);
            protokollaTila += 1;
            break;
          case 17:
          case 19:
            piirra_nuoli("h2", "h1", finArray[protokollaTila - 16], port[porttiInd]);
            if (porttiInd === 1 && protokollaTila === 19) {
              protokollaTila = 13;
              porttiInd = 0;
            } else {
              protokollaTila += 1;
            }
            break;
          case 20:
            text = text.concat("\nNote right of " + hosts["h1"] + ": Kommunikaatio päättyi");
            protokollaTila = -1;
            break;
        }
        break;
      case "aa":
        alusta();
        break;
      default:
        break;
    } // switch
    piirra();
  });
});

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

function alusta() {
  text = "title: FTP Protokolla";
  protokollaTila = -1;
  kuvia = 0;
  $('#ftp').fadeIn(500, function() {
    $('#ftp').html('FTP kommunikaatio');
  });
}

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

<a id="ftp" href="javascript:void(0);">FTP 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 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;
}