# UIGraph

> UIGraph is a visual system mapping tool that connects UI screens to APIs, services, databases, and tests. It turns a scattered codebase into a navigable, always-in-sync system map — kept live by your CI/CD pipeline.

UIGraph is built for product and engineering teams who need to understand how their system actually works end to end. Instead of scattered wikis and outdated diagrams, UIGraph creates a living map of services, APIs, UI flows, and database schemas that updates automatically on every deploy via the `uigraph-cli sync` CLI command.

## What UIGraph does

- Map UI screens to the exact API calls, services, and database tables they depend on
- Import OpenAPI, GraphQL, and gRPC specs — all endpoints indexed and searchable instantly
- Sync architecture diagrams from your repository via CLI on every push
- Import SQL schemas (PostgreSQL, MySQL, MongoDB, DynamoDB) and visualize table relationships
- Annotate UI screenshots with clickable focal points linked to backend services and owners
- Share system maps across product, design, QA, and ops — no code access required

## Who uses UIGraph

- **Engineering Teams**: Know the full call chain of any UI feature before opening a single file. Stop context-switching between code, Slack, and outdated docs.
- **Product Teams**: See which APIs and services power each screen before committing to a spec.
- **Design Teams**: Understand backend constraints before designing changes that break something downstream.
- **QA & Testing**: Trace the full test surface of any feature without asking an engineer.
- **Project Management**: Track which services a feature touches and who owns each one at handoff.
- **DevOps & IT**: Isolate incidents faster by seeing the full frontend-to-backend call chain.
- **New Engineers**: Onboard in hours instead of weeks with a navigable, living system map.

## Integrations and technical specs

- **CLI**: `uigraph-cli sync` — runs in CI/CD pipelines (GitHub Actions, GitLab CI, and others)
- **Version control**: GitHub, GitLab
- **API specs**: OpenAPI 3.x, GraphQL, gRPC
- **Databases**: PostgreSQL, MySQL, MongoDB, DynamoDB
- **Diagrams**: Architecture diagrams imported directly from your repository

## Open source

UIGraph is open source (source-available license — free to use for development, testing, and evaluation; production use requires a commercial license). Code and self-hosting instructions are published across the uigraph-oss GitHub organization: https://github.com/uigraph-oss

