# Complete Guide to Visual Presets in Archify: The 4 Built-in Styles Explained

> Discover Archify's four built-in visual presets: classic, signal-flow, blueprint, and editorial. Effortlessly style your architecture diagrams and enhance clarity with this complete guide.

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

---

**Archify provides four distinct visual presets—**classic**, **signal-flow**, **blueprint**, and **editorial**—that control the styling of architecture diagrams without altering their underlying geometry or topology.**

Archify is an open-source diagramming framework for software architecture that renders JSON-defined workflows into static HTML or interactive visualizations. The **visual presets** functionality allows you to switch between different aesthetic profiles by setting the `meta.visual_preset` property, ensuring your diagrams match their intended presentation context while maintaining consistent structural data.

## The Complete List of Visual Presets in Archify

According to the JSON Schema definition 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` field accepts exactly four string values. Each preset applies a specific CSS profile and rendering logic while preserving node positions, edge connections, and diagram IDs.

### classic (The Default Style)

The **classic** preset serves as the fallback default when no preset is specified. According to the CLI renderer implementation in `archify/renderers/shared/cli.mjs` at line 64, the code explicitly defaults to `'classic'` via `meta.visual_preset || 'classic'`. This preset provides a neutral, balanced aesthetic suitable for both light and dark themes, featuring standard node shapes and moderate contrast ratios.

### signal-flow (Motion-Forward Data Flow)

The **signal-flow** preset emphasizes directional data movement with luminous traces and animation-ready styling. This preset is ideal for demonstrating data pipeline architectures or real-time stream processing workflows where visualizing the "flow" direction is critical.

### blueprint (Design Review Optimized)

The **blueprint** preset applies a drafting-style geometry with precise grids, squared UI elements, and a muted color palette. It is specifically designed for technical design reviews, prioritizing structural accuracy and measurement readability over decorative styling.

### editorial (Publication Ready)

The **editorial** preset uses richer typography, subtle shading, and warm color schemes optimized for documentation sites and PDF exports. This style increases readability for external stakeholders who may view diagrams outside of technical monitoring contexts.

## How Visual Presets Work in the Source Code

The preset validation occurs in the schema layer, while the application logic resides in the shared CLI renderer. In [`archify/schemas/workflow.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/workflow.schema.json), the enumerated definition restricts values to prevent invalid styling requests:

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

```

The rendering pipeline accesses this value in `archify/renderers/shared/cli.mjs` at two critical points:
- Line 64 sets the default during metadata initialization: `visualPreset: meta.visual_preset || 'classic'`
- Line 151 injects the attribute into the HTML output: `const preset = \` data-preset="${esc(meta.visual_preset || 'classic')}"\`;`

This implementation guarantees that the preset is persisted as a `data-preset` attribute in the generated DOM, allowing CSS selectors to apply the appropriate styling rules.

## Implementing Visual Presets in Your Diagrams

To apply a visual preset, add the `visual_preset` key to your diagram's `meta` object. The following example demonstrates a workflow diagram configured for the **blueprint** style:

```json
{
  "schema_version": 2,
  "diagram_type": "workflow",
  "meta": {
    "title": "CI/CD Pipeline",
    "visual_preset": "blueprint"
  },
  "lanes": [
    { "id": "build", "label": "Build System" }
  ],
  "nodes": [
    { "id": "compile", "lane": "build", "label": "Compile" }
  ],
  "edges": [
    { "source": "compile", "target": "compile", "type": "self" }
  ]
}

```

You can also override the preset when rendering via the Archify CLI. While the CLI accepts flags, the underlying mechanism ultimately sets the `meta.visual_preset` property before processing:

```bash

# Render with the signal-flow preset

npx archify render pipeline.json --preset signal-flow > output.html

# Render with default classic preset (explicit)

npx archify render pipeline.json --preset classic > output.html

# Combine preset with dark theme

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

```

## Summary

- Archify supports exactly four **visual presets**: `classic`, `signal-flow`, `blueprint`, and `editorial`.
- The preset is defined in [`archify/schemas/workflow.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/workflow.schema.json) and defaults to `classic` as implemented in `archify/renderers/shared/cli.mjs`.
- Presets control only the visual styling (CSS profiles) and do not modify diagram geometry, IDs, or topology.
- Set presets via the `meta.visual_preset` JSON property or override them through CLI arguments.
- All presets work independently of the light/dark theme system.

## Frequently Asked Questions

### What is the default visual preset in Archify?

The default visual preset is **classic**. According to the source code in `archify/renderers/shared/cli.mjs` at line 64, the renderer explicitly falls back to `'classic'` when the `meta.visual_preset` field is undefined or falsy using the logical OR operator: `meta.visual_preset || 'classic'`.

### Can I override the visual preset from the command line?

Yes. While the preset is ultimately stored in the `meta.visual_preset` field, the Archify CLI allows you to specify a preset via command-line flags that inject the value into the metadata object during the rendering pipeline. This override mechanism ensures you can generate multiple visual variations from a single source file without modifying the JSON.

### Do visual presets affect the diagram's structure or IDs?

No. Visual presets are strictly presentational and do not alter the underlying topology. As defined in the JSON Schema and implemented in the rendering logic, changing the `visual_preset` value modifies only the CSS classes and styling attributes applied to the generated HTML, leaving node coordinates, edge connections, and unique identifiers intact.

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

Yes. Although the schema definition is located in [`archify/schemas/workflow.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/workflow.schema.json), the visual preset system is shared across all Archify renderers. The `archify/renderers/shared/cli.mjs` module handles preset logic for workflow, sequence, dataflow, lifecycle, and architecture diagram types, ensuring consistent styling capabilities regardless of diagram category.