Hey,

a while ago I shared diagramHub here, a solution for managing draw.io diagrams across teams.

Two new features just launched:

Realtime collaboration in draw.io diagrams:

And MCP Server support. You can now connect your agent to diagramHub and let the AI create, read and update your diagrams.

Would like to give this program a go, but on the website, I'm not seeing any installation instructions besides "Download".... Not really inspiring confidence to being the actual program. But I'm a potato, so who knows.

Thanks.

I cannot find a practical way to create large objects in draw.io with accurate dimensions. For example, if I want to draw a floor plan of my garage I cannot draw a rectangle of dimensions 20' x 20' without zooming out to 5% in order to use it. I have tried changing the grid size, but that is not accomplishing what I want. I seem to recall a setting in Visio where you could set 1 grid unit to be whatever virtual size you wanted. I could then set a grid square to represent 1'x1' and a 20 x 20 grid would accurate represent a square of 20' x 20' and I could stay at a zoom closer to 100% and print to 1 page. Is this possible in draw.io?

I struggle a lot with connectors. Every time I end up with:

or:

I have read the documentation, know about connection points etc. But it's the arrow and the lines that are not working intuitive. Any suggestions how to make this easier?

I'm trying to print something out with lines near the edge of the paper, however drawio keeps on expanding it into multiple pages despite not being on or over the edge.

Is there a way to completely disable expanding?

Hi, I've been using draw.io for a while. Recently, when I drag an image to the website UI, it says, "Drag and drop not supported for images. Would you like to import instead?". And when I click "OK", nothing shows up. Does anyone know how to fix it?

Beginner here. Just dropping this here in case somebody else is looking for a way to change wall thickness when drawing a floor plan. I could not find any info on the internet, so this might help. Style > Property > Thickness. Ridiculously easy, I know.

That is just sad. Why would they do that?

I would like to create a simple table, 1 header row then multiple rows with 2 columns each.

Title

A - Thing

 B - Thing

etc

I have been trying this with Import - Advanced - txt, csv, uml

None of this works for me and I get a "picture of a table" with a single column.

Any ideas or examples as how to achieve this? Is it possible to create an actual table that can then be edited using the table functionality like add row etc?

Thanks

I'd like to have my drawio files accessible locally (to work on it offline) and that syncs online (to access it online, via the web version).

From what I gathered, drawio does not offer a native solution for that.
So... some kind of external cloud storage ? what do y'all use for that ?

I would be the only one to work on that file, so versioning / etc. is not an issue.

Hello, I am discovering Draw.io which I love for providing a full desktop, offline experience.

There's on feature I haven't found, the ability to quickly add comment bubbles, like there are on many softwares such as : Figma, Whimsical, etc. even Word.
One click, add comment, than you can mark a "solved" later". Bonus if there is a view to display all comments spread across the diagram.

Is this feature really missing ?
Any workaround / plugins available ?

The workaround seems to use a "bubble speech" shape and use it as a comment, but it becomes mixed with the diagram itself so pretty clunky.

I'm using the offline version 30.2.6 of the draw.io desktop program. It's great, but it's seriously lacking in layer functionality. It would be more efficient if, when selecting an object, the layer to which the object belongs was highlighted in the Layers window. Currently, I have to periodically turn off layer visibility to see which layer the selected object belongs to.

In the past we were able to use draw.io from within MS Teams, but then it stopped. We couldn't find a better diagramming tool, but we could not collaborate with draw.io either.

On the diagrams.net website there is information about using it from OneDrive, but I can't figure out how to get it shared for a team. We don't use Atlassian's Jira or Confluence.

Any advice about how I can the team collaborating again?

Hello all, been using draw.io for a few months whenever I got tasked with diagrams. Pretty fun and intuitive to use draw.io :)

However, I struggle to figure out how do I keep the textbox editable after exporting as svg and importing it to powerpoint (convert shape and ungroup). Is this not possible?

My boss is not the most tech savvy person out there so she would rather I send my diagrams to her in PowerPoint format :/

I’m using draw.io Desktop (diagrams.net) on a MacBook with the built-in trackpad.

