Turn any draw.io shape into a 2.5D isometric shape with a single right-click.
A draw.io / diagrams.net plugin that adds true isometric shearing — modeled pixel-for-pixel on icograms.com/designer.
A real self-hosted draw.io with EsDraw already loaded — no install, no sign-up.
EsDraw brings isometric / 2.5D diagramming to the tool millions already use. No new app to learn, no export dance — right-click a box, choose a direction, and it snaps onto an isometric plane. Walls, floors, boxes, containers, connectors and their labels all shear together as one coherent scene.
- 🧑💻 For users — install it and start drawing isometric diagrams in minutes.
- 💛 For sponsors — help keep this free, open, and moving toward v1.
- 🛠️ For contributors — a small, clean, 100%-tested codebase that's easy to jump into.
| Feature | |
|---|---|
| ◧ | Four isometric shears + reset — right-click → Shear Left / Right / Clockwise / Counterclockwise / No Shear. |
| 🎯 | Faithful to icograms — the exact 2:1 isometric angle (26.565°) and transforms used by icograms Designer. |
| 🔤 | Labels shear with the shape — text stays in place and tilts onto the plane. |
| 📦 | Containers & lists — shear a container and everything inside shears as one unit. |
| ↝ | Smart connectors — arrow ends stay attached to the sheared connection points. |
| ✚ | Isometric guide lines — a selected sheared cell shows icograms-style crosshair/align lines. |
| ⤡ | Isometric resize — resize handles and the selection box follow the shear; dragging resizes along the sheared axes and stays anchored. |
| ↩️ | Non-destructive — it's one style flag on the cell; "No Shear" restores the original instantly, and normal undo works. |
EsDraw is a standard draw.io plugin. It works with draw.io Desktop or a self-hosted draw.io (the hosted app at app.diagrams.net restricts third‑party plugins).
git clone https://github.com/softalink/esdraw.git
cd esdraw
npm install
npm run build # produces dist/esdraw-isometric.jsThen load dist/esdraw-isometric.js into draw.io:
- draw.io Desktop / self-hosted: Extras → Plugins… → Add and point it at the file (or host it and register it as a plugin).
- Accept the "load third‑party plugin" confirmation.
- Select a shape, right-click, and pick a Shear command. Pick No Shear to reset.
Prefer to try before installing? Try the live demo — a full self‑hosted draw.io with EsDraw already loaded, opening a sample isometric diagram (rectangle, circle, list, table, and a container, inter‑connected with arrows). Right‑click any shape to shear it, or drag a new one from the palette. No install, no sign‑up.
| Command | Looks like | Transform (about the cell center, 26.565°) |
|---|---|---|
| Shear Left | left wall ▱ | skewY(+26.565°) |
| Shear Right | right wall ▰ | skewY(−26.565°) |
| Shear Clockwise | top face ◆ | scale(1.4142, 0.7071) rotate(+45°) |
| Shear Counterclockwise | top face ◆ | scale(1.4142, 0.7071) rotate(−45°) |
| No Shear | flat | clears the state |
The states are absolute and mutually exclusive (Left then Right = Right), just like icograms. Sheared cells still move in normal x/y — icograms' "isometric" movement comes from an optional snap‑grid, and draw.io already provides one.
Isometric illustrations make architecture, infrastructure, network, and process diagrams instantly readable — but today you either pay for a dedicated isometric tool or hand-fake the perspective. Meanwhile draw.io is everywhere: free, open source, offline-capable, embedded in Confluence, GitLab, VS Code and more.
EsDraw closes that gap: isometric power inside the tool you already have, matching a proven design language (icograms) so the results look right, not hand-wavy. It's small, dependency-light, MIT-licensed, and built to be embedded or extended.
EsDraw is free and MIT-licensed, and we intend to keep it that way. Sponsorship pays for the unglamorous work that makes a plugin trustworthy: cross-version testing against draw.io releases, accessibility, documentation, and shipping the roadmap toward a stable v1.
- ⭐ Star the repo — the cheapest, most effective way to help it find users.
- 💵 Sponsor on GitHub — one-off or monthly; every tier helps.
- 🏢 Commercial / priority support — need an integration, a custom isometric feature, or a supported build for your product? Open an issue or email info@softalink.com.
What your sponsorship funds
- Keeping the plugin working across new draw.io / mxGraph releases.
- A published, versioned build and an easy one-click install path.
- Docs, examples, and templates for common isometric diagram types.
- Accessibility and polish (keyboard flows, high-contrast, reduced-motion).
Sponsors (and notable contributors) are credited here as the project grows.
New contributors are genuinely welcome — the codebase is intentionally small, the core is 100% unit-tested with zero framework dependencies, and every behavior has been verified against both a real self-hosted draw.io and the live icograms app.
draw.io is built on the mxGraph library. EsDraw keeps all the tricky geometry in pure, framework-free functions and wires them into mxGraph through thin, replaceable adapters:
| Layer | Files | What it does |
|---|---|---|
| Core (pure, 100% covered) | src/iso/geometry.js, shear.js, rendering.js, edge-shear.js, crosshair.js, actions.js, menu-items.js |
Style parsing, the shear matrices, point/delta transforms, edge-endpoint math, resize math. No mxGraph imports. |
| mxGraph glue | src/iso/install-rendering.js, install-crosshair.js |
Monkeypatch mxShape/mxText/mxCellRenderer/mxVertexHandler to render shears, labels, fold controls, connectors, the crosshair, and the sheared selection box + resize. |
| draw.io adapter | src/isometric-plugin.js → dist/esdraw-isometric.js |
Registers the right-click actions and installs the glue in a real draw.io. |
| mxGraph playground (internal) | src/demo.js + dev/index.html |
Runs the same core on a bare mxGraph page — an internal R&D / E2E harness for contributors, not a public demo. The public live demo runs the plugin inside a real self-hosted draw.io. |
Design principle: if it's math, it's a pure tested function; if it touches the DOM, it's a thin patch. That's why the core hits 100% coverage and the browser behavior is checked end-to-end.
Every non-trivial decision is written up in docs/design — including the reverse-engineered icograms findings (angles, transforms, align lines) that this plugin matches.
npm install
npm test # unit tests (node --test) — the core logic
npm run test:coverage # unit tests with coverage (core is 100%)
npm run build # build dist/ plugin + dev/vendor/ demo bundle
npm run dev # internal mxGraph playground at http://localhost:8130 (R&D/E2E only)
npm run e2e # Playwright end-to-end tests in a real mxGraph editorRequirements: Node 20+ (uses the built-in node --test runner and coverage). No global tooling needed.
- CI (
.github/workflows/ci.yml) runs unit tests + coverage + build on Node 20 & 22, plus the Playwright E2E suite, on every push and pull request tomain. The built plugin is uploaded as a workflow artifact. - Release (
.github/workflows/release.yml) — push a version tag (git tag v0.1.0 && git push origin v0.1.0) to build the plugin and publish a GitHub Release withdist/esdraw-isometric.jsand a zipped bundle attached (auto-generated notes). - Pages (
.github/workflows/pages.yml) — assembles a self‑hosted draw.io (pinned tov30.2.7) with the EsDraw plugin registered and the sample isometric diagram (demo/) open, behind a small branded landing page, and deploys it to GitHub Pages on every push tomain(the live demo). Enable once via Settings → Pages → Source: GitHub Actions.
- Test-first for logic. New geometry/behavior goes in
src/iso/*as a pure function with atest/*.test.jsbeside it. Keep the core at 100%. - Keep DOM patches thin. Glue code should mostly delegate to the pure core.
- Small, focused PRs with a clear description; add a note to
docs/designfor anything architectural. - Verify in a real editor.
npm run dev(mxGraph) and, for plugin changes, a self-hosted draw.io. - Be kind. This is a friendly, low-stakes project.
Good first issues: new isometric diagram templates, a published/hosted build, keyboard shortcuts for the shear commands, and docs/examples. Open an issue at https://github.com/softalink/esdraw/issues — or email info@softalink.com — to say hi or propose something.
- Four icograms shear states + reset, faithful
26.565°transforms - Labels, container/list children, fold controls, connectors
- Isometric crosshair guide lines
- Sheared selection box + resize along the sheared axes
- CI + tag-driven release automation (GitHub Actions)
- One-click / hosted install (registered plugin build)
- Isometric diagram templates & examples
- Keyboard shortcuts and a small toolbar
- Optional isometric snap-grid
- First tagged release + a compatibility matrix across draw.io versions
Have an idea? Open an issue.
- Maintained by Softalink LLC — info@softalink.com.
- Brand assets: theme-adaptive SVG source
docs/logo.svg(mark;logo-dark.svgis the dark-baked variant for the README<picture>),docs/logo-mark.svg(favicon),docs/logo-wordmark.svg(lockup); PNG rasters (128/256/512 + favicon 16/32/48 + 180 apple-touch + 192/512 any & maskable) indocs/logo/;docs/favicon.ico; and a PWAdocs/site.webmanifest. The mark is an isometric cube — EsDraw's three shear faces — framed by its crosshair align lines; its outline lightens in dark mode so it stays crisp on both themes. - Built on mxGraph, the library behind draw.io.
- Isometric model and align-line design faithfully reproduced from icograms Designer.
MIT © 2026 Softalink LLC. Free for personal and commercial use.