Archify Features Explained: From Code to Interactive System Maps

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, 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.

# 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 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:

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.

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 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:

# 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.

---

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.

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