View Source

Have two screens open; one with the DrawIO Diagram and the other the webpage with the image.

Get the image's URL

If you're creating your Division/Office/MEAs organigramme and want to add images for your staff. The first thing you need to do is the get the URL for the image. This process can be used for every single image available on the web.

Search for your image, in this example we are going to search for a staff members profile:

Click in the Search bar to open the search options:

Type the name of the person you're looking for and if their profile is not immediately visible chose the type 'User' to narrow the search:

weCollaborate learning resources > Adding Images via URL to a DrawIO Diagram > image2020-11-16_5-33-37.png

Right-click on the persons image and choose 'Copy Image Location'

weCollaborate learning resources > Adding Images via URL to a DrawIO Diagram > image2020-11-16_5-37-0.png

You now have the image URL saved. Please note if you copy anything else it will overwrite the image URL.

Add image via URL to DrawIO

Open DrawIO and click on the + icon and then choose 'Image'

weCollaborate learning resources > Adding Images via URL to a DrawIO Diagram > image2020-11-16_5-40-0.png

Choose 'From URL' and right-click in the box that appears and paste the image URL saved earlier

weCollaborate learning resources > Adding Images via URL to a DrawIO Diagram > image2020-11-16_5-45-57.png

Wait a few seconds and a preview of the image will appear and the 'Apply' button will change to blue:

weCollaborate learning resources > Adding Images via URL to a DrawIO Diagram > image2020-11-16_5-47-16.png

You can now change the image using the various parameters available in DrawIO, including the size, colour, border, etc.