# The Five Diagram Renderers in Archify: Architecture, Workflow, Sequence, Data Flow, and Lifecycle Explained

> Explore Archify's five diagram renderers: Architecture, Workflow, Sequence, Data Flow, and Lifecycle. Generate HTML/SVG artifacts from JSON with Archify's powerful visualization tools.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: deep-dive
- Published: 2026-09-09

---

**Archify ships five typed diagram renderers—Architecture, Workflow, Sequence, Data Flow, and Lifecycle—that each interpret the same JSON intermediate representation to produce self-contained HTML/SVG artifacts.**

The diagram renderers in Archify serve as the core visualization engine, transforming structured JSON IR into interactive system maps. Located in the modular `archify/renderers/` directory, these components share validation, layout, and branding logic while delivering deterministic output across five distinct architectural perspectives.

## The Five Diagram Renderers in Archify

Archify provides specialized diagram renderers, each targeting a specific aspect of system design. All five renderers consume the same typed JSON IR and generate consistent HTML/SVG outputs.

### Architecture Renderer

The **Architecture** renderer visualizes components, services, storage systems, and trust boundaries. It excels at high-level system layouts, deployment ownership mapping, and security boundary validation. This renderer is implemented in `archify/renderers/architecture/render-architecture.mjs` and is invoked via the CLI using `--type architecture`.

### Workflow Renderer

The **Workflow** renderer targets CI/CD pipelines, approval processes, tool calls, and operational runbooks. It handles ordered processes involving multiple participants and conditional branches. The core implementation resides in `archify/renderers/workflow/render-workflow.mjs`, accessible through the `--type workflow` flag.

### Sequence Renderer

The **Sequence** renderer illustrates time-ordered interactions such as API calls, cache fall-backs, and asynchronous traces between callers and callees. This diagram renderer in Archify is defined in `archify/renderers/sequence/render-sequence.mjs` and activated with `--type sequence`.

### Data Flow Renderer

The **Data Flow** renderer maps pipelines, data lineage, and PII consumers through transforms, stores, and external systems. It tracks how information moves across your architecture. The implementation lives in `archify/renderers/dataflow/render-dataflow.mjs`, selected via `--type dataflow`.

### Lifecycle Renderer

The **Lifecycle** renderer depicts state machines, retry mechanisms, wait states, and terminal outcomes. It captures the complete lifecycle of services or jobs, including error handling paths. Find this logic in `archify/renderers/lifecycle/render-lifecycle.mjs`, invoked using `--type lifecycle`.

## How to Use Diagram Renderers in Archify

The CLI entry point at `archify/bin/archify.mjs` parses the `--type` flag and dispatches to the appropriate renderer module. You can generate previews, validate inputs, or deliver final artifacts.

### Generating Diagrams via CLI

Use the `preview` command to generate self-contained HTML files:

```bash

# Architecture diagram

node archify/bin/archify.mjs preview architecture examples/web-app.architecture.json out-architecture.html

# Workflow diagram

node archify/bin/archify.mjs preview workflow examples/agent-tool-call.workflow.json out-workflow.html

# Sequence diagram

node archify/bin/archify.mjs preview sequence examples/checkout-platform-delta.json out-sequence.html

# Data Flow diagram

node archify/bin/archify.mjs preview dataflow examples/dataflow-example.json out-dataflow.html

# Lifecycle diagram

node archify/bin/archify.mjs preview lifecycle examples/lifecycle-example.json out-lifecycle.html

```

### Alternative CLI Operations

Replace `preview` with `validate` to run validation only, or `deliver` to write the final artifact without previewing. All commands accept the global `--type` flag with values: `architecture`, `workflow`, `sequence`, `dataflow`, or `lifecycle`.

### Natural Language Diagram Generation

The `guide` helper automatically selects the appropriate diagram renderer in Archify based on natural-language prompts:

```bash
node archify/bin/archify.mjs guide "Show an API request with Redis cache miss" --type sequence
node archify/bin/archify.mjs guide "Map Kafka topics, consumer groups, replay, and DLQ" --type dataflow

```

## Renderer Implementation Architecture

All five diagram renderers in Archify reside under the `archify/renderers/` directory as independent modules. Despite their specialized presentation logic, they share common validation, layout, and branding utilities, guaranteeing consistent styling and deterministic output across diagram types. The only variation between renderers is the **presentation** layer applied to the underlying graph structure.

Key implementation files:
- `archify/renderers/architecture/render-architecture.mjs` – Core Architecture renderer
- `archify/renderers/workflow/render-workflow.mjs` – Core Workflow renderer
- `archify/renderers/sequence/render-sequence.mjs` – Core Sequence renderer
- `archify/renderers/dataflow/render-dataflow.mjs` – Core Data Flow renderer
- `archify/renderers/lifecycle/render-lifecycle.mjs` – Core Lifecycle renderer

## Summary

- **Archify provides five diagram renderers**: Architecture, Workflow, Sequence, Data Flow, and Lifecycle.
- Each renderer interprets the same typed JSON IR but applies distinct visualization logic for specific use cases.
- Implementation files are located in `archify/renderers/<type>/render-<type>.mjs`.
- The CLI tool at `archify/bin/archify.mjs` dispatches to the correct renderer based on the `--type` parameter.
- All renderers share validation, layout, and branding logic, ensuring consistent output quality across diagram types.

## Frequently Asked Questions

### What are the diagram renderers in Archify?

Archify includes five typed diagram renderers: **Architecture** (for system components and trust boundaries), **Workflow** (for CI/CD and processes), **Sequence** (for API interactions), **Data Flow** (for data lineage), and **Lifecycle** (for state machines). Each renderer transforms JSON IR into self-contained HTML/SVG artifacts while sharing core validation and layout logic.

### How do I select a specific diagram renderer in Archify?

Specify the renderer using the `--type` flag in the CLI. Valid options are `architecture`, `workflow`, `sequence`, `dataflow`, and `lifecycle`. For example: `node archify/bin/archify.mjs preview sequence input.json output.html`.

### Where are the diagram renderers implemented in the Archify codebase?

Each diagram renderer in Archify is implemented as a standalone module under `archify/renderers/`. The Architecture renderer lives at `archify/renderers/architecture/render-architecture.mjs`, with equivalent paths for Workflow, Sequence, Data Flow, and Lifecycle renderers.

### Can the same JSON input work with multiple diagram renderers in Archify?

No, while all renderers consume typed JSON IR, each expects a structure specific to its visualization type. However, the consistent validation layer ensures that any valid input for a specific renderer will produce deterministic output across different CLI commands (preview, validate, deliver).