# Where to Find Archify Usage Examples: Complete Guide to Demos and Sample Code

> Discover Archify usage examples with our guide to demos and sample code. Explore pre-built HTML and JSON source files in the tt-a1i/archify repository to see every diagram type in action.

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

---

**Archify provides ready-to-run examples in two locations—`/examples/` for pre-built HTML demos and `/archify/examples/` for JSON source files—that demonstrate every supported diagram type including Architecture, Workflow, Sequence, Data-Flow, and Lifecycle diagrams.**

The **Archify** repository ships with a comprehensive collection of usage examples designed to help developers understand how to generate interactive architecture diagrams. As implemented in `tt-a1i/archify`, these examples range from fully rendered HTML files you can open immediately to typed JSON sources you can customize and re-render via the CLI.

## Example Locations in the Repository

All Archify usage examples are organized into two distinct directories:

- **`/examples/`** – Top-level HTML demos ready for browser viewing
- **`/archify/examples/`** – JSON source files for each diagram type

This separation allows you to either inspect finished artifacts or work with the underlying data structures to produce your own diagrams.

## Pre-Built HTML Demos in /examples/

The `examples/` directory contains full-screen interactive demonstrations referenced directly from [`README_EN.md`](https://github.com/tt-a1i/archify/blob/main/README_EN.md) at lines 81+. Each HTML file is self-contained and can be opened in any modern browser.

| Example File | Purpose |
|-------------|---------|
| [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) | Interactive runtime map of a sample web application |
| [`examples/archify-repo.html`](https://github.com/tt-a1i/archify/blob/main/examples/archify-repo.html) | Archify's own pipeline diagram ("Archify pipeline") |
| [`examples/archify-repo-grid.html`](https://github.com/tt-a1i/archify/blob/main/examples/archify-repo-grid.html) | Grid-based node placement demonstration |
| [`examples/maka-architecture.html`](https://github.com/tt-a1i/archify/blob/main/examples/maka-architecture.html) | Desktop-agent layout for third-party repository visualization |

These files serve as immediate proof-of-concept references. Simply drop [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) into a browser to see Archify rendering capabilities without any build step.

## JSON Source Files in /archify/examples/

For programmatic usage, the `archify/examples/` directory contains typed JSON definitions that feed the CLI tool. Key scenario files include:

- [`workflow-agent-tool-call.workflow.json`](https://github.com/tt-a1i/archify/blob/main/workflow-agent-tool-call.workflow.json) – Workflow diagram with agent tool call patterns
- [`product-analytics.dataflow.json`](https://github.com/tt-a1i/archify/blob/main/product-analytics.dataflow.json) – Data-flow scenario for product analytics pipelines
- [`agent-run.lifecycle.json`](https://github.com/tt-a1i/archify/blob/main/agent-run.lifecycle.json) – Lifecycle state transitions for agent execution

These JSON files power both the test suite and the interactive "Proof Lab" gallery mentioned in the repository documentation.

## How to Run Archify Usage Examples

You can interact with examples through three primary methods:

### 1. Open HTML Files Directly

```bash
open examples/web-app.html

```

No compilation or server required—the HTML files embed all necessary rendering logic.

### 2. Render JSON Sources to Fresh HTML

Use `archify/bin/archify.mjs` to regenerate any HTML demo from its JSON source:

```bash
node archify/bin/archify.mjs preview architecture \
  examples/archify-repo.json ./archify-repo.html

```

### 3. Render Workflow and Data-Flow Examples with Automatic Browser Open

```bash

# Workflow example

node archify/bin/archify.mjs preview workflow \
  archify/examples/agent-tool-call.workflow.json ./agent-tool-call.html && \
open ./agent-tool-call.html

# Data-flow with PNG export

node archify/bin/archify.mjs deliver dataflow \
  archify/examples/product-analytics.dataflow.json ./product-analytics.html \
  --export png --open

```

The **preview** command generates interactive HTML artifacts, while **deliver** supports additional export formats including PNG share cards.

## Exploring Example Source Structure

Each HTML demo maintains a reference to its original typed JSON. For instance, [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) points back to [`examples/web-app.architecture.json`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.architecture.json), allowing you to trace how raw data transforms into rendered output.

This bidirectional linking makes the examples effective learning templates—examine the JSON schema, modify values, and re-run the CLI to see immediate visual changes.

## Key Entry Points for Finding Examples

| File Path | Role in Example Discovery |
|-----------|--------------------------|
| [`README_EN.md`](https://github.com/tt-a1i/archify/blob/main/README_EN.md) (or [`README.md`](https://github.com/tt-a1i/archify/blob/main/README.md)) | Central index listing primary examples and CLI basics |
| `archify/bin/archify.mjs` | CLI entry point for rendering, validation, and delivery |

According to the Archify source code, the README explicitly catalogs the four showcase applications at line 81 and beyond, making it the optimal starting point for new users.

## Summary

- **Archify usage examples** are located in `/examples/` (HTML) and `/archify/examples/` (JSON)
- **Pre-built demos** open directly in browsers without dependencies
- **JSON sources** re-render via `archify.mjs` with `preview` or `deliver` commands
- **README_EN.md** serves as the canonical index for all example files
- **Self-contained HTML** files reference their typed JSON origins for template usage

## Frequently Asked Questions

### Where are the main Archify example files located?

The primary examples reside in two directories: `/examples/` contains browser-ready HTML files, while `/archify/examples/` holds the JSON source definitions. Both locations are referenced from [`README_EN.md`](https://github.com/tt-a1i/archify/blob/main/README_EN.md) starting at line 81.

### Can I run Archify examples without installing dependencies?

Yes. The HTML files in `/examples/` are fully self-contained and open directly in any browser. No Node.js installation or package management is required for viewing the pre-built demonstrations.

### How do I modify an existing Archify example?

Locate the corresponding JSON file (e.g., [`examples/web-app.architecture.json`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.architecture.json) for [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html)), edit the diagram structure, then run `node archify/bin/archify.mjs preview` with the appropriate diagram type to regenerate the HTML output.

### What diagram types do Archify examples cover?

The examples cover all supported types: **Architecture**, **Workflow**, **Sequence**, **Data-Flow**, and **Lifecycle** diagrams. Specific files like [`agent-tool-call.workflow.json`](https://github.com/tt-a1i/archify/blob/main/agent-tool-call.workflow.json) and [`agent-run.lifecycle.json`](https://github.com/tt-a1i/archify/blob/main/agent-run.lifecycle.json) demonstrate specialized use cases for each type.