ArchLens

Interactive 3D-inspired system design visualizer for building, editing, explaining, and presenting software architecture diagrams.

Overview

ArchLens turns system design into a visual, interactive experience. It provides a React Flow-powered canvas where you can place architecture nodes, connect them, annotate their roles, highlight request flows, and switch to a clean presentation mode for demos and documentation.

Built for developers, technical writers, and engineering teams who need to communicate architecture decisions quickly.

Features

• Interactive Canvas — Drag, connect, and arrange architecture nodes on a responsive React Flow canvas.
• Architecture Templates — Load pre-built architectures (SaaS, E-commerce, Chat, Event-Driven, AI) as starting points.
• Add / Edit / Delete — Full CRUD for nodes and connections with inline forms.
• Request Flow Highlighting — Select a source and target node to highlight the shortest path through the system.
• Presentation Mode — Hide side panels and expand the canvas for screenshots, demos, and portfolio display.
• Import / Export JSON — Save and load architecture projects as .json files.
• Export Markdown Summary — Copy a structured Markdown summary of the current architecture to clipboard.
• Project Metadata Editing — Edit project name and description from the inspector panel.
• localStorage Persistence — Your current project is saved automatically and restored on reload.
• 3D-Inspired Visual Style — Dark glassmorphism UI with depth layers, glow effects, and health indicators.

Tech Stack

• Next.js 16 (App Router)
• React 19
• TypeScript 5
• Tailwind CSS 4
• React Flow 12
• Zustand 5
• Lucide React

Screenshots

Demo

Live demo: https://arch-lens-sage.vercel.app/

Local Setup

# Clone the repository
git clone https://github.com/Thaelith/ArchLens.git
cd ArchLens

# Install dependencies
cd archlens-app
npm install

# Run the development server
npm run dev

# Open http://localhost:3000

Build

cd archlens-app
npm run build

Deploy on Vercel

This is a standard Next.js app. To deploy on Vercel:

1. Import the repository into Vercel.
2. Set the Root Directory to archlens-app.
3. Set the Install Command to npm install.
4. Set the Build Command to npm run build.
5. Output is handled automatically by Next.js.

No additional environment variables are required.

Project Structure

ArchLens/
├── archlens-app/
│   ├── src/
│   │   ├── app/                    # Next.js app router
│   │   ├── components/
│   │   │   ├── flow/               # Request flow panel
│   │   │   ├── forms/              # Node and connection forms
│   │   │   ├── landing/            # Landing page sections
│   │   │   ├── layout/             # Sidebar, topbar, inspector
│   │   │   ├── templates/          # Template selector
│   │   │   ├── export/             # Import/export actions
│   │   │   ├── metadata/           # Project metadata editor
│   │   │   └── visualizer/         # React Flow canvas, nodes, edges
│   │   ├── data/
│   │   │   ├── templates/          # Architecture templates
│   │   │   └── sampleArchitecture.ts
│   │   ├── lib/
│   │   │   ├── export/             # JSON/Markdown export logic
│   │   │   ├── graph/              # React Flow adapters, pathfinding
│   │   │   └── storage/            # localStorage persistence
│   │   ├── store/                  # Zustand architecture store
│   │   └── types/                  # TypeScript types
│   ├── public/                     # Static assets
│   ├── package.json
│   └── next.config.ts
├── docs/
│   ├── ARCHITECTURE.md
│   ├── ARCHLENS_JSON_FORMAT.md
│   └── screenshots/
└── README.md

Current Status

Phase 8 complete. Core features implemented:

• Canvas editing and persistence
• Templates and import/export
• Request flow highlighting
• Presentation mode
• Canvas synchronization and drag stability
• Documentation and screenshots

Roadmap

• Future: Export to PNG/SVG, animated particle traces, multi-path highlighting, collaborative editing

Known Limitations

• No server-side persistence (localStorage only)
• No user authentication
• No real-time collaboration
• 3D rendering is deferred; current visual style is 2.5D-inspired

Security

Please see SECURITY.md for vulnerability reporting and security notes.

Contributing

Please see CONTRIBUTING.md for contribution guidelines.

License

MIT License