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

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:

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

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

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