deep-dive

Archify Visual Presets: A Complete Guide to Using Classic, Signal‑Flow, Blueprint, and Editorial Themes

September 2, 2026 tt-a1i/archify ↗

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 <html> 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. 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 lang="en" data-theme="light" data-preset="classic">

In 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, 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. 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, 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:

<!DOCTYPE html>
<html lang="en" data-theme="light" data-preset="blueprint">
<head>
  <meta charset="UTF-8">
  <title>Architecture Review — Q3 2024</title>
  <link rel="stylesheet" href="archify.css">
</head>
<body>
  <!-- Workflow renders with Blueprint styling -->
</body>
</html>

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:

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, 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:

(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 data-preset="editorial" data-theme="dark">

...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:

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 <html> element
  • Definition location: CSS blocks in 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 and the toolbar validation logic in scripts/guide-template.html.

Do presets affect performance or bundle size?

No. All preset CSS ships in the single 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.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"
Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →