Skip to main content

Hello!

Using the miro javascript sdk, I have built a plugin to create shape groups based on a given input. Now I would also like to create the links between shapes programmatically. Take a look at the picture below, please.

The links were created manually to show what is the intended result. 

Since I have reference to the widgets it should somehow be possible to create links between them. But I did not find a corresponding method. 

Ideas how to achieve that?


Thanks, Markus

Hi Markus,

 

To create links you can use the same method miro.board.widgets.create() => Promise<SDK.IWidgett]>. Please see an example below:

 

miro.board.widgets.create({
	type: 'LINE',
	startWidgetId: startWidgetObject.id,
	endWidgetId: endWidgetObject.id,
	style: {
	    lineColor: '#000000',
	    lineEndStyle: miro.enums.lineArrowheadStyle.CIRCLE,
		lineStartStyle: miro.enums.lineArrowheadStyle.NONE,
		lineStyle: miro.enums.lineStyle.NORMAL,
		lineThickness: 1,
		lineType: miro.enums.lineType.ARROW,
	},
}),

 

Hello Markus,

 

The links between the widgets in your screenshot are LINE widgets. LINE widgets have the following properties:
https://developers.miro.com/docs/interface-ilinewidget
 

In order to create a LINE widget that connects two other widgets in the board you would have to provide the ids of the widgets it connects as the properties startWidgetId and endWidgetId. For example, here I create a LINE widget that connects two STICKER widgets in my board:
 

await miro.board.widgets.create({
  type: "LINE", 
  startWidgetId: "3074457351730884646", 
  endWidgetId: "3074457351730884672", 
  style: {
    lineEndStyle: miro.enums.lineArrowheadStyle.FILLED_ARROW
  }
})

That creates an arrow connecting my two STICKER widgets:
 

 

I hope this helps.

 

Kind regards.

 

Daniela

Developer Experience Team

How can we do this with v2 ? 

Connector is currently unsupported for v2 according to this:

https://developers.miro.com/docs/board-items#unsupported-items

Reply


Terms & Conditions