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

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.

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

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

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.

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