# What Are the Visual Presets in Archify and How Do They Affect Rendering?

> Discover Archify's four visual presets classic signal-flow blueprint and editorial. Learn how these presets control diagram appearance and rendering without altering geometry or semantic IDs.

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

---

**Archify supports four visual presets—`classic`, `signal-flow`, `blueprint`, and `editorial`—that define a diagram’s look-and-feel through CSS variables and data attributes while preserving the underlying geometry and semantic IDs.**

The tt-a1i/archify repository implements a declarative styling system where visual presets act as a pure presentation layer. These presets are stored in a diagram’s JSON metadata under `meta.visual_preset` according to the [architecture schema](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json), and applied at runtime through HTML data attributes, enabling consistent rendering across different viewing contexts without modifying the architecture’s structural topology.

## The Four Visual Presets in Archify

The `meta.visual_preset` field accepts one of four enumerated values, each optimized for specific presentation contexts.

### Classic

The **classic** preset serves as the stable default when `meta.visual_preset` is omitted. It provides a balanced visual foundation that adapts to both light and dark color modes, making it the general-purpose choice for authoring and viewing. As documented in [[`archify/SKILL.md`](https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md)](https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md), this preset maintains independence from color mode settings while ensuring consistent contrast ratios across environments.

### Signal-Flow

The **signal-flow** preset implements a "luminous" style with motion-forward animation capabilities. This preset uses a distinct set of CSS variables for colors and grid layouts, enabling trace animations that highlight data-flow or runtime scenarios. Unlike other presets, `signal-flow` enables trace animation by default, though `meta.animation` can still override this to `none` if needed.

### Blueprint

The **blueprint** preset provides a draft-first, review-oriented style designed for engineering contexts. It applies tighter, engineering-grade grids with squared notation and a subdued color palette. This preset is ideal for design-review scenarios where drafting precision and clarity supersede aesthetic polish.

### Editorial

The **editorial** preset offers a warm, publication-oriented style optimized for reading and storytelling. It features larger typography, refined color schemes, and adjusted spacing that prioritizes readability. Use this preset when diagrams serve as polished visual assets in documentation, articles, or external communications.

## How Visual Presets Influence Rendering

When a diagram loads, the Archify viewer injects the active preset into the root element as a data attribute (`data-preset="…"`) and selects corresponding CSS rules. This mechanism, implemented in [`archify/renderers/shared/cli.mjs`](https://github.com/tt-a1i/archify/blob/main/archify/renderers/shared/cli.mjs), affects rendering in four specific dimensions:

- **Colors and theme tokens** – Each preset defines its own palette that layers on top of the selected light/dark theme, overriding specific CSS variables without changing the base color mode.
- **Grid and layout** – The `blueprint` preset tightens the grid for engineering precision, while `signal-flow` and `editorial` adjust spacing to accommodate motion paths or readable typography.
- **Motion configuration** – Only `signal-flow` enables trace animation by default; other presets respect the `meta.animation` setting independently.
- **Export assets** – Share-card PNGs and WebM exports respect the active preset to ensure exported images match the viewer’s current state, as detailed in [[`archify/references/viewer-runtime.md`](https://github.com/tt-a1i/archify/blob/main/archify/references/viewer-runtime.md)](https://github.com/tt-a1i/archify/blob/main/archify/references/viewer-runtime.md).

## Implementing Visual Presets in Code

### Loading a Diagram with a Specific Preset

The `loadDiagram` function from `@archify/renderer` automatically reads the `meta.visual_preset` field and applies it to the document root:

```javascript
import { loadDiagram } from '@archify/renderer';

// The JSON file contains meta.visual_preset = 'signal-flow'
const diagram = await loadDiagram('incident-response.workflow.json');

// The viewer automatically applies the preset:
document.documentElement.dataset.preset = diagram.meta.visual_preset || 'classic';

```

### Runtime Preset Override

You can switch presets dynamically without reloading the diagram JSON, as the preset is a pure styling layer:

```javascript
function setPreset(preset) {
  if (!['classic','signal-flow','blueprint','editorial'].includes(preset)) return;
  document.documentElement.dataset.preset = preset;
  // Re-render or refresh as needed to apply new CSS variables
}

```

### Validating Preset Independence

Since visual presets do not affect semantic IDs or node positions, you can verify that a diagram validates correctly regardless of the selected style:

```javascript
import { validate } from '@archify/validator';
import fs from 'fs';

const json = JSON.parse(fs.readFileSync('production-deployment.architecture.json'));
json.meta.visual_preset = 'blueprint';
const result = validate('architecture', json);
console.assert(result.ok, 'Blueprint preset should still validate against the schema');

```

## Summary

- Archify provides **four visual presets**: `classic`, `signal-flow`, `blueprint`, and `editorial`, defined in [`archify/schemas/architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json).
- Presets are stored in `meta.visual_preset` and applied via the `data-preset` attribute on the root HTML element.
- They function as a **pure styling layer**, leaving semantic IDs, node positions, and relationship definitions unchanged.
- Presets control **colors, grid density, motion defaults, and export asset generation** while maintaining validation compatibility.
- The `classic` preset serves as the default when no preset is specified, functioning across both light and dark modes.

## Frequently Asked Questions

### What are the four visual presets available in Archify?

Archify supports `classic` (the stable default), `signal-flow` (luminous with motion), `blueprint` (engineering-grade grids), and `editorial` (publication-optimized typography). These values are enumerated in the Architecture schema under `meta.visual_preset` and demonstrated in the [mco-showcase runtime](https://github.com/tt-a1i/archify/blob/main/experiments/mco-showcase/mco-runtime.html).

### How do I change the visual preset programmatically?

Set the `data-preset` attribute on the document root element to one of the four valid values. The diagram will re-render with the new CSS variables without requiring a JSON reload. You can also modify `meta.visual_preset` in the source JSON before calling `loadDiagram()`.

### Will switching visual presets affect my diagram's structure or validation?

No. Visual presets are a pure styling layer that does not affect semantic IDs, node positions, or relationship definitions. The same JSON topology validates identically across all presets, enabling reliable testing and QA workflows as discussed in the [research-visual-evolution-round-6](https://github.com/tt-a1i/archify/blob/main/docs/research-visual-evolution-round-6.md) documentation.

### Which preset should I use for design reviews versus documentation?

Use **blueprint** for design reviews and engineering contexts where precise grids and drafting notation are required. Use **editorial** for documentation, articles, or any scenario where the diagram functions as a polished visual asset for external audiences.