Export & Import: BPMN, PNG, SVG, PDF, and BPM Formats

MC Modeler supports five export formats and a standards-compliant .bpmn importer. All exports are generated entirely in the browser — no server upload required. The export modal provides a live preview that reflects your chosen theme before the file is downloaded.

If the active diagram is empty (no elements on the canvas), the Export button in the toolbar is disabled and shows a tooltip explaining why. Add at least one element before exporting.

Click the Export button (⬇ icon) in the toolbar, or select File → Export from the menu bar. The export modal opens with a format selector, format-specific options, a theme picker, and a live SVG preview of your diagram.

Export Formats

BPMN XML

Standard OMG BPMN 2.0. Opens in Bizagi, Camunda, and any BPMN-compliant tool.

BPM

Bizagi-native format. A ZIP archive containing XPDL 2.2 and metadata files.

PNG

Raster image. Configurable scale: 1×, 2×, or 3×.

SVG

Native bpmn-js vector export. Clean, scalable, style-embedded.

PDF

A4 document (landscape or portrait) with diagram name as header.

BPMN XML (`.bpmn`)

The BPMN XML export produces a standards-compliant file using the official OMG namespace:

xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"

This namespace is the same one used by Bizagi Modeler and Camunda, ensuring seamless round-trip compatibility. The canonical bpmn: prefix is enforced by the normalizeBpmnXml utility on import, so all saved files use a consistent serialization. The export is generated by calling modeler.saveXML({ format: true }) on the bpmn-js engine, then running inlineImages to resolve any library-image references into self-contained base64 data URLs.

// Simplified export flow (from useExport.ts)
const xml  = await inlineImages(await getXml())
downloadText(xml, `${safeName}.bpmn`, 'application/xml')

Bizagi round-trip compatibility has been tested with bpmn-moddle. Proprietary Bizagi extension attributes (bizagi:assignee, bizagi:priority, etc.) are preserved intact in the XML during import and re-exported unchanged. MC Modeler does not display these attributes in the UI, but they survive the round-trip, so no data is lost when re-opening the file in Bizagi.

BPM (`.bpm`) — Bizagi Native Format

The .bpm export produces a Bizagi-native project file — the same format created by Bizagi Modeler’s “Save as” function. It is a ZIP archive containing:

{uuid}.diag         ← inner ZIP with Diagram.xml, Actions.xml, BPSimData.xml, ...
ModelInfo.xml       ← Bizagi version metadata
Participants.xml    ← XPDL 2.2 participants
Preferences.bpp     ← project preferences
Users/Default/
  UserPreferences.xml
  DocumentationSettings.xml
  PrintingPreferences.xml

The Diagram.xml inside the .diag file is an XPDL 2.2 document. The export utility (src/utils/bpmExport.ts) handles the full conversion:

All bpmn-js element IDs are converted to valid GUIDs (required by Bizagi’s parser).
Element coordinates are rounded to integers to prevent Int32 overflow errors in Bizagi’s regional-culture parser.
Phase elements (Phase_* group IDs) are converted to Bizagi <Milestone> elements with pool-relative coordinates.
Pools without lanes automatically receive a synthetic default lane (Bizagi requires at least one lane per pool).
A hidden “Proceso principal” ghost pool/process is always included as the first entry — Bizagi requires this outer container.

PNG (`.png`)

PNG export converts the diagram SVG to a raster image via an offscreen <canvas> element. You can choose the pixel density:

Scale	Use case	Approx. output size
1×	Screen display, quick sharing	~800–1200 px wide
2×	Presentations, email attachments	~1600–2400 px wide
3×	Print-quality, large-format output	~2400–3600 px wide

Use 3× scale for high-quality print exports. At 3× the diagram renders at approximately 300 DPI when printed on A4, giving sharp lines and crisp text even at small element sizes.

// From useExport.ts
const scale     = opts.scale ?? 2          // default 2×
const themedSvg = await getThemedSvg(theme, getSvg)
const dataUrl   = await svgToDataUrl(themedSvg, scale, bg)