- [uigraph-api](https://github.com/uigraph-oss/uigraph-api): Go backend powering the UIGraph platform
- [uigraph-ui](https://github.com/uigraph-oss/uigraph-ui): React-based visual editor for system maps
- [uigraph-graphql](https://github.com/uigraph-oss/uigraph-graphql): GraphQL BFF (backend-for-frontend) layer
- [uigraph-gateway](https://github.com/uigraph-oss/uigraph-gateway): CLI sync bridge between your repo and UIGraph
- [uigraph-cli](https://github.com/uigraph-oss/uigraph-cli): Command-line tool for syncing services, schemas, and diagrams
- [uigraph-mcp](https://github.com/uigraph-oss/uigraph-mcp): MCP server exposing system context to AI agents
- [uigraph-sdk](https://github.com/uigraph-oss/uigraph-sdk): SDK for parsing schemas and diagrams
- [uigraph-deploy](https://github.com/uigraph-oss/uigraph-deploy): Docker Compose stack for self-hosting UIGraph
- [uigraph-scripts](https://github.com/uigraph-oss/uigraph-scripts): Seed data and setup scripts

## Pricing

UIGraph offers a free tier to get started, with Team and Enterprise plans for larger teams. Enterprise customers can also self-host UIGraph on their own AWS, GCP, or on-prem infrastructure. First service map in under 5 minutes. No code or config required.

## Product pages

- [System Maps](https://uigraph.app/system-maps): Every screen, connected to what actually runs it.
- [Diagrams](https://uigraph.app/diagrams): Diagrams that don't lie to you.
- [Service Catalog](https://uigraph.app/service-catalog): Every service: its API, architecture, database schema, test coverage, and history, on one entry.
- [AI](https://uigraph.app/ai): Your architecture, available to every agent you run.
- [Insights](https://uigraph.app/insights): What your AI tooling actually costs, and what it actually saves.
- [ML Studio](https://uigraph.app/ml-studio): Your models, in the same graph as the services that serve them.
- [Costs & Infra](https://uigraph.app/costs): Which service is spending your cloud budget.
- [CLI](https://uigraph.app/cli): One config file. Thirteen kinds of artifact. Every push.
- [MCP Setup](https://uigraph.app/mcp): Give your coding agent your architecture.

## Key pages

- [Homepage](https://uigraph.app/): Overview of UIGraph — visual system mapping for engineering teams
- [Pricing](https://uigraph.app/pricing): Subscription plans — Free, Team, and Enterprise tiers
- [Blog](https://uigraph.app/blog): Articles on system documentation, architecture visibility, and engineering onboarding
- [Documentation](https://docs.uigraph.app): UIGraph product documentation, CLI reference, and API guides
- [GitHub](https://github.com/uigraph-oss): Open-source repositories — self-host UIGraph or explore the code
- [Contact / Request a demo](https://uigraph.app/contact-us): Get in touch with the UIGraph team or request a product walkthrough

## Blog articles

- [What is system documentation for engineering teams — and why Wikis always fail](https://uigraph.app/blog/what-is-system-documentation-for-engineering-teams-and-why-wikis-always-fail): Engineering wikis sound like a good idea until they rot. Learn why traditional documentation fails software teams and what living, visual system maps actually solve.
- [What is UIGraph? A visual system mapping tool built for engineering teams](https://uigraph.app/blog/what-is-uigraph-a-visual-system-mapping-tool-built-for-engineering-teams): UIGraph is a visual system mapping tool that connects UI screens to APIs, services, databases, and tests. Built for engineering teams who need documentation that stays in sync with code.
- [How to connect your Figma screens to backend services — the UIGraph way](https://uigraph.app/blog/how-to-connect-your-figma-screens-to-backend-services-the-uigraph-way): Learn how to link Figma UI designs directly to APIs, services, and databases using UIGraph. The engineering handoff tool that keeps design and implementation connected.
- [Visualize your PostgreSQL schema in 5 minutes with UIGraph's SQL import](https://uigraph.app/blog/visualize-your-postgresql-schema-in-5-minutes-with-uigraphs-sql-import): UIGraph auto-generates interactive ER diagrams from your SQL schema files. Supports PostgreSQL, MySQL, and SQLite. No drawing required — paste your schema and get a navigable diagram.
- [UIGraph CLI: sync your service metadata and API specs from Git on every deploy](https://uigraph.app/blog/uigraph-cli-sync-your-service-metadata-and-api-specs-from-git-on-every-deploy): The UIGraph CLI keeps your service documentation, API specs, and database schemas in sync with your code automatically. Set it up in 10 minutes and never manually update a doc again.
- [UIGraph vs Confluence vs Notion: which wins for engineering documentation?](https://uigraph.app/blog/uigraph-vs-confluence-vs-notion-which-wins-for-engineering-documentation): An honest comparison of UIGraph, Confluence, and Notion for engineering team documentation. Visual maps vs wikis — what actually works for software teams.
- [How to document a microservices architecture without going insane](https://uigraph.app/blog/how-to-document-a-microservices-architecture-without-going-insane): Documenting a microservices architecture is notoriously hard. Learn the practical patterns that actually work for distributed systems with dozens of services.
- [Using UIGraph with AWS DynamoDB: auto-generate your NoSQL schema diagrams](https://uigraph.app/blog/using-uigraph-with-aws-dynamodb-auto-generate-your-nosql-schema-diagrams): Automatically generate interactive DynamoDB schema diagrams from your table definitions in UIGraph. Supports single-table design and multi-table NoSQL schemas.
- [The engineering onboarding problem: how visual maps cut ramp-up time](https://uigraph.app/blog/the-engineering-onboarding-problem-how-visual-maps-cut-ramp-up-time): New engineers take weeks or months to become productive. Learn how visual system maps connect UI screens to backend implementation and dramatically reduce ramp-up time.
- [Mermaid diagrams inside UIGraph: embedding architecture context into your service maps](https://uigraph.app/blog/mermaid-diagrams-inside-uigraph-embedding-architecture-context-into-your-service-maps): UIGraph's CLI syncs Mermaid .mmd diagram files directly into your service maps. Use Mermaid for architecture context and UIGraph for navigation — the complete setup guide.

## Optional

- [llms-full.txt](https://uigraph.app/llms-full.txt): Full text content of all blog articles for LLM indexing
- [sitemap.xml](https://uigraph.app/sitemap.xml): Full site map with all URLs and metadata