Architecture-as-code for the AI era

Turn your codebase into a navigable architecture model

Use your coding agent to write architecture docs directly into your repo — then explore them as interactive diagrams in VS Code or the browser.

Quickstart
01 Install the skill
terminal — bash
$ npx skills add tecture-io/architecture-docs
02 Run it in your coding agent
coding agent
/ architecture-docs
03 View it

the skill writes the model · view it in VS Code or your browser

Quick tour

The architecture model, level by level

Real screenshots of Tecture mapping the Redis repo — the same model your agent generates for any codebase.

Watch the demo

How Tecture works

A short overview of Tecture mapping the Redis repo into a navigable architecture model.

Video thumbnail: Demo: Documenting Redis repo architecture
Demo: Documenting Redis repo architecture
video · watch the demo
REC
demo · documenting redis repo architecture
How it works

Your agent writes the model. Tecture makes it navigable.

Tecture stores architecture as simple JSON and Markdown files inside your repo. Your coding agent writes the structure and descriptions, and you review them like any other code change. Open the same files in VS Code or the browser to explore your system as an interactive, multi-level diagram.

Your agent authors

Coding agent skill

Your agent reads the source and writes the architecture as JSON + Markdown, committed next to the code.

$ npx skills add tecture-io/architecture-docs
File-based model · in your repo
manifest.json diagrams/system-context.json descriptions/api-server.md
You navigate

VS Code or browser

Opens those same files as an interactive, multi-level diagram you drill through — in the VS Code extension, or run npx @tecture/core to view it in any browser.

VS Code · or your browser
What you get
FIG.01

Agent-authored docs

Your coding agent reads the source and writes the architecture model as JSON and Markdown.

FIG.02

Repo-native files

The model lives beside the code, so it can be reviewed, versioned, and updated through normal development workflows.

FIG.03

Interactive architecture viewer

Explore components, dependencies, and descriptions in VS Code or any browser.