What Kind of Output Does Archify Generate? A Complete Guide to Export Formats

Archify generates a self-contained, interactive technical map with multiple export formats including single-file HTML viewers, static PNG/SVG/WebM assets, and share-optimized cards.

Archify transforms codebase or system descriptions into portable, version-controlled artifacts that can be shared directly in chat, embedded in documentation, or checked into repositories. This article breaks down every output format the tool produces, based on the tt-a1i/archify source code.

---

Core Output: The Typed JSON IR

At the heart of every Archify artifact sits a deterministic, schema-validated JSON representation of the diagram.

• The schema is formally defined in archify/SKILL.md, which acts as the contract between the generator and renderer.
• This intermediate representation (IR) ensures consistency across all downstream formats.
• Because the JSON is typed and validated, outputs remain reproducible across different runs and environments.

The JSON IR feeds directly into the rendering pipeline that produces all other artifacts.

---

Interactive HTML Viewer

Archify's flagship output is a single-file HTML viewer that bundles layout engines, interaction logic, and optional motion presets into one portable document.

Key Features of the Viewer

• Zero dependencies — open locally in any modern browser or host on static file services.
• Theme support — toggle between dark and light modes.
• Visual presets — switch between Signal-Flow, Blueprint, Classic, and other rendering styles.
• Finite animation — play preset motion sequences directly in the browser.

The viewer is generated via the CLI entry point in archify/bin/archify.mjs:

# Generate an architecture diagram as an interactive HTML file

node archify/bin/archify.mjs generate \
  --type architecture \
  --source https://github.com/example/project \
  --output ./project-arch.html

Result: project-arch.html is fully self-contained and ready to distribute.

---

Static Export Formats

From the HTML viewer (or CLI), Archify exports three primary static formats:

Format	Use Case	CLI Flag
PNG	Documentation, presentations, issue attachments	--format png
SVG	Scalable diagrams for web or print	--format svg
WebM	Finite-motion video clips for demos or social	--format webm

Export from the Viewer Interface

Press E to open the Export menu, then select your preferred format. All rendering happens client-side using the bundled canvas/WebGL engines.

Export via CLI

# PNG export of full diagram

node archify/bin/archify.mjs export \
  --input ./project-arch.html \
  --format png

# SVG for vector editing

node archify/bin/archify.mjs export \
  --input ./project-arch.html \
  --format svg

---

Share Cards: Optimized Social Images

Archify produces 1200 × 630 PNG images designed for READMEs, release notes, and social platforms. These canonical "share cards" follow Open Graph standards for optimal link previews.

Canonical Share Card

# Generate the standard share-optimized PNG

node archify/bin/archify.mjs export \
  --input ./project-arch.html \
  --format png \
  --share-card

Route-Share Cards: Highlight Specific Paths

Route-share cards capture a specific authored path through the diagram while preserving full context underneath.

# Highlight the Web → API route in a shareable PNG

node archify/bin/archify.mjs export \
  --input ./project-arch.html \
  --format png \
  --route web~api \
  --share-card

The --route parameter accepts Archify's internal path notation (defined in archify/SKILL.md), letting you emphasize critical data flows without cropping the surrounding architecture.

Reach-Share Cards: Show Upstream/Downstream Impact

A third variant highlights reach — upstream dependencies or downstream consumers — without implying runtime behavior. This distinction matters for architectural reviews where you want to show "what touches this" versus "what runs when this runs."

---

Version-Controlled Workflow

All Archify outputs are designed for git-based collaboration:

1. Generate project-arch.html once.
2. Commit it alongside your code.
3. Reference it from READMEs with stable relative paths.
4. Regenerate when significant architectural changes occur.

The single-file constraint means no broken asset links or missing dependencies — what you commit renders identically six months later.

---

Summary

• JSON IR — schema-validated, deterministic foundation for all outputs.
• Single-file HTML viewer — interactive, themeable, zero-dependency browser experience.
• Static exports — PNG, SVG, and WebM for documentation, editing, and video.
• Share cards — 1200 × 630 PNGs optimized for social and README embedding.
• Route-share and reach-share cards — contextual highlights for specific paths or dependency analysis.
• Portable by design — every artifact can be version-controlled and shared via stable URLs.

These capabilities are implemented across archify/bin/archify.mjs (CLI generation and export), archify/SKILL.md (schema contracts), and the example outputs in archify/examples/web-app.html and archify/examples/archify-repo.html.

---

Frequently Asked Questions

Can I open Archify's HTML output without a server?

Yes. The generated HTML files contain all JavaScript, styles, and layout engines inline. Double-click to open in any modern browser, or host on static file services like GitHub Pages, Netlify, or S3.

What's the difference between a route-share card and a regular share card?

A regular share card shows the full diagram scaled to 1200 × 630. A route-share card overlays emphasis on a specific path (e.g., web~api) while keeping the complete diagram visible as background context. Use route-share cards when you want to direct attention without cropping information.

Does Archify require internet access to render diagrams?

No. Once generated, all assets are self-contained. The HTML viewer runs entirely client-side with no external CDN calls, making it suitable for air-gapped environments or long-term archival.

Which export format should I use for print documentation?

SVG for vector quality that scales to any resolution, or PNG at high DPI for raster-based publishing workflows. The SVG export preserves all visual styling from your selected preset (Signal-Flow, Blueprint, etc.) as editable vector paths.

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