# How to Use Archify Visual Presets: Classic, Signal-Flow, Blueprint, and Editorial > Learn to use Archify visual presets like Classic, Signal-Flow, Blueprint, and Editorial to style diagrams with CSS variables. Easily activate presets via JSON, CLI, or keyboard shortcuts. - Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify) - Tags: how-to-guide - Published: 2026-08-03 --- **Archify provides four visual presets—**classic**, **signal-flow**, **blueprint**, and **editorial**—that change the viewer's styling via CSS variables while preserving diagram geometry, and you can activate them through the JSON `meta.visual_preset` field, CLI `--visual-preset` flag, or the **S** keyboard shortcut in the viewer.** The **tt-a1i/archify** repository ships with these archify visual presets to instantly transform how architecture diagrams appear without altering their underlying structure. Each preset injects specific CSS variables into the generated HTML to control colors, grid styles, typography, and animation levels. ## The Four Visual Presets Explained Archify visual presets are purely presentational layers that modify the viewer's appearance while keeping node IDs, layout positions, and semantics identical. - **classic** (default): A neutral, stable appearance that serves as the baseline view for general-purpose diagram review. - **signal-flow**: A luminous, motion-forward style with subtle animations designed to highlight data-flow or request-path movement. - **blueprint**: A high-contrast drafting grid with squared-off edges and minimal motion, optimized for engineering reviews and print-ready documentation. - **editorial**: Warm, publication-style colors and typography intended for presentation-oriented documents and reports. ## Method 1: Configuring the Preset in JSON IR The most common way to set archify visual presets is within your diagram's JSON Intermediate Representation (IR). Set the `meta.visual_preset` field to one of the four enum values: `classic`, `signal-flow`, `blueprint`, or `editorial`. ```json { "schema_version": 1, "diagram_type": "architecture", "meta": { "title": "Checkout Service", "visual_preset": "blueprint", "animation": "none" }, "components": [ { "id": "frontend", "type": "frontend", "label": "Web UI" }, { "id": "checkout", "type": "backend", "label": "Checkout API" }, { "id": "db", "type": "database", "label": "Postgres" } ], "connections": [ { "source": "frontend", "target": "checkout" }, { "source": "checkout", "target": "db" } ] } ``` The list of allowed values is documented in the schema at [`archify/schemas/README.md`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/README.md) (lines 24-26). When the renderer processes this file, it automatically applies the corresponding CSS variables to the generated HTML output. ## Method 2: Overriding via the CLI You can override the JSON setting or specify a preset directly from the command line using the `--visual-preset` flag. This is useful for generating multiple versions of the same diagram with different styling. ```bash npx skills use tt-a1i/archify@archify \ --agent codex \ --json examples/web-app.json \ --visual-preset signal-flow \ --output web-app-sf.html ``` According to the source code in `archify/renderers/shared/cli.mjs` (line 59), the CLI reads `meta.visual_preset || 'classic'`, falling back to the **classic** preset when none is specified in either the JSON or command-line arguments. ## Method 3: Switching at Runtime in the Viewer Every HTML artifact generated by Archify includes an accessible visual style picker that allows viewers to cycle through presets without re-rendering. Press **S** to open the preset menu, then use arrow keys or click to select a different style. The runtime implementation updates the `data-preset` attribute on both the `` and `` elements to reflect the active style instantly. This behavior is verified in the test suite at `archify/test/preset-tryon.test.mjs` (lines 40-46), which confirms the "S cycles" shortcut functionality across all renderers. ## Complete Working Examples ### Example 1: Blueprint Style for Engineering Documentation Create a JSON file with the **blueprint** preset for technical reviews: ```json { "$schema": "https://json-schema.org/draft/2020-12/schema", "schema_version": 1, "diagram_type": "architecture", "meta": { "title": "Payment Gateway", "visual_preset": "blueprint" }, "components": [ { "id": "gateway", "type": "backend", "label": "Payment API" }, { "id": "redis", "type": "cache", "label": "Redis Cluster" } ], "connections": [ { "source": "gateway", "target": "redis" } ] } ``` Render it with: ```bash node archify/bin/archify.mjs deliver architecture payment.json out.html ``` The generated [`out.html`](https://github.com/tt-a1i/archify/blob/main/out.html) will display in the **blueprint** style by default. ### Example 2: CLI Override for Signal-Flow Animation Force the **signal-flow** preset regardless of JSON settings: ```bash npx skills use tt-a1i/archify@archify \ --agent opencode \ --json examples/web-app.json \ --visual-preset signal-flow ``` ### Example 3: Runtime Style Switching 1. Open any generated Archify HTML file in a browser. 2. Press **S** to activate the style picker (element ID `btn-preset`). 3. Select **Editorial** from the menu. 4. Inspect the DOM to verify `data-preset="editorial"` appears on both the `` root and the `` container. ## Summary - Archify visual presets (**classic**, **signal-flow**, **blueprint**, **editorial**) modify only CSS variables and styling, never diagram geometry or IDs. - Set presets permanently in JSON via `meta.visual_preset` as documented in [`archify/schemas/README.md`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/README.md). - Override presets temporarily using the CLI `--visual-preset` flag, with **classic** as the fallback default per `cli.mjs`. - Switch presets interactively at runtime using the **S** key shortcut, which updates `data-preset` attributes instantly. ## Frequently Asked Questions ### Do visual presets affect the diagram structure or validation? No. Archify visual presets are purely presentational and never alter node IDs, layout positions, or the underlying IR. This guarantees that the same diagram source passes identical validation tests (`archify test …`) regardless of which preset is active. ### What is the default preset if none is specified? The default preset is **classic**. As implemented in `archify/renderers/shared/cli.mjs` (line 59), the renderer falls back to `classic` when `meta.visual_preset` is undefined and no CLI override is provided. ### Can I create custom visual presets? The current schema in [`archify/schemas/README.md`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/README.md) (lines 24-26) defines a closed enum of four values. While the runtime CSS variable system could theoretically support additional themes, the validator will reject any `visual_preset` value outside the built-in set of `classic`, `signal-flow`, `blueprint`, and `editorial`. ### Why does my generated HTML have data-preset attributes on both html and svg elements? The renderer applies the `data-preset` attribute to both the `` root and the `` container to ensure CSS selectors can target styles at either the document level or the graphic level. This dual-application supports the runtime picker functionality tested in `archify/test/preset-tryon.test.mjs`, allowing instant theme switching without re-rendering the diagram geometry.