A 20 px padding is added around the diagram content automatically (padding = 20 in svgToDataUrl).

SVG (`.svg`)

SVG export uses bpmn-js’s native modeler.saveSVG() output — the cleanest and most faithful vector representation of the diagram. The exported SVG:

Contains all BPMN shapes and labels as proper SVG elements.
Has a background <rect> injected matching the chosen theme color.
Has text styles (fill, color, stroke) forced via an injected <style> block so labels render correctly when opened in vector editors like Inkscape, Figma, or Illustrator.
Has transient bpmn-js interaction elements (lasso overlay, drag handles, resize handles) stripped out before export via sanitizeExportedSvg.

PDF (`.pdf`)

PDF export creates an A4 document using jsPDF. The page layout adapts to your orientation choice:

Option	Page dimensions
Landscape (default)	297 × 210 mm
Portrait	210 × 297 mm

The diagram is centered on the page with 16 mm margins. A header row contains:

Left: Diagram name (10 pt, gray).
Right: Export date in the locale format (new Date().toLocaleDateString()).

// Simplified PDF flow (from useExport.ts)
const themedSvg = await getThemedSvg(theme, getSvg)
const dataUrl   = await svgToDataUrl(themedSvg, 2, bg)  // 2× raster for PDF

const pdf   = new jsPDF({ orientation, unit: 'mm', format: 'a4' })
pdf.text(diagramName, margin, margin + 4)
pdf.text(new Date().toLocaleDateString(), pageW - margin, margin + 4, { align: 'right' })
pdf.addImage(dataUrl, 'PNG', x, margin + 12, w, h)
pdf.save(`${safeName}.pdf`)

The diagram is proportionally scaled to fit within the printable area while preserving its aspect ratio.

Export Theme

For PNG, SVG, and PDF exports, you can choose which color theme to apply to the output — independent of the theme currently active in the app:

Theme option	Result
Current	Uses the app’s active theme (light or dark)
Light	Forces a white background and dark element strokes regardless of app theme
Dark	Forces a dark background (`#0b0d12`) and light element strokes regardless of app theme

Theme remapping works by reading the authored CSS custom-property values from the CSSOM and substituting them directly in the exported SVG string — the live canvas is never re-rendered and no visible theme flash occurs. This remapping covers all renderer variables: --task-fill, --task-stroke, --task-text, --start-fill, --end-fill, --gateway-fill, --pool-fill, --lane-fill, --text, --bg, and more.

Import

MC Modeler can import any .bpmn file created by Bizagi Modeler, Camunda Modeler, MC Modeler itself, or any other BPMN 2.0-compliant tool.

How to Import

Open the import dialog

Click Import in the toolbar or select File → Import from the menu bar. A system file picker opens filtered to .bpmn files only.

Select your file

Choose a .bpmn file. MC Modeler reads the file contents entirely in the browser — no upload to any server.

Validation and normalization

The file is parsed by normalizeBpmnXml using bpmn-moddle. This step:

Validates that the XML is well-formed and has a valid BPMN root element.
Normalizes namespace prefixes to the canonical bpmn: prefix (fixing files that use the default namespace xmlns="..." dialect instead of xmlns:bpmn2="...").
Forces all subsequent saves of this diagram to use the canonical serialization, ensuring consistency with the modeler’s own output.

New diagram created

If the file is valid, a new diagram is created with the imported XML. The original file name (without extension) becomes the diagram name. The new diagram opens as the active tab.

Warnings for unrecognized extensions

bpmn-moddle may return warnings for proprietary extension elements it does not recognize (e.g., camunda: or bizagi: extension attributes). These are non-fatal — the diagram is imported successfully and the extension data is preserved in the XML. A non-blocking toast notification lists the warnings.

Import always creates a new diagram. It never silently overwrites the currently open diagram. If you import while a diagram is open, a confirmation prompt appears before the current diagram is replaced.

