Edit in JSFiddle

// smtp palvelimet.... 
// 7.4.2015 added ending state
// 8.4.2015 changed SMTP_server to sähköposti_palvelin for clarity that it is not 'just' SMTP server
// 30.8.2018 Teksit lyhemmiksi, jotta mahtuu pienempään näyttöön
// TODO: optio jolla valitaan näytetäänkö TCP yhteydenmuodostus/lopetus

var text = "";
var protokollaTila = -1;
var hosts = {
  "h1": "Minä",
  "h2": "MyEmailServer",
  "h3": "KaveriEmailServer",
  "h4": "Kaveri"
};
var synArray = new Array("Avataanko yhteys?", "Avataan yhteys, ok?", "OK!");
var finArray = new Array("Suljetaanpa yhteys", "Suljetaan yhteys", "Okei!", "Ookoo!");
var mailArray = new Array("SMTP kommunikaatio", "POP3 tai IMAP kommunikaatio", "Sähköposti email-clientilla");
var webmailArray = new Array("HTTP kommunikaatio", "Sähköposti selaimella");
$(document).ready(function() {
  alusta();
  piirra();
  $('a').click(function(event) {
    var tila = this.id;
    switch (tila) {
      case "mailclient":
        switch (protokollaTila) {
          case -1:
            text = "title: Sähköpostin välitys - Mail client";
            $('#webmail').fadeOut(500);
            $('#mailclient').fadeOut(500);

            $('#mailclient').fadeIn(500, function() {
              $('#mailclient').html('Seuraava viesti');
            });
            text = text.concat("\nNote right of " + hosts.h1 + ": Lähetät sähköpostin");
            protokollaTila += 1;
            break;
          case 0:
            piirra_nuoli("h1", "h2", mailArray[0]);
            protokollaTila += 1;
            break;
          case 1:
            piirra_nuoli("h2", "h3", mailArray[0]);
            protokollaTila += 1;
            break;
          case 2:
            text = text.concat("\nNote left of " + hosts.h4 + ": Avaa sähköpostiohjelman");
            protokollaTila += 1;
            break;
          case 3:
            piirra_nuoli("h4", "h3", mailArray[1]);
            protokollaTila += 1;
            break;
          case 4:
            piirra_nuoli("h3", "h4", mailArray[2]);
            protokollaTila += 1;
            break;
          case 5:
            text = text.concat("\nNote left of " + hosts.h4 + ": Ei enää viestejä");
            text = text.concat("\nNote left of " + hosts.h4 + ": Aloita alusta");
            protokollaTila += 1;
            break;
          case 6:
            alusta();
            break;
        }
        break;
      case "webmail":
        switch (protokollaTila) {
          case -1:
            text = "title: Sähköpostin välitys - Webmail";
            $('#mailclient').fadeOut(500);
            $('#webmail').fadeOut(500);

            $('#webmail').fadeIn(500, function() {
              $('#webmail').html('Seuraava viesti');
            });
            protokollaTila += 1;
            break;
          case 0:
            piirra_nuoli("h1", "h2", webmailArray[0]);
            protokollaTila += 1;
            break;
          case 1:
            text = text.concat("\nNote right of " + hosts.h1 + ": Lähetät sähköpostin");
            protokollaTila += 1;
            break;
          case 2:
            piirra_nuoli("h2", "h3", mailArray[0]);
            protokollaTila += 1;
            break;
          case 3:
            text = text.concat("\nNote left of " + hosts.h4 + ": Kirjautuu Webmailiin");
            piirra_nuoli("h4", "h3", webmailArray[0]);
            protokollaTila += 1;
            break;
          case 4:
            piirra_nuoli("h3", "h4", webmailArray[1]);
            protokollaTila += 1;
            break;
          case 5:
            text = text.concat("\nNote left of " + hosts.h4 + ": Ei enää viestejä");
            text = text.concat("\nNote left of " + hosts.h4 + ": Aloita alusta");
            protokollaTila += 1;
            break;
          case 6:
            alusta();
            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: Sähköpostin viestit";
  protokollaTila = -1;
  kuvia = 0;
  $('#mailclient').fadeIn(500, function() {
    $('#mailclient').html('Mail client');
  });
  $('#webmail').fadeIn(500, function() {
    $('#webmail').html('Webmail');
  });
}

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

<a id="webmail" href="javascript:void(0);">Webmail</a>

<a id="mailclient" href="javascript:void(0);">Mail client</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;
  margin-left: 0.1cm;
}