deep-dive

Archify Visual Presets Rendering Differences: A Complete Technical Guide

August 31, 2026 tt-a1i/archify ↗

Archify visual presets change every diagram's appearance through CSS custom properties toggled via the data-preset attribute, with four built-in styles—classic, signal-flow, blueprint, and editorial—each offering distinct color palettes, accent treatments, and typographic treatments.

Archify ships with a visual preset system that instantly restyles generated diagrams, workflows, and UI views without JavaScript recomputation. Understanding these rendering differences helps you select the right preset for technical documentation, live data visualizations, or publication-ready outputs. This guide examines the implementation in tt-a1i/archify source code.

How Archify Visual Presets Work

The preset mechanism relies on declarative CSS attribute selectors. Each generated HTML file contains blocks of CSS custom properties scoped to [data-preset="..."][data-theme="..."] combinations. When you change an attribute, the browser instantly applies the matching variable set—no re-render required.

Core Activation Mechanism

Archify uses two data attributes on the root <html> element:

  • data-preset — selects the visual style (classic, signal-flow, blueprint, editorial)
  • data-theme — switches between light and dark mode variants

The default configuration appears in generated/maka-regenerated.workflow.html:

<html data-theme="dark" data-preset="classic">

Running JavaScript like document.documentElement.setAttribute('data-preset', 'blueprint') triggers an immediate visual shift. This approach eliminates flicker and maintains performance even on complex diagrams.

Theme Detection Logic

A small inline script in generated/maka-regenerated.workflow.html (lines 10-30) handles automatic theme selection:

// Excerpt from theme detection script
const theme = localStorage.getItem('theme') 
  || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);

This ensures preset-specific color sets align with user or OS preferences before the page renders.

The Four Archify Visual Presets Explained

Each preset serves a distinct purpose, with CSS definitions located in generated/maka-regenerated.workflow.html at specific line ranges.

Classic Preset (Default)

Classic provides the baseline neutral palette used when no explicit preset is chosen. It prioritizes versatility over strong visual character.

  • CSS location: Lines 2-34 in generated/maka-regenerated.workflow.html
  • Background: Dark #020617 / Light #f8fafc
  • Arrow accent: Mid-gray #64748b
  • Best for: General-purpose diagrams where content matters more than visual flair

The classic preset uses subtle rgba fills for component categories (backend, database, cloud) without dramatic color saturation.

Signal-Flow Preset

Signal-flow is an opt-in, motion-forward style emphasizing dynamic arrows and bright accent colors. It targets live-data or real-time flow visualizations.

  • CSS locations: Dark theme lines 35-67; light theme lines 68-101
  • Background: Dark #030711 (deeper than classic) / Light #f4f9fc (lighter)
  • Arrow accent: Cool #7890ad (dark) / #7b97aa (light)
  • Component fills: Brighter rgba values creating "glow" effects, like rgba(6,182,212,0.14) for frontend components
  • Best for: Real-time dashboards, data pipelines, animations

The signal-flow preset adds colored .preset-control-mark indicators in the toolbar to highlight the active selection.

Blueprint Preset

Blueprint favors muted, blueprint-like tones and high-contrast outlines for design reviews and technical documentation.

  • CSS locations: Dark theme lines 102-138; light theme lines 139-172
  • Background: Dark #0a0a1a (muted) / Light #ffffff (plain)
  • Arrow accent: Emerald #34d399 (dark) / #059669 (light)
  • Component fills: Desaturated values emphasizing contrast, like rgba(34,211,238,0.15) in light mode
  • Toolbar treatment: Modified --toolbar-bg variable for the preset menu
  • Best for: Design reviews, architecture diagrams, technical specifications

Editorial Preset

