# What Does the `archify demo` Command Do? A Complete Guide

> Discover what the archify demo command does. Generate an HTML architecture diagram from a bundled example without your own input files for easy visualization.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: tutorial
- Published: 2026-07-13

---

**The `archify demo` command generates a ready-to-open HTML architecture diagram from a bundled example file, allowing users to visualize sample output without creating their own input files.**

The `archify demo` command serves as a quick-start utility for the Archify CLI, instantly creating a visual example of the tool's rendering capabilities. This sub-command eliminates the need to craft custom architecture JSON files before seeing your first diagram, making it ideal for newcomers validating their installation or exploring the output format.

## How the `archify demo` Command Works

Under the hood, the command executes a five-step pipeline defined in `archify/bin/archify.mjs` (lines 52-71). It handles path resolution, directory creation, and rendering automatically.

### 1. Output Path Resolution

First, the command determines where to write the generated HTML. If you provide a directory argument, it resolves that path; otherwise, it defaults to the current working directory.

```js
const outputDirectory = path.resolve(args[0] || process.cwd());
const output = path.join(outputDirectory, 'archify-demo.html');

```

### 2. Input Selection

The command always uses the bundled [`web-app.architecture.json`](https://github.com/tt-a1i/archify/blob/main/web-app.architecture.json) example located in the `examples` directory. This ensures consistent, predictable output regardless of your environment.

```js
const input = path.join(skillRoot, 'examples/web-app.architecture.json');

```

### 3. Directory Creation

Before rendering, the command ensures the target directory exists recursively using `fs.mkdirSync`.

```js
fs.mkdirSync(outputDirectory, { recursive: true });

```

### 4. Diagram Rendering

The actual visualization is generated by invoking the architecture renderer (`render-architecture.mjs`) with the example JSON as input.

```js
const result = runNode([rendererPath('architecture'), input, output]);

```

### 5. Success Reporting

Upon completion, the CLI prints the output path and suggests next steps for rendering your own diagrams.

```js
console.log(`\nDemo ready: ${output}`);
console.log('Next: open the HTML in your browser, then render your own diagram:');
console.log('  archify render architecture <input.json> <output.html>');

```

## Usage Examples

The `archify demo` command accepts an optional directory argument. Here are the three most common patterns:

1. **Generate in current directory** (default behavior):

```bash
archify demo

# Creates ./archify-demo.html

```

2. **Generate in specific folder**:

```bash
mkdir -p /tmp/my-demo
archify demo /tmp/my-demo

# Creates /tmp/my-demo/archify-demo.html

```

3. **Open and verify** (macOS example):

```bash
open archify-demo.html

```

After reviewing the sample, render your own architecture using:

```bash
archify render architecture my-app.json my-app.html

```

## Key Source Files

Understanding the `archify demo` implementation requires familiarity with these components:

- **`archify/bin/archify.mjs`** (lines 52-71): Implements the command logic, argument parsing, and orchestration.
- **[`archify/examples/web-app.architecture.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/web-app.architecture.json)**: The bundled sample architecture defining web application components.
- **`archify/renderers/architecture/render-architecture.mjs`**: Core renderer module that transforms JSON models into interactive HTML diagrams.
- **[`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html)**: HTML template injected with rendered content to produce the final output file.

## Summary

- The `archify demo` command creates a self-contained [`archify-demo.html`](https://github.com/tt-a1i/archify/blob/main/archify-demo.html) file using a bundled example architecture.
- It automatically handles directory creation and path resolution, requiring zero configuration from the user.
- The command sources input from [`examples/web-app.architecture.json`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.architecture.json) and renders via `render-architecture.mjs`.
- Output includes helpful next-step instructions for transitioning from the demo to custom diagram generation.

## Frequently Asked Questions

### What file does the `archify demo` command generate?

The command generates an [`archify-demo.html`](https://github.com/tt-a1i/archify/blob/main/archify-demo.html) file containing a fully rendered architecture diagram. This HTML file is self-contained and opens directly in any modern web browser without additional dependencies.

### Can I use my own JSON file with the demo command?

No. The `archify demo` command specifically uses the bundled [`web-app.architecture.json`](https://github.com/tt-a1i/archify/blob/main/web-app.architecture.json) example file. To render your own architecture definitions, use the `archify render architecture` command instead, passing your custom JSON file as an argument.

### Where does the demo command place the output file?

By default, the file is created in your current working directory. You can specify a custom directory by passing it as an argument: `archify demo /path/to/directory`. The command automatically creates the directory if it does not exist.

### Is the generated HTML file portable?

Yes. The resulting [`archify-demo.html`](https://github.com/tt-a1i/archify/blob/main/archify-demo.html) is a standalone file that you can open locally, email to stakeholders, or host on a static web server. It contains all necessary styles and scripts embedded within the single HTML output.