How to use the jsplumb.connect function in jsplumb

relations.forEach((relation) => {
                jsPlumb.connect({
                    source: relation.source.columnId,
                    target: relation.target.columnId,
                    overlays: [
                        ['Arrow', { location: 1, width: 12, length: 12 }]
                    ],
                    endpoints: [['Dot', { radius: 8 }], 'Blank'],
                    paintStyle: { stroke: '#7f8c8d', strokeWidth: 2 },
                    endpointStyle: { fillStyle: '#7f8c8d' }
                });
            });
        });

self.on('mount', function () {
            self.connection = jsp.connect({source: self.sourceDomId, target: self.targetDomId});
            self.connection.setParameter('_edgeObject', self);

            var labelElement = $(self.root).find('editable').detach();
            $(self.connection.getOverlay('label').getElement()).append(labelElement);

            if (self.sourceDomId === self.targetDomId)
                setTimeout(function () {
                    jsp.revalidate(self.sourceDomId)
                }, 0);

            EdgeActions.setProps(self.id, {_jsp_connection: self.connection});

            self.trigger('updated');
        });