deep-dive

Archify Visual Presets: Classic, Signal‑Flow, Blueprint, and Editorial Explained

August 15, 2026 tt-a1i/archify ↗

Archify ships with four built‑in visual presets—classic, signal‑flow, blueprint, and editorial—that control diagram styling, UI chrome, and motion behavior through a single data-preset HTML attribute.

These presets let you adapt the same workflow for different audiences and contexts without restructuring your diagram. Whether you need static documentation, animated walkthroughs, collaborative drafting, or polished publications, Archify's preset system configures colors, spacing, typography, and animation through declarative metadata.

What Are Visual Presets in Archify?

A visual preset is a named configuration that Archify applies to the entire rendering surface. The preset value is stored in workflow metadata under the visual_preset key and mapped to the document.documentElement via a data-preset attribute. According to the source code in scripts/build-gallery.mjs, the system falls back to "classic" when no preset is specified【source 1†https://github.com/tt-a1i/archify/blob/main/scripts/build-gallery.mjs#L273】.

Presets drive CSS rule specialization—selectors like [data-preset="signal-flow"][data-theme="dark"] override default variables to achieve preset‑specific aesthetics【source 6†https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.html#L129-L162】.

The Four Built‑In Presets

Classic Preset

Purpose: The original, static‑first preset with clean, high‑contrast layout and no motion‑forward animation.

Typical use: Print‑oriented documentation, PDF exports, or any context where motion is undesirable.

Default status: ✅ Yes—this is the fallback when visual_preset is missing or undefined.

Implementation: Set <html data-preset="classic"> as shown in experiments/visual-evolution/prototype.html【source 2†https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.html#L2】.

Signal‑Flow Preset

Purpose: An opt‑in motion preset that emphasizes dynamic data movement through trace‑style animations on edges and nodes.

Typical use: Interactive walkthroughs, live demonstrations, and tutorials where you need to visualize information flow in real time.

Implementation: Activate with <html data-preset="signal-flow">【source 3†https://github.com/tt-a1i/archify/blob/main/experiments/mco-showcase/mco-runtime.html#L2】. The preset adds CSS animations triggered by state changes, not by JavaScript per frame.

Blueprint Preset

Purpose: A review‑first preset with subdued colors and UI controls optimized for iterative design and stakeholder feedback.

Typical use: Early‑stage workflow creation, collaborative editing sessions, and draft reviews where the focus is on structure rather than polish.

Implementation: Use <html data-preset="blueprint">【source 4†https://github.com/tt-a1i/archify/blob/main/experiments/mco-showcase/mco-runtime.html#L204】. The CSS reduces saturation and emphasizes interactive elements like comments and revision markers.

Editorial Preset

Purpose: A publication‑oriented preset delivering warm, magazine‑style aesthetics with refined typography and spacing.

Typical use: Final‑ready presentations, read‑only reports, and external sharing where visual polish matters.

Implementation: Set <html data-preset="editorial">【source 5†https://github.com/tt-a1i/archify/blob/main/experiments/mco-showcase/mco-runtime.html#L281】. Accent colors shift toward warmer tones and line heights increase for readability.

How to Set and Switch Presets

Declarative HTML Method

Apply the preset directly to your document root:

<!-- Classic preset (default fallback) -->
<html lang="en" data-theme="dark" data-preset="classic">
  <head><!-- Archify head content --></head>
  <body><!-- diagram container --></body>
</html>

<!-- Signal-Flow preset for animated walkthroughs -->
<html lang="en" data-theme="dark" data-preset="signal-flow">
  ...
</html>

<!-- Blueprint preset for collaborative drafting -->
<html lang="en" data-theme="dark" data-preset="blueprint">
  ...
</html>

<!-- Editorial preset for polished publications -->
<html lang="en" data-theme="dark" data-preset="editorial">
  ...
</html>

Programmatic JavaScript Method

Read from workflow metadata and apply dynamically:

// Load preset from workflow definition, defaulting to 'classic'
const preset = workflow.meta?.visual_preset || 'classic';

// Apply to document root for CSS scoping
document.documentElement.setAttribute('data-preset', preset);

Source reference: scripts/build-gallery.mjs handles this exact pattern when rendering gallery previews【source 1†https://github.com/tt-a1i/archify/blob/main/scripts/build-gallery.mjs#L273】.

Key Source Files Reference

File	Role in Preset System
`scripts/build-gallery.mjs`	Reads `visual_preset` from workflow metadata, implements `"classic"` fallback【source 1†https://github.com/tt-a1i/archify/blob/main/scripts/build-gallery.mjs#L273】
`experiments/visual-evolution/prototype.html`	Prototype demonstrating classic and signal‑flow presets with theme integration【source 2†https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.html#L2-L162】
`experiments/mco-showcase/mco-runtime.html`	Comprehensive demo with signal‑flow, blueprint, and editorial implementations【source 3†https://github.com/tt-a1i/archify/blob/main/experiments/mco-showcase/mco-runtime.html#L2-L281】
Inline CSS in prototype HTML	Preset‑specific overrides using attribute selectors like `[data-preset="blueprint"] .card { … }`【source 6†https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.html#L129-L162】

Preset Selection Decision Guide

Choose classic when you need reliable, static output with maximum compatibility.
Choose signal‑flow when your audience needs to see data move through the system.
Choose blueprint when the diagram is unfinished and requires active collaboration.
Choose editorial when the artifact is final and intended for external consumption.

Summary

Archify provides four visual presets: classic, signal‑flow, blueprint, and editorial.
Presets are controlled via the data-preset attribute on the <html> element.
classic is the default fallback when no preset is specified in workflow metadata.
Each preset specializes CSS rules for color, spacing, typography, and animation.
The visual_preset metadata key stores the preferred preset in workflow definitions.

Frequently Asked Questions

How do I change the visual preset in an existing Archify workflow?

Retrieve the workflow object, update workflow.meta.visual_preset to your desired value ("classic", "signal-flow", "blueprint", or "editorial"), then call document.documentElement.setAttribute('data-preset', preset) to apply it. The change takes effect immediately as CSS rules recompute against the new attribute value.

Can I combine visual presets with different color themes?

Yes. The preset system operates independently from the theme system. You can pair any preset with data-theme="dark" or data-theme="light"—the CSS uses compound selectors like [data-preset="signal-flow"][data-theme="dark"] to handle combinations.

Is the classic preset required, or can I set a different default?

The classic preset is hardcoded as the fallback in scripts/build-gallery.mjs at line 273. To change the application‑wide default, you would need to modify that fallback value or ensure all workflows specify their preferred visual_preset explicitly in metadata.

Do presets affect diagram layout logic, or only visual styling?

Visual presets affect only styling and animation—they do not alter node positioning, edge routing, or graph topology. The same underlying layout engine runs regardless of preset, ensuring consistent structure across all four visual modes.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:

curl -s "https://instagit.com/install.md"

Add to your MCP client configuration:

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

Ask your agent:

"Use Instagit MCP to understand how tt-a1i/archify works."

Works with

Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →