# Supported Diagram Types in Archify: A Complete Guide to Visualization Modes

> Explore all six supported diagram types in Archify: Architecture, Sequence, Data-flow, Workflow, Deployment, and State-Machine. Visualize your models easily with Archify.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: how-to-guide
- Published: 2026-08-07

---

**Archify supports six distinct diagram types—Architecture, Sequence, Data-flow, Workflow, Deployment, and State-Machine/Lifecycle—that render from a single JSON model by specifying the `type` query parameter or selecting a view in the UI.**

Archify is a visual-first platform in the `tt-a1i/archify` repository that transforms machine-readable architecture descriptions into interactive diagrams. The **Diagram Type** system allows the same underlying data to be visualized in multiple formats, each optimized for specific architectural concerns, as implemented in the start page template and rendering API.

## Complete List of Supported Diagram Types

The `tt-a1i/archify` source code defines six visualization modes. These types are exposed in the UI via the **Diagram Type** tab bar located in [`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html), specifically within the `<div class="type-tabs">` element.

| Diagram Type | Typical Use Case | Query Parameter |
|--------------|------------------|-----------------|
| **Architecture Diagram** | High-level component and service layout (system blocks, external dependencies, data stores) | `type=architecture` |
| **Sequence Diagram** | Interaction flow between services over time (request-response chains, event processing) | `type=sequence` |
| **Data-flow Diagram** | Movement of data across system boundaries (ETL pipelines, streaming, batch jobs) | `type=dataflow` |
| **Workflow Diagram** | Step-by-step process definition (CI/CD pipelines, job orchestration) | `type=workflow` |
| **Deployment Diagram** | Mapping of services to runtime environments (containers, VMs, cloud regions) | `type=deployment` |
| **State-Machine / Lifecycle Diagram** | State transitions for long-living entities (order lifecycle, incident response) | `type=lifecycle` |

## How to Specify a Diagram Type

You can switch between diagram types using two methods: the web interface or the rendering API.

In the UI, the tab bar in [`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html) allows users to toggle between *Architecture*, *Sequence*, *Data-flow*, *Workflow*, *Deployment*, and *Lifecycle* views without modifying the underlying model.

Via the API, append the `type` query parameter to the render endpoint:

```text
https://archify.example.com/render?type=<DIAGRAM_TYPE>&model=<FILE_PATH>

```

## Code Examples by Diagram Type

The following JSON models demonstrate how each diagram type interprets the same architectural data differently.

### Architecture Diagrams

Use **Architecture Diagrams** to visualize high-level system structure. Reference implementation: [`archify/examples/web-app.architecture.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/web-app.architecture.json).

```json
{
  "name": "Sample Web App",
  "components": [
    { "id": "frontend", "type": "service", "label": "Web Frontend" },
    { "id": "api",      "type": "service", "label": "API Gateway" },
    { "id": "db",       "type": "store",   "label": "PostgreSQL" }
  ],
  "edges": [
    { "from": "frontend", "to": "api", "label": "HTTPS" },
    { "from": "api",      "to": "db",  "label": "SQL" }
  ]
}

```

Render endpoint:

```bash
https://archify.example.com/render?type=architecture&model=sample.json

```

### Sequence Diagrams

Use **Sequence Diagrams** to illustrate temporal interactions. Reference: [`examples/sequence-cache-miss-request.html`](https://github.com/tt-a1i/archify/blob/main/examples/sequence-cache-miss-request.html).

```json
{
  "name": "Cache Miss Request",
  "sequence": [
    { "actor": "Client", "action": "GET /resource", "to": "API" },
    { "actor": "API",    "action": "CacheLookup",   "to": "Cache" },
    { "actor": "Cache",  "action": "MISS",          "to": "DB" },
    { "actor": "DB",     "action": "SELECT",        "to": "API" },
    { "actor": "API",    "action": "CACHE STORE",   "to": "Cache" },
    { "actor": "API",    "action": "200 OK",        "to": "Client" }
  ]
}

```

Render endpoint:

```bash
https://archify.example.com/render?type=sequence&model=cache-miss.json

```

### Data-flow Diagrams

Use **Data-flow Diagrams** to track data movement across pipelines. Reference: [`archify/examples/product-analytics.dataflow.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/product-analytics.dataflow.json).

