Embedding a draw.io diagram
  • 13 Jul 2022
  • 2 Minutes to read
  • Contributors
  • Dark
    Light
  • PDF

Embedding a draw.io diagram

  • Dark
    Light
  • PDF

Draw.io is an online open-source diagram drawing software that lets you create flowcharts, UML, entity relations, network diagrams, mock-ups, and more. Draw.io uses Google Drive to store finished diagrams. You can embed Draw.io diagrams into Document360 articles by using HTML and an autogenerated link you can find in the Draw.io app.

Privacy Settings
Diagrams stored on Google Drive, Dropbox, etc., are private by default. Make sure, when embedding a diagram in an article, that privacy settings for that diagram are changed to public.

To embed a Draw.io diagram in the Markdown editor

There are two methods in which you can embed Draw.io diagrams into your Document360 editor.

Method 1

  1. In the diagram file, open the File menu, click EmbedImage.
    publish link location
  2. Click Embed
  3. Copy the generated image tag and navigate in the article where you like to include the diagram
    copy location
  4. Paste the copied code in the editor space
Height and width can be changed as required.
  1. Copy the image tag and paste it into the article.
    embed code and preview

Method 2

  1. In the diagram file, open the File menu, click Export asPNG
  2. Click Export
  3. Enter the File name and save it in your desired location( Google Drive, OneDrive, Dropbox, GitHub, GitLab and Device)

2_Screenshot_Draw.io_Save

  1. Click Download
  2. Click Insert image from the editor toolbar in Document360
  3. The Drive folders will open, and only Image file formats will be displayed
  4. Search or navigate through and select the intended image and click Insert
  5. Insert the height and width in pixels must be typed in manually (Only one image can be inserted at a time)

To embed a Draw.io diagram in the WYSIWYG editor

  1. In the diagram file, open the File menu, and click Export usPNG
  2. Click Export
  3. Enter the File name and save it in your desired location( Google Drive, OneDrive, Dropbox, GitHub, GitLab and Device)
  4. Click Download
  5. Click Insert image from the editor toolbar in Document360
  6. The Drive folders would be opened, and only Image file formats would be displayed
  7. Search or navigate through and select the intended image and click Insert
  8. Insert the height and width in pixels must be typed in manually (Only one image can be inserted at a time)
Why not include the image tag from Draw.io in the WYSIWYG Editor?

You can also include the image tag in the WYSIWYG editor as you do it in the Markdown editor, but it is not advisable to do so as it may cause a performance imbalance.


Was this article helpful?

What's Next