Skip to main content

Get started with draw.io for SharePoint

The draw.io web part lets you display and edit draw.io diagrams directly on your SharePoint pages. Your diagrams are stored as files in SharePoint, and you edit them with the same draw.io editor as in all of the other draw.io integrations.

Add the draw.io web part to a page​

  1. Go to the SharePoint page where you want to show a diagram, and click Edit at the top right of the page.
  2. Hover over the page where you want the diagram to appear, and click the plus (+) button to add a new web part.
  3. Search for draw.io and select the draw.io web part.

The web part will be added to your page. New web parts must be configured before they can display a diagram.

Pick a diagram file to display​

  1. Select the web part, then click the pencil icon (Edit web part) to its left.
    Select the new draw.io web part on your SharePoint page, then click the pencil icon to open the web part configuration panel
  2. In the configuration panel, click Pick File.
  3. Select a draw.io diagram file from your documents, then click Select.
    Click Pick File in the draw.io web part configuration panel, then select a draw.io diagram file from your documents and click Select

The diagram will be loaded and displayed in the web part on your page.

Advanced settings​

  • Base URL - the URL of the draw.io editor loaded by the web part, https://app.diagrams.net by default. If you use a custom draw.io host, such as your own draw.io server, enter its URL here.
  • Show in mobile and email view - turn this off if the diagram should not be shown in the mobile and email views of your page.

Edit a diagram on your page​

When your SharePoint page is in edit mode, the web part displays the diagram in the full draw.io editor, and you can edit the diagram in place.

  • Changes are saved to the diagram file automatically - All changes saved is displayed in the editor toolbar when your latest changes have been stored.
  • You can collaborate with other users who are working on the same diagram file at the same time.
When your SharePoint page is in edit mode, edit the diagram in place with the draw.io editor displayed in the web part

Note: The draw.io editor is only displayed while the page is in edit mode. In view mode, only the diagram is displayed.

View a diagram​

When your page is in view mode, the diagram is displayed without the editor. A toolbar appears over the diagram with tools to zoom into and print the diagram, and hides itself automatically.

When your SharePoint page is in view mode, the diagram is displayed without the editor, with a toolbar to zoom into and print the diagram