How to Build draw.io Desktop for Different Platforms Using electron-builder Configurations

draw.io Desktop uses platform-specific JSON configuration files with electron-builder to create signed installers for Windows, macOS, and Linux through npm scripts that automate the entire build pipeline.

The jgraph/drawio-desktop repository packages the web-based diagram editor as a cross-platform desktop application using electron-builder. By maintaining separate JSON configuration files for each target platform, the project streamlines the creation of architecture-specific installers, security hardening, and automated GitHub releases.

Platform-Specific electron-builder Configurations

draw.io Desktop organizes its build logic into discrete configuration files at the repository root. Each file defines the target architecture, output formats, and platform-specific options.

Windows Builds (x64, 32-bit, and ARM64)

Windows targets are split across three dedicated files to handle distinct architecture requirements:

• electron-builder-win.json – Produces NSIS (nsis) and MSI (msi) packages for x64 systems.
• electron-builder-win32.json – Generates a NSIS installer for ia32 (32-bit) architecture only.
• electron-builder-win-arm64.json – Creates both a NSIS installer and a portable ZIP archive for arm64 devices.

All Windows configurations apply Electron security fuses via the afterPack hook pointing to build/fuses.cjs.

macOS and Linux Builds

The electron-builder-linux-mac.json file handles both Unix-like operating systems:

• macOS – Outputs dmg and zip formats for x64, arm64, and universal binaries. It includes afterSign hooks that trigger build/notarize.mjs for Apple notarization and enables the hardened runtime.
• Linux – Generates AppImage, deb, and rpm packages for both x64 and arm64 architectures.

Common Configuration Base

Despite platform differences, all JSON files inherit shared properties that define core application behavior:

• appId – Set to com.jgraph.drawio.desktop for consistent OS-level identification.
• asar: true – Bundles source files into an ASAR archive to improve load times and prevent tampering.
• files – Includes the entire repository contents while excluding WEB-INF directories.
• directories.output – Directs all build artifacts to ./dist/.
• npmRebuild: false – Disables rebuilding of native modules during packaging.
• publish.provider: "github" – Configures automatic artifact uploads to GitHub releases when using --publish always.
• fileAssociations – Registers .drawio and .vsdx file extensions on every supported OS.

NPM Scripts and Build Pipeline

The package.json maps each configuration to a convenient npm script, enabling one-command builds:

"scripts": {
  "release-win": "electron-builder --config electron-builder-win.json --publish always",
  "release-win32": "electron-builder --config electron-builder-win32.json --publish always",
  "release-win-arm64": "electron-builder --config electron-builder-win-arm64.json --publish always",
  "release-linux": "electron-builder --config electron-builder-linux-mac.json --publish always",
  "release-snap": "electron-builder --config electron-builder-snap.json --publish never"
}

Executing a script triggers a four-stage pipeline:

1. Version Sync – npm run sync executes sync.cjs to copy the version string from drawio/VERSION into package.json.
2. Dependency Installation – npm ci installs pre-built native modules without rebuilding.
3. electron-builder Execution – Reads the specified JSON config, bundles the Electron app, applies afterPack hooks for security fuses (Windows) or afterSign for notarization (macOS), and generates distributables.
4. GitHub Publish – When --publish always is set, artifacts upload automatically to the repository's releases page.

Building from Source

To produce installers locally or in CI/CD environments:

# Clone including the draw.io submodule

git clone --recursive https://github.com/jgraph/drawio-desktop.git
cd drawio-desktop

# Install dependencies

npm ci

# Synchronize version from submodule

npm run sync

# Build for specific platforms

npm run release-win        # Windows x64 (NSIS + MSI)

npm run release-win32      # Windows 32-bit (NSIS)

npm run release-win-arm64  # Windows ARM64 (NSIS + portable)

npm run release-linux      # macOS (dmg/zip) and Linux (AppImage/deb/rpm)

After completion, installers appear in dist/:

• draw.io-<version>-windows-installer.exe (NSIS)
• draw.io-<version>.msi (MSI)
• draw.io-<arch>-<version>.dmg (macOS)
• draw.io-<arch>-<version>.AppImage (Linux)

Summary

• draw.io Desktop uses separate electron-builder JSON files for Windows x64, Windows 32-bit, Windows ARM64, and combined macOS/Linux builds.
• Common settings like appId, asar archiving, and fileAssociations are shared across all configurations to ensure consistent application identity and behavior.
• NPM scripts in package.json provide one-command build triggers that handle versioning, packaging, signing, and GitHub publishing automatically.
• Security hardening is applied via afterPack hooks (build/fuses.cjs) on Windows and afterSign notarization (build/notarize.mjs) on macOS.
• Output artifacts land in ./dist/ and include platform-native formats like NSIS, MSI, DMG, and AppImage.

Frequently Asked Questions

What is the purpose of the sync.cjs script in draw.io Desktop builds?

The sync.cjs script located in the repository root reads the version number from the drawio/VERSION file (populated by the draw.io submodule) and injects it into package.json before building. This ensures that the packaged desktop application reports the same version as the underlying web application.

How does draw.io Desktop handle code signing and notarization?

For macOS, the electron-builder-linux-mac.json configuration specifies an afterSign hook that executes build/notarize.mjs, which submits the compiled app to Apple's notarization service using the hardened runtime. On Windows, the afterPack hook runs build/fuses.cjs to flip Electron security fuses that disable Node.js integration in the renderer and enable stricter security policies.

Where are the final build artifacts located after running electron-builder?

All configuration files set "directories.output": "./dist/", which places completed installers and packages in the dist/ folder at the repository root. Files are named according to the pattern draw.io-<arch>-<version>.<ext> (or draw.io-<version>-windows-installer.exe for NSIS).

What file extensions does draw.io Desktop register during installation?

The fileAssociations array in each configuration file registers .drawio and .vsdx extensions with the operating system, allowing users to open diagram files directly from the file explorer into the draw.io Desktop application on Windows, macOS, and Linux.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}