Can Archify Diagrams Be Exported as WebM Animation? Technical Implementation Guide

Yes, Archify diagrams can be exported as WebM animations, but only when the diagram contains an active trace-animation (the "guided-story" effect) and the browser supports the MediaRecorder API.

Archify’s export subsystem supports generating WebM video files to capture dynamic visualizations as shareable video clips. This capability is implemented in the core prototype and requires specific runtime conditions to function correctly.

Prerequisites for WebM Export in Archify

Trace Animation Requirement

WebM export is exclusively available for diagrams that include a trace animation. This animation creates the "guided-story" effect where the diagram draws itself sequentially. If you attempt to export a static diagram without this feature enabled, the export routine will throw an error.

MediaRecorder API Support

The browser must implement the MediaRecorder API to encode the video stream. According to the source code in experiments/visual-evolution/prototype.html (lines 1527‑1532), the system validates this support before initialization. If the API is missing, Archify displays the error: "WebM motion export requires a trace animation and browser MediaRecorder support".

How to Export Archify Diagrams as WebM Animation

Using the Export Menu UI

The simplest method uses the built-in export interface:

1. Press E (or click the export button) to open the export menu.
2. Select WebM from the format list.
3. The browser automatically downloads the video file via a generated blob URL.

The underlying HTML structure for the menu is defined in experiments/visual-evolution/prototype.html:

<!-- Export button and menu (simplified) -->
<div class="export-wrap">
  <button id="btn-export" type="button" aria-controls="export-menu">Export</button>
  <div class="export-menu" id="export-menu" role="menu" aria-label="Export">
    <button data-format="png">PNG</button>
    <button data-format="jpeg">JPEG</button>
    <button data-format="webm">WebM</button>
  </div>
</div>

Programmatic WebM Export

For automation or custom workflows, invoke the export pipeline directly via the global Archify object:

// Archify is exposed globally as `Archify`
if (Archify.exportMenu) {
  // Runs the export pipeline for the chosen format
  Archify.exportMenu.run('webm')
    .then(blob => {
      // Create a downloadable link
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'diagram.webm';
      a.click();
      URL.revokeObjectURL(url);
    })
    .catch(err => console.error('WebM export failed:', err));
}

Checking Browser Compatibility

Before attempting export, verify that the environment meets all requirements:

function canExportWebM() {
  // Must have a trace animation and MediaRecorder support
  const hasTrace = Archify.trace && Archify.trace.isActive;
  const hasRecorder = typeof MediaRecorder !== 'undefined';
  return hasTrace && hasRecorder;
}

if (canExportWebM()) {
  Archify.exportMenu.run('webm');
} else {
  console.warn('WebM export unavailable – either no animation or MediaRecorder unsupported.');
}

Internal Implementation and Error Handling

The export pipeline in experiments/visual-evolution/prototype.html handles WebM generation by constructing a temporary canvas element that replays the trace animation frame-by-frame. It streams these frames to a MediaRecorder instance configured to output the WebM container format.

Error handling is strict: if Archify.trace.isActive evaluates to false or MediaRecorder is undefined, the system halts immediately and returns the error message defined at lines 1527‑1532. This prevents generation of empty or corrupted video files.

The production-ready UI demonstrating this workflow is available in examples/web-app.html, which includes the full export toolbar with theme toggles and format selection.

Summary

• WebM export requires an active trace animation and browser support for the MediaRecorder API.
• Access the feature via the UI (press E) or programmatically using Archify.exportMenu.run('webm').
• Implementation resides in experiments/visual-evolution/prototype.html, using a temporary canvas and MediaRecorder streaming.
• Error handling at lines 1527‑1532 prevents export attempts when prerequisites are missing.

Frequently Asked Questions

Why is the WebM export option disabled in my Archify diagram?

The export routine checks for two conditions: an active trace animation (Archify.trace.isActive must be true) and the presence of the MediaRecorder API. If either condition fails, the option is suppressed or an error is thrown to prevent invalid output.

Can I export WebM from Archify in Safari or older browsers?

No. Safari and legacy browsers that do not implement the MediaRecorder API cannot generate WebM files. The source code explicitly checks typeof MediaRecorder !== 'undefined' and aborts the operation if this evaluates to false.

How do I automate WebM exports for multiple Archify diagrams?

Use the programmatic API Archify.exportMenu.run('webm'), which returns a Promise that resolves to a video Blob. Wrap this call in a batch script or loop, ensuring you call canExportWebM() (or equivalent checks) for each diagram to verify trace animation availability before initiating the export.

Where is the WebM export logic implemented in the Archify source code?

The core implementation is located in experiments/visual-evolution/prototype.html, specifically around lines 1527‑1532 for error handling and MediaRecorder initialization. The user interface components are demonstrated in examples/web-app.html, which showcases the export toolbar used in production deployments.

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