13 posts tagged with "integrations"

Many diagrams in companies contain highly sensitive data - you don't want to share this data outside of your company's cloud systems. A stricter content security policy lets you diagram securely with draw.io via our online editor at se.diagrams.net, storing your diagram file in your Google Workspace or Google Drive account.

Features that require conversion tools on our servers, required to import and export files in a couple of formats, are not available when you use se.diagrams.net.

All other features that require processing of your diagram data are done directly in your browser. This ensures your diagram data is only communicated between your browser and your Google Workplace account.

Diagram securely​

draw.io is a unique security-first diagramming tool in that we provide the application platform, but your diagram data only lives in your browser while you are working on it, and in your Google Drive or Workspace account at rest.

We are dedicated to data security - we don’t use any trackers within our diagram editor or store your diagram data. Your diagram data is secure and private when you use draw.io. The few conversion tools that require remote server functionality are not available on se.diagrams.net.

Protect sensitive diagram data​

Many types of diagrams require stricter data security in a corporate context: entity relationship diagrams for modelling or documenting databases, infrastructure and network diagrams, sensitive business processes and BPMN diagrams, supply chain dependencies, business models, attack trees and flows in threat modelling, and even UML diagrams that expose the inner workings of your applications' code.

Because your sensitive diagram data doesn't leave your infrastructure and is never stored on the our servers, se.diagrams.net is a tool which lets you comply with data protection certifications such as ISO 27000, 27001 and 27002.

Impact on editor features​

Import: .vsd, .gliffy and .lucid file formats are not available.

Export: Export to .vsd and .pdf file formats.

• When you select File > Export As > PDF, it will automatically open a dialog where you can print your diagram to a PDF file.
• The conversion to a .vsdx file is done in your browser. Select File > Export As > VSDX to export to this format.

Use the Mermaid syntax instead: Arrange > Insert > Advanced > Mermaid

Storage location: Google Drive is the only cloud storage location available for both diagram files and custom shape libraries.

Use a secure online whiteboard​

Change the se.diagrams.net editor theme to show a minimal whiteboard-like collection of tools and panels.

1. If you don't already have this editor theme enabled, select Extras > Theme > Sketch.
2. Reload your browser tab to switch to the simpler editor theme.

Mermaid is a text-based syntax that you can use to describe a diagram, and automatically lay it out neatly on the diagram canvas. Enter your Mermaid diagram description in draw.io via Arrange > Insert > Mermaid in the draw.io menu or + > Mermaid from the toolbar. draw.io has updated to Mermaid version 10.9.1 to support the new ELK automatic layout.

Text to diagram tools in draw.io​

There are several text-to-diagram tools built into draw.io:

• Mermaid diagrams
• SQL to entity shapes
• Specially formatted CSV data
• Basic text-to-diagram converter for trees and lists.

Example Gantt chart generated from Mermaid syntax

Some of these text-to-diagram features generate a diagram as an image on the drawing canvas, and some use draw.io shapes to automatically layout your diagram and let you continue adding draw.io shapes and connectors to it.

You can choose your preferred output when you generate a diagram from Mermaid syntax, although some diagram types - like the Gantt chart above - will only generate to an image.

Insert a Mermaid diagram in draw.io​

An example coffee machine debugging flow is described in Mermaid syntax below.

graph TD
   A(Coffee machine <br />not working) --> B{Machine has power?}
   B -->|No| H(Plug in and turn on)
   B -->|Yes| C{Out of beans or water?} -->|Yes| G(Refill beans and water)
   C -->|No| D{Filter warning?} -->|Yes| I(Replace or clean filter)
   D -->|No| F(Send for repair)

Add this Mermaid diagram to draw.io.

1. Select Arrange > Insert > Mermaid from the menu or + > Mermaid from the toolbar if you are using the Simple mode or the Sketch editor theme.
   
2. Enter the text description of your diagram using Mermaid syntax in the large text box.
3. From the drop-down list, select whether you want to insert the diagram with draw.io shapes (Diagram), or as a single image (Image), and click Insert.
   

