# Archify Features Explained: From Code to Interactive System Maps

> Discover Archify features and transform code into interactive system maps. Explore diagram types, visual presets, JSON output, and a zero-dependency CLI for seamless workflow control.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: getting-started
- Published: 2026-08-11

---

**Archify** is an agent skill that transforms textual system descriptions or code repositories into polished, interactive diagrams directly within chat—offering five diagram types, four visual presets, deterministic JSON output, and a zero-dependency CLI for complete workflow control.

These Archify features make it possible to generate architecture maps, share them in multiple formats, and validate every change before it reaches production. The tool targets developers and platform teams who need source-grounded, version-controlled visualizations without runtime dependencies.

---

## Five Diagram Types for Different System Views

Archify supports **five specialized diagram modes**, each focusing on a distinct aspect of system design. You select the mode via the CLI when invoking `archify.mjs generate`.

| Diagram Type | Purpose | CLI Usage |
|-------------|---------|-----------|
| **Architecture** | Component relationships and system topology | `node archify/bin/archify.mjs generate architecture …` |
| **Workflow** | CI/CD pipelines and process automation | `node archify/bin/archify.mjs generate workflow …` |
| **Sequence** | API call chains and interaction timelines | `node archify/bin/archify.mjs generate sequence …` |
| **Data Flow** | Data pipeline movement and transformation | `node archify/bin/archify.mjs generate data-flow …` |
| **Lifecycle** | State machines and entity transitions | `node archify/bin/archify.mjs generate lifecycle …` |

Each mode enforces schema rules defined in [`archify/schemas/README.md`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/README.md), ensuring that the generated JSON IR (intermediate representation) is typed and validatable.

---

## Four Visual Presets and Dual Themes

**Visual presets** control layout algorithm, color palette, and optional motion effects. The four presets are:

- **Signal-Flow** – Emphasizes directional data movement with animated trace lines
- **Blueprint** – Engineering-style technical drawings with muted tones
- **Classic** – Traditional UML-inspired aesthetics for documentation-heavy contexts
- **Editorial** – Clean, publication-ready styling for executive summaries

All presets support **instant theme switching** between dark and light modes. The viewer applies these via CSS variables without re-rendering the diagram structure.

---

## Deterministic JSON IR and Atomic Validation

Archify's core architectural decision is **deterministic, typed output**. Every diagram compiles to a JSON IR that can be:

- Version-controlled alongside source code
- Diffed for change tracking
- Re-validated against schema evolution

The validation pipeline in `archify/bin/archify.mjs` enforces **atomic delivery**: a diagram only replaces its predecessor after schema, layout, routing, and label validation complete. This prevents broken or inconsistent states from reaching users.

```bash

# Generate with full validation pipeline

node archify/bin/archify.mjs generate architecture \
  --repo https://github.com/example/project \
  --output validated-output.html

```

---

## Interactive Viewer with Keyboard Navigation

Generated HTML files include a **self-contained interactive viewer** requiring no external server. Key interactions include:

| Key | Action |
|-----|--------|
| `/` | Open search across nodes and labels |
| `R` | Trace upstream and downstream reach from selected node |
| `L` | Toggle lens comparison mode |
| `M` | Switch visual preset |

The viewer is implemented as a single-file artifact. Open [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) locally to explore the full interaction model.

---

## Share-Able Export Formats

Archify outputs **five artifact types** from the same source diagram:

1. **HTML** – Full interactive viewer (default)
2. **PNG** – Raster image for documentation
3. **SVG** – Scalable vector for presentations
4. **WebM** – Video format for animated sequences
5. **Share Cards (1200 × 630)** – Social-optimized crop of specific routes

Export a focused route card with:

```bash
node archify/bin/archify.mjs export route \
  --source web-app.html \
  --route web~db \
  --output route-share.png

```

This generates a 1200 × 630 PNG preserving full diagram context while highlighting the web-to-database path.

---

## Architecture-Delta Review for Change Tracking

The **Architecture-Delta** feature compares two validated snapshots, producing a tri-pane view (Before / Delta / After) with machine-generated receipts listing exactly what changed.

```bash
node archify/bin/archify.mjs compare architecture \
  base.json head.json architecture-delta.html --json

```

The output includes:
- Added, removed, changed, and moved facts
- JSON receipt for CI/CD integration
- Visual diff highlighting in the HTML viewer

See [`examples/checkout-platform-delta.html`](https://github.com/tt-a1i/archify/blob/main/examples/checkout-platform-delta.html) for a working demonstration.

---

## Zero-Dependency CLI and Portable Output

The **CLI entry point** at `archify/bin/archify.mjs` runs without installation beyond Node.js:

```bash

# One-time global install for agent integration

npx skills add tt-a1i/archify -g

# Local execution for CI or offline use

node archify/bin/archify.mjs generate architecture --help

```

All output is **portable by default**—single HTML files with embedded assets, no runtime server required after generation.

---

## Optional Deployment-Ownership Contract

Production reviews can enforce a **deployment-ownership contract** specifying:

- Single-region placement constraints
- Private database scope requirements
- Explicit boundary crossing declarations

This optional validation layer runs after schema checks and before delivery, as documented in [`archify/SKILL.md`](https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md).

---

## Source-Evidence Linking

Every node can display **SRC n** badges that open the exact file and line range from the underlying commit. This grounds visual abstractions in verifiable source code, reducing drift between documentation and implementation.

---

## Summary

- **Five diagram types** cover architecture, workflow, sequence, data flow, and lifecycle perspectives
- **Four visual presets** (Signal-Flow, Blueprint, Classic, Editorial) with dark/light themes
- **Deterministic JSON IR** enables version control, diffing, and schema validation
- **Atomic validation and delivery** prevents incomplete diagrams from publishing
- **Self-contained HTML viewer** with keyboard shortcuts for search, reach tracing, and lens comparison
- **Five export formats** including social-optimized share cards
- **Architecture-Delta** provides before/after comparison with machine-readable receipts
- **Zero-dependency CLI** at `archify/bin/archify.mjs` supports local and CI workflows
- **Source-evidence linking** connects nodes to exact file/line ranges

---

## Frequently Asked Questions

### What diagram type should I use for API documentation?

Use **Sequence** diagrams for API call chains and **Architecture** diagrams for overall service topology. Sequence mode in `archify/bin/archify.mjs` focuses on temporal interactions, while Architecture emphasizes structural relationships. Both export to the same interactive HTML format.

### Can I run Archify without installing it as a skill?

Yes. The **zero-dependency CLI** runs directly via Node.js: `node archify/bin/archify.mjs [command]`. This is useful for CI pipelines, automation scripts, or offline environments where agent integration is unavailable.

### How does Architecture-Delta handle large system changes?

The delta algorithm in `archify/bin/archify.mjs compare` categorizes changes into added, removed, changed, and moved facts. It generates both a visual tri-pane view and a JSON receipt for programmatic processing. The comparison works on validated IR snapshots, so only semantically meaningful changes surface.

### Are exported HTML files safe to share publicly?

Exported HTML is **self-contained and portable**, but visibility depends on your source data. The files contain no external dependencies, yet they embed your diagram structure and any source-evidence links you enabled. Review content before sharing, or use PNG/SVG exports for sanitized distribution.