Archify Visual Presets: The Four Built-In Styles Explained

Archify ships with four built-in visual presets—Classic, Signal-Flow, Blueprint, and Editorial—that control only the styling of generated diagrams without affecting underlying semantic IDs or geometry.

Archify is an open-source diagramming framework (tt-a1i/archify) that decouples visual presentation from structural meaning through a strict intermediate representation (IR). The visual presets system lets you instantly re-theme any diagram while guaranteeing that canonical SVG geometry and semantic IDs remain stable—critical for downstream tooling that relies on persistent identifiers.

The Four Built-In Visual Presets

Each preset is defined by the meta.visual_preset field in the JSON IR and enumerated in archify/schemas/README.md. All five renderers—workflow, sequence, dataflow, lifecycle, and architecture—expose the same enum values.

Classic

Classic is the stable default preset that preserves the original look of all renderers. When meta.visual_preset is omitted from a diagram file, the rendering pipeline in archify/renderers/shared/cli.mjs automatically falls back to this value. This preset uses neutral palettes and standard motion curves, making it the safest choice for long-term documentation that must remain consistent across versions.

Signal-Flow

Signal-Flow applies a “luminous motion-forward” style that adds bright colors and subtle animation to emphasize data flow. This preset is ideal for live presentations or debugging sessions where you need to draw the viewer’s eye along the path of execution. The styling increases saturation and applies glow effects while keeping the underlying topology identical to Classic.

Blueprint

Blueprint is a high-contrast, engineering-review-oriented preset featuring dark-mode-friendly palettes, precise grids, and restrained trace motion. Designed for accessibility and long hours of technical review, it minimizes eye strain while maintaining clear distinction between component types. The Blueprint preset is referenced in archify/examples/production-deployment.architecture.json as a recommended choice for infrastructure diagrams.

Editorial

Editorial delivers a warm, publication-style aesthetic intended for documentation and executive presentations. It employs softer tones, increased whitespace, and typography that reads like a magazine spread. This preset sacrifices some information density for readability, making it perfect for export to PDF or inclusion in slide decks.

How Visual Presets Work Under the Hood

Visual presets operate purely at the presentation layer. According to docs/research-visual-style-picker-2026-07-23.md, the design contract guarantees that switching presets never alters the canonical geometry or IDs in the IR. This stability boundary ensures that downstream automation—such as URL fragment links to specific nodes or diff tooling—remains functional regardless of the active theme.

The valid enum values are formally defined in archify/schemas/architecture.schema.json and documented in the central schema README. When the CLI renderer processes a diagram, it extracts meta.visual_preset from the JSON IR and applies the corresponding stylesheet, defaulting to "classic" if the field is missing:

// From archify/renderers/shared/cli.mjs
render(diagram, {
  visualPreset: diagram.meta.visual_preset || 'classic'
});

Applying Visual Presets in Practice

You can declare a preset declaratively in your diagram JSON, pass it programmatically via the renderer API, or toggle it interactively through the UI.

Declarative Configuration

Set the meta.visual_preset field in your diagram file:

{
  "schema_version": 1,
  "diagram_type": "architecture",
  "meta": {
    "title": "Production Deployment",
    "visual_preset": "blueprint"
  },
  "components": []
}

Programmatic Rendering

When using the JavaScript API, the preset flows from the IR metadata into the renderer options:

import { render } from '@archify/renderers';
import diagram from './my-diagram.json';

render(diagram, {
  visualPreset: diagram.meta.visual_preset || 'classic'
});

Interactive Selection

The picker UI presents the four named options via a toolbar button. Users can also press S to fast-cycle through presets without opening the menu. The menu markup follows this structure:

<button id="styleBtn" aria-haspopup="menu">Style</button>
<ul role="menu" id="styleMenu">
  <li role="menuitemradio" aria-checked="true">
    <span class="preset-sample classic"></span> Classic
  </li>
  <li role="menuitemradio" aria-checked="false">
    <span class="preset-sample signal-flow"></span> Signal-Flow
  </li>
  <li role="menuitemradio" aria-checked="false">
    <span class="preset-sample blueprint"></span> Blueprint
  </li>
  <li role="menuitemradio" aria-checked="false">
    <span class="preset-sample editorial"></span> Editorial
  </li>
</ul>

Summary

• Four presets ship with Archify: Classic (default), Signal-Flow, Blueprint, and Editorial.
• Stability guarantee: Presets affect only CSS and animation; they never modify the IR’s semantic IDs or geometry.
• Configuration: Set meta.visual_preset in JSON IR, or override via the visualPreset option in archify/renderers/shared/cli.mjs.
• Shortcuts: Use the Style toolbar button or press S to cycle presets interactively.
• Schema enforcement: Valid values are defined in archify/schemas/architecture.schema.json and documented in archify/schemas/README.md.

Frequently Asked Questions

Do visual presets change the exported SVG structure?

No. According to the stability contract in docs/research-visual-style-picker-2026-07-23.md, visual presets only influence styling attributes. The exported SVG retains identical element IDs, path data, and DOM structure regardless of which preset is active.

Can I create custom visual presets?

Currently, Archify supports only the four built-in presets enumerated in the JSON Schema. The visual_preset field accepts a closed enum (classic, signal-flow, blueprint, editorial) as defined in archify/schemas/architecture.schema.json. Custom styling requires post-processing the SVG output or modifying the renderer internals directly.

What happens if I omit the visual_preset field?

The renderer defaults to classic. In archify/renderers/shared/cli.mjs, the rendering logic explicitly falls back using diagram.meta.visual_preset || 'classic', ensuring backward compatibility with legacy diagram files that predate the preset system.

Are visual presets available in all diagram types?

Yes. All five renderers—workflow, sequence, dataflow, lifecycle, and architecture—implement the same visual_preset enum. This uniformity guarantees that you can switch a diagram’s renderer without losing the ability to apply your chosen theme.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}