draw.io integration by Miro (BETA)

Create flowcharts, diagrams, and more directly within your Miro boards using our integration with draw.io — an open-source diagramming tool. 

How to use draw.io

1. Click More apps (+) and search ‘draw.io’.
2. Click draw.io diagrams.
3. The draw.io diagrams app will open.

Opening the draw.io diagrams app from the creation toolbar

Pinning draw.io to the toolbar

For easy access, you can pin the draw.io diagrams app to your creation toolbar.

After searching for draw.io in the toolbar, hover over the app in the search results and click the Pin to toolbar icon. 

Pinning the draw.io diagrams app to the toolbar

Creating a diagram

With draw.io diagrams, you can either create a new diagram or choose a template.  

💡 You can add your existing draw.io diagrams to a Miro board. Learn how to import draw.io diagrams.  

Create a new diagram 

1. Open the draw.io diagrams app.
2. You'll be presented with a blank canvas to start your diagram. You can also drag and drop draw.io files onto the draw.io canvas.
3. On the left sidebar, you'll see various shape categories.
4. Click and drag shapes (e.g. a rectangle or oval) from the sidebar onto the canvas.
5. Continue adding shapes and connectors as needed to complete your diagram. You can also add other elements like text boxes, images, and more from the left sidebar.
6. Once done, click Save and close in the top-right corner of the draw.io diagrams app.

Creating a new diagram using the draw.io diagrams app

Choose a template 

1. Open the draw.io diagrams app.
2. In the top toolbar, click the Insert icon (+).
3. Click Template.
4. Select a template.
5. Edit the template as needed.
6. Once done, click Save and close in the top-right corner.

Choosing a template from the draw.io diagrams app

Add text to shapes in draw.io

1. Click on the shape and start typing.
2. To format the text of a shape, double click the shape. The text menu will open on the right side of the canvas. Here you can change the font styling, color and height.

Adding text to shapes in the draw.io diagrams app

Connect shapes in draw.io

1. Hover over a shape.
2. Small connection points will appear.
3. Click and drag from one of these connection points to another shape to create a connector line.
4. Click on a connector line to customize it. You can change the connector's style (straight, curved, etc.), add arrowheads or other endpoints, and adjust the line's color and thickness.

Connecting shapes in the draw.io diagrams app

Moving, resizing and deleting objects in draw.io

1. To move a shape or connector, click and drag it to the desired location.
2. To resize a shape, click on it and drag any of the small blue circles.
3. To delete an object, select it and press the Delete key on your keyboard or click the Delete icon in the top toolbar.

Moving, resizing and deleting an object in the draw.io diagrams app

Save your diagram 

1. When you’ve finished making changes to your diagram, always remember to click Save and close in the top-right corner of the draw.io diagrams app.
2. The draw.io diagrams app will close, and your diagram will automatically appear on your Miro board.

Saving a diagram from the draw.io diagrams app

Edit your diagram

1. On your Miro board, select the diagram you want to edit.
2. A toolbar will appear.
3. In the toolbar, click the Edit pencil icon.
4. The draw.io diagrams app will open and you can make changes to the diagram.

Editing a diagram in the draw.io diagrams app

Export your diagram

You can export your flowchart in several formats including PNG, JPEG, and PDF. 

1. Click File in the top-left corner of the app.
2. Hover over Export as.
3. Choose your desired format and follow the prompts.
4. Click Export.

Exporting a diagram from the draw.io diagrams app

✏️ This Third Party Platform integration utilizes open source Draw.io code from the Github repository, and is hosted securely by Miro. Draw.io is closed to contributions. Therefore this Third Party Platform integration is provided "as-is" with all bugs and errors, and is offered without any warranty, indemnity, security commitments, or support of any kind from Miro or Draw.io.