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

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.

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 example located in the examples directory. This ensures consistent, predictable output regardless of your environment.

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.

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.

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.

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

archify demo

# Creates ./archify-demo.html

2. Generate in specific folder:

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

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

3. Open and verify (macOS example):

open archify-demo.html

After reviewing the sample, render your own architecture using:

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: 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: HTML template injected with rendered content to produce the final output file.

Summary

• The archify demo command creates a self-contained 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 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 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 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 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.

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