index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>

  <body>
    <textarea id='textarea' rows='40' cols='60'>
digraph g {
  "login_2" -> "login_1";
  "login_3" -> "login_1";
  "login_4" -> "login_2";
}
    </textarea>
    <a href='#' id='get_png'>ページ読み込み中...</a>
    <div id='result'></div>
  </body>
  <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
  <script>
    $('#get_png').text('画像を取得する');
    $(function() { 
      $(document).on('click', '#get_png', function(e) {
        e.preventDefault();
        var url = 'https://demo-graphviz-server.herokuapp.com/';
        var params = {
          dataType: 'jsonp',
          method: 'GET',
          url: url,
          timeout: 120 * 1000,
          data: { body: $('#textarea').val() },
        };
        $('#result').html('画像を読み込み中...');
        $.ajax(params).
          done(function(data, textStatus, jqXHR) { 
            if(data['error_msg'] == undefined) { 
              $('#result').html(
                "<img src='data:image/png;base64," + data['encoded_png'] + "'/>"
              );
            } else {
              $('#result').html(
                data['error_msg'].replace('\n', '<br>')
              )
            }
          }).
          fail(function(jqXHR, textStatus, errorThrown) {
            $('#result').html(errorThrown);
          })
      })
    });
  </script>
</html>