Diagram (default): When you insert the Mermaid diagram using the draw.io shapes, you can connect additional shapes and connectors and style your diagram. To change the original Mermaid syntax, first delete the previously inserted shapes, and re-enter the Mermaid description of your diagram by repeating the steps above.

Image: To generate the Mermaid diagram as a single SVG image on the drawing canvas instead, select Image from the drop-down list before you Insert. If you hover over the SVG image, the Mermaid syntax is visible in the tooltip. Note that you can't edit or style the individual shapes or connectors in this SVG image version.

To change a Mermaid diagram added as an image, double click on the SVG on the drawing canvas and edit the Mermaid syntax to regenerate the image.

Please refer to the Mermaid documentation for the complete syntax and styling options.

New ELK layouts for large flowcharts​

The new ELK layout option, introduced in Mermaid version 9.4, can generate compacter versions of large and complex flowcharts.

Add the following renderer directive to the top your Mermaid diagram text description:

%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%

For example, to layout the example Mermaid graph shown above with the ELK renderer command, the insert Mermaid dialog looks as follows.

Click Insert, and the Mermaid diagram will be generated ad drawn with draw.io shapes.

While this example is small and simple, larger flows with complex decisions and many branches may be displayed better using this ELK renderer option.

Note: As this is an experimental feature from the Mermaid developers, it currently only supports the flowchart layout.

Large Mermaid flowchart with and without ELK

Below, one of the more complex draw.io flowchart templates has described in text using Mermaid syntax and inserted as an image. The more compact version on the left used the new ELK renderer directive, and the one on the right did not.

With the ELK renderer directive, the Mermaid code for this flowchart looks as follows.

%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%

graph TD
  A[\Replenish Value Add stock/] --->C
  B(Order product with Value Add) --->C
  C{Frequent process?} --->|Yes|D 
  C --->|No|F
  D{New template?} --->|Yes|E 
  D --->|No|G
  E(Create work order template) --->G
  F(Create work order) --->H
  G(Copy template to work order) --->I
  H(Add materials to work order processes) --->J
  I(Adjust material quantities) --->J
  J(Monitor work orders) --->K
  K{Material quantities in stock?} --->|No|L 
  K --->|Yes|M
  L(Procure materials) --->M
  M(Change status to In Progress) --->N
  N{External Vendor to perform step?} --->|Yes|O 
  N --->|No|P
  O(Add vendor costs) --->Q
  P[\Perform work order step/] --->R
  Q([Ship materials to Vendor]) --->S --->X
  R{Additional processing required?} --->|Yes|N 
  R--->|No|T
  S[\Perform work order step/] --->U
  T(Receive final stock) --->V
  U(Receive product from vendor) --->W
  V(Ship product on order) --->Y
  W{Partial quantity received?} --->|Yes|X 
  W --->|No|Z
  X[Create work order backorder] ---> J
  Y(Change status to complete) --->AA
  Z(Pay vendor invoice) --->R
  AA([Finish])

draw.io will be available as an integration in the web-based GitLab Wiki editor on 22 March with the GitLab 15.10 release and product kickoff. When you add your diagram to a GitLab Wiki page while editing the source of that page, it will be saved as an SVG image containing the diagram code, and displayed in the page content.

Like all files in GitLab, the image with its embedded diagram is versioned, so all changes are tracked.

Note: As this integration is still under development until release, small changes may be made.

Diagram in the GitLab Wiki editor​

Add a new diagram: Click on Insert or edit diagram in the toolbar in the Markdown editor.

A blank diagram will be opened in the Sketch whiteboard-style editor theme. Use the diagramming toolbar on the left to access templates and shape libraries.

Save your diagram: It will be added to the page in Markdown as a .drawio.svg file.

Edit an existing diagram: Make sure your cursor is in the diagram file entry in the Markdown code, and select Insert or edit diagram.

View a diagram in the page: Click on Preview to render the page containing the diagram.

Diagram with the GitLab rich text editor​

Edit a diagram: Select the diagram, and click on Edit diagram in the hover toolbar that appears above or below.

