What Kind of Diagrams Does the Archify Sequence Renderer Create?

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

{
  "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, 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, 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. 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.

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