Accepted File Types

File type	Accepted	Notes
`.bpmn`	✅	Standard BPMN 2.0 XML, any compliant tool
`.xml` renamed to `.bpmn`	✅	Must contain valid BPMN 2.0 structure
`.bpm` (Bizagi native)	❌	Not yet supported for import (export-only)
`.xml`, `.json`, other	❌	Rejected with a descriptive error toast

Error Handling

If the imported file is invalid, MC Modeler shows a red error toast with a description of the problem (e.g., “XML without BPMN root”, “Malformed XML”). No diagram is created. The error originates from normalizeBpmnXml throwing when moddle.fromXML returns a null root element.

// From normalizeBpmnXml.ts
const { rootElement, warnings } = await moddle.fromXML(xml)
if (!rootElement) throw new Error('XML sin raíz BPMN')

Bizagi Round-Trip Compatibility

Verified with bpmn-moddle v10.0.0. The following scenarios have been tested:

Scenario	Result
MC Modeler → export `.bpmn` → open in Bizagi	✅ Full compatibility
Bizagi → export `.bpmn` → import in MC Modeler	✅ Full compatibility
Bizagi proprietary extensions (`bizagi:` namespace)	✅ Preserved in round-trip
Camunda Modeler → export → import in MC Modeler	✅ Full compatibility

Both tools use the same OMG standard namespace: xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL". Proprietary extension attributes from Bizagi are carried through intact in the XML even though MC Modeler does not render them in the UI.

Export Workflow Reference

User clicks Export
        │
        ▼
ExportModal opens
 ├─ Format selector (bpmn / bpm / png / svg / pdf)
 ├─ Format options (scale for PNG, orientation for PDF)
 ├─ Theme selector (current / light / dark) — PNG, SVG, PDF only
 └─ Live SVG preview (updates on theme change, no canvas re-render)
        │
User clicks "Export"
        │
        ▼
useExport.run() called
 ├─ bpmn: inlineImages(getXml()) → download .bpmn
 ├─ bpm:  inlineImages(getXml()) → exportToBpm() → download .bpm
 ├─ svg:  getThemedSvg() → download .svg
 ├─ png:  getThemedSvg() → svgToDataUrl(scale) → download .png
 └─ pdf:  getThemedSvg() → svgToDataUrl(2×) → jsPDF → download .pdf
        │
        ▼
Status: isExporting = false, toast on error

Get Started

Core Features

Collaboration

Projects & Organization

Configuration

Export & Import: BPMN, PNG, SVG, PDF, and BPM Formats

Export Formats

BPMN XML

BPM

PNG

SVG

PDF

BPMN XML (`.bpmn`)

BPM (`.bpm`) — Bizagi Native Format

PNG (`.png`)

SVG (`.svg`)

PDF (`.pdf`)

Export Theme

Import

How to Import

Accepted File Types

Error Handling

Bizagi Round-Trip Compatibility

Export Workflow Reference

Build docs developers (and LLMs) love

Get Started

Core Features

Collaboration

Projects & Organization

Configuration

Documentation Index

​Opening the Export Modal

​Export Formats

BPMN XML

BPM

PNG

SVG

PDF

​BPMN XML (.bpmn)

​BPM (.bpm) — Bizagi Native Format

​PNG (.png)

​SVG (.svg)

​PDF (.pdf)

​Export Theme

​Import

​How to Import

​Accepted File Types

​Error Handling

​Bizagi Round-Trip Compatibility

​Export Workflow Reference

Build docs developers (and LLMs) love

Opening the Export Modal

Export Formats

BPMN XML (`.bpmn`)

BPM (`.bpm`) — Bizagi Native Format

PNG (`.png`)

SVG (`.svg`)

PDF (`.pdf`)

Export Theme

Import

How to Import

Accepted File Types

Error Handling

Bizagi Round-Trip Compatibility

Export Workflow Reference