Where to Find Archify Renderers and Their Corresponding Schemas

Archify renderers and their corresponding schemas are located in archify/renderers/ and archify/schemas/, where five typed implementations convert JSON-IR diagrams into self-contained HTML artifacts.

Archify is an open-source diagramming toolchain (tt-a1i/archify) that transforms JSON intermediate representations into visual artifacts. Locating the Archify renderers and their corresponding schemas is essential for extending the toolkit, debugging diagram generation, or integrating custom visualizations into your workflow.

Locating the Core Archify Renderers

Archify ships five typed renderers under archify/renderers/, each dedicated to a specific diagram type. Each renderer follows the naming convention render-{type}.mjs and resides in its own subdirectory:

• Architecture: archify/renderers/architecture/render-architecture.mjs — Renders high-level system architecture diagrams
• Workflow: archify/renderers/workflow/render-workflow.mjs — Visualizes end-to-end agent and workflow execution paths
• Sequence: archify/renderers/sequence/render-sequence.mjs — Generates ordered step-by-step sequence diagrams
• Dataflow: archify/renderers/dataflow/render-dataflow.mjs — Creates directed data-pipeline visualizations
• Lifecycle: archify/renderers/lifecycle/render-lifecycle.mjs — Produces component lifecycle state diagrams

All renderers import shared utility modules from archify/renderers/shared/, which includes CLI handling, geometry helpers, internationalization, and auto-generated validators.

Corresponding JSON Schemas for Validation

Each renderer consumes a specific JSON-IR format validated by a matching schema in archify/schemas/:

• Architecture Schema: archify/schemas/architecture.schema.json
• Workflow Schema: archify/schemas/workflow.schema.json
• Sequence Schema: archify/schemas/sequence.schema.json
• Dataflow Schema: archify/schemas/dataflow.schema.json
• Lifecycle Schema: archify/schemas/lifecycle.schema.json

These schemas define the structure expected by render-architecture.mjs, render-workflow.mjs, and their counterparts. Additionally, archify/schemas/common.schema.json contains shared schema fragments reused across the five renderers.

CLI Dispatch Mechanism

The command-line entry point at archify/bin/archify.mjs resolves renderers dynamically based on the type argument. According to the source code, it constructs the renderer path and executes it via runNode:

const rendererPath = path.join(skillRoot, 'renderers', type, `render-${type}.mjs`);
runNode([rendererPath, inputJson, outputHtml]);

The type parameter accepts one of five values: architecture, workflow, sequence, dataflow, or lifecycle. Each renderer expects a JSON document conforming to its specific schema, with validation performed by the generated validator before rendering proceeds.

Programmatic Validation and Rendering

Before invoking a renderer, validate your diagram against the appropriate schema using the auto-generated validator module at archify/renderers/shared/generated-validators.mjs:

import { validate } from '../archify/renderers/shared/generated-validators.mjs';
import architectureSchema from '../archify/schemas/architecture.schema.json' assert { type: 'json' };

const diagram = JSON.parse(fs.readFileSync('diagram.json', 'utf8'));
const result = validate(architectureSchema, diagram);

if (!result.valid) {
  console.error('Invalid diagram:', result.errors);
} else {
  const renderer = await import('../archify/renderers/architecture/render-architecture.mjs');
  await renderer.default(diagram, 'diagram.html');
}

Using Shared Geometry Utilities

Custom renderers can leverage shared geometry helpers located in archify/renderers/shared/geometry.mjs:

import { polygonPoints } from '../archify/renderers/shared/geometry.mjs';

function drawBox(ctx, bbox) {
  const points = polygonPoints(bbox.x, bbox.y, bbox.width, bbox.height);
  ctx.moveTo(...points[0]);
  ctx.lineTo(...points[1]);
  ctx.lineTo(...points[2]);
  ctx.lineTo(...points[3]);
  ctx.closePath();
}

Summary

• Archify renderers live in archify/renderers/{type}/render-{type}.mjs with five implementations: Architecture, Workflow, Sequence, Dataflow, and Lifecycle
• JSON Schemas are stored in archify/schemas/{type}.schema.json and define the IR structure each renderer consumes
• Shared utilities including validators and geometry helpers reside in archify/renderers/shared/
• Entry point at archify/bin/archify.mjs dispatches CLI commands to the appropriate renderer by constructing dynamic import paths
• Validation occurs via archify/renderers/shared/generated-validators.mjs, which is auto-generated from the schema definitions

Frequently Asked Questions

What output format do Archify renderers produce?

Archify renderers generate self-contained HTML artifacts. Each renderer transforms the validated JSON-IR into a standalone HTML file that includes all necessary styling and JavaScript for rendering the diagram, making the output portable and viewable in any modern browser.

How do I validate a diagram before rendering it?

Import the validate function from archify/renderers/shared/generated-validators.mjs and pass the appropriate schema from archify/schemas/ along with your JSON diagram. The validator returns an object with a valid boolean and an errors array, allowing you to catch schema violations before invoking the renderer.

Can I extend Archify with custom renderers?

Yes. Create a new subdirectory under archify/renderers/ following the render-{type}.mjs naming convention, implement the renderer interface, and add a corresponding JSON schema to archify/schemas/. You can reuse shared utilities from archify/renderers/shared/ for CLI handling, geometry calculations, and internationalization.

Where are the shared utilities located?

Shared modules used by all five renderers are located in archify/renderers/shared/. This directory contains essential utilities including CLI argument parsing, geometry helper functions (geometry.mjs), internationalization support, and generated-validators.mjs for schema validation.

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