best-practices

How Archify's Export Options Produce Portable Artifacts

August 9, 2026 tt-a1i/archify ↗

Archify generates every export as a self-contained, single-file artifact that requires no external resources, servers, or dependencies to view, share, or embed.

Archify is an open-source diagramming tool designed so that every export you generate remains fully functional without pulling in additional assets. According to the tt-a1i/archify repository, the tool achieves true portability by bundling all geometry, styling, and interactive logic into standalone files that work offline and across platforms.

Single-File HTML Output Architecture

The foundation of Archify's portability lies in its single-file output format. When you export a diagram, the primary artifact is one HTML file that contains the complete SVG geometry, CSS styling, and JavaScript interactivity.

In README.md at lines 79-84, the project explicitly states: "Portable by default — the result is one HTML file; exports remain full-diagram and free of temporary viewer state." This means the artifact can be opened in any browser without a server connection, and it will render identically to how it appeared during editing.

The HTML includes:

Inline CSS defining theme variables and UI styles
Embedded JavaScript powering the toolbar, export logic, and viewer interactions
Self-contained SVG representing the diagram geometry

Because everything is bundled internally, the artifact cannot accidentally depend on a CDN or external library, ensuring it works offline and remains future-proof.

Export Formats and the Viewer Interface

Archify provides a built-in Export menu accessible via the viewer toolbar or the E keyboard shortcut. This menu triggers the internal Archify.exportMenu.run routine, which serializes the current diagram into multiple portable formats.

In examples/archify-repo.html at lines 920-930, the export interface is implemented as:

<button id="btn-export" type="button" aria-controls="export-menu">
  Export
</button>
<div class="export-menu">
  <!-- Format options -->
</div>

The supported export formats include:

PNG – Raster image for documentation and presentations
SVG – Scalable vector graphics for lossless scaling
WebM – Animated video format for motion diagrams
Share Card – A 1200×630 PNG optimized for social sharing and README embeds

Because all rendering happens client-side, the resulting files contain only the visible diagram without hidden viewer state or temporary UI layers.

Programmatic Export Control

The viewer exposes a lightweight JavaScript API for automating exports. You can trigger downloads programmatically using the Archify.exportMenu.run() method, as implemented in examples/archify-repo.html at lines 925-931:

// Download specific formats
Archify.exportMenu.run('png')        // Standard PNG
Archify.exportMenu.run('svg')        // Vector SVG
Archify.exportMenu.run('webm')       // Animated WebM
Archify.exportMenu.run('share-card') // 1200×630 social card

The share card function copies the PNG directly to your clipboard for instant pasting into documentation, releases, or social posts, while simultaneously triggering a download for version control.

Deterministic Metadata and Rendering

To ensure repeatable visual output across different browsers and platforms, Archify embeds deterministic metadata directly into the exported artifacts. The root <html> element carries attributes such as:

data-theme – Preserves the color scheme (light/dark)
data-preset – Maintains the layout configuration

This metadata guarantees that when you reopen a file later or share it with collaborators, it renders with the exact visual style and layout that existed at export time. The deterministic approach eliminates "works on my machine" rendering discrepancies.

Build Pipeline and Asset Bundling

The scripts/build-zip.sh script ensures that all generated artifacts remain self-contained by bundling the viewer and all assets into a single distribution package. This build process validates that the HTML, PNG, SVG, and WebM outputs require no external references.

Additionally, archify/SKILL.md defines the contract for output formats and metadata handling, enforcing the requirement that all artifacts must be portable and free of external dependencies.

Summary

Single-file HTML exports bundle all CSS, JavaScript, and SVG geometry into one portable document
Multiple format support includes PNG, SVG, WebM, and 1200×630 share cards via the Archify.exportMenu.run API
Zero external dependencies ensure artifacts work offline without CDN requirements
Deterministic metadata (data-theme, data-preset) guarantees consistent rendering across platforms
Clipboard integration allows instant sharing of PNG share cards for documentation
Client-side generation produces clean files without temporary UI state or hidden viewer elements

Frequently Asked Questions

Can Archify exports be viewed without an internet connection?

Yes. Every exported artifact from Archify is completely self-contained. The HTML files include inline CSS and JavaScript rather than linking to external resources, making them fully functional offline. As documented in the repository's README, the single-file output contains all necessary geometry and logic, requiring no server or network access to render properly.

How do I programmatically export a diagram to PNG using Archify?

Use the viewer's JavaScript API by calling Archify.exportMenu.run('png') from the browser console or a custom script. This method is exposed in the generated HTML viewer (found in examples/archify-repo.html) and triggers an immediate download of the current diagram state as a PNG file. You can substitute 'png' with 'svg', 'webm', or 'share-card' to access other formats.

A standard PNG export captures the diagram at its native resolution, optimized for documentation and editing workflows. The share card is a specifically formatted 1200×630 PNG designed for social media embeds and README headers. The share card automatically copies to your clipboard when generated (via Archify.exportMenu.run('share-card')) and includes the full diagram plus caption area, making it ready for immediate posting without additional image editing.

Does Archify preserve my theme settings when exporting?

Yes. Archify embeds metadata attributes including data-theme and data-preset directly on the root HTML element of exported files. This ensures that when you reopen an exported HTML file or share it with others, it maintains the exact visual style—light mode, dark mode, or custom themes—that was active during export, guaranteeing consistent rendering across different browsers and operating systems.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:

curl -s "https://instagit.com/install.md"

Add to your MCP client configuration:

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

Ask your agent:

"Use Instagit MCP to understand how tt-a1i/archify works."

Works with

Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →