# Archify Visual Presets: A Complete Guide to Using Classic, Signal‑Flow, Blueprint, and Editorial Themes
> Explore Archify visual presets including classic, signal-flow, blueprint, and editorial. Learn how to activate and use these themes to customize your documentation.
- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: deep-dive
- Published: 2026-09-02
---
**Archify provides four built‑in visual presets—`classic`, `signal‑flow`, `blueprint`, and `editorial`—that you activate by setting the `data-preset` attribute on the root `` element.**
Archify is an open‑source workflow visualization tool that renders architecture diagrams as interactive web pages. The **Archify visual presets** system lets you completely transform the look‑and‑feel of any workflow without modifying markup—simply swap a single data attribute. This guide covers every preset, its intended use case, and the three ways to apply or switch them at runtime.
## The Four Archify Visual Presets Explained
Archify ships with four distinct presets, each defined in [`generated/maka-regenerated.workflow.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.html). Every preset includes both dark and light theme variants that respond to the `data-theme` attribute.
### Classic Preset
**Use case:** Default, neutral presentation for generic workflows where no special emphasis is required.
The `classic` preset serves as Archify's fallback styling. It appears at the top of generated pages when no explicit preset is configured:
```html
```
In [`generated/maka-regenerated.workflow.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.html), the classic preset establishes baseline spacing, typography, and color variables that other presets override.
### Signal‑Flow Preset
**Use case:** "Motion‑forward" visual style for live dashboards, streaming pipelines, and UIs that should feel *alive*.
Activate with `data-preset="signal-flow"`. The preset header displays the badge "SIGNAL FLOW — an opt‑in, motion‑forward visual preset."
CSS rules for this preset are scoped to `[data-preset="signal-flow"]` at line 135 of [`generated/maka-regenerated.workflow.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.html), with distinct dark and light theme blocks. The styling emphasizes:
- Animated transition states
- High‑contrast flow indicators
- Real‑time status pulse effects
### Blueprint Preset
**Use case:** "Review‑first drafting" for design reviews, architecture proposals, and scenarios where viewers **inspect** rather than **act**.
Activate with `data-preset="blueprint"`. The header shows "BLUEPRINT — a review‑first drafting preset for deployment."
CSS definitions begin at line 204 in [`generated/maka-regenerated.workflow.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.html). Key traits include:
- Grid‑aligned structural annotations
- Hierarchical step numbering
- Technical drafting aesthetics (ruler marks, margin notes)
### Editorial Preset
**Use case:** "Publication‑minded" styling for blog‑style walkthroughs, case studies, and content that reads like an article.
Activate with `data-preset="editorial"`. The header displays "EDITORIAL — a warm, publication‑minded preset for design."
Found at line 281 in [`generated/maka-regenerated.workflow.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.html), this preset features:
- Warm color temperatures
- Tighter line‑height for prose readability
- Asymmetric layouts that favor storytelling over schematics
## How to Apply Archify Visual Presets
Archify offers three mechanisms for preset selection, all interoperable.
### Method 1: Static HTML Declaration
Set the `data-preset` attribute directly on the root element in your template or generated file:
```html
Architecture Review — Q3 2024
```
This approach is ideal for server‑side rendering or static site generation where the preset is known at build time.
### Method 2: Runtime JavaScript Toggle
Switch presets programmatically for interactive UIs:
```javascript
function setPreset(presetName) {
const validPresets = ['classic', 'signal-flow', 'blueprint', 'editorial'];
if (validPresets.includes(presetName)) {
document.documentElement.setAttribute('data-preset', presetName);
}
}
// Bind to custom controls
document.querySelectorAll('.preset-option').forEach(btn => {
btn.addEventListener('click', (e) => {
setPreset(e.target.dataset.preset);
});
});
```
The CSS responds instantly—no page reload required.
### Method 3: Toolbar UI Selector
Archify's built‑in toolbar provides a preset picker. In [`generated/maka-regenerated.workflow.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.html), the `.toolbar .preset-menu` section (around line 315) contains the `#btn-preset` button and dropdown options for Signal‑Flow, Blueprint, and Editorial.
Selecting an option updates `document.documentElement.dataset.preset`, triggering the same CSS scoping mechanism as manual attribute changes.
## Preserving Presets Across Sessions
To maintain state across page loads, read from URL parameters on initialization:
```javascript
(function initPresetFromURL() {
const params = new URLSearchParams(location.search);
const requested = params.get('preset');
const valid = ['classic', 'signal-flow', 'blueprint', 'editorial'];
if (valid.includes(requested)) {
document.documentElement.dataset.preset = requested;
}
})();
```
Users can now share direct links: `https://example.com/workflow?preset=signal-flow`
## Preset and Theme Coupling
All four Archify visual presets respect the `data-theme` attribute (`dark` | `light`). Each preset's CSS block contains parallel rules for both variants, so:
```html
```
...applies warm editorial colors with a dark background, while `data-theme="light"` inverts to light backgrounds without changing the editorial typographic structure.
## Build‑Time Default Configuration
In `scripts/build-gallery.mjs`, Archify injects the default preset via:
```javascript
const preset = options.visual_preset || 'classic';
```
Omitting `visual_preset` from your build configuration automatically selects `classic`.
## Summary
- **Four presets available:** `classic` (neutral default), `signal-flow` (motion‑forward), `blueprint` (review‑first), `editorial` (publication‑minded)
- **Activation mechanism:** `data-preset` attribute on `` element
- **Definition location:** CSS blocks in [`generated/maka-regenerated.workflow.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.html) (lines 131‑312)
- **UI control:** Toolbar preset menu with `#btn-preset` selector
- **Theme compatibility:** All presets work with `data-theme="dark"` or `data-theme="light"`
- **Runtime switching:** JavaScript attribute updates apply instantly without reload
## Frequently Asked Questions
### How do I set a default preset for all generated workflows?
Configure `visual_preset` in your build options passed to `scripts/build-gallery.mjs`. The script falls back to `'classic'` when unspecified, ensuring consistent output across CI pipelines.
### Can I create custom presets beyond the four built‑in options?
The current Archify implementation scopes CSS to hardcoded `data-preset` values. While you can override styles with additional CSS, extending the preset system to recognize new `data-preset` values requires modifying [`generated/maka-regenerated.workflow.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.html) and the toolbar validation logic in [`scripts/guide-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/guide-template.html).
### Do presets affect performance or bundle size?
No. All preset CSS ships in the single [`archify.css`](https://github.com/tt-a1i/archify/blob/main/archify.css) (or inline in generated HTML). Only the rules matching your active `data-preset` and `data-theme` combination apply—there is no runtime loading penalty for unused presets.
### Will preset selections persist if a user bookmarks the page?
Not automatically. The preset exists only in the DOM attribute. To preserve state, implement URL parameter synchronization as shown in the initialization example, ensuring shareable, reproducible views.