Add a new diagram: Make sure no other diagram is selected, then click on the + in the toolbar and select Create or edit diagram.

Save individual diagram files to GitLab​

You can also store your individual diagram files in GitLab. Select GitLab as the save file destination when you create a new diagram, or select Save as from the menu.

Alternatively go to our online editor to start diagramming now using GitLab to store your diagrams.

You'll need to authorise access to your GitLab repositories, if you haven't already done so.

Tip:i As draw.io uses secure direct client authorisation, your password is never shared.

Diagram in VSCode with GitLab​

1. Set up the GitLab Workflow extension for Visual Studio Code.
2. Install Henning Dieterichs' unofficial draw.io extension for Visual Studio Code

The draw.io extension for VSCode lets you view and edit the .drawio diagram files stored in your repositories.

See how this extension works in GitHub - it works in a similar way with GitLab inside VSCode.

Note: The extension only recognises files with the .drawio file extension.

Using diagrams.net or draw.io together with scripts and data sources, you can create data-driven diagrams, with colours, shapes, text labels and even animations that change to reflect live data.

Aside from live diagrams of cloud network infrastructures, and charts that visualise data in graphs, there are few true data-driven diagrams. As draw.io does not include spreadsheet or graph functionality - it's a diagram editor - dynamically updated charts are not possible.

You can program your own scripts or use integrations with other applications to achieve data-driven diagrams where diagram shapes change to reflect live data because draw.io is open source and the .drawio diagram format uses accessible XML.

How it works​

Each shape in a draw.io diagram has a unique shape ID.

Because the diagram data is stored in your file using XML tags, you can use a script to search for the shape ID in the XML source and replace common shape properties with a different value to reflect the data at that time.

What you'll need

• diagram created in the draw.io editor and saved as an XML file
• application or script to do the following:
  • display and refresh the diagram
  • query or read the live data
  • analyse the data values and update the shape properties in the diagram according to programmed rules

Example - factory status floorplan​

To show you how to build such a data-driven diagram, we'll use an example of a dashboard that shows the status of a machine on a factory floorplan based on real-time sensor data from that machine.

This example uses Grafana and Arnaud Genty's Flowcharting plugin to feed the real-time sensor data recorded in a database to scripts that update the shapes in the diagram based on rules that we define.

Draw your diagram and set it up for data​

Create your diagram in draw.io online or one of our draw.io apps.

You can draw any type of diagram - flow charts, wireframes, floorplans, org charts, wiring diagrams, etc.

Avoid using complex shapes for elements you want to update. Those that contain multiple fields, like tables, entity shapes or swimlanes won't typically have unique IDs that you can refer to later.

In this example, we've created a factory floorplan with simple text shapes to show important machine information.

Set custom unique shape IDs

For each shape that will dynamically update based on a data source, you should override the auto-assigned shape ID to make it easier to refer to later.

1. Right-click on a shape and select Edit Data. Alternatively, select a shape and press Ctrl+M or Cmd+M.
2. Hold down Shift and double click on the ID string at the top.
3. Change the shape ID to something more memorable - make sure it is unique.
4. Click Apply to save the new shape ID, then click Apply to save the shape data.
   

In our example, all of the text shapes that say Text are to be updated. Each has been assigned a new custom unique shape ID.

View the shape IDs in the Properties section on the Style tab.

Export your diagram as an XML file

You need to read (and copy) the full XML source of your diagram, so export it as an XML file so it can be easily opened by a text editor.

1. Select File > Export As > XML from the menu.
2. Save the file to your local device.

Create a dynamic dashboard​

1. Install Grafana and the Flowcharting plugin.
2. Configure one or more data sources in Grafana.
3. Create a new dashboard and add a Flowcharting panel.
   

Add the diagram to the dashboard

1. Open the diagram .xml file you previously saved in a text editor.
2. Copy all the diagram data that appears after the initial <?xml ... > tag.
   
3. Now, add the diagram data to the Flowchart panel in Grafana.

