tt-a1i/archify

Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self-contained HTML with motion and crisp export.

What it solves

Archify transforms technical descriptions or existing codebases into interactive, polished system maps. It solves the problem of static, generic diagrams that lack precision, validation, and the ability to trace actual relationships between components in a complex system.

How it works

Archify operates as a rendering and validation system designed for AI agents (such as Cursor, Claude Code, and Codex CLI). The process follows these steps:

  1. Generation: An AI agent produces a typed JSON Intermediate Representation (IR) based on a system description.
  2. Validation: The system runs bundled validators and layout rules to ensure the JSON source is correct and the layout is deterministic.
  3. Preview/Delivery: The validated JSON is compiled into a self-contained HTML/SVG file. This file includes an interactive viewer that allows users to explore the map, trace routes, and play guided stories.
  4. Iteration: Agents can refine the diagram by updating the JSON source while maintaining structural stability.

Who it’s for

Software architects, developers, and technical leads who need to communicate system design, review architecture changes before merging, or document a codebase for new team members using AI-assisted tools.

Highlights

  • Five Diagram Types: Supports Architecture, Workflow, Sequence, Data Flow, and Lifecycle diagrams.
  • Deterministic Rendering: Uses typed JSON IR to ensure reproducible and consistent layouts rather than generic auto-layout.
  • Architecture Delta: Allows comparing two validated snapshots to see exactly what was added, removed, or moved in a system's architecture.
  • Interactive Exploration: Includes features to search nodes, trace upstream/downstream reach, and probe specific directed routes.
  • Portable Output: Generates a single HTML file that can be exported as PNG, SVG, WebM, or share cards for documentation.
  • Source Grounding: Can link Architecture nodes to Git-verified files and line ranges when requested.

Related

  • Project
    plannotator/effective-html

    A collection of agent skills that enable AI agents to generate self-contained HTML artifacts like wireframes, prototypes, and diagrams for better visual communication.

  • Project
    inkboard/system-atlas

    An agent skill that converts architecture discussions into a single-source-of-truth data file, generating both an interactive isometric map and a synchronized text document.

  • Project
    kangarooking/kangarooking-skills

    A collection of structured, open-source Agent Skills and workflows for AI agents to automate tasks ranging from content creation and 3D generation to complex software engineering.