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

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

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.

{
  "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:

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.

{
  "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:

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.

{
  "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:

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. Render using type=workflow.

Deployment Diagrams

Use Deployment Diagrams to map services to infrastructure. See 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) 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 — Contains the UI Diagram Type tabs (type-tabs class) that enumerate supported visualizations.
• archify/examples/web-app.architecture.json — Example model for Architecture Diagrams.
• examples/sequence-cache-miss-request.html — Rendered Sequence Diagram example output.
• archify/examples/product-analytics.dataflow.json — Model for Data-flow Diagrams.
• archify/examples/agent-tool-call.workflow.json — Model demonstrating Workflow Diagrams.
• 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.
• 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 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
• Sequence: sequence-cache-miss-request.html
• Data-flow: product-analytics.dataflow.json
• Workflow: agent-tool-call.workflow.json
• Deployment/Lifecycle: deployment-release.lifecycle.json

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