• Set the Editor URL & Theme to our online service at embed.diagrams.net, and select Dark or Light from the drop down list. If you run your own draw.io server, use its URL instead.
• Set the Source Type to XML.
• In the Source Content text field, paste the diagram data you copied from your text editor.
  

The diagram will appear in the dashboard preview panel.

Map diagram shape IDs to data queries with rules

Now, you need to link the diagram shapes you want to update, with queries of a data source and rules defined in the Flowchart panel.

1. Write the queries to extract the data you need from your data sources. Set the name of the metric to the diagram shape ID that it updates so it's easier to see which query updates which shape.
   
2. Set the behaviour in the Mapping section for each query.
   • Set Identify by to ID as that is how we identify a specific shape.
   • Enable Regular expression and add some rules. In the What field of the rule, enter the specific shape ID for the shape you want to update.
     
     The shape label is Active or Stop based on the latest database value.

Refer to the Flowcharting mapping documentation if you need help with this step.

You can change the colour or tooltip of the shape, its text label or link, or add an animation.

Now, when your dashboard runs and your data queries are updated, your diagram will update according to the rules you have set.

More data-driven diagram examples​

1. Select one of these live examples of diagrams in the Flowcharting plugin.
2. Expand the title and select Edit to see how it is set up.
   

This past year has seen a number of new features and big updates to draw.io, including the online editor, our Confluence and Jira apps, and other integrations for a variety of platforms.

Data security and privacy​

As a unique security-first diagramming app, we want to provide you with the best in data privacy and data security.

Building on the data governance and lockdown options we implemented last year, our draw.io branded app for Confluence Cloud and Jira Cloud was the first secure diagramming app to meet Atlassian's rigorous Cloud Fortified standard, making it your most secure choice for diagramming and visualization.

The draw.io App for Github is an alternative authorisation method you can use to limit draw.io's repository access to specific repositories, rather than all of the repositories in your account.

We researched a stricter implementation of our content security policy on the test se.diagrams.net domain. Take up of the domain has been very low, so we will port all the changes we can from that project and then close it down.

New and updated integrations​

Several new integrations were released, and existing ones were updated in the past year. New and updated features common across all integrations are described in the following section.

draw.io for Atlassian Confluence and Jira

With the draw.io apps for Confluence Cloud and Jira Cloud, you can embed diagrams that are stored in Confluence Cloud in your Jira Cloud issues. Keep all of your visual documentation for systems, processes and software in your Confluence Cloud knowledge base, and reference them in your project tasks in Jira.

The draw.io app is now free in small Confluence Cloud instances (up to 10 users). If you are taking advantage of Atlassian's offer of a free Confluence Cloud instance for your small team, you can now add the draw.io board macro and embed diagrams in Confluence pages without needing to purchase a license.

We've improved the draw.io app's performance within Atlassian host products, updated the authentication to use the new API, and refreshed the Kennedy editor theme. The Gliffy and Lucidchart conversion features received a number of updates and bugfixes throughout the year.

The new draw.io board macro in Atlassian Confluence uses the updated Sketch editor theme by default, providing teams with an easy-to-use digital whiteboard.

draw.io for Google Workspace, Drive and Classroom

Google Classroom continued to be used extensively by schools and training providers. The draw.io app for Google Drive lets you integrate diagrams into Google Classroom assessment tasks and discussions. Diagrams set in assessment tasks can be collaboratively edited, or act like a template with each student getting their own copy.

Tip: Install the Google Workspace apps for Docs, Sheets and Slides to embed diagrams in your Workspace documents.

draw.io for VSCode and GitHub

In combination with the third-party draw.io app for VSCode, and the github.dev web-based code editor, you can now edit diagrams stored in GitHub, without needing to change to another tab. You can even compare changes side-by-side on commit.

draw.io diagrams in Notion

You can use the draw.io for Notion extension for the Chrome, Opera and Edge web browsers to store your diagram files in your Notion pages. The diagram editor loads inline in your Notion page using the simple Sketch editor theme.

draw.io for Microsoft Teams

You can now collaborate in real time on diagrams stored in Microsoft One Drive or Sharepoint, directly from your team’s channel with the draw.io app for Microsoft Teams. Install the draw.io app in your Teams channel to add diagrams to conversations or to a Teams tab.

