Embedding a draw.io diagram (Diagrams.net)

Diagrams.net (previously Draw.io) is an online open-source diagram drawing software that lets you create flowcharts, UML, entity relations, network diagrams, mock-ups, and more.

Diagrams.net uses Google Drive to store finished diagrams. You can embed Diagrams.net images into Document360 Article by using HTML and an autogenerated link, which you can find in the Diagrams.net app.

How to embed a Draw.io diagram?

Markdown editor

There are two methods in which you can embed Draw.io (Diagrams.net) diagrams into your Document360 Markdown editor.

Method 1

1. Head to the Draw.io window
2. Open File → Embed → Image
   
3. Click Embed
4. Copy the generated image tag
   
5. Head back to the article in the Document360 editor
6. Paste the copied code

Method 2

1. In the Draw.io, open File → Export as → PNG
2. Click Export
3. Enter the File name and save it to your desired location (Google Drive, OneDrive, Dropbox, GitHub, GitLab, and Device)

4. Click Download
5. Head back to the article in the Document360 editor
6. Click on Insert image and select From Upload/URL

WYSIWYG editor

1. In Draw.io, export and download the diagram
2. Head back to the article in the Document360 editor
3. Click on Insert image and select From Upload/URL