# What Kind of Diagrams Does the Archify Sequence Renderer Create?

> Archify sequence renderer generates UML sequence diagrams visualizing ordered interactions with lifelines and activation bars. Understand complex system flows easily.

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

---

**The Archify sequence renderer creates UML-style sequence diagrams that visualize ordered interactions between participants using straight-line messages, vertical lifelines, and optional activation bars.**

The Archify sequence renderer is a specialized visualization component in the `tt-a1i/archify` open-source repository. It transforms structured JSON payloads into clean, ordered sequence diagrams that emphasize exact message ordering while maintaining deliberately simple visual layout rules.

## UML Sequence Diagrams with Strict Visual Invariants

The Archify sequence renderer produces **sequence diagrams** that conform to UML standards but enforce specific layout constraints. According to the implementation details in `/docs/research-visual-evolution-round-46.md#L589-L590`, the renderer maintains strict invariants: all messages use a **bend-stretch of 1.0** to guarantee straight horizontal segments, and lifelines are rendered as vertical lines with zero bends.

### Participant Lifelines and Layout Structure

At the top of every diagram, the renderer draws **participant** boxes that serve as the origin for vertical lifelines. In the generated SVG output found in [`/examples/sequence-cache-miss-request.html`](https://github.com/tt-a1i/archify/blob/main//examples/sequence-cache-miss-request.html), these appear within the `<g id="participants">` group. Each participant maintains a consistent y-position across the diagram, with straight vertical lines extending downward to represent the timeline.

## Supported Sequence Diagram Elements

### Messages and Return Flows

Horizontal arrows between lifelines represent calls or data flows. The renderer draws these as straight lines without bends, preserving the zero-bend rule specified in the source code. **Return messages** follow the same styling but travel in reverse direction, maintaining visual consistency with forward message arrows.

### Activation Bars and Sequence Groups

When the JSON payload includes an **activation** flag, the renderer draws optional rectangles on lifelines to indicate active periods. Additionally, **sequence groups** create visual containers as colored bands that group related messages. These are defined via the `segments` array in the input data, useful for highlighting logical phases like request flows or error handling.

### Self-Message Limitations

**Self-messages**—loops that start and end on the same lifeline—are treated as a special case. According to `/docs/research-visual-evolution-round-46.md#L590-L591`, these are currently unsupported or evaluated separately in the rendering pipeline.

## Configuring Sequence Diagrams in Archify

### JSON Payload Structure

The renderer accepts a JSON payload defining participants, messages, and styling options. Here is a minimal example that generates a three-participant request flow:

```json
{
  "type": "sequence",
  "participants": [
    { "id": "client", "label": "Client" },
    { "id": "service", "label": "Service" },
    { "id": "db", "label": "Database" }
  ],
  "messages": [
    { "from": "client", "to": "service", "label": "GET /items" },
    { "from": "service", "to": "db", "label": "SELECT * FROM items" },
    { "from": "db", "to": "service", "label": "rows" },
    { "from": "service", "to": "client", "label": "200 OK" }
  ],
  "segments": [
    {
      "label": "Request flow",
      "messages": [0, 1, 2, 3],
      "color": "#e0e7ff"
    }
  ]
}

```

### Styling and Color Palette

Colors default to the global palette defined in [`scripts/gallery-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/gallery-template.html), where sequence diagrams use `#6d28d9` as the primary color. Individual messages or participants can override these defaults through the JSON payload, allowing custom branding while maintaining the consistent zero-bend layout.

## Summary

- The Archify sequence renderer generates **UML-compliant sequence diagrams** with strict layout invariants.
- It renders **participants** as boxes with vertical **lifelines**, **messages** as straight horizontal arrows, and optional **activation bars**.
- All horizontal lines use a **bend-stretch of 1.0** to ensure zero bends and consistent spacing.
- **Sequence groups** allow logical grouping of messages via colored segments defined in the `segments` array.
- Self-messages are recognized but currently handled as a special case with limited support.

## Frequently Asked Questions

### What input format does the Archify sequence renderer use?

The renderer accepts a JSON payload with a top-level `type` field set to `"sequence"`. This payload must include `participants` and `messages` arrays, with optional `segments` for grouping and `activation` flags for showing active periods. The structure is parsed by the renderer logic referenced in `scripts/start-template.html#L220-L284`.

### Does Archify support self-messages in sequence diagrams?

Self-messages—arrows that loop back to the same participant—are identified as a special case in the codebase according to `/docs/research-visual-evolution-round-46.md#L590-L591`. However, they are currently unsupported or evaluated separately, meaning the renderer focuses primarily on inter-participant message flows.

### How are sequence diagram colors configured in Archify?

The default color palette is defined in [`scripts/gallery-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/gallery-template.html), which assigns `#6d28d9` as the primary sequence diagram color. Users can override this globally or specify per-message and per-participant colors within the JSON payload to match specific branding requirements.

### Where can I see a working example of an Archify sequence diagram?

The repository includes a complete rendered example at [`/examples/sequence-cache-miss-request.html`](https://github.com/tt-a1i/archify/blob/main//examples/sequence-cache-miss-request.html). This file demonstrates the full SVG output including participants, lifelines, straight-line messages, and grouped segments, showing how the renderer visualizes a cache-miss request flow between multiple participants.