What Visual Presets Are Available in Archify?

Archify provides four visual presets—classic, signal-flow, blueprint, and editorial—defined in the JSON schema and applied via the meta.visual_preset field to style diagrams without changing their underlying structure.

The visual preset system in Archify lets authors switch between distinct visual styles while preserving all diagram geometry, IDs, and topology. This separation of presentation from data means you can render the same architecture file for different audiences—engineering reviews, executive presentations, or published documentation—simply by changing one metadata field.

Where Visual Presets Are Defined

The Core Schema Enum

The authoritative list of available visual presets lives in archify/schemas/workflow.schema.json. At line 36, the visual_preset property is defined as a strict enum:

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

This schema applies across all diagram types in the tt-a1i/archify repository, ensuring consistent preset availability whether you're building workflow, sequence, dataflow, or lifecycle diagrams.

Renderer Default Handling

The CLI renderer in archify/renderers/shared/cli.mjs establishes the fallback behavior. At line 64, the code extracts the preset from metadata or defaults to classic:

visualPreset: meta.visual_preset || 'classic',

At line 151, the preset is injected into the generated HTML as a data attribute:

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

The Four Visual Presets Explained

classic

• Purpose: Stable default that works across light and dark themes
• Use case: Standard documentation, version-controlled diagrams, CI/CD pipelines
• Characteristics: Original Archify visual language with balanced contrast and clean lines

signal-flow

• Purpose: Motion-forward style emphasizing data-flow direction
• Use case: Animations, live presentations, streaming architecture demonstrations
• Characteristics: Luminous traces, directional emphasis, dynamic path highlighting

Referenced in example files such as archify/examples/incident-response.workflow.json where the preset is set to signal-flow for operational runbooks.

blueprint

• Purpose: Geometry-preserving drafting style for design review workflows
• Use case: Technical design reviews, PR discussions, architectural decision records
• Characteristics: Precise grids, squared UI elements, muted color palette, measurement-friendly layouts

Demonstrated in archify/examples/production-deployment.architecture.json.

editorial

• Purpose: Publication-oriented readability
• Use case: Blog posts, technical articles, conference slide decks, PDF exports
• Characteristics: Warm tones, richer typography hierarchy, subtle shading for print reproduction

How to Apply Visual Presets

In JSON Schema Files

Add the visual_preset field to your diagram's meta object:

{
  "schema_version": 2,
  "diagram_type": "workflow",
  "meta": {
    "title": "Payment Processing Flow",
    "visual_preset": "blueprint"
  },
  "lanes": [
    { "id": "api", "label": "API Gateway" },
    { "id": "svc", "label": "Services" }
  ],
  "nodes": [
    { "id": "auth", "lane": "api", "label": "Authenticate" },
    { "id": "process", "lane": "svc", "label": "Process Payment" }
  ],
  "edges": [
    { "source": "auth", "target": "process", "type": "async" }
  ]
}

Via CLI Override

Even without modifying the source file, you can specify a preset at render time. The CLI internally sets meta.visual_preset before generation:

# Render with explicit preset override

npx archify render payment-flow.json --preset editorial > payment-editorial.html

# Default behavior (no flag) uses "classic" or the file's existing preset

npx archify render payment-flow.json > payment-default.html

Theme Independence

Visual presets operate independently of color themes. You can combine any preset with light or dark mode:

# Blueprint preset + dark theme

npx archify render architecture.json --preset blueprint --theme dark > review-dark.html

This independence is enforced by the renderer's CSS architecture—preset styling controls structural presentation (grids, shapes, typography scale) while theme variables control color values.

File Locations for Reference

Purpose	Path
Schema enum definition	[archify/schemas/workflow.schema.json](https://github.com/tt-a1i/archify/blob/main/archify/schemas/workflow.schema.json)
CLI preset handling	archify/renderers/shared/cli.mjs
Blueprint example	[archify/examples/production-deployment.architecture.json](https://github.com/tt-a1i/archify/blob/main/archify/examples/production-deployment.architecture.json)
Signal-flow example	[archify/examples/incident-response.workflow.json](https://github.com/tt-a1i/archify/blob/main/archify/examples/incident-response.workflow.json)
Generated CSS for all presets	[generated/maka-regenerated.workflow.visual-check.html](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.visual-check.html)

Summary

• Archify defines four visual presets in its JSON schema: classic, signal-flow, blueprint, and editorial.
• Set meta.visual_preset in your diagram file, or override via --preset CLI flag.
• Presets control structural presentation; themes control colors—combine freely.
• The default fallback is classic as implemented in archify/renderers/shared/cli.mjs.
• All presets preserve diagram geometry and topology, enabling style switching without data loss.

Frequently Asked Questions

What happens if I specify an invalid visual preset?

The JSON schema validation will fail. Since visual_preset uses a strict enum in workflow.schema.json, any value outside "classic", "signal-flow", "blueprint", or "editorial" triggers a validation error at parse time.

Can I create custom visual presets?

Not through official extension points. The enum is hardcoded in the schema, and the CLI renderer only recognizes the four defined values. Custom styling requires post-processing the generated HTML or modifying the source in archify/renderers/shared/cli.mjs.

Does changing the visual preset affect diagram exports?

The underlying diagram data remains identical—only the rendered appearance changes. SVG and PNG exports reflect the active preset at render time, but re-rendering with a different preset produces new output without altering source files.

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