# Archify Visual Presets: The Four Built-In Styles Explained

> Explore Archify's four built-in visual presets: Classic, Signal-Flow, Blueprint, and Editorial. Understand how each preset styles your diagrams without altering core data.

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

---

**Archify ships with four built-in visual presets—Classic, Signal-Flow, Blueprint, and Editorial—that control only the styling of generated diagrams without affecting underlying semantic IDs or geometry.**

Archify is an open-source diagramming framework (tt-a1i/archify) that decouples visual presentation from structural meaning through a strict intermediate representation (IR). The **visual presets** system lets you instantly re-theme any diagram while guaranteeing that canonical SVG geometry and semantic IDs remain stable—critical for downstream tooling that relies on persistent identifiers.

## The Four Built-In Visual Presets

Each preset is defined by the `meta.visual_preset` field in the JSON IR and enumerated in [`archify/schemas/README.md`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/README.md). All five renderers—`workflow`, `sequence`, `dataflow`, `lifecycle`, and `architecture`—expose the same enum values.

### Classic

**Classic** is the stable default preset that preserves the original look of all renderers. When `meta.visual_preset` is omitted from a diagram file, the rendering pipeline in `archify/renderers/shared/cli.mjs` automatically falls back to this value. This preset uses neutral palettes and standard motion curves, making it the safest choice for long-term documentation that must remain consistent across versions.

### Signal-Flow

**Signal-Flow** applies a “luminous motion-forward” style that adds bright colors and subtle animation to emphasize data flow. This preset is ideal for live presentations or debugging sessions where you need to draw the viewer’s eye along the path of execution. The styling increases saturation and applies glow effects while keeping the underlying topology identical to Classic.

### Blueprint

**Blueprint** is a high-contrast, engineering-review-oriented preset featuring dark-mode-friendly palettes, precise grids, and restrained trace motion. Designed for accessibility and long hours of technical review, it minimizes eye strain while maintaining clear distinction between component types. The Blueprint preset is referenced in [`archify/examples/production-deployment.architecture.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/production-deployment.architecture.json) as a recommended choice for infrastructure diagrams.

### Editorial

**Editorial** delivers a warm, publication-style aesthetic intended for documentation and executive presentations. It employs softer tones, increased whitespace, and typography that reads like a magazine spread. This preset sacrifices some information density for readability, making it perfect for export to PDF or inclusion in slide decks.

## How Visual Presets Work Under the Hood

Visual presets operate purely at the presentation layer. According to [`docs/research-visual-style-picker-2026-07-23.md`](https://github.com/tt-a1i/archify/blob/main/docs/research-visual-style-picker-2026-07-23.md), the design contract guarantees that switching presets **never** alters the canonical geometry or IDs in the IR. This stability boundary ensures that downstream automation—such as URL fragment links to specific nodes or diff tooling—remains functional regardless of the active theme.

The valid enum values are formally defined in [`archify/schemas/architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json) and documented in the central schema README. When the CLI renderer processes a diagram, it extracts `meta.visual_preset` from the JSON IR and applies the corresponding stylesheet, defaulting to `"classic"` if the field is missing:

```javascript
// From archify/renderers/shared/cli.mjs
render(diagram, {
  visualPreset: diagram.meta.visual_preset || 'classic'
});

```

## Applying Visual Presets in Practice

You can declare a preset declaratively in your diagram JSON, pass it programmatically via the renderer API, or toggle it interactively through the UI.

### Declarative Configuration

Set the `meta.visual_preset` field in your diagram file:

```json
{
  "schema_version": 1,
  "diagram_type": "architecture",
  "meta": {
    "title": "Production Deployment",
    "visual_preset": "blueprint"
  },
  "components": []
}

```

### Programmatic Rendering

When using the JavaScript API, the preset flows from the IR metadata into the renderer options:

```javascript
import { render } from '@archify/renderers';
import diagram from './my-diagram.json';

render(diagram, {
  visualPreset: diagram.meta.visual_preset || 'classic'
});

```

### Interactive Selection

The picker UI presents the four named options via a toolbar button. Users can also press **`S`** to fast-cycle through presets without opening the menu. The menu markup follows this structure:

```html
<button id="styleBtn" aria-haspopup="menu">Style</button>
<ul role="menu" id="styleMenu">
  <li role="menuitemradio" aria-checked="true">
    <span class="preset-sample classic"></span> Classic
  </li>
  <li role="menuitemradio" aria-checked="false">
    <span class="preset-sample signal-flow"></span> Signal-Flow
  </li>
  <li role="menuitemradio" aria-checked="false">
    <span class="preset-sample blueprint"></span> Blueprint
  </li>
  <li role="menuitemradio" aria-checked="false">
    <span class="preset-sample editorial"></span> Editorial
  </li>
</ul>

```

## Summary

- **Four presets** ship with Archify: Classic (default), Signal-Flow, Blueprint, and Editorial.
- **Stability guarantee**: Presets affect only CSS and animation; they never modify the IR’s semantic IDs or geometry.
- **Configuration**: Set `meta.visual_preset` in JSON IR, or override via the `visualPreset` option in `archify/renderers/shared/cli.mjs`.
- **Shortcuts**: Use the **Style** toolbar button or press **`S`** to cycle presets interactively.
- **Schema enforcement**: Valid values are defined in [`archify/schemas/architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json) and documented in [`archify/schemas/README.md`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/README.md).

## Frequently Asked Questions

### Do visual presets change the exported SVG structure?

No. According to the stability contract in [`docs/research-visual-style-picker-2026-07-23.md`](https://github.com/tt-a1i/archify/blob/main/docs/research-visual-style-picker-2026-07-23.md), visual presets only influence styling attributes. The exported SVG retains identical element IDs, path data, and DOM structure regardless of which preset is active.

### Can I create custom visual presets?

Currently, Archify supports only the four built-in presets enumerated in the JSON Schema. The `visual_preset` field accepts a closed enum (`classic`, `signal-flow`, `blueprint`, `editorial`) as defined in [`archify/schemas/architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json). Custom styling requires post-processing the SVG output or modifying the renderer internals directly.

### What happens if I omit the visual_preset field?

The renderer defaults to `classic`. In `archify/renderers/shared/cli.mjs`, the rendering logic explicitly falls back using `diagram.meta.visual_preset || 'classic'`, ensuring backward compatibility with legacy diagram files that predate the preset system.

### Are visual presets available in all diagram types?

Yes. All five renderers—`workflow`, `sequence`, `dataflow`, `lifecycle`, and `architecture`—implement the same `visual_preset` enum. This uniformity guarantees that you can switch a diagram’s renderer without losing the ability to apply your chosen theme.