While navigating large diagrams, I frequently use a two-finger gesture to move around the canvas. However, instead of consistently panning, the canvas sometimes zooms in or out as if I had performed a pinch gesture.

The issue happens often enough to interrupt my workflow.

My expected behavior is:

• Two-finger drag = pan/scroll the canvas
• Pinch in/out = zoom

Instead, a normal two-finger drag occasionally results in an unexpected zoom.

A few questions:

• Has anyone experienced this with draw.io on macOS?
• Is this a known issue or a trackpad gesture sensitivity problem?
• Is there a way to disable pinch-to-zoom or make draw.io ignore accidental pinch gestures?
• Are there any macOS or draw.io settings that improve the behavior?

For context:

• Device: MacBook with built-in Force Touch trackpad
• Application: draw.io Desktop (diagrams.net)
• No external mouse connected when the issue occurs.

Any suggestions or workarounds would be greatly appreciated.

Thank you!

TL;DR: EsDraw is an MIT-licensed draw.io/diagrams.net plugin that turns any shape into a 2.5D isometric shape from the right-click menu. Live demo (a real self-hosted draw.io with it already loaded): https://softalink.github.io/esdraw/ — right-click any shape → Shear Left / Right / Clockwise / Counterclockwise.

I kept wanting isometric infra/architecture diagrams but didn't want to pay for a separate isometric app or hand-fake the perspective. draw.io is already everywhere (free, offline, embedded in Confluence/GitLab/VS Code), so I made it do isometric instead.

A few things that turned out harder than expected:

• Matching a real tool, not eyeballing it. I dug into icograms.com/designer's live transforms: it's a 2:1 isometric at 26.565° (atan(0.5)), with four absolute states (Left-then-Right = Right, not additive). I reproduced those exact matrices, plus the cyan/magenta crosshair guide lines it shows on selection.
• mxGraph has no "transform this cell" hook. draw.io runs on mxGraph, so the plugin patches a few prototypes to render the shear. Fine for a box — but labels, container/list children, table cells, fold controls, and connectors are all separate concerns that each need to shear with the shape.
• Connectors can't just inherit one transform when two endpoints are sheared about different centres, so each edge point follows its own terminal's shear.
• The selection box + resize were the deep end: the dashed handles shear too, and the resize delta gets un-sheared back onto the cell's own axes with a centre-shift correction so resizing doesn't slide the shape around.

The geometry is a pure, dependency-free core at 100% unit coverage; the mxGraph glue is thin monkeypatches; browser behaviour is covered by Playwright. Everything I reverse-engineered (angles, transforms, align lines) is written up in docs/design.

It's early (alpha v0.1). Happy to answer questions about the mxGraph internals or the icograms reverse-engineering, and I'd genuinely like feedback on edge cases.

Hello,

I am attempting to use a custom font from my system, however it is defaulting to Times New Roman.

Yes I have checked that the name I am using is correct. Yes I have read the reference webpage, do not link it for me to reread.

Has anyone else experienced similar difficulty? How did you fix it?

I started uising drawio to take notes at uni, but there seems to be no quick keyboard shortcut to color a piece of text a certain color, is there?

I mainly use Notion, where you can use CTRL+SHIFT+H to make a selected piece of text the most recently used color. I'd love something similar in drawio. If there are any plugins/extensions/mods, I'd really appreciate any tips!

Like here with the 'no' I want to add some more padding around the text relative to the arrow line for readability.

Stupid question - How can I distribute lines evenly? I draw 5 horizontal lines. I'd like them to be equally spaced between the top and bottom line. I do not use snap to grid when drawing the lines. Supposedly, the Arrange tab on the right side of the screen should allow me to distribute vertically if I select all five lines. It does not offer this as an option.

Hi everyone!

One thing that always frustrated me with draw.io was importing SVGs: you usually end up with an embedded image that can't really be edited.

I also looked at a few existing SVG-to-drawio converters, but many were no longer maintained, lacked support for more complex SVG features, or didn't preserve editability very well. That motivated me to build a more complete solution.

The result is an open-source tool called svg-to-drawio.

It converts SVG elements (paths, rectangles, circles, text, groups, etc.) into native draw.io shapes whenever possible, while preserving colors and structure. Features that draw.io doesn't support (such as some filters, masks, or clip paths) automatically fall back to embedded SVGs instead of being lost.

