Getting Started

Getting Started

Use with an AI agent

npx skills add baires/archlex
claude mcp add --transport http archlex https://mcp.archlex.dev/mcp

Then ask:

Diagram a serverless API on AWS with API Gateway, Lambda, and DynamoDB.

Full client setup: Use with AI agents. Try the playground if you want to edit the source yourself.

Install the library

Install the core package and the four supported provider packages:

npm install @archlex/core @archlex/aws @archlex/cloudflare @archlex/gcp @archlex/k8s

With pnpm:

pnpm add @archlex/core @archlex/aws @archlex/cloudflare @archlex/gcp @archlex/k8s

ArchLex requires Node.js 22 or later for Node.js applications. Browser applications need ES2022 support.

Create One Shared Setup

Register AWS, Cloudflare, Google Cloud, and Kubernetes once. Your diagram source selects a default provider; qualified kinds can combine registered providers.

import {
  awsProvider,
  cloudflareProvider,
  createArchLex,
  gcpProvider,
  k8sProvider,
} from "@archlex/core";
 
const archlex = createArchLex({
  providers: [awsProvider(), cloudflareProvider(), gcpProvider(), k8sProvider()],
});

Keep this setup when you switch examples or accept diagram source from a user.

Write Provider-Neutral Source

Every source can set its layout direction, provider, and validation mode. Resource IDs and semantic rules come from each resource’s registered provider. The directive selects the default for unqualified kinds.

direction LR
provider aws
validation normal

alb -[routes]-> ecs
ecs -[writes]-> rds

The same setup renders Google Cloud source:

direction LR
provider gcp
validation normal

cloud-load-balancing -[routes]-> cloud-run
cloud-run -[writes]-> cloud-sql

It also renders Kubernetes source with cluster and namespace containment:

direction LR
provider k8s
validation normal

cluster production {
  namespace storefront {
    edge: ingress
    api_service: service
    api: deployment
    data: persistentvolumeclaim

    edge -[routes]-> api_service
    api_service -[targets]-> api
    api -[mounts]-> data
  }
}

The same setup renders Cloudflare source with bundled product artwork:

direction LR
provider cloudflare
validation normal

api: workers["Application entry"]
objects: r2["Application objects"]
api -[reads]-> objects

Cloudflare includes 92 resources. Place managed resources at root or within a logical account. Validation checks explicit containment; it does not verify runtime connectivity, security-policy effectiveness or failover health. Use qualified kinds such as cloudflare.workers alongside native origin resources. The Cloudflare pack guide covers aliases, connectors, flow labels and four complete examples.

Use the Language Specification for declaration forms, six supported scopes, relationship chains, and labels.

Render and Inspect Diagnostics

const result = await archlex.render(source);
 
for (const diagnostic of result.diagnostics) {
  console.warn(
    diagnostic.code,
    diagnostic.message,
    diagnostic.remediation,
  );
}
 
console.log(result.svg);

ArchLex can return partial output with diagnostics. Read result.diagnostics before you mount or save the SVG.

In a browser, assign result.svg to an element that your application controls. The renderer sanitizes provider icon markup before it adds icons to the SVG.

Explore the Catalog

Query registered resources and scopes without duplicating provider catalogs in your interface:

const catalog = archlex.getCatalog();
 
console.log(catalog.providers.k8s.services);
console.log(catalog.providers.cloudflare.services);
console.log(catalog.containmentScopes);
console.log(catalog.relationshipKinds);

Continue

IntroductionLanguage Specification