This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

DrawIt (draw.io)

Description

DrawIt is a WordPress plugin that interfaces with the draw.io website to easily create beautiful diagrams, flow charts and drawings inline while you are editing a post. This powerful plugin saves the draw.io source code for your diagram and a PNG or SVG version of the image – providing crisp images that you can update without redrawing the diagram. There is also no hassle moving images back and forth between editors on your computer like typically is done without this plugin.

There are multiple ways to add a diagram, use whichever is most convenient for you: through the Media Library, the visual editor or the text editor.

This plugin connects directly to the draw.io website, which is a high-quality diagram and flow chart tool with a feature set on par with other well-known diagram editors (like Microsoft Visio), so the interface will already be intuitive. Best of all, it is free!

To-do List

  • Will add option for saving draw.io XML source in the PNG or SVG directly, instead of only saving the source XML to the WP database.

Notice

This plugin uses the draw.io website, but is not affiliated with draw.io.

Screenshots

  • Creating/editing a diagram in the plugin
  • Many convenient ways to insert a new diagram
  • Selecting a diagam to edit from the WordPress visual editor
  • Selecting a diagam to edit from the WordPress text editor

Installation

  1. Go to WP admin > Plugins > Add New
  2. Search for „DrawIt“ in the search field, press Enter.
  3. Click „Install Now“
  4. Click „Activate Plugin“

FAQ

Installation Instructions
  1. Go to WP admin > Plugins > Add New
  2. Search for „DrawIt“ in the search field, press Enter.
  3. Click „Install Now“
  4. Click „Activate Plugin“
How do I edit a diagram?

To edit a diagram that you’ve already created, just select it (e.g., the source code in the text post editor or the image itself in the visual post editor) and then click on the DrawIt button in the editor!

How do I report a bug or feature request?

Please report all bugs and feature requests through the DrawIt support page on WordPress or through the Google+ DrawIt community.

Where is the source code for my diagram saved?

The source code for the diagram is saved with the image in your WordPress installation. As long as you do not delete the image from your media library, then you will be able to open and edit the image from the post/page editor where it is being used.

How do I edit a diagram that is only in the media library and not inserted into a post?

For now, you’ll have to insert it into a post to be able to edit it. We’ll work on improving this later.

How can I add links in an SVG image? (A.K.A, What are „insecure“ SVG images?)

You can enable links in SVG images by enabling the „Use insecure version for SVG images“ setting. This setting refers to a tradeoff for using SVG images. If you want to be able to have advanced SVG features (e.g., having clickable links within the image), then this needs to be enabled. But a tradeoff is that this inserts raw SVG code into the web page, which introduced security holes. You should not enable this option unless you trust all possible sources or creators of SVG files that you will have on your site. Another side-effect of enabling this option is that the image code in the post editor gets replaced with a shortcode in the format of [drawit-svg ...] to help keep the editor clean from a lot of raw SVG data, but you also won’t be able to see the image in the visual editors – you’ll only be able to see the shortcode text.

Please read up more on the vulnerabilities of using SVG images on your website — here is a very brief introduction: SVG Uploads in WordPress (the Inconvenient Truth)

Reviews

3. August 2021. 1 reply
Escuse for my english... I wanted to use this plugin in my 5.8 WordPress installation, but it didn't work because of changing of Drawio.it web service to embed draw diagrams, and the error visualized reference a new url for embedding new service: "embed.diagrams.net" Were 4 years that the plugin wasn't updated, so i decided to experiment something... ... tried to substitute in the installed plugin, in all files where present, only the string: "www.draw.io" in to the string: "embed.diagrams.net" I had to change only two files: drawit.js, drawit.php!! Then I tried again to use DrawIt to draw a diagram, and everything worked well, I could edit a complex schema in a page, with arrows, colours, rotations, and then I could modify it and finally publish correctly the result. I really wish the owner of the plugin update the plugin in this way (or better), because is very usefull for many persons.
9. Mart 2021.
version 5.6.2 on localhost After understanding that it only is available in classic block it appears to do nothing when pressing the icon
27. Septembar 2018.
Easy to handle and fun to work with. This plugin does everything it says it does and it's doing it well.
18. April 2018. 1 reply
unbelievably easy to use! no learning process, very intuitive. thank you authors! 5 star no brainer. And for that 1-star voter, please give it another shot. if everybody on the highway is driving in the wrong direction, chances you are the problem.
14. Septembar 2017. 1 reply
It simply doesn't work. After installing and activation, no menu is added to my dashboard as if the plugin doesn't exist. A waste of time
9. August 2017.
This plug in requires almost 0 configuration. It works with a button from the text editor. There is no need to download or upload files. Everything is working from within the plug in from a post or a page. I did have to resize WP while editing but this is very minor for me. The ability to create flow charts on the fly within knowledge base articles posts, and pages fast is a big plus.
Read all 15 reviews

Contributors & Developers

“DrawIt (draw.io)” is open source software. The following people have contributed to this plugin.

Contributors

Translate “DrawIt (draw.io)” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.1.3

  • Fix warning when editing existing image (only applicable for developers who have WP_DEBUG set to true).

1.1.2

  • More notification about the security implications of enabling the new advanced SVG features.
  • If you use advanced SVG features, please provide feedback in support page about any requests, shortcomings or bugs.

1.1.1

  • Added ability to insert raw SVG images, allowing links in images to work (but with security tradeoffs).
  • New options in the settings menu.

1.1.0

  • Added option to enable DrawIt in frontend-based editors.
  • Other minor options and bug fixes.

1.0.15

  • SVG saving update coinciding with draw.io server now encoding in base64.

1.0.14

  • Workaround for server not responding with ‘format’ attribute (‘no image type was specified’ error).
  • Better error messages that do not use alert() popup (i.e., can copy/paste message).

1.0.12

  • Fixed problem where version 1.0.10 broke for older versions of php.

1.0.10

  • Update necessary to handle new draw.io SVG handling. Upgrade required or SVG saving will no longer work.
  • Added option for selecting temp directory.

1.0.9

  • Fixed temp directory problem for Mac OS installations.

1.0.8

  • Fixed file saving problem for Windows or WAMPServer based installations.

1.0.7

  • Fixed problem where saving SVGs sometimes would be malformed.
  • Reduced editor iframe height to get rid of needless scrollbar.

1.0.6

  • Removed references to get_plugin_data() before the function is available.

1.0.5

  • Added Version and F.A.Q. sections to the settings page.
  • Shortened DrawIt button text in text editor to take up less space.
  • Updated the enqueuing of CSS and JS to use plugin version number so updated plugin won’t use old cached CSS and JS.
  • Updated plugin name

1.0.4

  • Updated error messages to be more clear/useful

1.0.3

  • Minor aesthetics

1.0.2

  • Minor GUI changes when saving

1.0.1

  • Initial release