```json
{
  "name": "Analytics Dataflow",
  "nodes": [
    { "id": "ingest",   "type": "source", "label": "Event Ingestion" },
    { "id": "transform","type": "process","label": "Data Enrichment" },
    { "id": "warehouse","type": "store",  "label": "BigQuery" }
  ],
  "links": [
    { "from": "ingest",   "to": "transform" },
    { "from": "transform","to": "warehouse" }
  ]
}

```

Render endpoint:

```bash
https://archify.example.com/render?type=dataflow&model=analytics.json

```

### Workflow Diagrams

Use **Workflow Diagrams** for process orchestration. The repository provides an example in [`archify/examples/agent-tool-call.workflow.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/agent-tool-call.workflow.json). Render using `type=workflow`.

### Deployment Diagrams

Use **Deployment Diagrams** to map services to infrastructure. See [`archify/examples/deployment-release.lifecycle.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/deployment-release.lifecycle.json) for the underlying model. Render using `type=deployment`.

### State-Machine Diagrams

Use **State-Machine Diagrams** (also called **Lifecycle Diagrams**) to model entity state transitions. These share the same example file as Deployment Diagrams ([`deployment-release.lifecycle.json`](https://github.com/tt-a1i/archify/blob/main/deployment-release.lifecycle.json)) but render with `type=lifecycle`.

## Key Source Files

To explore how these diagram types are implemented, examine the following files in the `tt-a1i/archify` repository:

- **[`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html)** — Contains the UI **Diagram Type** tabs (`type-tabs` class) that enumerate supported visualizations.
- **[`archify/examples/web-app.architecture.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/web-app.architecture.json)** — Example model for **Architecture Diagrams**.
- **[`examples/sequence-cache-miss-request.html`](https://github.com/tt-a1i/archify/blob/main/examples/sequence-cache-miss-request.html)** — Rendered **Sequence Diagram** example output.
- **[`archify/examples/product-analytics.dataflow.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/product-analytics.dataflow.json)** — Model for **Data-flow Diagrams**.
- **[`archify/examples/agent-tool-call.workflow.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/agent-tool-call.workflow.json)** — Model demonstrating **Workflow Diagrams**.
- **[`archify/examples/deployment-release.lifecycle.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/deployment-release.lifecycle.json)** — Model used for both **Deployment** and **State-Machine/Lifecycle** diagrams.

## Summary

- Archify supports **six diagram types**: Architecture, Sequence, Data-flow, Workflow, Deployment, and State-Machine/Lifecycle.
- All types render from the **same JSON model structure**—switching views requires only changing the `type` parameter or UI tab selection.
- The supported types are defined in the UI markup within **[`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html)**.
- Example files for each diagram type are located in the `archify/examples/` directory (and `examples/` root for sequence HTML outputs).

## Frequently Asked Questions

### What file defines the supported diagram types in the Archify UI?

The **Diagram Type** tabs are defined in **[`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html)** within the `<div class="type-tabs">` element. This markup contains the labels for Architecture, Sequence, Data-flow, Workflow, Deployment, and Lifecycle views.

### Can I render the same model as different diagram types without modifying the JSON?

Yes. According to the `tt-a1i/archify` source code, you can pass any supported diagram type to the `type` query parameter (e.g., `type=architecture` vs `type=sequence`) while keeping the same JSON model file. The rendering engine adapts the visualization accordingly.

### What is the difference between Data-flow and Architecture diagrams in Archify?

**Architecture diagrams** emphasize structural relationships between components (services, stores, and their connections), while **Data-flow diagrams** emphasize the movement and transformation of data across pipeline stages (sources, processes, and destinations).

### Where can I find working examples for each diagram type?

Working examples are located in `archify/examples/` (and the root `examples/` folder):
- Architecture: [`web-app.architecture.json`](https://github.com/tt-a1i/archify/blob/main/web-app.architecture.json)
- Sequence: [`sequence-cache-miss-request.html`](https://github.com/tt-a1i/archify/blob/main/sequence-cache-miss-request.html)
- Data-flow: [`product-analytics.dataflow.json`](https://github.com/tt-a1i/archify/blob/main/product-analytics.dataflow.json)
- Workflow: [`agent-tool-call.workflow.json`](https://github.com/tt-a1i/archify/blob/main/agent-tool-call.workflow.json)
- Deployment/Lifecycle: [`deployment-release.lifecycle.json`](https://github.com/tt-a1i/archify/blob/main/deployment-release.lifecycle.json)