Skip to content

Quick Start

Architecture shouldn't live in slides. Extract it from code.

Three Steps

1. Install

npm install -D @chrislyons-dev/archlette

Java required for rendering. Archlette handles the rest.

Installation guide for platform-specific setup.

2. Annotate

Mark components in your code. Archlette extracts the rest.

/**
 * @module UserService
 * User authentication and management
 *
 * @actor User {Person} {in} End user accessing the system
 * @uses Database Stores user credentials
 */
export class UserService {
  async login(email: string, password: string) {
    // Implementation
  }
}

Code speaks. Archlette listens.

3. Generate

npx archlette

Pipeline runs:

Extract → Validate → Generate → Render → Publish

Creates:

  • docs/architecture/README.md — Overview with diagrams
  • docs/architecture/diagrams/*.png — C4 architecture diagrams
  • docs/architecture/workspace.dsl — Structurizr DSL
  • docs/architecture/ir.json — Intermediate representation

First run downloads tools automatically. Cached for subsequent runs.

Done

Open docs/architecture/README.md. Your architecture is documented.

Always synchronized. No manual updates. No drift.

Configuration

Create archlette.config.yaml to customize behavior:

project:
  name: MyProject

extractors:
  - use: extractors/builtin/basic-node
    inputs:
      include: ['src/**/*.ts']

See Configuration Reference for all options.

Next: Choose Your Extractor

Archlette needs to know what to analyze:

Building with JavaScript/TypeScript? → Basic Node
Deploying to Cloudflare Workers? → Basic Wrangler
Need both? Not sure? → Help me choose

Common Patterns

Monorepo

Multiple extractors, one per package:

extractors:
  - use: extractors/builtin/basic-node
    name: api-service
    inputs:
      include: ['packages/api/**/*.ts']

  - use: extractors/builtin/basic-node
    name: web-app
    inputs:
      include: ['packages/web/**/*.tsx']

Selective Extraction

Focus on specific directories:

extractors:
  - use: extractors/builtin/basic-node
    inputs:
      include:
        - 'src/domain/**/*.ts'
        - 'src/services/**/*.ts'
      exclude:
        - '**/*.test.ts'
        - '**/mocks/**'

Staged Execution

Run specific pipeline stages:

npx archlette extract   # Extraction only
npx archlette generate  # Through DSL generation
npx archlette render    # Through diagram rendering

With custom config:

npx archlette -f archlette.config.yaml

See CLI Reference for all options.

Learn More

Enhance:

Automate:

Extend: