# What Visual Presets Are Available in Archify?

> Explore Archify's four visual presets: classic, signal-flow, blueprint, and editorial. Easily style your diagrams with meta.visual_preset for a refined look without altering structure.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: documentation
- Published: 2026-09-06

---

**Archify provides four visual presets—`classic`, `signal-flow`, `blueprint`, and `editorial`—defined in the JSON schema and applied via the `meta.visual_preset` field to style diagrams without changing their underlying structure.**

The **visual preset** system in Archify lets authors switch between distinct visual styles while preserving all diagram geometry, IDs, and topology. This separation of presentation from data means you can render the same architecture file for different audiences—engineering reviews, executive presentations, or published documentation—simply by changing one metadata field.

## Where Visual Presets Are Defined

### The Core Schema Enum

The authoritative list of available visual presets lives 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 a strict enum:

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

```

This schema applies across all diagram types in the **tt-a1i/archify** repository, ensuring consistent preset availability whether you're building workflow, sequence, dataflow, or lifecycle diagrams.

### Renderer Default Handling

The CLI renderer in `archify/renderers/shared/cli.mjs` establishes the fallback behavior. At **line 64**, the code extracts the preset from metadata or defaults to `classic`:

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

```

At **line 151**, the preset is injected into the generated HTML as a data attribute:

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

```

## The Four Visual Presets Explained

### `classic`

- **Purpose**: Stable default that works across light and dark themes
- **Use case**: Standard documentation, version-controlled diagrams, CI/CD pipelines
- **Characteristics**: Original Archify visual language with balanced contrast and clean lines

### `signal-flow`

- **Purpose**: Motion-forward style emphasizing data-flow direction
- **Use case**: Animations, live presentations, streaming architecture demonstrations
- **Characteristics**: Luminous traces, directional emphasis, dynamic path highlighting

Referenced in example files such as [`archify/examples/incident-response.workflow.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/incident-response.workflow.json) where the preset is set to `signal-flow` for operational runbooks.

### `blueprint`

- **Purpose**: Geometry-preserving drafting style for design review workflows
- **Use case**: Technical design reviews, PR discussions, architectural decision records
- **Characteristics**: Precise grids, squared UI elements, muted color palette, measurement-friendly layouts

Demonstrated in [`archify/examples/production-deployment.architecture.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/production-deployment.architecture.json).

### `editorial`

- **Purpose**: Publication-oriented readability
- **Use case**: Blog posts, technical articles, conference slide decks, PDF exports
- **Characteristics**: Warm tones, richer typography hierarchy, subtle shading for print reproduction

## How to Apply Visual Presets

### In JSON Schema Files

Add the `visual_preset` field to your diagram's `meta` object:

```json
{
  "schema_version": 2,
  "diagram_type": "workflow",
  "meta": {
    "title": "Payment Processing Flow",
    "visual_preset": "blueprint"
  },
  "lanes": [
    { "id": "api", "label": "API Gateway" },
    { "id": "svc", "label": "Services" }
  ],
  "nodes": [
    { "id": "auth", "lane": "api", "label": "Authenticate" },
    { "id": "process", "lane": "svc", "label": "Process Payment" }
  ],
  "edges": [
    { "source": "auth", "target": "process", "type": "async" }
  ]
}

```

### Via CLI Override

Even without modifying the source file, you can specify a preset at render time. The CLI internally sets `meta.visual_preset` before generation:

```bash

# Render with explicit preset override

npx archify render payment-flow.json --preset editorial > payment-editorial.html

# Default behavior (no flag) uses "classic" or the file's existing preset

npx archify render payment-flow.json > payment-default.html

```

### Theme Independence

Visual presets operate independently of color themes. You can combine any preset with light or dark mode:

```bash

# Blueprint preset + dark theme

npx archify render architecture.json --preset blueprint --theme dark > review-dark.html

```

This independence is enforced by the renderer's CSS architecture—preset styling controls structural presentation (grids, shapes, typography scale) while theme variables control color values.

## File Locations for Reference

| Purpose | Path |
|---------|------|
| Schema enum definition | [[`archify/schemas/workflow.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/workflow.schema.json)](https://github.com/tt-a1i/archify/blob/main/archify/schemas/workflow.schema.json) |
| CLI preset handling | [`archify/renderers/shared/cli.mjs`](https://github.com/tt-a1i/archify/blob/main/archify/renderers/shared/cli.mjs) |
| Blueprint example | [[`archify/examples/production-deployment.architecture.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/production-deployment.architecture.json)](https://github.com/tt-a1i/archify/blob/main/archify/examples/production-deployment.architecture.json) |
| Signal-flow example | [[`archify/examples/incident-response.workflow.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/incident-response.workflow.json)](https://github.com/tt-a1i/archify/blob/main/archify/examples/incident-response.workflow.json) |
| Generated CSS for all presets | [[`generated/maka-regenerated.workflow.visual-check.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.visual-check.html)](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.visual-check.html) |

## Summary

- Archify defines **four visual presets** in its JSON schema: `classic`, `signal-flow`, `blueprint`, and `editorial`.
- Set `meta.visual_preset` in your diagram file, or override via `--preset` CLI flag.
- Presets control structural presentation; themes control colors—combine freely.
- The default fallback is `classic` as implemented in `archify/renderers/shared/cli.mjs`.
- All presets preserve diagram geometry and topology, enabling style switching without data loss.

## Frequently Asked Questions

### What happens if I specify an invalid visual preset?

The JSON schema validation will fail. Since `visual_preset` uses a strict enum in [`workflow.schema.json`](https://github.com/tt-a1i/archify/blob/main/workflow.schema.json), any value outside `"classic"`, `"signal-flow"`, `"blueprint"`, or `"editorial"` triggers a validation error at parse time.

### Can I create custom visual presets?

Not through official extension points. The enum is hardcoded in the schema, and the CLI renderer only recognizes the four defined values. Custom styling requires post-processing the generated HTML or modifying the source in `archify/renderers/shared/cli.mjs`.

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

The underlying diagram data remains identical—only the rendered appearance changes. SVG and PNG exports reflect the active preset at render time, but re-rendering with a different preset produces new output without altering source files.