# Complete Guide to Visual Presets in Archify: Classic, Signal-Flow, Blueprint, and Editorial

> Explore Archify's visual presets: classic, signal-flow, blueprint, and editorial. Easily control diagram styling without changing geometry. Discover how to enhance your visualizations.

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

---

**Archify supports four distinct visual presets—`classic`, `signal-flow`, `blueprint`, and `editorial`—that control diagram styling through the `meta.visual_preset` property without altering underlying geometry.**

Archify is an open-source architecture diagramming framework (available at `tt-a1i/archify`) that separates visual presentation from structural topology. The **visual preset** system enables teams to switch between distinct styling profiles—ranging from technical blueprints to editorial layouts—while preserving node positions, edge connections, and diagram semantics.

## Available Visual Presets in Archify

The four presets are enumerated in the core schema and implemented consistently across all diagram types. In [`archify/schemas/workflow.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/workflow.schema.json) at line 36, the `visual_preset` property is defined as:

```json
"visual_preset": {
  "enum": ["classic", "signal-flow", "blueprint", "editorial"]
}

```

Each preset serves a specific presentation context:

### Classic

The **classic** preset serves as the stable default style compatible with both light and dark themes. It provides the original Archify visual language with balanced contrast and neutral styling. According to the CLI renderer implementation in `archify/renderers/shared/cli.mjs` (line 64), this preset is applied when no explicit value is provided:

```javascript
visualPreset: meta.visual_preset || 'classic',

```

### Signal-Flow

The **signal-flow** preset applies a luminous, motion-forward aesthetic that emphasizes data-flow direction through animated traces and directional styling. This preset is optimized for diagrams illustrating real-time data streams or event-driven architectures. The English documentation ([`README_EN.md`](https://github.com/tt-a1i/archify/blob/main/README_EN.md), line 229) demonstrates this preset in production deployment examples.

### Blueprint

The **blueprint** preset adopts a geometry-preserving drafting style designed for technical review workflows. It renders precise grids, squared UI elements, and a muted color palette suited for design reviews and engineering documentation. This style maintains exact node dimensions while adding construction-guide aesthetics.

### Editorial

The **editorial** preset provides a warm, publication-oriented layout focusing on readability and typographic hierarchy. It employs richer text styling and subtle shading optimized for PDF exports, documentation sites, and presentation decks where narrative clarity takes precedence over technical drafting conventions.

## Schema Definition and Validation

Visual presets are validated against the JSON Schema definitions located in the repository's schema directory. The canonical definition resides in the workflow schema, though the same enumeration applies to sequence, dataflow, lifecycle, and architecture diagram types.

The strict enum constraint ensures that only recognized preset values pass validation:

```json
{
  "meta": {
    "title": "System Architecture",
    "visual_preset": "blueprint"
  }
}

```

Attempting to use an undefined preset value will trigger a schema validation error during the rendering pipeline.

## CLI Implementation and Rendering Pipeline

The command-line interface processes visual presets through the shared renderer located at `archify/renderers/shared/cli.mjs`. The implementation handles preset resolution in two phases:

**1. Default Resolution (Line 64)**

The renderer extracts the preset from diagram metadata, falling back to `classic` when undefined:

```javascript
const visualPreset = meta.visual_preset || 'classic';

```

**2. HTML Injection (Line 151)**

The resolved preset is injected as a data attribute in the generated HTML output:

```javascript
const preset = ` data-preset="${esc(meta.visual_preset || 'classic')}"`;

```

This attribute enables CSS selectors to apply preset-specific styling rules without modifying the SVG geometry or JavaScript logic.

## Practical Usage Examples

Configure the visual preset directly in your diagram JSON file within the `meta` object:

```json
{
  "schema_version": 2,
  "diagram_type": "workflow",
  "meta": {
    "title": "Payment Processing Flow",
    "visual_preset": "signal-flow"
  },
  "lanes": [
    { "id": "api", "label": "API Gateway" }
  ],
  "nodes": [
    { "id": "auth", "lane": "api", "label": "Authenticate" }
  ],
  "edges": [
    { "source": "auth", "target": "auth", "type": "self" }
  ]
}

```

Override the preset at render time using the Archify CLI:

```bash

# Render with the blueprint preset

npx archify render architecture.json --preset blueprint > output.html

# Render with default classic preset

npx archify render workflow.json > classic.html

# Combine with dark theme while preserving preset

npx archify render diagram.json --theme dark --preset editorial > dark-editorial.html

```

The `--preset` flag assigns the value to `meta.visual_preset` only if the field is absent from the source file, ensuring declarative JSON configurations take precedence over command-line arguments.

## Summary

- Archify provides four validated **visual presets**: `classic`, `signal-flow`, `blueprint`, and `editorial`.
- Presets are defined in [`archify/schemas/workflow.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/workflow.schema.json) (line 36) and apply universally across diagram types.
- The CLI renderer (`archify/renderers/shared/cli.mjs`) defaults to `classic` (line 64) and injects the preset as a `data-preset` HTML attribute (line 151).
- Configuration occurs via the `meta.visual_preset` JSON property or the `--preset` CLI flag.
- Presets affect only visual styling; they preserve diagram geometry, edge routing, and semantic structure across exports.

## Frequently Asked Questions

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

Archify supports four enumerated visual presets: **classic** (the default neutral style), **signal-flow** (directional motion styling), **blueprint** (technical drafting aesthetics), and **editorial** (publication-ready typography). These values are strictly validated against the schema defined in [`archify/schemas/workflow.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/workflow.schema.json).

### How do I set a visual preset in my diagram?

Set the `visual_preset` property inside the `meta` object of your diagram JSON file, using one of the four valid enum values. Alternatively, pass the `--preset` flag when invoking the Archify CLI to apply a preset at render time if the JSON omits the field.

### Does changing the visual preset affect diagram exports or structure?

No. Visual presets control only CSS-based styling and HTML data attributes. The underlying SVG geometry, node coordinates, edge paths, and semantic topology remain identical across all presets, ensuring that switching styles never breaks layout algorithms or exportable data formats.

### What happens if I don't specify a visual preset?

The renderer automatically defaults to the **classic** preset. In `archify/renderers/shared/cli.mjs` at line 64, the code explicitly falls back to `'classic'` when `meta.visual_preset` is undefined, ensuring consistent rendering behavior regardless of input file completeness.