# Archify Visual Presets: Classic, Signal‑Flow, Blueprint, and Editorial Explained > Explore Archify's visual presets: classic, signal-flow, blueprint, and editorial. Customize diagram styling and UI chrome with a single data-preset attribute. - Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify) - Tags: deep-dive - Published: 2026-08-15 --- **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 `` as shown in [`experiments/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/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 ``【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 ``【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 ``【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: ```html ... ... ... ``` ### Programmatic JavaScript Method Read from workflow metadata and apply dynamically: ```javascript // 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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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 `` 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.