Complete Guide to Visual Presets in Archify: The 4 Built-in Styles Explained

Archify provides four distinct visual presets—classic, signal-flow, blueprint, and editorial—that control the styling of architecture diagrams without altering their underlying geometry or topology.

Archify is an open-source diagramming framework for software architecture that renders JSON-defined workflows into static HTML or interactive visualizations. The visual presets functionality allows you to switch between different aesthetic profiles by setting the meta.visual_preset property, ensuring your diagrams match their intended presentation context while maintaining consistent structural data.

The Complete List of Visual Presets in Archify

According to the JSON Schema definition in archify/schemas/workflow.schema.json at line 36, the visual_preset field accepts exactly four string values. Each preset applies a specific CSS profile and rendering logic while preserving node positions, edge connections, and diagram IDs.

classic (The Default Style)

The classic preset serves as the fallback default when no preset is specified. According to the CLI renderer implementation in archify/renderers/shared/cli.mjs at line 64, the code explicitly defaults to 'classic' via meta.visual_preset || 'classic'. This preset provides a neutral, balanced aesthetic suitable for both light and dark themes, featuring standard node shapes and moderate contrast ratios.

signal-flow (Motion-Forward Data Flow)

The signal-flow preset emphasizes directional data movement with luminous traces and animation-ready styling. This preset is ideal for demonstrating data pipeline architectures or real-time stream processing workflows where visualizing the "flow" direction is critical.

blueprint (Design Review Optimized)

The blueprint preset applies a drafting-style geometry with precise grids, squared UI elements, and a muted color palette. It is specifically designed for technical design reviews, prioritizing structural accuracy and measurement readability over decorative styling.

editorial (Publication Ready)

The editorial preset uses richer typography, subtle shading, and warm color schemes optimized for documentation sites and PDF exports. This style increases readability for external stakeholders who may view diagrams outside of technical monitoring contexts.

How Visual Presets Work in the Source Code

The preset validation occurs in the schema layer, while the application logic resides in the shared CLI renderer. In archify/schemas/workflow.schema.json, the enumerated definition restricts values to prevent invalid styling requests:

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

The rendering pipeline accesses this value in archify/renderers/shared/cli.mjs at two critical points:

• Line 64 sets the default during metadata initialization: visualPreset: meta.visual_preset || 'classic'
• Line 151 injects the attribute into the HTML output: const preset = \ data-preset="${esc(meta.visual_preset || 'classic')}"`;`

This implementation guarantees that the preset is persisted as a data-preset attribute in the generated DOM, allowing CSS selectors to apply the appropriate styling rules.

Implementing Visual Presets in Your Diagrams

To apply a visual preset, add the visual_preset key to your diagram's meta object. The following example demonstrates a workflow diagram configured for the blueprint style:

{
  "schema_version": 2,
  "diagram_type": "workflow",
  "meta": {
    "title": "CI/CD Pipeline",
    "visual_preset": "blueprint"
  },
  "lanes": [
    { "id": "build", "label": "Build System" }
  ],
  "nodes": [
    { "id": "compile", "lane": "build", "label": "Compile" }
  ],
  "edges": [
    { "source": "compile", "target": "compile", "type": "self" }
  ]
}

You can also override the preset when rendering via the Archify CLI. While the CLI accepts flags, the underlying mechanism ultimately sets the meta.visual_preset property before processing:

# Render with the signal-flow preset

npx archify render pipeline.json --preset signal-flow > output.html

# Render with default classic preset (explicit)

npx archify render pipeline.json --preset classic > output.html

# Combine preset with dark theme

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

Summary

• Archify supports exactly four visual presets: classic, signal-flow, blueprint, and editorial.
• The preset is defined in archify/schemas/workflow.schema.json and defaults to classic as implemented in archify/renderers/shared/cli.mjs.
• Presets control only the visual styling (CSS profiles) and do not modify diagram geometry, IDs, or topology.
• Set presets via the meta.visual_preset JSON property or override them through CLI arguments.
• All presets work independently of the light/dark theme system.

Frequently Asked Questions

What is the default visual preset in Archify?

The default visual preset is classic. According to the source code in archify/renderers/shared/cli.mjs at line 64, the renderer explicitly falls back to 'classic' when the meta.visual_preset field is undefined or falsy using the logical OR operator: meta.visual_preset || 'classic'.

Can I override the visual preset from the command line?

Yes. While the preset is ultimately stored in the meta.visual_preset field, the Archify CLI allows you to specify a preset via command-line flags that inject the value into the metadata object during the rendering pipeline. This override mechanism ensures you can generate multiple visual variations from a single source file without modifying the JSON.

Do visual presets affect the diagram's structure or IDs?

No. Visual presets are strictly presentational and do not alter the underlying topology. As defined in the JSON Schema and implemented in the rendering logic, changing the visual_preset value modifies only the CSS classes and styling attributes applied to the generated HTML, leaving node coordinates, edge connections, and unique identifiers intact.

Are visual presets available for all diagram types in Archify?

Yes. Although the schema definition is located in archify/schemas/workflow.schema.json, the visual preset system is shared across all Archify renderers. The archify/renderers/shared/cli.mjs module handles preset logic for workflow, sequence, dataflow, lifecycle, and architecture diagram types, ensuring consistent styling capabilities regardless of diagram category.

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