# Flow Variants for Data Flow Diagrams in Archify: Classic, Signal-Flow, and Blueprint Explained

> Explore Archify's flow variants for data flow diagrams: classic, signal-flow, and blueprint. Control edge rendering and animation using the flow_variant property.

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

---

**Archify supports three distinct flow variants for data flow diagrams—classic, signal-flow, and blueprint—that control edge rendering, animation behavior, and visual density through the `flow_variant` JSON property.**

Archify's data-flow renderer provides flexible styling options for architecture diagrams. When generating **flow variants for data flow diagrams**, you can choose between static documentation layouts, animated interactive dashboards, or detailed architectural blueprints by configuring a single schema property.

## Available Flow Variants in Archify

The renderer located in `archify/renderers/dataflow/render-dataflow.mjs` processes the `flow_variant` value to apply specific CSS classes and SVG filters. Each variant serves distinct documentation purposes.

### Classic Variant

The **classic** variant uses a static layout with straight edges and simple row-based stages. This is the default behavior when no `flow_variant` is specified.

Choose classic for print-oriented documentation or when minimal visual styling is required. The renderer applies basic stroke styling without animation classes.

### Signal-Flow Variant

The **signal-flow** variant emphasizes forward data movement through subtle arrow animations and flow-line highlights along the primary data path.

This variant suits interactive dashboards where information direction must be visually obvious. The renderer adds animation keyframes and path-tracing SVG filters when `flow_variant` is set to `"signal-flow"`.

### Blueprint Variant

The **blueprint** variant applies a diagram-centric layout with grid-like background guides, increased node spacing, and curved edges for dense diagrams.

Use blueprint for detailed architecture reviews requiring extra visual structure. The renderer activates decorative grid classes and bezier curve calculations in `render-dataflow.mjs` when this variant is selected.

## Configuring Flow Variants in JSON

Define your variant in the diagram's JSON specification according to the schema defined in [`archify/schema/dataflow.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schema/dataflow.schema.json).

```json
{
  "type": "dataflow",
  "name": "Product Analytics",
  "flow_variant": "signal-flow",
  "nodes": [
    { "id": "clicks", "label": "Web Clicks" },
    { "id": "events", "label": "Event Stream" },
    { "id": "dashboard", "label": "Dashboard" }
  ],
  "edges": [
    { "source": "clicks", "target": "events", "label": "→" },
    { "source": "events", "target": "dashboard", "label": "→" }
  ]
}

```

Valid values for `flow_variant` are `"classic"`, `"signal-flow"`, and `"blueprint"`. Omitting the property defaults to classic styling.

## Rendering Data Flow Diagrams

Import the renderer module to display configured diagrams in web applications.

```html
<script type="module">
import { renderDataflow } from "https://cdn.jsdelivr.net/npm/archify@latest/renderers/dataflow/render-dataflow.mjs";

fetch("./my-dataflow.json")
  .then(r => r.json())
  .then(spec => renderDataflow(spec, document.getElementById("viz")));
</script>

<div id="viz"></div>

```

The `renderDataflow` function parses the `flow_variant` property and applies the corresponding visual treatment during SVG generation.

## Summary

- Archify provides three **flow variants for data flow diagrams**: classic, signal-flow, and blueprint.
- The **classic** variant offers static, straight-line layouts optimal for print documentation.
- **Signal-flow** adds forward-motion animations ideal for interactive dashboards.
- **Blueprint** delivers grid-based layouts with curved edges for complex architecture reviews.
- Configure variants via the `flow_variant` property in your JSON schema, validated against [`archify/schema/dataflow.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schema/dataflow.schema.json).
- The rendering logic resides in `archify/renderers/dataflow/render-dataflow.mjs`.

## Frequently Asked Questions

### What is the default flow variant in Archify?

The default flow variant is **classic**. If you omit the `flow_variant` property from your JSON definition or explicitly set it to `"classic"`, the renderer produces a static layout with straight edges and minimal styling.

### How do I enable animations in my data flow diagram?

Set `"flow_variant": "signal-flow"` in your diagram JSON. This activates the forward-arrow animations and flow-line highlights implemented in the renderer to emphasize data direction.

### Where is the flow variant logic implemented in the source code?

The variant selection logic resides in **`archify/renderers/dataflow/render-dataflow.mjs`**. This module maps the `flow_variant` value to specific CSS classes and SVG filters. The allowed values are defined in **[`archify/schema/dataflow.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schema/dataflow.schema.json)**.

### Can I use different variants for different diagrams on the same page?

Yes. Each diagram configuration is independent. Instantiate separate `renderDataflow` calls with distinct JSON specifications containing different `flow_variant` values to render classic, signal-flow, and blueprint diagrams simultaneously.