<body>

  <textarea rows="20" cols="255">A->B: Message</textarea>
  <div id="diagram"></div>

  
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js"></script>

  <script type="text/javascript">
    
    $(document).ready(function () {
      var diagram = Diagram.parse($('textarea').val());
      diagram.drawSVG('diagram');
    });
    
  </script>

</body>

<body>

  <div><button>Draw</button></div>
  <textarea rows="20" cols="255">A->B: Message</textarea>
  <div id="diagram"></div>

  
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js"></script>

  <script type="text/javascript">

    function draw() {
      $('svg').remove();
      var diagram = Diagram.parse($('textarea').val());
      diagram.drawSVG('diagram');
    }

    $(document).ready(function () {
      draw();
    });

    $('button').click(function () {
      draw();
    });
    
  </script>

</body>

Add Draw button to update the diagram with the new text
Add Draw button to update the diagram with the new text
