Tool for drawing protocol sequence diagrams

mscgen can do this, using the arcgradient option. This snippet wil render the second part of your example exactly:

msc {

  client, server;
  client => server [label="SYN"];
  server => client [label="SYN + ACK"];
  client => server [label="ACK"];

If you copy paste this snippet in the mscgen_js on line demo, you'll see.

I've been using websequencediagrams. Essentially a webapp version of mscgen with a few different fancy renderers.

enter image description here

Websequencediagrams also exposes their diagram rendering as a script API. Now I store my diagrams as HTML files, commit them to git, show nice diffs, etc. I.e.,

<div class="wsd" wsd_style="rose"><pre>
App->set_state PAUSE
<!-- your wsd diagram commands, etc... -->
<script type="text/javascript" src=""></script>

For anyone else in need, there is a cool command-line tool mscgen.