Embedding a draw.io diagram (Diagrams.net)
  • 05 May 2023
  • 2 Minutes to read
  • Contributors
  • Dark
    Light
  • PDF

Embedding a draw.io diagram (Diagrams.net)

  • Dark
    Light
  • PDF

Article Summary

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 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 → EmbedImage
    publish link location
  3. Click Embed
  4. Copy the generated image tag
    copy location
  5. Head back to the article in the Document360 editor
  6. Paste the copied code
Height and width can be changed as required.

embed code and preview


Method 2

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

2_Screenshot_Draw.io_Save

  1. Click Download
  2. Head back to the article in the Document360 editor
  3. 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
Why not include the image tag from Draw.io directly in the WYSIWYG editor?

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.


Was this article helpful?