Diagram import and file conversion

The free draw.io Importer extension for the Google Chrome browser lets you convert all of your Lucidchart diagrams to draw.io in a couple of steps. This lets you continue editing all of your diagrams now that Lucidchart has limited Lucidchart EDU, their previously free education plan, to only three editable diagrams.

New features and updates in 2021​

The Sketch editor theme, and the right-click context menu received a comprehensive overhaul. The tools and menus were simplified and reorganised to make it feel much more like a whiteboard you can sketch freely on. You can expand or collapse most of the panels, and move them to another location around the drawing canvas.

The freehand drawing tool was updated along with the whiteboard like editor theme.

You can now search for templates and click on the magnifying glass in the top right of any template to see a larger preview. The draw.io template library was also expanded with more templates and template categories.

In addition to moving diagram elements to the front or the back of an overlapping stack, you can step shapes and connectors forwards and backwards in the z-order stack using the Bring Forward and Send Backward buttons on the Arrange tab in the format panel.

You can now use a diagram page as a background behind another diagram page. It will be printed along with the diagram, and is ideal for watermarking your diagrams, providing a common layout for mockups, or adding a template for diagram metadata on development documentation.

A waypoint shape is now available in the Misc shape library (part of the General collection). You can use the small waypoint shape to join connectors together, replacing overlapping connectors with the same target or source shape neatly and cleanly.

Tags have been brought into the draw.io editor as a core feature and the experimental tags plugin has been retired. Add one or more tags to shapes and connectors to group them without needing to place them on the same layer in your diagram.

Use the Tags dialog (View > Tags) to group, select, hide or display the tagged shapes.

Several shape libraries saw new or updated stencils, including AWS, C4, GCP, BPMN 2.0, electrical and swimlane shapes.

Many more features have been updated, expanded, and some simplified. Additional interface translations have been completed, and existing translations refreshed - thank you to all of our translators!

And of course, a mountain of bugs have been squashed.

See the changelog in our drawio GitHub repository for full details of all of the releases.

Gliffy recently removed their free tier offering in their online version. This means if your trial version has expired, you will no longer be able to edit up to 5 diagrams that you have created, unless you start a paid subscription.

You can use our draw.io online editor to create an unlimited number of diagrams for free, without restrictions. Additionally, you can import your Gliffy diagrams.

How to import Gliffy diagrams​

Prior to the removal of the free tier, 1st December 2021, open each diagram in turn in the Gliffy editor. Right click on the editor canvas and select "View diagram source"

In the dialog that appears select the whole text and copy it.

Open any text editor on your computer and paste the text in. Then save the file, using a .gliffy suffix to end the filename.

Repeat that until you have a file for each Gliffy diagram.

Next, go to app.diagrams.net and drag and drop the first file into the draw.io editor. Your diagram will be imported and you can click on the orange "unsaved diagram" warning to pick your save location.

You can choose to save back to your computer or to one of the cloud storage options, Google Drive, OneDrive, Dropbox, GitHub or Gitlab.

If you're worried about trusting SaaS vendors with your data, when they can change usage terms at any time, use the draw.io desktop app. Note that the offline application cannot import Gliffy files, but once imported using our online app, you can open, edit and save your files in draw.io Desktop without limitations for free.

You can embed SVG versions of your diagrams in a WordPress blog post or page. SVG images are quick to load when compared to other formats, and can include your diagram data if you want to allow viewers to download and view a copy of the diagram in the draw.io editor online.

SVG versions of a diagram can only display one page, although the exported SVG file can contain all the diagram data for all pages in your diagram. When you click on an embedded SVG in WordPress, by default, you'll open the diagram in the draw.io lightbox viewer, and be able to see all the links, tooltips, diagram and layers in your diagram.

Embed an SVG diagram in WordPress​

