Can Archify Diagrams Be Rendered Offline Without a Hosted Editor?

Yes, Archify generates self-contained HTML files that embed diagrams as inline SVG with a lightweight JavaScript viewer, allowing full offline rendering without any external server or hosted editor.

Archify is an open-source diagramming tool from the tt-a1i/archify repository designed to produce deterministic, portable artifacts. Unlike cloud-dependent editors, Archify outputs static HTML files that bundle the diagram's SVG markup and all necessary interaction logic into a single file, making Archify diagrams rendered offline a core feature rather than an afterthought.

How Archify Enables Offline Diagram Rendering

Archify's export pipeline creates self-contained HTML artifacts that require zero network connectivity. The rendering process inlines the diagram's SVG geometry and embeds a minimal JavaScript viewer directly into the output file.

The Self-Contained HTML Template

At the heart of offline rendering is scripts/start-template.html. This template defines the base structure for every exported diagram:

• Embedded SVG: The diagram's vector graphics are sanitized and inlined directly into the HTML body
• Zero External Dependencies: All CSS and JavaScript required for interaction are embedded within the single HTML file
• Deterministic Layout: The geometry contracts validated during export ensure the SVG renders consistently across browsers

According to the source code, this template provides the foundation for the offline viewer that loads a single sanitized SVG and wires up interaction logic.

Built-in Viewer Capabilities

The offline viewer included in every export supports essential diagram navigation without requiring a hosted editor:

• Pan and Zoom: Navigate large diagrams using mouse or touch gestures
• Theme Switching: Toggle between light and dark color schemes
• Reset Button: Return to the default view position instantly

These features are driven entirely by the static HTML/JS bundle that Archify emits, as documented in docs/research-visual-evolution-round-35.md, which states that the viewer "is intentionally basic" and operates without any network dependency.

Rendering Diagrams to Offline HTML

You can generate offline-compatible diagrams using the Archify CLI. The tool transforms source files into standalone HTML documents through a three-stage pipeline.

First, install the command-line interface:

npm install -g @archify/cli

Next, render your diagram to a self-contained HTML file:

archify render my-diagram.arch --output diagram.html

Finally, open the resulting file in any modern browser:

# macOS

open diagram.html

# Linux

xdg-open diagram.html

# Windows

start diagram.html

The Export Pipeline

The archify render command executes three distinct phases:

1. Parsing: Reads the source .arch (or JSON/YAML) file and builds an internal semantic model
2. Validation: Checks geometry contracts to guarantee deterministic layout regardless of viewing environment
3. Export: Transforms the model into a single SVG, then inlines it into scripts/start-template.html along with all required scripts and styles

This pipeline ensures that diagram.html contains no external references and can function entirely offline.

Source Code Architecture

The Archify repository contains specific files that govern offline rendering behavior and verify its correctness.

Viewer Template and Assets

scripts/start-template.html serves as the foundation for all offline exports. This file contains the minimal HTML structure that hosts the embedded SVG and initializes the viewer controls. The template is designed to be lightweight, ensuring fast load times even for complex diagrams.

examples/web-app-rendered.html provides a concrete demonstration of the offline capability. Opening this file locally in any browser displays a fully functional diagram with working zoom controls and theme toggles, proving that no server connection is necessary.

Design Philosophy

The offline-first approach is intentional, as detailed in docs/research-visual-evolution-round-35.md. This document explains that the viewer is designed to be simple and deterministic, deliberately avoiding cloud dependencies to ensure diagrams remain accessible and portable across different environments and platforms.

Testing Offline Compatibility

The repository includes archify/test/viewer-chrome-layout.test.mjs, a test suite that confirms the offline viewer renders correctly in Chrome. These tests validate that the self-contained HTML files display properly and that interactive features like panning and theming function without external resources.

Summary

• Archify generates self-contained HTML files that embed diagrams as inline SVG with all necessary JavaScript and CSS
• The offline viewer requires no hosted editor, external server, or network connection to function
• Source templates in scripts/start-template.html and design documentation in docs/research-visual-evolution-round-35.md confirm the offline-first architecture
• The CLI command archify render produces deterministic, portable artifacts that work across macOS, Linux, and Windows
• Automated testing in archify/test/viewer-chrome-layout.test.mjs ensures offline rendering reliability

Frequently Asked Questions

Do I need an internet connection to view Archify diagrams?

No. Once you export a diagram using archify render, the resulting HTML file contains everything needed for viewing. The SVG, styling, and interaction logic are all embedded within the single file, allowing you to open it in a browser while completely offline.

Can I share Archify diagrams with others who don't have the tool installed?

Yes. Because Archify exports are standard HTML files, you can email them or host them on any static file server. Recipients only need a modern web browser to view the diagram with full pan, zoom, and theme capabilities—no special software or Archify installation required.

What interactive features are available in offline mode?

The offline viewer provides essential navigation features including pan and zoom controls, light/dark theme switching, and a reset view button. These capabilities are implemented via embedded JavaScript in scripts/start-template.html and function identically whether the file is opened from disk or served locally.

Is the offline viewer tested for browser compatibility?

Yes. The repository includes archify/test/viewer-chrome-layout.test.mjs, which validates that the offline renderer functions correctly in Chrome. The deterministic layout system ensures consistent rendering across modern browsers that support standard SVG and ES6 JavaScript features.

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