Breadcrumbs

Blog

draw.io pricing
  • None of our versions are freemium, they are either completely free, or only pay-for.
  • You own the content you produce and may use it for any purpose all cases. We don't sell your personal information or data.

 

draw.io flavourPriceNotes
draw.io online stand-alone (no integration)Free 
draw.io online with Google Drive (not Google Apps domain)Free 
draw.io online with Google Drive on Google Apps domainPay-forPricing
draw.io Google Docs IntegrationFree 
draw.io online with DropboxFreeBusiness Dropbox accounts might one day go pay-for, however, that is extremely unlikely to happen within the next 3 years.
draw.io online with OneDriveFreeBusiness OneDrive accounts might one day go pay-for, however, that is extremely unlikely to happen within the next 3 years.
draw.io Chrome ApplicationFree 
draw.io for Confluence ServerPay-forPricing on marketplace page
draw.io for JIRA ServerFreePreviously tested pay-for model but reverted to free
draw.io for Confluence CloudFreeThe Confluence Cloud API is relatively new and so there are a number (15) of pieces of functionality that need to be implemented before the product could be pay-for, but we cannot because of shortcomings in the host API. Item 1, for example, is autosaving diagrams whilst editing. If you check that JIRA issue, you'll see how long we've been waiting for that one issue to be addressed, then multiple by 15.  If we ever do make pay-for, the price will be 20% of the host Confluence Cloud pricing.
draw.io for JIRA CloudFree 

 

Questions to our Google Group, or [email protected]

We're the only online diagramming tool with the latest AWS icon sets. If you're happy paying extra for out of date icon sets, that's cool, you obviously have a good reason for that...

 

 

Embedding draw.io as an application within another app (where you're storing the diagram data in the host app) takes around 15 minutes to get a basic example running.

Taking an example Stack Overflow page as a template, we've created our own, slightly altered version of the question. Double click on the diagram to open draw.io in a new window, make some diagram edits then click save to save the changed diagram back to the page.

You can repeat the process to make future edits to the diagram. Let's take a look at both the flow of this process and the code in the page that allows this to happen. If you view the page source you'll see on line 1695:

<img class="drawio" style="cursor:default;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhE....

The image itself is placed in the page as a base64 encoded dataURI. We're doing this because there's no actual back-end in this example (refresh and you will lose your changes), we've nowhere to write an image to persist it.

The diagram data itself is embedded within the compressed text section of the PNG. When you double click on the image we open a new window and load draw.io in embedded mode in that window:

<script>
  // Edits an image with drawio class on double click
  document.addEventListener('dblclick', function(evt)
  {
    var url = 'https://www.draw.io/?embed=1&ui=atlas&spin=1&modified=unsavedChanges&proto=json';
    var source = evt.srcElement || evt.target;

    if (source.nodeName == 'IMG' && source.className == 'drawio')
    {
      if (source.drawIoWindow == null || source.drawIoWindow.closed)
      {
        // Implements protocol for loading and exporting with embedded XML
        var receive = function(evt)
        {
          if (evt.data.length > 0 && evt.source == source.drawIoWindow)
          {
            var msg = JSON.parse(evt.data);

            // Received if the editor is ready
            if (msg.event == 'init')
            {
              // Sends the data URI with embedded XML to editor
              source.drawIoWindow.postMessage(JSON.stringify
                {action: 'load', xmlpng: source.getAttribute('src')}), '*');
            }
            // Received if the user clicks save
            else if (msg.event == 'save')
            {
              // Sends a request to export the diagram as XML with embedded PNG
              source.drawIoWindow.postMessage(JSON.stringify(
                {action: 'export', format: 'xmlpng', spinKey: 'saving'}), '*');
            }
            // Received if the export request was processed
            else if (msg.event == 'export')
            {
              // Updates the data URI of the image
              source.setAttribute('src', msg.data);
            }
                        
            // Received if the user clicks exit or after export
            if (msg.event == 'exit' || msg.event == 'export')
            {
              // Closes the editor
              window.removeEventListener('message', receive);
              source.drawIoWindow.close();
              source.drawIoWindow = null;
            }
          }
        };

        // Opens the editor
        window.addEventListener('message', receive);
        source.drawIoWindow = window.open(url);
      }
      else
      {
        // Shows existing editor window
        source.drawIoWindow.focus();
      }
    }
  });
</script>

The "embed=1" URL parameter tells draw.io to operate in embedded mode and "protocol=json" means we're using the JSON protocol for message passing (always use this mode for now). The windows then use postMessage to communicate the diagram data over. Note that you could open in an iFrame instead of a new window, this might make the flow clearer for the user. In this case you would create an iFrame at the start of the function:

var iframe = document.createElement('iframe');
iframe.setAttribute('frameborder', '0');

