drawio | side editor for general diagramming | Data Visualization library

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:

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).

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.

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.

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.

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

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:

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?

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?