drawio | side editor for general diagramming | Data Visualization library

 by   jgraph JavaScript Version: v21.4.0 License: Apache-2.0

kandi X-RAY | drawio Summary

kandi X-RAY | drawio Summary

drawio is a JavaScript library typically used in Analytics, Data Visualization, Docker applications. drawio has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub, Maven.

draw.io, this project, is a configurable diagramming/whiteboarding visualization application. draw.io is owned and developed by JGraph Ltd, a UK based software company. As well as running this project, we run a production-grade deployment of the diagramming interface at

            kandi-support Support

              drawio has a medium active ecosystem.
              It has 34719 star(s) with 6796 fork(s). There are 589 watchers for this library.
              There were 10 major release(s) in the last 12 months.
              There are 337 open issues and 2711 have been closed. On average issues are closed in 122 days. There are 3 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of drawio is v21.4.0

            kandi-Quality Quality

              drawio has 0 bugs and 0 code smells.

            kandi-Security Security

              drawio has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              drawio code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              drawio is licensed under the Apache-2.0 License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              drawio releases are available to install and integrate.
              Deployable package is available in Maven.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of drawio
            Get all kandi verified functions for this library.

            drawio Key Features

            No Key Features are available at this moment for drawio.

            drawio Examples and Code Snippets

            No Code Snippets are available at this moment for drawio.

            Community Discussions


            How to add this type of node description by mermaid?
            Asked 2022-Feb-11 at 12:29

            This is a flowchart pattern that I really like to use and I currently use drawio to draw it:

            Notice that there are two kinds of descriptions in the flow chart

            • description1:How does A get to B
            • description2:Some properties of B

            I know mermaid can implement the description1 by:



            Answered 2022-Feb-11 at 12:29

            While some types of Mermaid diagrams explicitly support notes (e.g. sequence diagrams), flowcharts do not.

            I believe the closest you're going to get is to connect B to itself:

            Source https://stackoverflow.com/questions/71075854


            Opening a draw.io file using python
            Asked 2021-Nov-30 at 21:56

            I am trying to read the data from a draw.io drawing using python.

            Apparently the format is an xml with some portions in "mxfile" encoding.

            (That is, a section of the xml is deflated, then base64 encoded.)

            Here's the official TFM: https://drawio-app.com/extracting-the-xml-from-mxfiles/

            And their online decoder tool: https://jgraph.github.io/drawio-tools/tools/convert.html

            So i try to decode the mxfile portion using the standard python tools:



            Answered 2021-Nov-30 at 21:56


            How to convert draw.io compressed data from exported png file to xml
            Asked 2021-Nov-15 at 14:11

            I exported a draw.io diagram as png from local draw.io application. The xml is somehow hidden inside this png file probably in the "tExt" chunk. I am trying to "borrow" the draw.io JS implementation of parsePng and convert that to python. The XML is supposed to be hidden in zTxt, however I only see tExt (https://www.diagrams.net/blog/xml-in-png).



            Answered 2021-Nov-15 at 14:11

            The output you're getting now is URI Encoded. Decoding it yields this result:

            Source https://stackoverflow.com/questions/69974526


            Javascript inside a xwiki macro have no effect
            Asked 2021-Nov-09 at 01:19

            I am trying to write a macro, which embed draw.io. when user double click the diagram image I want to open draw.io in aonther window and get image data back as text. but my javascript inside macro not working at all.

            It seems my javascript code in macro is not executed at all, can somebody tell me the right way to inject javascrpt code inside a velocity macro?

            updates: I have noticed that when editing in CKEditor, my javascript code will not be executed, bu when editing in inline editor it will be executed.



            Answered 2021-Nov-08 at 14:39

            In XWiki the insertion of web resources like css and js content is generally done separately through what is called "skin extensions", best is probably to look at the documentation on https://extensions.xwiki.org/xwiki/bin/view/Extension/Skin%20Extension%20Plugin.

            In short, it involves adding an object of type XWiki.JavaScriptExtention in the page holding your macro and reference to it in your macro's code.

            Note that an extension which integrate draw.io already exist on https://extensions.xwiki.org/xwiki/bin/view/Extension/Diagram%20Application, and I guess looking at the source of this extension might be interesting.

            Source https://stackoverflow.com/questions/69880642


            Compact Entity Relation on Drawio
            Asked 2021-Oct-15 at 08:52

            I am creating an Entity Relation Diagram for my database.

            I would like to know if it's possible to make a dense table, I would like to compact all my rectangle in the table.

            On the following picture, you have an example of a table of my diagram. I would like to reduce the margin between all lines to create a dense table.



            Answered 2021-Oct-15 at 08:31

            I found the solution, it was really simple:

            1. Click on a rectangle.
            2. Click on right, on the tab "Arrange" and change the Height Size.

            Source https://stackoverflow.com/questions/69573509


            Implement autosave from browser to device with only one dialog prompt
            Asked 2021-Oct-10 at 05:41

            In a site I'm implementing, users save files on their local device. I want to implement autosave, but questions like this one convinced me it wasn't possible without a "File Save" dialog for every write to the file system (unless the user modifies their default browser settings).

            However, I see that app.diagrams.net does it! Once I specify a file path via an initial dialog my edits are autosaved without additional dialogs. That project is open-source, but my efforts to find the relevant code have so far not succeeded.

            Anybody know how it's done?

            Here are the steps to demonstrate that it's possible:

            1. Browse to app.diagrams.net
            2. In the "Save diagrams to" dialog, choose "Device"
            3. "Create New Diagram"
            4. "Create"
            5. In the "Save as" dialog, enter a filename
            6. Make some edits
            7. Reload the page
            8. "Open Existing Diagram"
            9. In the "Open" dialog, choose your file - it opens with your autosaved edits.


            Answered 2021-Oct-10 at 05:41

            A quick glance at the source and the apps.diagram.net is using the File System Access API to write to the file system. If you keep the file handle around it will let you continue to create a writeable against it. It requires that things are running from a secure context (https) to work.

            Here's a simplified example:

            Source https://stackoverflow.com/questions/69510563


            Does draw.io expose any JS API for manipulating its drawing elements programatically?
            Asked 2021-Jun-07 at 08:35

            I mean I want to use draw.io in my own product which requires drawing. But I need to able to programatically control the elements also. as a simple example based on certain conditions I want to highlight a certain element programatically, like a node in red color.

            I went through their wiki in https://github.com/jgraph/drawio/wiki , but I can't find any mention of an API



            Answered 2021-Jun-07 at 08:35

            Answering my own question, yes, from the github issues , the API reference is this : http://jgraph.github.io/mxgraph/docs/js-api/files/index-txt.html

            However note this for the deprecated mxGraph lib, and not the one draw.io is using. so things might have changed in that

            Source https://stackoverflow.com/questions/67184047


            How to fix brew doctor output with double question marks
            Asked 2021-Mar-12 at 01:53

            Running brew doctor the output is too long for the shell. Below is what I can still reach. Any idea what the warning (or error) for these might be and how to fix it?

            Some system info:



            Answered 2021-Mar-12 at 01:53

            Try doing brew update-reset. Do make a note of the following, however:

            Source https://stackoverflow.com/questions/66591643


            How do I let user save a file and keep editing that file in browser Javascript only?
            Asked 2020-Nov-09 at 04:07

            I believe it would not be possible due to security reason as stated in many other articles on StackOverflow. However, when I use the Diagram app at https://app.diagrams.net/ I realized they could ask me to save a file, and somehow keep that file reference and whenever I click Save on the app, my local file on hard drive changes (no new download).

            I know it's only possible to upload/download a file and believe you cannot edit it (using Blob with FileReader etc). How do they achieve that? The app is open source but unfortunately plowing through the source code of their File Handler I still cannot find out what API they are using. I don't remember installing any plugin or app in my browser.

            I also notice there is this permission in my browser so I guess it's some standard API, but even using that as keyword, all leads back to StackOverflow articles saying it's not possible.

            Is it a new API I am not aware of? What am I looking for?



            Answered 2020-Nov-09 at 04:00

            You can use localStorage to achieve this without needing any other permission from the user.

            localStorage.setItem("data", JSON.stringify(data));

            If your data is just JSON then this would work, however if you have custom data types, you can take a look here.


            Since you wanted to save the file directly to the device and edit it, you can take a look at File System Access API. This article here explains it.

            You can load the file first by using,

            Source https://stackoverflow.com/questions/64745551


            Async / Await not working with Google drive API
            Asked 2020-Jun-14 at 21:29

            I'm new to JavaScript and Async/Await concept.

            I was working with the drive API example and was able to print out the files in my drive. But when I try to store the response into a variable called files the console is printing undefined.

            I think the console.log(files) is printing before the response is generated?

            Any idea how I can make the listFiles() function wait till the files variable is filled with the response so that I can send that data to my front end?



            Answered 2020-Jun-14 at 19:31

            Sorry, I didn’t really understand what exactly you wanted to do, use async/await or just understand how to transfer files in any way to the render method. I redid your code a bit on async/await, I could not check it, since you did not provide a server. I hope it brings some clarity to your understanding of how to work with async/await:

            Source https://stackoverflow.com/questions/62376265

            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install drawio

            You can download it from GitHub, Maven.


            diagrams.net supports Chrome 70+, Firefox 70+, Safari 11+, Opera 50+, Native Android browser 7x+, the default browser in the current and previous major iOS versions (e.g. 11.2.x and 10.3.x) and Edge 79+.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone jgraph/drawio

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link