- Print
- DarkLight
- PDF
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. All mentions of Diagrams.net or Draw.io in this support article refer to the same entity.Diagrams.net = Draw.io
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
- Head to the Draw.io window
- Open File → Embed → Image
- Click Embed
- Copy the generated image tag
- Head back to the article in the Document360 editor
- Paste the copied code
Method 2
- In the Draw.io, open File → Export as → PNG
- Click Export
- Enter the File name and save it to your desired location (Google Drive, OneDrive, Dropbox, GitHub, GitLab, and Device)
- Click Download
- Head back to the article in the Document360 editor
- Click on Insert image and select From Upload/URL
WYSIWYG editor
- In Draw.io, export and download the diagram
- Head back to the article in the Document360 editor
- Click on Insert image and select From Upload/URL
You can also include the image tag in the WYSIWYG editor. Still, it is not advisable to do so as it may cause a performance imbalance.