Editorial delivers a warm, publication-minded aesthetic with softer backgrounds and enhanced typographic hierarchy.

  • CSS locations: Dark theme lines 173-209; light theme lines 210-244
  • Background: Matches classic (#020617 / #f8fafc)
  • Arrow accent: Same emerald as blueprint (#34d399 / #059669)
  • Typography: Larger heading size with explicit weight—font-size: 1.72rem; font-weight: 600 (lines 695-701)
  • Component fills: Warm tones with soft borders optimized for readability in long-form content
  • Best for: Articles, blog posts, story-driven documentation

Rendering Differences: Side-by-Side Comparison

Visual Aspect Classic Signal-Flow Blueprint Editorial
Background depth Neutral Deeper dark / Lighter light Muted dark / Plain white Same as classic
Arrow emphasis Subtle gray Cool blue tones Emerald green Emerald green
Fill saturation Low High (glow effect) Desaturated (contrast) Warm (readable)
Typography scale Default Default Default 1.72rem headings
Motion cueing None Strong (designed for animation) None None
Toolbar styling Generic Colored active indicator Modified menu background Softer hover states

Toolbar UI and User Control

The preset selector resides in scripts/start-template.html (lines 402-409). Users interact with a button group where each option carries data-preset-option attributes:

<!-- Excerpt from start-template.html toolbar markup -->
<button class="preset-option" data-preset-option="classic" aria-checked="true">Classic</button>
<button class="preset-option" data-preset-option="signal-flow">Signal-Flow</button>
<button class="preset-option" data-preset-option="blueprint">Blueprint</button>
<button class="preset-option" data-preset-option="editorial">Editorial</button>

Click handling updates both the data-preset attribute and accessibility states:

// Runtime preset switching (derived from template logic)
document.querySelectorAll('.preset-option').forEach(btn => {
  btn.addEventListener('click', () => {
    const preset = btn.dataset.presetOption;
    document.documentElement.dataset.preset = preset;
    
    // Update aria states for accessibility
    document.querySelectorAll('.preset-option').forEach(b => b.ariaChecked = 'false');
    btn.ariaChecked = 'true';
  });
});

Practical Implementation Examples

Static HTML with Preset Declaration

<!DOCTYPE html>
<html data-theme="light" data-preset="blueprint">
<head>
  <meta charset="UTF-8">
  <title>Blueprint Documentation</title>
  <link rel="stylesheet" href="archify-generated.css">
</head>
<body>
  <!-- Diagram content renders with blueprint styling -->
  <div class="workflow-container">
    <div class="node" data-type="service">API Gateway</div>
  </div>
</body>
</html>

Runtime Preset Switching

/**
 * Set Archify visual preset programmatically
 * @param {string} name - 'classic' | 'signal-flow' | 'blueprint' | 'editorial'
 */
function setArchifyPreset(name) {
  const valid = ['classic', 'signal-flow', 'blueprint', 'editorial'];
  if (!valid.includes(name)) {
    throw new Error(`Unknown preset: ${name}`);
  }
  document.documentElement.setAttribute('data-preset', name);
}

// Example: match preset to content type
const contentType = document.body.dataset.contentType;
const presetMap = {
  'live-metrics': 'signal-flow',
  'architecture-review': 'blueprint',
  'blog-post': 'editorial'
};
setArchifyPreset(presetMap[contentType] || 'classic');

Preserving User Selection

// Persist preset preference across sessions
function savePresetPreference(preset) {
  localStorage.setItem('archify-preset', preset);
  document.documentElement.dataset.preset = preset;
}

// Restore on page load
const saved = localStorage.getItem('archify-preset');
if (saved) {
  document.documentElement.dataset.preset = saved;
}

Key Source Files Reference

File Purpose Relevant Lines
generated/maka-regenerated.workflow.html Complete preset CSS definitions (all four presets, both themes) 2-244 (CSS blocks), 695-701 (editorial typography)
scripts/start-template.html Toolbar markup and preset button structure 402-409
scripts/guide-template.html Preset reuse in guide view Preset handling mirroring start-template
README.md Architecture overview Visual preset concept documentation
DESIGN.md Color palette rationale Branding decisions per preset

Summary

  • Archify visual presets are CSS-only, activated via data-preset and data-theme attributes on <html>
  • Classic provides neutral defaults; signal-flow emphasizes motion; blueprint optimizes for review; editorial enhances readability
  • Rendering differences span background depth, accent colors, fill saturation, and typographic scale
  • The system achieves instant, flicker-free updates without JavaScript recomputation
  • Source definitions live in generated/maka-regenerated.workflow.html with UI controls in scripts/start-template.html

Frequently Asked Questions

How do I change the Archify visual preset programmatically?

Set the data-preset attribute on document.documentElement. The browser immediately applies the matching CSS variable block. For example: document.documentElement.dataset.preset = 'blueprint'. This matches the implementation in scripts/start-template.html where toolbar buttons trigger the same attribute update.

Why does signal-flow look different in dark versus light mode?

Signal-flow uses distinct color stops per theme to maintain visual impact. Dark mode employs deeper backgrounds (#030711) with cool blue arrows (#7890ad), while light mode shifts to lighter backgrounds (#f4f9fc) with adjusted arrow tones (#7b97aa). The CSS blocks at lines 35-67 (dark) and 68-101 (light) in generated/maka-regenerated.workflow.html define these variants separately.

Can I create custom Archify visual presets?

Yes. The preset system uses standard CSS custom properties within attribute selectors. Define a new block like [data-preset="custom"][data-theme="dark"] { --bg: #...; --arrow: #...; } following the pattern in lines 2-244 of generated/maka-regenerated.workflow.html. Ensure your custom preset name matches in both CSS and any JavaScript that sets document.documentElement.dataset.preset.

Which preset should I use for technical documentation?

Blueprint is designed specifically for technical review scenarios. Its muted blueprint-like tones, high-contrast emerald accents (#34d399), and desaturated fills emphasize structural clarity over decorative elements. The plain white background in light mode (#ffffff) and modified toolbar styling support extended reading sessions common in documentation workflows.

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 →