var close = function()
{
	window.removeEventListener('message', receive);
	document.body.removeChild(iframe);
};

And append the iFrame to the window at the end of the function, after starting to listen for messages:

window.addEventListener('message', receive);
iframe.setAttribute('src', editor);
document.body.appendChild(iframe);

You might also want to make the iFrame completely cover the initial page via CSS:

	iframe {
			border:0;
			position:fixed;
			top:0;
			left:0;
			right:0;
			bottom:0;
			width:100%;
			height:100%
		}

When the draw.io application is loaded in the new window/iFrame it's just the static application, there's no data. We use the message passing protocol to load in the data to draw.io, after receiving the "init" message from draw.io to tell us that it is ready.

The user then edits the diagram in the editor and clicks save when finished. The reason for additional messages after "save" is we provide granularity for requesting another format, in this case by asking for the PNG+XML format via an "export". In our case we also exit the editor when the export is complete, but you could leave it open and wait for the user to explicitly "exit" the editor before closing it.

The XML embedded PNG as a base64 dataURI is saved back on top of the src attribute of the image and this results in the page being updated with the new image.

Lastly, it's important to distinguish between the static draw.io application and the data flow in embedded mode. draw.io is loaded as a static application in the draw.io window, but the diagram data is passed entirely client-side between windows, it's never sent back to, or sourced from, the draw.io application server. This means you control and store your data, just using draw.io to provide diagramming functionality on that data.

 

Webdav is the most common protocol for simple loading/saving files onto a filesystem via a web page. All major web servers support it, as well as most CMS and wiki systems.

Webdav works by allowing an authorized user to get/put a file object that's on a WebDav enabled directory. This directory needs to be accessible by the web server to be loaded from a URL or web page link.

If you take a copy of this HTML file and put it on a WebDav server, you'll get a self-contained editor and diagram in one file.

This is a screenshot, it's not actually clickable...

Navigate to the file (either by URL or list the directory the file resides in) and click the "click here" button. What then happens is the page opens draw.io in embedded mode, passing the diagram data from the HTML file via postMessage. It's important to note that although draw.io is served from the online site, the diagram data goes from your server, to your browser and then back again on save, it doesn't go externally.

After editing the diagram and clicking save, the diagram is posted back to the HTML wrapper file and the file overwrites itself with the new diagram data via a WebDav put.

You could copy the editDiagram and save JS functions into your own HTML if you wanted to add self-contained diagram adding to an existing page.

draw.io Translation Updates

We've been updating some draw.io translations:

Added are:

 - Català : https://www.draw.io?demo=1&lang=ca

 - Tiếng Việt : https://www.draw.io?demo=1&lang=vi

Updated are:

 - العربية : https://www.draw.io?demo=1&lang=ar

 - Ελληνικά : https://www.draw.io?demo=1&lang=el

 - Español : https://www.draw.io?demo=1&lang=es

 - Français : https://www.draw.io?demo=1&lang=fr

 - Italiano : https://www.draw.io?demo=1&lang=it

 - Polski : https://www.draw.io?demo=1&lang=pl

 - Português (Portugal) : https://www.draw.io?demo=1&lang=pt

 - Português (Brasil) : https://www.draw.io?demo=1&lang=pt-br

 - Română : https://www.draw.io?demo=1&lang=ro

Many thanks to those who have volunteered their efforts. Many of the translations are sourced from professional translators who are paid, so we have decided that all volunteers will also now be offered payment for their time.

If you see anything clearly wrong with the new translations, please let us know at [email protected]. It's important to let us know if someone has been automatically translating so that we don't use them again.

draw.io Backup Site

We've had some unconfirmed reports of difficulty accessing the draw.io site from the Crimea. We have no blocks on any IP range, but we are hosting using Google App Engine. We have seen Google IP address ranges being blocked from certain locations (outbound blocking, not Google inbound) so that the draw.io site is not accessible.

If you ever have problems accessing the main site, there is a backup site at https://jgraph.github.io/draw.io/war/index.html. This is the gh-pages published branch of the repository in Github. It is kept up to date, but note that it isn't tested the same way the main site is. You can still report bugs on it, as for the main site.

It's also not intended to be used with Google Drive or Dropbox. If you have Drive or Dropbox sync'ed to your local filesystem, we suggest you work with the files locally (you can drag and drop them into the draw client).

draw.io 2015 update

 

Quick update on what's happening at a high level with draw.io this year, prompted by:

We get a ton of reviews that we can't respond to on the Chrome Web Store entry, this topic deserves a post, since many of you will be asking the same question.

We have absolutely no plans to charge for draw.io online. We said this when we launched 4 years ago and that continues for as far as we can see ahead.

We have switched to pay-for with one product, draw.io for Confluence. We honoured our promise to grandfather in every single existing user of that product at the date of changeover, no user with an installation prior to that date has been required to pay anything to continue using it.