1. Select File > Embed > SVG.
2. Select the options for the exported SVG file:
   • Fit: Adjusts the diagram to fill the available width of the page or container.
   • Shadow: Adds a drop shadow to the diagram.
   • Image: Creates an image that contains SVG markup.
   • Lightbox: Opens the diagram in a new tab or using the draw.io lightbox.
     • Edit: By default, draw.io will make a copy of the diagram when someone clicks on the Edit button in the lightbox. Change this setting if you want to send them to a specific URL.
     • Layers: Allow viewers to show or hide individual layers in the lightbox.
       
3. Click Embed.
4. The SVG markup will be displayed in the following dialog, already selected. Click Copy,
   
5. When editing a post or page in WordPress, switch to text (HTML) input and paste the SVG markup you copied in the previous step.
   
6. Publish your page. Now, when someone clicks on the diagram, it will open in the draw.io lightbox or editor according to the settings you selected.
   

Troubleshooting a broken diagram in WordPress​

WordPress does not support SVG images with foreign objects, like the HTML text formatting options that you can use on labels.

Shapes (vertices) can use word wrap, and both shapes and connectors can use text formatting by using HTML tags. Both of these must be disabled before you embed your SVG diagram in WordPress.

For example, with both word wrap and text formatting enabled, the diagram above is broken when embedded as an SVG in WordPress.

Disable text formatting:

1. When editing your diagram in draw.io, right click on a blank spot on the drawing canvas and choose Select All from the context menu to select everything in your diagram.
2. In the format panel on the right, select the Text tab, and disable the Formatted Text checkbox.

Disable word wrap:

1. Right click on a blank area on the drawing canvas and choose Select Vertices from the context menu to select all shapes.
2. In the format panel on the right, select the Text tab, and disable the Word Wrap checkbox.
   

draw.io and our Atlassian integrations are the leading solution for web based sketching and diagramming functionality. The article describes the draw.io integrations for Confluence that we, draw.io Ltd., build, deliver and maintain alongside the online app.diagrams.net and the offline draw.io Desktop application.

Atlassian recently deprecated their Confluence Server range. As the software market evolves, accelerating the move to Cloud is the next natural step in Atlassian's strategy.

Users able to move to Cloud have seen an overall cost saving due to reduced maintenance and downtime, as well as benefiting from Atlassian's scalability and security record. There are various mechanisms in place to smooth the road to Cloud, including free Cloud licenses while you migrate away from Server.

At smaller tiers Confluence Cloud is the clear winner, at higher tiers the cost outlay is greater (excluding the benefits). You can see a comparison between Confluence Server and Confluence Cloud at various tiers below (pricing as per the July 2021 price list, annual renewal in USD):

For under 500 users, the cost is largely the same. But that isn't the whole picture, as you're likely to have apps installed, also.

Taking the top selling Confluence app, Gliffy, let's see how the price changes as you move to Cloud and compare it to draw.io on Cloud:

In fact, up to 4k users, you will save money on your Gliffy Server renewal by using draw.io on Confluence Cloud. With 10k users, you will pay 75% more for draw.io on Cloud compared to Gliffy on Server. However, if you have 10k users switching to Cloud and keep Gliffy, you pay over ten times (x10) the Server price.

There is a rich selection of apps in the Atlassian ecosystem and it's worth evaluating alternatives when migrating from Confluence Server to Cloud. Some apps, like draw.io with its one-click Gliffy mass importer, make it easy to switch whilst saving you money. Of course, you save that amount every year after you have switched.

You can use a versioned diagram in a GitHub README file in a number of different ways, and include links to edit the diagram or use it as a template for a new diagram.

You can also use GitHub as the storage location for your diagrams, even if you don't plan to display them in the README files.

The integration with GitHub to display and edit diagrams uses the draw.io editor's embed mode, where the storage of the diagram is taken care of by a host application (GitHub), and where our online editor (app.diagrams.net) is used for diagram editing.

Embedded diagrams and diagram editing in Github support the following file formats: .png, .svg, .html and .xml (default)

Embed a diagram in GitHub wiki markdown​

1. Save your diagrams as editable .png or .svg images.
   • When editing your diagram, select File > Export as > PNG or File > Export as > SVG and make sure the checkbox for Include a copy of my diagram is selected.
