uigraph
Live system map for engineers and AI agents
UIGraph helps teams understand how their software fits together. It connects product screens to the APIs, services, and data behind them, so questions like "what happens when someone clicks this button?" have a place to start.
What it does
- Links screenshots and Figma designs to the services and tests behind each interaction.
- Makes architecture diagrams and database relationships explorable.
- Keeps API references, ownership, and documentation together in a service catalog.
- Syncs documentation with code changes and gives AI assistants access to the same system context.
Engineers can trace dependencies before making a change. Product, design, and QA teams can follow a feature without having to read the codebase.
What I learned
- Designing visual editors that make complex relationships easier to follow without overwhelming the screen.
- Connecting UI interactions, API contracts, and database schemas into a consistent system model.
- Keeping documentation useful as code changes, with updates tied to the development workflow.
- Giving AI assistants structured project context through MCP, so they can look up the services and contracts relevant to a task.
- Building backend services and command-line tools in Go.
- Managing infrastructure as code with Terraform and getting hands-on with AWS networking, permissions, storage, and application deployments.