Obviously, everyone always say this then charges the next second, so, this year we're launching another version of draw.io. This one will be a completely stand-alone, fully client-side version that you'll be able to fork from Github. It will have every feature the online site currently has, except for those that we don't have client-side. Specifically, that's PDF export (a workaround would be to print to PDF) and .vsdx and Gliffy importing that will be missing. Dropbox and Drive integration also won't initially be available since both of those are linked to a specific domain, i.e. draw.io, and you're not able to host there.

The upshot is, if we ever charged or disappeared, you'd not be forced to pay or lose data and functionality.

We previously requested 5 permissions from you to integrate with Google Drive, two of which relate to being able to view all the images stored in your Drive. These image permissions have caused some privacy complaints (the other 3 cannot be avoided, anyway), so we've removed them. The permissions dialog now looks like this:

In order:

  1. View your basic profile info. This is provides your name, Google ID, gender, timezone, language, country, profile image and profile URL. We display your name and profile image on the client. We do not pass any of this information up to our servers, ever.

  2. View and manage Google Drive files that you have opened or created with this app. This means if you created the file with draw.io, draw.io has the permission to open it again. It also means if you open a draw.io diagram with the picker in the application, or open someone else's diagram in drive.google.com, the diagram opens and draw.io has access permissions to the file from now on. The scope of this permission is important because it means (unlike most other Drive linked applications) that we do not have access, read or write, to all the rest of your Drive files.

  3. Add itself to Google Drive. The permission is implicit to the whole permissions operation, it means add the application as one that is able to interact with your Drive using the above permissions, it's not a new permission in it's own right.

 

The removed images permission enabled us to display an images dialog that you could pick your images from Google Drive directly to drop into a diagram. Obviously, most of us have images that are personal to some extent and don't want a third-party application to be able to access, so this new setting makes sense privacy-wise.

We haven't removed the functionality completely, only removed the permissions scopes by default. If you want the functionality back for a session load this URL - drive.draw.io?photos=1.  If you install draw.io after the permissions change (9th January 2015), and set the photos parameter, you'll be prompted again to add the new images permissions on the app before you can use it:

You can now save your diagram as a Gliffy JSON format, both online and in Confluence:

Then import to draw.io via File->Import From:

You can also right click on the Gliffy diagram and select "View Source":

When the JSON of the diagram appears, press the "select" button on the dialog then copy to your clipboard using ctrl/cmd-C. In a new draw.io diagram press ctrl/cmd-V to insert the Gliffy diagram.

Our first alpha of Lucidchart import is also out today (only supporting Chrome, Safari and Firefox, initially). Select your Lucidchart diagram and copy to the clipboard with ctrl/cmd-C:

then paste into draw.io with ctrl/cmd-V:

The Lucidchart import is something around alpha quality, the Gliffy importer is more production quality, report any issues to the support channel appropriate to your product.

 

You've been redirected here because you're using the older Google Drive application that opens to www.draw.io. The newer application, you can install from the Chrome Web Store here. The older application has a configuration corruption that Google are unable to fix, so we had to create the newer one.

Over time we want to phase out the older application, we recommend doing this in a controlled manner at a good time for you. Note this only applies to personal Google accounts, Google for Work users can install draw.io Pro domain wide from admin.google.com.

The steps are:

  • Next click on managing apps

  • You should see an entry for draw.io Pro (the app you just installed) and draw.io Image Import (the old app).



  • Untick "use by default" for draw.io Image Import and then Done and that's it.

 

Thank you for your understanding undertaking this maintenance. It is a one-time operation only. If you have any questions or issues, email [email protected] and we'll resolve them for you.

Bootstrap mockup stencils

draw.io is a completely free web diagramming application that can be used stand-alone, or integrated with Google Drive or Dropbox. We've added a set of Bootstrap style mockup stencils to draw.io.

Any issues with using them, let us know via Help->Feedback.

Our users find a variety of uses for draw.io. Many don't connect up the diagram at all and use the space more as a whiteboard.

If you click "More Shapes" at the bottom right and select Mockups, then open up the Misc and Text sub-sections of mockups you'll find some colored pins and a post-it note sticky shape.

 

When voting for features, todos, etc, one technique is to get everyone to write ideas down on sticky notes, put them on a whiteboard. After that you place a limited number of votes to indicate your favorite ideas. Doing this physically on a white board has it's advantages, but if you're remote this can't be done. Doing it electronically means you can produce a PNG or PDF easily to embed elsewhere (you could even automatically parse the XML into an issue tracker), plus it possible to edit the board at a later date.

Using the real-time collaboration version of draw.io (Google Drive only), each user can work in real-time with the others on the board. At the end of the process, each user can pick a pin color and use those pin to apply votes.

Flow Chart Maker

