Complete Guide to Visual Presets in Archify: Classic, Signal-Flow, Blueprint, and Editorial

Archify supports four distinct visual presets—classic, signal-flow, blueprint, and editorial—that control diagram styling through the meta.visual_preset property without altering underlying geometry.

Archify is an open-source architecture diagramming framework (available at tt-a1i/archify) that separates visual presentation from structural topology. The visual preset system enables teams to switch between distinct styling profiles—ranging from technical blueprints to editorial layouts—while preserving node positions, edge connections, and diagram semantics.

Available Visual Presets in Archify

The four presets are enumerated in the core schema and implemented consistently across all diagram types. In archify/schemas/workflow.schema.json at line 36, the visual_preset property is defined as:

"visual_preset": {
  "enum": ["classic", "signal-flow", "blueprint", "editorial"]
}

Each preset serves a specific presentation context:

Classic

The classic preset serves as the stable default style compatible with both light and dark themes. It provides the original Archify visual language with balanced contrast and neutral styling. According to the CLI renderer implementation in archify/renderers/shared/cli.mjs (line 64), this preset is applied when no explicit value is provided:

visualPreset: meta.visual_preset || 'classic',

Signal-Flow

The signal-flow preset applies a luminous, motion-forward aesthetic that emphasizes data-flow direction through animated traces and directional styling. This preset is optimized for diagrams illustrating real-time data streams or event-driven architectures. The English documentation (README_EN.md, line 229) demonstrates this preset in production deployment examples.

Blueprint

The blueprint preset adopts a geometry-preserving drafting style designed for technical review workflows. It renders precise grids, squared UI elements, and a muted color palette suited for design reviews and engineering documentation. This style maintains exact node dimensions while adding construction-guide aesthetics.

Editorial

The editorial preset provides a warm, publication-oriented layout focusing on readability and typographic hierarchy. It employs richer text styling and subtle shading optimized for PDF exports, documentation sites, and presentation decks where narrative clarity takes precedence over technical drafting conventions.

Schema Definition and Validation

Visual presets are validated against the JSON Schema definitions located in the repository's schema directory. The canonical definition resides in the workflow schema, though the same enumeration applies to sequence, dataflow, lifecycle, and architecture diagram types.

The strict enum constraint ensures that only recognized preset values pass validation:

{
  "meta": {
    "title": "System Architecture",
    "visual_preset": "blueprint"
  }
}

Attempting to use an undefined preset value will trigger a schema validation error during the rendering pipeline.

CLI Implementation and Rendering Pipeline

The command-line interface processes visual presets through the shared renderer located at archify/renderers/shared/cli.mjs. The implementation handles preset resolution in two phases:

1. Default Resolution (Line 64)

The renderer extracts the preset from diagram metadata, falling back to classic when undefined:

const visualPreset = meta.visual_preset || 'classic';

2. HTML Injection (Line 151)

The resolved preset is injected as a data attribute in the generated HTML output:

const preset = ` data-preset="${esc(meta.visual_preset || 'classic')}"`;

This attribute enables CSS selectors to apply preset-specific styling rules without modifying the SVG geometry or JavaScript logic.

Practical Usage Examples

Configure the visual preset directly in your diagram JSON file within the meta object:

{
  "schema_version": 2,
  "diagram_type": "workflow",
  "meta": {
    "title": "Payment Processing Flow",
    "visual_preset": "signal-flow"
  },
  "lanes": [
    { "id": "api", "label": "API Gateway" }
  ],
  "nodes": [
    { "id": "auth", "lane": "api", "label": "Authenticate" }
  ],
  "edges": [
    { "source": "auth", "target": "auth", "type": "self" }
  ]
}

Override the preset at render time using the Archify CLI:

# Render with the blueprint preset

npx archify render architecture.json --preset blueprint > output.html

# Render with default classic preset

npx archify render workflow.json > classic.html

# Combine with dark theme while preserving preset

npx archify render diagram.json --theme dark --preset editorial > dark-editorial.html

The --preset flag assigns the value to meta.visual_preset only if the field is absent from the source file, ensuring declarative JSON configurations take precedence over command-line arguments.

Summary

• Archify provides four validated visual presets: classic, signal-flow, blueprint, and editorial.
• Presets are defined in archify/schemas/workflow.schema.json (line 36) and apply universally across diagram types.
• The CLI renderer (archify/renderers/shared/cli.mjs) defaults to classic (line 64) and injects the preset as a data-preset HTML attribute (line 151).
• Configuration occurs via the meta.visual_preset JSON property or the --preset CLI flag.
• Presets affect only visual styling; they preserve diagram geometry, edge routing, and semantic structure across exports.

Frequently Asked Questions

What are the available visual presets in Archify?

Archify supports four enumerated visual presets: classic (the default neutral style), signal-flow (directional motion styling), blueprint (technical drafting aesthetics), and editorial (publication-ready typography). These values are strictly validated against the schema defined in archify/schemas/workflow.schema.json.

How do I set a visual preset in my diagram?

Set the visual_preset property inside the meta object of your diagram JSON file, using one of the four valid enum values. Alternatively, pass the --preset flag when invoking the Archify CLI to apply a preset at render time if the JSON omits the field.

Does changing the visual preset affect diagram exports or structure?

No. Visual presets control only CSS-based styling and HTML data attributes. The underlying SVG geometry, node coordinates, edge paths, and semantic topology remain identical across all presets, ensuring that switching styles never breaks layout algorithms or exportable data formats.

What happens if I don't specify a visual preset?

The renderer automatically defaults to the classic preset. In archify/renderers/shared/cli.mjs at line 64, the code explicitly falls back to 'classic' when meta.visual_preset is undefined, ensuring consistent rendering behavior regardless of input file completeness.

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