Agent-first architecture docs

Architecture diagrams,
generated by AI agents

Let your AI coding agents document your software architecture automatically. Hierarchical C4 diagrams with rich descriptions — no manual drawing required.

Get startedHow it works
Section 01

How it works

Three steps to living architecture documentation

01

Install the skill

Run a single command to add the Tecture diagram skill to your Claude Code project.

02

Agent creates diagrams

Use /diagram in Claude Code. Your agent analyzes the codebase and creates hierarchical C4 diagrams automatically.

03

You explore

Browse interactive diagrams in your browser. Click nodes to drill down into detail and read component docs.

Section 02

Get started

One command to install — then use /diagram in Claude Code

Install the skillOne command

Run this in your project directory:

$ npx -y @tecture/skill init
Create a diagram

Then in Claude Code, use the slash command:

> /diagram
  1. Run the install command above in your project
  2. Open Claude Code and type /diagram
  3. Describe your system — the agent creates interactive C4 diagrams
Section 03

Built for agent workflows

FIG.01

Hierarchical C4 diagrams

System context, container, and component levels. Click any node to drill into deeper detail.

FIG.02

Rich markdown descriptions

Every component includes detailed documentation. Double-click any node to read its description.

FIG.03

Works with Claude Code

Install with one command, then use /diagram. Your agent reads the codebase and creates diagrams automatically.

FIG.04

Always up to date

Re-run /diagram any time your architecture changes. Your docs evolve with your code, not against it.