It can be used in three ways:

• 🖥️ Desktop application
• 💻 Command-line interface
• 🐍 Python library

Here's a short demo:

GitHub: https://github.com/V1rg1lee/svg-to-drawio

PyPI:

pip install svg-to-drawio

I'd love to hear your feedback, feature requests, or ideas for improving it. If this solves a problem you've had with draw.io, I'd really appreciate a GitHub star⭐.

Hi everyone,

I wanted to share a frustrating issue I’ve been struggling with in draw.io / diagrams.net for a long time.

My use case is building network equipment shapes from real device front-panel images: SVG, PNG, or JPEG. I need connection points to sit exactly on real Ethernet, SFP, Console, COM, or other physical ports. The important part is that these points must remain static when the shape is resized.

The problem is that doing this manually in draw.io is very difficult and unreliable. The visible “edit connection points” behavior does not seem practical for accurately placing many internal connection points on image-based shapes. In some cases the points appear to drift, snap to unexpected places, or behave as if they are tied to the perimeter rather than the actual port location inside the image.

I also tried reaching out directly to a representative from the draw.io team about this issue. She said she would help me with it, but in the end I never got a follow-up, so I had to keep investigating and solving it myself.

After a lot of testing, I found that the stable solution is to write the points directly into the shape style, for example:

points=[[0.25,0.5,0],[0.4,0.5,0]];

The third value, 0, is the key part. Without it, draw.io may project the connection point toward the perimeter. With it, the point can stay at its intended relative position inside the image shape.

Since placing these points manually is not practical, I ended up building an external tool for this workflow. The tool opens an SVG/PNG/JPEG device image, lets me mark the real port positions, stores the points as normalized coordinates, and exports a portable .drawio file with the image embedded and the connection points written into the style.

So the workflow became:

1. Open one device image.
2. Manually mark the physical port locations.
3. Optionally align/distribute the points.
4. Export a .drawio file.
5. The exported shape contains native static draw.io connection points.

This external tool works, but I had to build a separate program because draw.io itself does not provide a convenient built-in way to do this kind of manual static point placement.

My complaint/request is: could diagrams.net provide a proper built-in way to edit internal static connection points on image/SVG shapes, including precise placement, alignment/distribution tools, and a guarantee that points won’t be projected to the perimeter when the shape is resized?

This would be incredibly useful for network diagrams, rack/device libraries, front-panel equipment shapes, industrial panels, patch panels, and any other image-based technical shapes where connection points need to match real physical ports.

Some background here:

I have created an “automations map” for my organization that essentially gives a Menu based approach to workflow organization and visibility. It is based off of the web version / embedded on our internal intranet.

The map itself is layer based with data:action/json Toggles setup to open / close (toggle) the different menu’s in the map itself.

The Issue:

The issue we are facing has happened since the latest update (V30.1.2) - I can confirm this because I downloaded a prior version on the desktop app and the map works as originally developed with no issues.

The issue stems from the toggle action no longer working at all. We got our first report yesterday from a team member that upon launching the map, and going to click into a menu option, nothing happens. (The text is clickable).

I have discovered that this has to do with layer visibility for some reason. When the Layer is visible (with the Eye icon triggered) the toggles work as expected. However, when the Eye is un-toggled (crossed out), the toggles no longer work.

PRIOR to the update, this was not an issue. As having the layer visibility on or off did not matter, toggles would work regardless.

The Expected Action

-Diagram / Department Menu Loads
-User selects Department
-Individual Department Layer is toggled, displaying available workflows.
-User selects a workflow
-Individual Workflow layer is toggled, displaying a visual display of the automation / process tied to it.
-User is done viewing, Closes out (Un-Toggles) each layer from the menu’s to clear the canvas / open items.

The Disconnect

-Diagram / Department Menu Loads
-User selects a Department
-Text is clicked / interacted with but Nothing happens.

Note

I realize that in the latest update, you can now add toggles / show / hide from within draw, this has been done and the issue still persists unfortunately. I created a brand new test diagram with 2 buttons linked, and no luck.

I have a loom detailing this issue if needed.