Skip to main content

Welcome to UiGraph Documentation

UiGraph is a powerful visual mapping tool designed to help teams describe features, modules, and services through interactive maps and diagrams. It bridges the gap between design and implementation by connecting UI spots to technical details.

What is UiGraph?​

UiGraph enables teams to:

  • 🗺️ Create Maps: Describe features, modules, and services in a structured way.
  • 🖼️ Add Frames: Upload screens or diagrams (e.g., from Figma) to represent your UI.
  • 📍 Focal Points: Connect specific UI regions to implementation details like APIs, services, databases, and tests.
  • 🗄️ Database Visualization: Import SQL and NoSQL schemas to automatically generate interactive diagrams.

Key Concepts​

Maps & Frames​

A Map is a collection of Frames explaining a feature or domain. Frames are the visual representations (screenshots or diagrams) where you place interactive points.

Points & Pins​

Interactive markers on a frame that link UI regions to:

  • Other maps (drill-down)
  • Implementation details
  • Subframes or variants

Database Imports​

UiGraph supports robust, AST-based parsing for:

  • SQL: MySQL, PostgreSQL, and SQLite.
  • NoSQL: Generic JSON schemas and AWS DynamoDB.

Getting Started​

Ready to start mapping? Here's how to begin:

Core Workflows​

  1. Creating and Managing Maps - Learn how to create and organize System Maps.
  2. Managing Frames - Upload screens, import from Figma, and manage frames within maps.
  3. Flow Diagrams - Create and manage System Flow diagrams for architecture visualization.
  4. Collaboration & Teams - Work together with comments, teams, and sharing features.

Database Visualization​

  1. SQL Import Guide - Learn how to visualize your SQL database schemas.
  2. NoSQL Generic Guide - Visualize generic NoSQL schemas.
  3. DynamoDB Guide - Visualize AWS DynamoDB tables.

Advanced Features​

  1. Points & Pins Guide - Master interactive mapping with Implementation Points, Map Points, and Frame Groups.

Support & Resources​

Need help? We're here for you:

Ready to dive in? Check out our SQL Import Guide to see how easy it is to visualize your database!