Answered

How to link nodes programmatically?

  • 18 November 2020
  • 4 replies
  • 700 views

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

icon

Best answer by Viktor Razumov 18 November 2020, 12:12

View original

4 replies

Userlevel 1

Hi Markus,

 

To create links you can use the same method miro.board.widgets.create() => Promise<SDK.IWidget[]>. 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,
},
}),

 

Connector is currently unsupported for v2 according to this:

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

How can we do this with v2 ? 

Userlevel 3
Badge

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

Reply