Generate interactive architecture diagrams from your codebase using AI.

archrip lets Claude Code analyze your codebase and produce a self-contained, interactive architecture viewer as static HTML — deployable anywhere.

Run these commands in Claude Code (the CLI):

# 1. Install the plugin (in Claude Code)
/plugin marketplace add yida29/archrip
/plugin install archrip@archrip

# 2. Scan the codebase (in Claude Code)
/archrip-scan

# 3. Build & preview the viewer
npx archrip build
npx archrip serve

1. Install plugin — Run /plugin marketplace add yida29/archrip and /plugin install archrip@archrip in Claude Code
2. /archrip-scan — Claude reads your codebase and docs, asks you to review the draft, then generates .archrip/architecture.json
3. archrip build — validates the JSON, auto-installs the viewer if needed, computes layout with dagre, and builds a static React Flow viewer
4. archrip serve — opens the interactive architecture viewer in your browser

The output is a standalone dist/ folder you can deploy to GitHub Pages, Netlify, or share as a zip.

{
  "version": "1.0",
  "project": {
    "name": "My App",
    "sourceUrl": "https://github.com/org/repo/blob/main/{filePath}"
  },
  "nodes": [
    {
      "id": "ctrl-users",
      "category": "controller",
      "label": "UsersController",
      "description": "Handles user registration, authentication, and profile management. Uses JWT for session tokens with 24h expiry.",
      "filePath": "src/controllers/users.ts",
      "layer": 1,
      "useCases": ["uc-user-mgmt"],
      "metadata": [
        { "label": "Rate Limit", "value": "10 req/s per IP", "type": "text" }
      ]
    }
  ],
  "edges": [
    { "source": "ctrl-users", "target": "svc-users", "type": "dependency" }
  ],
  "useCases": [
    {
      "id": "uc-user-mgmt",
      "name": "User Management",
      "nodeIds": ["ctrl-users", "svc-users", "entity-user"]
    }
  ]
}

Custom categories are supported — they get a fallback color.

The layer field controls positioning. Higher = closer to domain core (more stable). Lower = closer to external world (more volatile). Dagre places higher layers lower on screen; concentric places them at the center. Use as many layers as the architecture requires (any non-negative integer, typically 3-6).

DDD / Clean Architecture example:

MVC example (Rails, Laravel, Django):

For concentric layout ("layout": "concentric"), category semantics override layer numbers to ensure correct ring placement — entities always at center, external always at outer ring.

Edges support optional description and metadata fields for richer context (e.g., SQL queries on DB edges).

archrip is framework-agnostic. The AI adapts its analysis based on the detected framework and architectural pattern:

• MVC / Layered — Laravel, Rails, Django, Spring Boot, NestJS, Next.js, FastAPI
• DDD / Clean / Hexagonal — Go Hexagonal, Flutter Clean, Java DDD, TypeScript DDD
• CQRS / Event-Driven — CQRS, Event Sourcing, Motia, Temporal
• Serverless / Microservices — SST, Lambda, Terraform, K8s
• Modular Monolith — module-boundary architectures
• Any other — grouped by directory responsibility

• Interactive React Flow graph (drag, zoom, pan)
• Use case filter — highlight specific feature flows
• Category filter — show/hide by category
• Command palette — keyboard-driven navigation (Cmd+K)
• Detail panel (click nodes for full info: description, metadata, source links)
• Color-coded categories with legend
• Dark mode toggle
• MiniMap navigation
• Source code links (GitHub, GitLab, Backlog, or any hosting)

MIT