Flowcharts are one of the simplest diagrams and probably the most popular. They help people visualize a process, the decisions in that process and how the state of the process flows depending on decisions. You can draw flowcharts on draw.io, no registration or sign-up is required. draw.io integrates with your Google Drive or Dropbox storage.

 

CLICK HERE TO TRY DRAW.IO IN FLOWCHART MODE

 

There are two basic components to a flowchart:

  • Activities, also known as processing steps, denoted by a rectangle
  • Decisions, which branch the process flow, denoted by a rhombus (diamond).


 

Connectors in flowcharts are often known as "data flow". 

Additional flowchart symbols

  • A rectangle rounded on the right-hand side indicates a delay or wait in the process
  • A ellipse or well-rounded rectangle is often used to indicate a flowchart terminator, either the start or end object.
  • An open circle indicates a jump in the process. This is used with complex flowcharts to move the flow some distance along/across the flowchart without having to draw a connector.
  • A square with one side tapered indicates a jump to a position in the process on another page, known as an off-page reference. The tapered point can point in any of the four main compass directions.
  • A parallelogram indicates a data element, this either an input or output element. These can be used in place of activities when I/O is part of that activity. They can also be used to terminate (start or end) a branch of the process apart from the main start and end elements.
  • A document is literally that, a document or report.
  • A sub-process means that not all of the detail is shown in that activity. You need to drill down into that element to reveal more detail as to what is happening within.

Alternative names for a flowchart

A "flowchart" is some is a "flow chart" to others, even a flow diagram. Sometimes it's a process diagram, process map, process model or process chart. It's not worth getting hung up on the name or spacings, as some do. Most people use "flow chart", that'll do fine.

draw.io is a free online diagramming application that, amongst other things, let's you draw Amazon Web Services (AWS). No registration or sign-up is required and draw.io integrates with common web storage services, like Google Drive and Dropbox. See the section on selecting your storage option for more details.

CLICK HERE TO TRY DRAW.IO IN AWS MODE

 

At the bottom left of the draw.io editor interface you will see "More shapes...", click this and in the dialog that appear select the AWS shapes. You can deselect any other shapes you don't require and press the apply button. On the left hand side the AWS libraries will appear, each one collapsed. Click on the library titles to expand them and you'll find the following icons available:

Let's put together an AWS diagram. We're going to need some large rounded rectangles to contain things logically. draw.io has the concept of z-order, the depth an object is in the direction you are looking into the screen. New objects are dropped at the front of the screen, we can right click on the object (or touch, pause, touch on touch devices) and select "to back"

 

You might want to indicate some of the logical boundaries with dashed lines to make the diagram easier to read. Select the shapes you want to dash and on the menu select Format->Dashed

 

 

We're going to wrap the whole diagram with a large AWS labelled rounded rect. The AWS cloud icon needs to move along with the rectangle, so we'll need to group them. We select both, right-click to bring up the context menu and select "Group" to combine them into one entity that moves as a single shape.

 

 

We're also going to put some vertical text against the public entry to our architecture, a couple of reverse proxies in this case. To do this we'll create rectangles, enter the text normally (select them then type), then rotate them, using the rotation handle at the top of the shape, by 90 degrees.

 

 

We'll need some orthogonal lines between the Elastic Load Balancer and our Elastic IPs. On the left-hand of the editor, in the libraries, open the Connection section. Click on the "Manual Line", that will make it the default line from now on.

 

 

Each shape generally has two places you can start and end connections. The first are via the small crosses "x" you see around a shape when you hover over it. These fix the location in/out of the shapes that the connections terminate on the shape's perimeter.

The second option is dragging from the "+" icon you see to the right of selected shapes and dragging and releasing into the center of target shapes (you'll see a blue outline to the shape when the connector is droppable). These connections, we term them connections between "floating ports", connect to the perimeter of the shape at the point where they are incident to the perimeter of that shape, regardless of the direction they are incoming/outgoing.

A connector connected at both ends with floating ports

 

In our case we're going to connect from the top right fixed port on the circle to the floating port on the rectangle. Connecting using a manual edge produces the above result, with the connector corner in the wrong place. We grab the handle on the horizontal section and move the connector up until we get the desired result.

 

 

The default fill colour of rectangles is white. We have a lot of rectangles overlapping, but we often don't want details underneath to be hidden.

 

 

You may be thinking setting the opacity of the shape to 0 (0% - 100%) in the Format menu fixes that, but this requires setting the fill colour to none (the transparency checked squares option top left of the second set of colours).

 

 

Et voilà, our load balanced, reverse proxy AWS implementation. Note, when there's lots of interlinking, some block colour to separate sections can aid readability.

 

 

Want to load this diagram up in draw.io? Save the above image to your filesystem and drag and drop it into a blank draw.io diagram in your browser.