drawio2pptx

Convert .drawio / diagrams.net diagrams into editable PowerPoint shapes, text, and arrows, generating three proportional scale variants (100%, 85%, 70%) in a single PPTX file.

This is not a "screenshot-paste-into-PPT" tool — it builds a testable, extensible conversion pipeline:

draw.io XML
  → Input Adapter
  → Diagram Scene Graph
  → Geometry Normalizer
  → Connector Simplifier
  → Scale Layout Engine
  → Editable PPTX Renderer
  → bounded OOXML patch

Current Version

v0.2.0 — an extensible open-source converter:

• Reads raw <mxGraphModel>, uncompressed <mxfile>, and compressed <diagram>.
• Supports multi-page draw.io files; converts all pages or selects by index, name, or ID.
• Precomputes nested group translation, scale/scaleX/scaleY, flip, rotation, relative geometry, and group-local edge points through composed affine transforms.
• Reads direct mxCell nodes plus common <object> / <UserObject> wrappers.
• Converts rectangles, rounded rectangles, ellipses, diamonds, triangles, hexagons, parallelograms, cylinders, clouds, documents, and flowchart nodes into native PowerPoint objects.
• Preserves solid/linear-gradient fills, configurable outer shadows, border transparency, dash/dot/dash-dot patterns, line caps, fonts, mixed rich-text runs, hyperlinks, alignment, flip, and rotation.
• Renders swimlanes as editable body/header/separator composites.
• Embeds supported data:image/*;base64 images with aspect-ratio containment; HTTP(S) images are opt-in and bounded by timeout/size validation.
• Resolves common mxgraph.*, resIcon, and iconify:* keys to offline Material Design / vendor-logo SVGs while keeping labels editable.
• Applies cell, ancestor, layer, and static collapsed-container visibility; connectors to hidden children of a collapsed container are promoted to that container.
• Parses exitX/exitY/entryX/entryY connection ports and explicit waypoints; orthogonal lines preserve multi-segment paths and can output rounded polylines or smooth curves.
• Each edge becomes a single continuous, editable PowerPoint custom path with arrows only at true start/end points — no arrow misalignment on reversed or upward edges.
• Supports open/block/classic/diamond/oval start/end arrows, arrow fill semantics, and sm/med/lg size quantization; hollow diamond/oval (unsupported natively in PowerPoint) triggers warnings.
• Uniform scale factor applies to positions, dimensions, font sizes, borders, stroke widths, and arrow sizes.
• Generates a 16:9 PPTX by default; each source page produces three slides at 100%, 85%, and 70%.
• All three slides share the same page size, background, and center point, differing only in the unified scale.
• Unsupported shapes degrade visibly to editable rectangles with structured warnings — nothing is silently dropped.
• Includes CLI, TypeScript API, unit tests, integration tests, and CI configuration.

Three-Scale Model

Each source page generates:

1. Slide 1: Maximum fit within a shared safe margin, defined as 100%.
2. Slide 2: Same center, scaled to 85% of Slide 1.
3. Slide 3: Same center, scaled to 70% of Slide 1.

Positions, shape dimensions, font sizes, strokes, stroke widths, shadow offsets, and arrow sizes all derive from a single pageScale per slide. Multi-page draw.io files produce source pages × 3 slides.

Quick Start

# Install globally via npm
npm install -g drawio2pptx

# Run directly with npx (no install needed)
npx drawio2pptx diagram.drawio -o output.pptx

# Or use yarn
yarn global add drawio2pptx
drawio2pptx diagram.drawio -o output.pptx

Development Setup

git clone https://github.com/zazaji/draw2pptx.git
cd draw2pptx
pnpm install
pnpm build

Local usage:

node dist/src/cli.js "diagram.drawio" \
  --output examples/output/diagram.pptx

CLI

drawio2pptx <input.drawio> [options]

-o, --output <file>       Output path
--scales <list>           Custom scales, e.g. 100,85,70
--page <number|name|id>   Convert a single source page
--connector-style <type>  preserve (default), orthogonal, or rounded
--background <hex>        Shared background color for all three slides
--margin <inches>         Safe margin for 100% fit
--title <text>            PPT metadata title
--allow-remote-images     Fetch validated HTTP(S) images (off by default)

Examples:

# Default: one 16:9 PPTX with 100%, 85%, 70% slides
drawio2pptx architecture.drawio -o build/architecture.pptx

# Custom scales
drawio2pptx architecture.drawio \
  --scales 100,90,80 \
  --output build/custom-scales.pptx

# Force all connectors to rounded orthogonal paths
drawio2pptx architecture.drawio \
  --connector-style rounded \
  --output build/rounded-connectors.pptx

TypeScript API

import { convertDrawio, parseDrawio } from "drawio2pptx";

const result = await convertDrawio("architecture.drawio", {
  output: "build/architecture.pptx",
  page: 1,
});

console.log(result.files, result.slideCount, result.warnings);

Parse to intermediate model only:

import { readFile } from "node:fs/promises";
import { parseDrawio } from "drawio2pptx";

const ir = parseDrawio(await readFile("architecture.drawio"));

Strict Scale Invariants

Given source content bounds B and slide safe area A, the 100% base scale is:

baseScale = min(A.width / B.width, A.height / B.height)
pageScale = baseScale × (1.00 | 0.85 | 0.70)

Every attribute on every slide derives from its single pageScale:

x, y, width, height → inch = source × scale
font, stroke        → point = source × scale × 72
arrow size          → point = source × scale × 72 → OOXML sm/med/lg

No scaleX / scaleY — circles stay circular, and the relative visual weight of text, lines, and nodes is preserved. PowerPoint native arrows only support discrete sizes; the project quantizes continuous results to sm / med / lg, a limitation of the format.

Feature Comparison

| Capability | draw.io Native SVG/PNG Export | Full-page SVG in PPT | PptxGenJS | drawio2pptx v0.2 | |---|---:|---:|---:|---:| | Read .drawio XML | — | — | — | ✅ | | Compressed & uncompressed pages | — | — | — | ✅ | | Per-node editing in PPT | — | ❌ | Base capability | ✅ Common shapes | | Independent text editing | — | Usually not editable | Base capability | ✅ | | 100% / 85% / 70% three pages | Manual | Manual | Must implement | ✅ | | Font/stroke proportional scaling | Manual | Visual整体 scaling | Must implement | ✅ | | Connection ports & explicit waypoints | — | Preserved as image paths | Must implement | ✅ | | Continuous orthogonal/rounded/curved paths | — | Preserved as image paths | Must implement | ✅ | | Dot, dash, dash-dot patterns | — | Visual preserved | Base capability | ✅ | | Layer visibility & static collapse | — | Visual preserved | Must implement | ✅ | | Mixed rich text & hyperlinks | — | Usually outlined | Base capability | ✅ Common HTML | | Embedded/remote images | — | Visual preserved | Base capability | ✅ data URI; remote opt-in | | Common draw.io stencil icons | — | Visual preserved | SVG capability | ✅ Individual SVG + editable label | | Linear gradients & configurable shadows | — | Visual preserved | Partial base capability | ✅ | | Editable swimlane header/body | — | ❌ | Must implement | ✅ | | Start/end arrows, sizes, fills | — | Visual preserved | Partial base capability | ✅, some warnings | | Visible degradation for unsupported shapes | N/A | Full-page fidelity | Must implement | ✅ warning | | Advanced stencil precise replication | SVG can preserve | ✅ | SVG can embed | ⏳ Single-element SVG |

draw.io's official documentation lists SVG/PNG/PDF image exports for presentations — there is no native editable PPTX. PptxGenJS provides ~200 PowerPoint shapes and OOXML output; this project builds draw.io semantic parsing, layout, and scaling on top. References:

• draw.io: Save File Formats
• draw.io: Supported Export Formats
• PptxGenJS: Shapes API
• mashu3/drawio2pptx: Reference for connection ports, polyline segments, dashes, and arrow mapping

Detailed scope, acceptance criteria, and roadmap: Feature Matrix and Architecture.

Known Limitations

• Nested group transforms are precomputed across arbitrary depth. Non-uniform parent scaling plus rotated children can mathematically introduce shear; PowerPoint has no native shear, so that rare case uses the closest rotation/flip/X-Y-scale decomposition and exposes the residual as transform.shear.
• Collapsed containers are exported as a static visible state. PowerPoint does not receive interactive expand/collapse behavior.
• Connectors are continuous editable PowerPoint custom paths, but arrows do not auto-attach or re-route after moving nodes.
• Hollow diamond/oval arrows from draw.io use the nearest solid end type with a warning in PowerPoint; open and hollow block/classic use open arrows.
• Common HTML rich text is preserved as editable runs (b/strong, i/em, underline, strike, font family/size/color, superscript/subscript, lists, alignment, and safe HTTP(S)/mailto hyperlinks). Arbitrary CSS is not a browser rendering target.
• Common AWS, Azure, GCP, Kubernetes, basic, server, user, and network icons are mapped offline through Iconify. Unmapped private/custom stencil XML returns UNSUPPORTED_ICON with a visible editable fallback.
• Remote images are disabled by default. --allow-remote-images permits bounded HTTP(S) fetching; local/private-network URLs and non-image responses are rejected.
• Linear two-stop gradients and configurable outer shadows are supported. Radial/multi-effect gradients, inner/glow/3D effects, and pixel-perfect clipping masks remain out of scope.

All limitations surface as warnings or documentation — the project does not claim "100% lossless" without verifiability.

Quality Verification

pnpm check
pnpm test
pnpm test:coverage
pnpm build

Test coverage includes:

• Raw XML, mxfile, compressed diagram.
• HTML text cleanup and style normalization.
• Multi-level group affine transforms, relative geometry, offsets, and transformed edge points.
• Offline common stencil icon mapping and visible unknown-icon fallback.
• Proportional transforms with font/stroke co-scaling.
• Explicit connection ports, waypoints, self-loops, orthogonal routing, and rough obstacle avoidance.
• Continuous polylines, rounded quadratic Bezier, and smooth cubic Bezier curves.
• Dot, long dash, dash-dot patterns, line caps, connection styles, start/end arrows, and arrow sizes.
• Single PPTX with 100%, 85%, 70% slides and custom scales.
• PPTX ZIP structure, slide counts, editable object names, and arrow size patches.

Contributing

Please read CONTRIBUTING.md before submitting code. Security issues should be reported per SECURITY.md.

License

MIT