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 = Draw.io
All mentions of Diagrams.net or Draw.io in this support article refer to the same entity.
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.
Privacy Settings
Diagrams stored on Google Drive, Dropbox, etc., are private by default. When embedding a diagram in an article, ensure that privacy settings for that diagram are changed to public.
How do you 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.
Using the "Embed" option
- Head to the Diagrams.net 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
Height and width can be changed as required.
Exporting as an image and uploading it to Document360
- In the Diagrams.net, 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
Advanced WYSIWYG editor
- In Diagrams.net, export and download the diagram
- Head back to the article in the Document360 editor
- Click on Insert image and select From Upload/URL
Why not include the image tag from Diagrams.net directly in the Advanced WYSIWYG editor?
You can also include the image tag in the Advanced WYSIWYG editor. Still, it is not advisable to do so as it may cause a performance imbalance.