Following the issue of vis visjs/vis#1699, and thanks to the comments of @frboyer and @JimmyCheng, I have created a class to easily draw lines to connect items in the vis Timeline module.

1 - Download the package

npm install timeline-arrows

2 - Import the class Arrow from arrow.js in your project

3 - Create your timeline as usual (see vis-timeline docs).

For instance:

const my_timeline = new vis.Timeline(container, items, groups, options);

4 - Create your arrows as an array of objects. These objets must have, at least, the following properties:

• id
• id_item_1 (id of one timeline's items)
• id_item_2 (id of the other timeline's items that you want to connect with)

And optionally:

• title (insert a text and it will show a title if you hover the mouse in the arrow)

For instance:

var arrows_array = [
    { id: 2, id_item_1: 1, id_item_2: 2 },
    { id: 5, id_item_1: 3, id_item_2: 5, title:'Hello!!!' },
    { id: 7, id_item_1: 6, id_item_2: 7 },
    { id: 10, id_item_1: 3, id_item_2: 8, title:'I am a title!!!' }
];

5 - Create your Arrow instance for your timeline and your arrows.

For instance:

const my_Arrow = new Arrow(my_timeline, arrows_array);

That's it :)

I have created the following methods:

getArrow ( arrow id ) Returns the arrow whith this arrow_id.

For instance:

my_Arrow.getArrow (2);

addArrow ( arrow object ) Inserts a new arrow.

For instance:

my_Arrow.addArrow ( { id: 13, id_item_1: 15, id_item_2: 16 } );

removeArrow ( arrow_Id ) Removes the arrows with this arrow_Id.

For instance:

my_Arrow.removeArrow ( 10 );

removeArrowbyItemId ( item_Id ) Removes the arrows connected with Items with this item_Id. Returns an array with the id's of the removed arrows.

For instance:

my_Arrow.removeArrowbyItemId ( 23 );

You can see some working examples here:

https://javdome.github.io/timeline-arrows/index.html