Embedding a draw.io diagram
  • 26 Oct 2022
  • 2 Minutes à lire
  • Contributeurs
  • Sombre
    Lumière
  • PDF

Embedding a draw.io diagram

  • Sombre
    Lumière
  • PDF

There is no French content available for this article, You are viewing the fallback version (English).

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 Article by using HTML and an autogenerated link, which you can find in the Draw.io 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.

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 Markdown editor.

Method 1

  1. Open the File menu in the diagram file and click EmbedImage.
    publish link location
  2. Click Embed
  3. Copy the generated image tag and navigate to 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 and 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. Still, it is not advisable to do so as it may cause a performance imbalance.


Cet article vous a-t-il été utile ?

What's Next