2. In your GitHub markdown, include these images as normal, with or without alt text. For example: ![Alt text here](images/someimage.png)

View this example of diagrams in a GitHub wiki page

Edit a diagram in a GitHub README​

Using the file edit-diagram.html, available from our GitHub repository, you can enable developers with appropriate access to edit the diagrams embedded in Github markdown pages.

The edit-diagram.html file interfaces with GitHub and uses draw.io in embed mode allowing you to edit and save diagrams stored in a repository. The following URL parameters are required: user, pass, repo, path, ref and action=open.

Use action=open, and pass the user and pass parameters to create links that let your developers immediately edit diagrams. Your link will look similar to the following.

http://jgraph.github.io/drawio-github/edit-diagram.html?repo=drawio-github&path=diagram.png

View this GitHub README file with embedded editable diagrams

Use a diagram in GitHub as a template​

Pass the diagram as a URL parameter to the draw.io editor at app.diagrams.net to use the diagram stored in GitHub as a template. Your link will look something like the following:

https://app.diagrams.net/#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-github%2Fmaster%2Fdiagram.png

Embed a self-editing SVG image in GitHub markdown​

You can display an SVG file with embedded PNG data (to support Internet Explorer users who are unable to use foreignObject). The SVG file combines an image format that you can include in markdown with <img src="..." />, with scripting for GitHub integration.

To edit such a 'self-editing' SVG image, you need to build a link like the following:

http://jgraph.github.io/drawio-github/self-editing.svg

Use HTML as a container for self-editing diagrams​

You can build a 'self-editing' HTML file with embedded diagrams, using nanocms.js for the GitHub interface and diagram editing functionality, as well as Bootstrap and nanocms.css for CSS styling. HTML can be used in this way with diagrams in a number of formats, including inline SVGs containing links.

Go to the following example of a self-editing HTML file containing diagrams

Diagrams make coding go a lot smoother, especially when you are programming in teams. Having diagrams version tracked and right with the code they reference, and version tracked similarly in your code editor saves you time. You don't have to exit your workspace to switch to an external tool, or have to export/import every time you want to update a diagram.

Henning Dieterichs has created a third party diagramming integration for the VS Code editor that lets you do exactly that. Now you can create .drawio diagrams using the draw.io editor without leaving your code editor.

At the moment, you can create and edit .drawio, .dio, or .drawio.svg files, with .drawio.png file support under development. The diagram editor extension is bundled with the VS Code editor so you can code and diagram offline.

This is possible because draw.io is both open source, and supports being embedded in other applications.

See the full list of third-party integrations

Install the VS Code integration​

1. In the VS Code editor, click on the Extensions section in the left panel.
2. Search for draw.io.
3. Click Install on the Draw.io Integration created by Henning Dieterichs.
   

Create a new diagram in VS Code​

Create a new file as usual in the VS Code editor, and make sure the file extension is .drawio. A new blank diagram will be shown in the embedded diagram editor.

Edit a diagram within VS Code​

1. Open the folder in which you have stored your diagram, then select the diagram file.
2. The diagram will open in right-hand pane. Resize the panes to get a larger diagramming area if required.
   

Change the diagram editor to use a different theme​

The diagram editor automatically uses the dark theme in the VS Code editor to match its default dark theme. You can change this easily.

1. Select Preferences > Settings in the VS Code menu.
2. Search for theme on the Settings page.
3. Under Extensions, click on Draw.io integration, then select a new theme from the drop-down list. Learn more about the draw.io.
   
   

Export your draw.io diagrams to PNG image files and them import them into your Google Docs, Slides and Sheets - drag and drop the image file into your document.

Note: Google has applied new security limitations that limit how apps access files from Google Drive. If you have old, installed versions of these apps, you may be able to continue to embed and work with diagram files in your documents.

Learn more about the changes to the draw.io apps for Google documents

The now deprecated draw.io add-on for Google Docs (and Slides and Sheets) allowed you to embed draw.io diagrams stored in Google Drive into your documents. When the diagram files were updated on your Google Drive, you could update them inside your document to show those changes.

