A human-authored visual architecture mapping platform and system understanding workspace.
DevOS is a visual architecture mapping platform designed for developers, system architects, and technical leaders. Instead of automatically generating code summaries or noise-heavy dependency graphs, it empowers engineers to map, document, and present system architectures manually. By creating nodes, tracing semantic relationships, and building step-by-step interactive walkthroughs, developers can explain how complex codebases, databases, APIs, and workflows connect and function.
DevOS serves as an interactive portfolio layer and onboarding medium—proving your technical system understanding to team members, collaborators, and recruiters. It represents the human system explanation layer: a way to demonstrate the engineering reasoning behind your architecture.
"Anyone can publish code. DevOS is for developers who can explain how systems actually work."
A codebase is just text. Automated dependency graphs and AI-generated explainers often output a noisy, unvetted web of files that fails to convey the intent, the tradeoffs, and the reasoning behind an architecture.
DevOS changes this by placing the human developer in control. You manually curate the blueprint of your system to:
- Prove Technical Understanding: Show precisely how a system works for technical portfolios, interviews, or engineering reviews.
- Simplify Onboarding: Give new team members an interactive tour of the actual flows, scaling issues, and database dependencies without forcing them to dig through thousands of lines of code.
- Explain Engineering Reasoning: Clearly highlight design decisions, architectural bottlenecks, and future scaling plans.
You can map and visually narrate any complex software system, workflow, or pattern:
- SaaS architectures: The flow from client request to load balancers, background workers, payment gateways, and databases.
- Redux internals: Actions, reducers, and state-store flows explained step-by-step.
- AI pipelines: LangChain orchestrations, prompt chains, agent hooks, and vector database lookups.
- Auth flows: Redirects, token exchanges, session states, and OAuth provider integrations.
- Websocket systems: Connection handshakes, heartbeat signals, message brokers, and client broadcasting.
- Deployment workflows: CI/CD pipelines, container orchestration, CDN caching, and edge computing.
- Database scaling: Read replicas, cache layers, write buffers, and index optimizations.
- Microservices: Inter-service communication, event loops, and message queue flows.
- Caching systems: Redis cache-aside strategies, cache invalidation pipelines, and write-through mechanisms.
- Open-source libraries: Walkthroughs of internal execution loops and package entry points.
- Interactive 3D System Maps: Visual representation of your architecture powered by
react-force-graph-3dandThree.jsthat displays project components, category layers, and custom nodes. - Guided Interactive Walkthroughs: Build chronological workflows directly on top of the 3D map to teach others step-by-step how data flows through your system.
- Repository Scaffolder: A quick onboarding helper that imports public GitHub repositories, scans file trees, and sets up a base architecture layout ready for manual annotation.
- Keystroke-Decoupled Editing: Local transaction buffering with complete Undo/Redo controls (↺ / ↻) and global hotkeys (
Ctrl+Z/Ctrl+Y) for fluid system mapping.
[ GitHub Repo ] ──(Import Scaffolder)──► [ Scaffolded Base Layout ]
│
▼
[ Developer Creates Nodes & Workflows ]
│
▼
[ Semantic Relationships & Walkthroughs ]
│
▼
[ Interactive System Map ]
- Scaffolding: The repository importer scaffolds base coordinates and parses technologies to establish the project backbone.
- Human Editing: Developers switch to Edit mode to manually define components, connect semantic relations, document bottlenecks, and write walkthrough steps.
- Interactive Viewer: Teammates, recruiters, or guests load the read-only visual map, running interactive physics nodes and stepping through guided walkthroughs.
- Core Framework: Next.js 16 (Webpack) & React 19
- Visual Engine: Three.js & react-force-graph-3d
- Database & Auth: Supabase Suite (
@supabase/ssr&@supabase/supabase-js) - Styling: Tailwind CSS v4 & Vanilla CSS variables
- Language: TypeScript
git clone https://github.com/pawanshekhawat/DevOS.git
cd devos-app
npm installCreate a .env.local file in the root directory:
NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your-supabase-anon-keyConfigure the following tables in your database:
profiles:id (uuid, primary key),username (text, unique),avatar_url (text),bio (text).projects:id (uuid, primary key),owner_id (uuid, references profiles.id),title (text),slug (text),summary (text),stack_summary (text),status (text),complexity (text),blueprint_data (jsonb).
Note: Ensure Row Level Security (RLS) is configured to allow public reads and restrict modifications to authenticated owners.
npm run devOpen http://localhost:3000 to view your local DevOS workspace!
devos-app/
├── app/
│ ├── [username]/
│ │ ├── [projectSlug]/ # Interactive project architecture visualizer
│ │ ├── dashboard/ # Developer dashboard and portfolio manager
│ │ ├── projects/ # Public list of active system maps
│ │ └── page.tsx # Public portfolio showcase view
│ ├── api/ # Scaffolding and project synchronization endpoints
│ ├── globals.css # Theme palettes and CSS variables
│ └── page.tsx # Home page router
├── components/
│ ├── auth/ # Authentication components & dropdowns
│ ├── dashboard/ # Dashboard layout guards
│ ├── graph/ # 3D canvas rendering & controls
│ ├── guide/ # Interactive concept explorer guides
│ ├── marketing/ # Home landing page sandbox
│ └── onboarding/ # Onboarding spotlight component
├── lib/
│ ├── graph/ # 3D force physics adapters and configurations
│ └── projects/ # Database sync and storage controllers
└── utils/supabase/ # Server and browser initializers
This project is licensed under the MIT License - see the LICENSE file for details.