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

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 at lines 81+. Each HTML file is self-contained and can be opened in any modern browser.

Example File	Purpose
examples/web-app.html	Interactive runtime map of a sample web application
examples/archify-repo.html	Archify's own pipeline diagram ("Archify pipeline")
examples/archify-repo-grid.html	Grid-based node placement demonstration
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 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 – Workflow diagram with agent tool call patterns
• product-analytics.dataflow.json – Data-flow scenario for product analytics pipelines
• 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

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:

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

# 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 points back to 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 (or 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 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 for 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 and agent-run.lifecycle.json demonstrate specialized use cases for each type.

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