docs: function() {
  
        var data = window.kelmu.data[id];
  
        if (!data.definitions['step' + data.stepNumber] || !data.definitions['step' + data.stepNumber][data.subStepNumber]) {
          return;
        }
  
        var step = data.definitions['step' + data.stepNumber][data.subStepNumber];
  
        container.find('.kelmu-arrow-handle').remove();
  
        var arrowCounter = 0;
        $.each(step, function(index) {
  
          if (this.arrow || this.line) {
  
            var handle1 = $('<div></div>').addClass('kelmu-arrow-handle').attr('data-arrow', arrowCounter).attr('data-type', 'start').attr('data-annotation', index);
            var handle2 = $('<div></div>').addClass('kelmu-arrow-handle').attr('data-arrow', arrowCounter).attr('data-type', 'end').attr('data-annotation', index);
            var handle3 = $('<div></div>').addClass('kelmu-arrow-handle').attr('data-arrow', arrowCounter).attr('data-type', 'middle').attr('data-annotation', index);
            handle1.prependTo(container);
            handle2.prependTo(container);
            handle3.prependTo(container);
  
            var self = this;
            var arrow = container.find('svg path#arrow-' + arrowCounter);
            arrow.attr('data-prev-x', (self.x2 + self.x1) / 2);
            arrow.attr('data-prev-y', (self.y2 + self.y1) / 2);
  
            container.find('.kelmu-arrow-handle').css('position', 'absolute').css('cursor', 'move').draggable({
              start: function() {
                $('body').css('cursor', 'move');
              },
              stop: function() {
                $('body').css('cursor', 'auto');
                notifyModifications();
                updateView(true, true);
              }
            });
  
            handle1.css('top', this.y1);
            handle1.css('left', this.x1);
            handle2.css('top', this.y2);
            handle2.css('left', this.x2);
            handle3.css('top', (this.y2 + this.y1) / 2);
            handle3.css('left', (this.x2 + this.x1) / 2);
  
            container.find('.kelmu-arrow-handle').on('drag', function(event, ui) {
  
              var elem = $(this);
              data.selectedElementNumber = parseInt(elem.attr('data-annotation'), 10);
  
              var arrow = container.find('svg path#arrow-' + $(this).attr('data-arrow'));
              var isStart = $(this).attr('data-type') === 'start';
              var isEnd = $(this).attr('data-type') === 'end';
              var isMiddle = $(this).attr('data-type') === 'middle';
              var previous = arrow.attr('d').split(' ');
  
              var number = elem.attr('data-annotation');
              var elemData = data.definitions['step' + data.stepNumber][data.subStepNumber][number];
  
              if (isStart) {
                arrow.attr('d', 'M ' + ui.position.left + ' ' + ui.position.top + ' L ' + previous[4] + ' ' + previous[5]);
                elemData.x1 = ui.position.left;
                elemData.y1 = ui.position.top;
                container.find('.kelmu-arrow-handle[data-annotation="' + elem.attr('data-annotation') + '"][data-type!="start"]').hide();
              } else if (isEnd) {
                arrow.attr('d', 'M ' + previous[1] + ' ' + previous[2] + ' L ' + ui.position.left + ' ' + ui.position.top);
                elemData.x2 = ui.position.left;
                elemData.y2 = ui.position.top;
                container.find('.kelmu-arrow-handle[data-annotation="' + elem.attr('data-annotation') + '"][data-type!="end"]').hide();
              } else if (isMiddle) {
                var prevX = parseFloat(arrow.attr('data-prev-x'));
                var prevY = parseFloat(arrow.attr('data-prev-y'));
                var dx = ui.position.left - prevX;
                var dy = ui.position.top - prevY;
                arrow.attr('d', 'M ' + (parseFloat(previous[1]) + dx) + ' ' + (parseFloat(previous[2]) + dy) + ' L ' + (parseFloat(previous[4]) + dx) + ' ' + (parseFloat(previous[5]) + dy));
                elemData.x1 = parseFloat(previous[1]) + dx;
                elemData.y1 = parseFloat(previous[2]) + dy;
                elemData.x2 = parseFloat(previous[4]) + dx;
                elemData.y2 = parseFloat(previous[5]) + dy;
                container.find('.kelmu-arrow-handle[data-annotation="' + elem.attr('data-annotation') + '"][data-type!="middle"]').hide();
              }
  
              arrow.attr('data-prev-x', (elemData.x2 + elemData.x1) / 2);
              arrow.attr('data-prev-y', (elemData.y2 + elemData.y1) / 2);
  
            });
  
            var handlers = container.find('.kelmu-arrow-handle');
            handlers.css('opacity', 0.2).css('margin-left', '-5px').css('margin-top', '-5px').css('width', '10px');
            handlers.css('height', '10px').css('border-radius', '5px').css('background-color', 'black').css('z-index', 52000);
  
            arrowCounter += 1;
  
          }
        });
      }