Currently, when you update a draw.io diagram stored on Google Drive or elsewhere, you will need to export an updated PNG image file, and then re-import that image into your Google document.

Add an image of a diagram to a Google document​

1. Open your .drawio diagram file in the draw.io editor (either our online editor or drawio Desktop)
2. In the draw.io menu, select File > Export As > PNG, then click Export to save your diagram as an image.
3. In your Google Document, Slide, or Sheet select Insert Image from the menu, or drag and drop your image into your document.

You can embed images of diagrams in the same way in Google Docs, Sheets and Slides.

Change how your diagram is displayed​

Change the text wrap around the diagram: Select the image of a diagram, then select one of the text-wrap symbols in the toolbar.

Change the whitespace around the diagram: Select the image then select a new value from the Margin dropdown.

Crop your diagram: Select the image of a diagram, click the Crop Image tool in the toolbar, then drag the black borders that appear on your selected diagram to crop it.

Reposition your diagram: Drag the image to the right or the left to reposition it within your document.

Recolour the diagram: Select the image of your diagram, then click Image options in the toolbar. Click the Re-color dropdown and apply a colour filter.

Resize the diagram: Select the image, then drag any of the square handles around the edge of the diagram to resize it.

Rotate your diagram: Select the image of your diagram, then drag the circular handle at the top of the diagram to rotate it.

Using Cloudcraft, you can securely connect to cloud environments and infrastructure components via your architecture diagrams where statistics, resource information and more is updated in real time. The 3D isometric view that Cloudcraft uses is familiar to engineers and IT staff as it often matches the tools they learned on. The automatic updates driven from your company's live systems makes Cloudcraft a fantastic tool for monitoring your AWS cloud infrastructure. The statistics are also helpful to estimate costs when you want to make changes to your system.

Get started with your AWS infrastructure using the Amazon Architecture Center's training section and the reference architectures.

AWS architecture documentation also needs to be static​

To document how your AWS infrastructure changes over time, you need snapshots - diagrams before and after you make changes. You can't use a live system to document what happened in the past. This is especially important to comply with audit and security standards, and to show progress on your IT infrastructure projects.

Export the various stages of your AWS infrastructure's development into static diagrams. You can easily share these diagrams, open and edit them in draw.io, incorporate them into official documentation and reports, and store them in your revision control system to ensure compliance and painless audits.

Cloudcraft makes it easy to export to draw.io.

How to export from Cloudcraft​

Note: Please allow pop-ups in your browser.

In your Cloudcraft account, in the top right of the drawing area, click Export > 2D export to draw.io

The draw.io version of your AWS architecture will open in a new tab in your browser. You can now save this diagram file to your version control system, cloud storage platform, or whichever location you have chosen to maintain a record of your infrastructure.

When exporting to draw.io, Cloudcraft may not use the most recent AWS shapes in your diagram, but it's easy to update your diagram to the newest AWS shapes yourself.

Editing AWS diagrams in draw.io​

First, enable the AWS libraries. Click More Shapes at the bottom of the left panel, enable one or more AWS libraries under Networking, then click Apply.

There are many AWS shapes available to visualise your AWS infrastructure. When you enable just one of the shape libraries above, you'll see a number of sub-categories of shapes appear in the left panel.

Replace shapes​

Drag a replacement shape from a shape library and hover over a shape in the diagram until you see the black replace shape arrow appear. Then release. The shape you just dropped will replace the old shape on the diagram. You may need to tweak the size and style afterwards. Once you have replaced all the shapes, change the sizes and styles to multiple shapes at once to save time.

Copy styles​

Select a shape that has the style you want to copy. In the Style tab of the format panel on the right, click Copy Style. Select one or more shapes that you want to update, and click Paste Style.

Copy sizes​

Select a shape that has the size you want to copy. In the Arrange tab of the format panel, click Copy Size. Select one or more shapes, then click Paste Size.

In this example, all of the older AWS shapes and 3D shapes have been updated to use a more recent AWS shape library.

Open this AWS diagram in the free draw.io diagram viewer