Hi Rajeev,

Thank you for sharing your questions regarding the draw.io integration with Miro via API.

The Miro REST API functionality doesn’t really cover such integration level. However, it should be possible to achieve using the Miro SDK!

Moreover, Miro already developed an app doing exactly that - please check this post in our Community thread!

You can find the app itself in our Miro App Marketplace using this link.

Please let me know if that helps! Have a wonderful day!

@Andrew Petukhov thanks for your comment but your comment does not answer my query. I am aware of draw.io integration with Miro. My question was not about the link of the market place of the integration. As a developer, I want to integrate another diagramming app (NOT draw.io) with Miro. I was asking any pointer on how to do that. I did not find that anywhere in the documentation. Also I am not asking whether it can be achieved by only REST API. I am interested to know how this can be achieved either by REST API or SDK or whatever.

If it is possible to achieve this using Miro SDK, pleas point me to any documentation page. If there is any sample, that will help a lot.

Replying to check again if anyone got any pointer on this. Any related documentation link or any code sample would help.

Thanks

Hi @Rajeev Kumar.

Is the draw.io integration done using all documented (and supported) API? 
No, it was built internally - so it may have used some components which are not available publicly using our REST API / SDK. 

There is no guidance specifically for diagramming apps. The Miro Developer Platform is built to be general purpose, so you can use it to build any kind of apps, including diagramming apps. 

Outside of our normal getting started guides for WebSDK, and REST API, and for building your first Hello Word Miro app, we have a video on how to build a diagramming app with our SDK, so hopefully that will at least point you in the right direction. 

We also have many app-examples which you can check out, outside of the video, which you can find on our GitHub page here. Each individual example will have a short 20 second demo video, so you can see what that app does before you dive into the code. 

Hope this helps, let me know if you have further questions! 

Hi @Horea Porutiu Thanks for providing the links. But I am still not able to find out how to do integration the way draw.io is integrated. Here is flow

• Some API to add a custom object on the canvas. I am not able to find any custom object or equivalent in the documentation
• The custom object can either show an image or content of some URL in an iframe
• There should be some API to interact with custom object to reload / set the content
• In the context menu of the custom object, there should be an item item to edit the custom object
• Clicking the edit will open another full screen iframe with diagramming editor
• Once the editing is done, user will click save in the diagramming editor. It should close the full screen iframe
• And then using the API, the content of the custom object should be updated

This flow is exactly as draw.io is integrated with Miro. I did not find anything in the SDK to achieve this. This is exactly how draw.io is integrated with Confluence using the Confluence public API. I am looking for something similar in Miro.

I think it is not possible in Miro to achieve the above. Never Mind. I am dropping the idea of integrating my diagramming app with Miro.

Thanks

Hi @Rajeev Kumar,

Let me try to answer some of your questions below:
 

Some API to add a custom object on the canvas. I am not able to find any custom object or equivalent in the documentation
For this, we have createShape (for basic shapes ) and createShape experimental for flowchart shapes.  One other way to create custom objects would be to group different items together, using this group method. 

The custom object can either show an image or content of some URL in an iframe
For this, you can use the create image using URL but you would have to group these two items together, as they are separate items on the board. For other content you could use openModal to open an iframe and set the height / width of it. 

 

There should be some API to interact with custom object to reload / set the content
You should be able to update using PATCH API request to update shape. It would only modify certain properties of the shape itself, like the text, position, etc. 

In the context menu of the custom object, there should be an item item to edit the custom object

You should be able to achieve this with custom actions. 
 

Clicking the edit will open another full screen iframe with diagramming editor
Use openModal for this and add in the relevant height / width parameters. 

 

Once the editing is done, user will click save in the diagramming editor. It should close the full screen iframe

You can use closeModal for this.

 

And then using the API, the content of the custom object should be updated

That should be the same as the PATCH API request above. 

We are looking into adding more support for custom shapes, so we will take it as feedback to improve this part of the Miro Platform. Hope this helps.