# How to Configure Visual Presets in Archify: Signal Flow, Blueprint, Classic, and Editorial
> Easily configure Archify visual presets like Signal Flow, Blueprint, Classic, and Editorial. Learn to set the visual_preset field or use the CLI flag for custom diagram styles.
- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: how-to-guide
- Published: 2026-08-08
---
**Archify supports four visual presets—Classic, Signal Flow, Blueprint, and Editorial—that you configure by setting the `visual_preset` field in your diagram's meta object or passing the `--preset` flag via CLI.**
Archify is an open-source architecture visualization engine that transforms JSON diagram definitions into rendered outputs. When you configure visual presets, you change the presentation layer—including colors, borders, and animation—while preserving the underlying semantic structure. This guide demonstrates how to implement **Classic**, **Signal Flow**, **Blueprint**, and **Editorial** modes using the `tt-a1i/archify` source code.
## Understanding the Four Visual Presets
Archify provides four distinct visual presets that cater to different presentation contexts. Each preset maps to specific CSS rules that control the rendering pipeline without modifying diagram geometry.
- **Classic**: The stable default offering minimal motion, muted color palettes, and static layouts. Use this for documentation that requires consistent, distraction-free visuals.
- **Signal Flow**: A motion-forward preset designed for live demos and presentations. It features luminous accent colors, ambient scan effects, and subtle animations that highlight data flow.
- **Blueprint**: A draft-first, review-oriented view characterized by crisp square borders, precise grid alignment, and restrained motion. Ideal for technical reviews and architecture sign-offs.
- **Editorial**: A publication-ready preset with warmer tones, larger typography, and minimal animation. Optimized for design hand-offs and stakeholder presentations.
## Configuring Presets in Diagram Metadata
The primary configuration method involves setting the `visual_preset` field within your diagram's **meta** object. The schema restricts values to the enum defined in [`archify/schemas/architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json): `["classic", "signal-flow", "blueprint", "editorial"]`.
```json
{
"schema_version": 1,
"diagram_type": "workflow",
"meta": {
"title": "Agent Tool Call Workflow",
"visual_preset": "signal-flow",
"animation": "trace",
"quality_profile": "showcase"
},
"lanes": [],
"nodes": [],
"edges": []
}
```
See the live example in [[`archify/examples/agent-tool-call.workflow.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/agent-tool-call.workflow.json)](https://github.com/tt-a1i/archify/blob/main/archify/examples/agent-tool-call.workflow.json).
## Overriding Presets via CLI
You can override the preset at render time using the `--preset` flag. The CLI renderer extracts `meta.visual_preset` or falls back to `"classic"` when not specified.
```bash
npx archify render workflow.json --preset blueprint
```
Internally, the CLI sets `meta.visual_preset` before invoking the rendering pipeline. In `archify/renderers/shared/cli.mjs` at line 59, the code establishes the preset with `visualPreset: meta.visual_preset || 'classic'`.
## Runtime Preset Switching in HTML
For web-based outputs, Archify injects the preset into the HTML `data-preset` attribute on the root `` element. This enables dynamic theme switching without re-rendering the diagram.
```html
Architecture Diagram
```
The renderer builds this attribute at line 146 of `archify/renderers/shared/cli.mjs` using `data-preset="${esc(meta.visual_preset || 'classic')}"`. CSS selectors in [`experiments/mco-showcase/mco-runtime.html`](https://github.com/tt-a1i/archify/blob/main/experiments/mco-showcase/mco-runtime.html) target these attributes to apply preset-specific styling.
## Validating Presets in Automated Tests
Because presets only affect presentation while preserving semantic IDs and layout, you can regression-test all four variants against the same underlying geometry. The test suite iterates through valid enum values to ensure schema compliance.
```javascript
import { validate } from '@archify/validator';
import workflow from './agent-tool-call.workflow.json';
for (const preset of ['classic', 'signal-flow', 'blueprint', 'editorial']) {
workflow.meta.visual_preset = preset;
const result = await validate('workflow', workflow);
console.log(`${preset}: ${result.ok ? 'PASS' : 'FAIL'}`);
}
```
Reference the full test implementation in `archify/test/preset-tryon.test.mjs`.
## How Presets Propagate Through the Rendering Pipeline
Understanding the preset propagation chain helps debug styling issues and customize CSS.
### Schema Validation
The `visual_preset` enum is strictly defined in [`archify/schemas/architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json), guaranteeing that only the four permitted values pass validation.
### CLI Renderer Extraction
In `archify/renderers/shared/cli.mjs`, the renderer extracts the preset at line 59 and injects it into the HTML output at line 146. This ensures the `data-preset` attribute always reflects the configured value or defaults to Classic.
### Gallery Generation
When building visual proofs, the gallery builder reads `source.meta.visual_preset` at line 273 of `scripts/build-gallery.mjs`, defaulting to `"classic"` if unspecified. This maintains consistency across automated documentation builds.
### CSS Implementation
The actual visual differences are implemented via CSS attribute selectors. The file [`experiments/mco-showcase/mco-runtime.html`](https://github.com/tt-a1i/archify/blob/main/experiments/mco-showcase/mco-runtime.html) contains rules such as `[data-preset="signal-flow"]`, `[data-preset="blueprint"]`, and `[data-preset="editorial"]` that control colors, borders, spacing, and animation keyframes.
## Summary
- Archify provides four visual presets—**Classic**, **Signal Flow**, **Blueprint**, and **Editorial**—configured via the `visual_preset` field in diagram metadata.
- The CLI supports runtime overrides using the `--preset` flag, processed in `archify/renderers/shared/cli.mjs`.
- HTML outputs use the `data-preset` attribute for CSS-driven styling, enabling dynamic switching without regeneration.
- Presets are validated against the JSON schema in [`archify/schemas/architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json) and tested in `archify/test/preset-tryon.test.mjs`.
- Because presets only modify presentation layers, semantic IDs, layout geometry, and exported assets remain identical across all configurations.
## Frequently Asked Questions
### What is the default visual preset if I don't specify one?
**Classic** is the default value. When `meta.visual_preset` is undefined, the CLI renderer in `archify/renderers/shared/cli.mjs` falls back to `"classic"` at line 59, and the gallery builder in `scripts/build-gallery.mjs` applies the same default at line 273.
### Can I switch presets after rendering without regenerating the diagram?
Yes. Since Archify injects the preset into the HTML `data-preset` attribute, you can change the visual style at runtime using JavaScript: `document.documentElement.setAttribute('data-preset', 'editorial')`. The underlying SVG geometry remains unchanged; only CSS rules update.
### Do visual presets affect exported PNG or SVG files?
No. Visual presets control HTML/CSS presentation only. According to the Archify source code, **semantic IDs**, **layout**, and **exported assets** remain identical across presets, ensuring consistent documentation outputs regardless of the selected view mode.
### Where is the preset validation defined?
The allowed values are defined as an enum in [`archify/schemas/architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json), which restricts `visual_preset` to `["classic", "signal-flow", "blueprint", "editorial"]`. This schema is enforced during validation and CLI processing to prevent invalid preset configurations.