whatisgithub

What is compose-nav-graph?

skydoves/compose-nav-graph — explained in plain English

Analysis updated 2026-05-18

228KotlinAudience · developerLicense

In one sentence

Compose Navigation Graph is an Android Studio plugin that visualizes an entire Jetpack Compose app's screens and transitions as an interactive map of rendered previews.

Mindmap

mindmap
  root((Compose Navigation Graph))
    What it does
      Visualizes app navigation
      Rendered preview thumbnails
    Pieces
      Annotations
      KSP processor
      Gradle plugin
      IDE plugin
    Tech stack
      Kotlin
      Jetpack Compose
      Gradle
    Use cases
      Navigate to source instantly
      Review navigation changes in PRs

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Visualize an entire Android app's Jetpack Compose navigation flow as one interactive diagram in the IDE.

USE CASE 2

Jump straight from a screen's diagram thumbnail to its source code with a double click.

USE CASE 3

Commit a navigation baseline file so pull requests are checked for unreviewed navigation changes.

USE CASE 4

Automate plugin setup and first graph generation by feeding the project's guide to an AI coding assistant.

What is it built with?

KotlinJetpack ComposeGradleKSPIntelliJ Platform

How does it compare?

skydoves/compose-nav-graphtrooped/quickbarsairbnb/viaduct
Stars228289158
LanguageKotlinKotlinKotlin
Setup difficultyeasymoderate
Complexity2/54/5
Audiencedevelopergeneraldeveloper

Figures from each repo's GitHub metadata at analysis time.

Apache 2.0 license: use freely for any purpose, including commercial use, as long as you keep the copyright and license notices.

So what is it?

Compose Navigation Graph is an Android Studio and IntelliJ IDEA plugin that turns an entire app's navigation flow, meaning every screen and every way a user can move between screens, into one visual, interactive map. Instead of a developer having to mentally piece together the flow from scattered code that defines routes and screen transitions across many files, the plugin shows every screen as a small rendered preview thumbnail and every transition between screens as an arrow that can be followed, with a double click jumping straight to the relevant source code. It works with apps built using Jetpack Compose, including both the newer Navigation 3 and the older Navigation 2 libraries, other Compose navigation libraries, and even apps that still use plain Android Activities instead of Compose screens. The toolkit is made up of four cooperating pieces. A set of annotations lets a developer mark which composable functions are navigation destinations, which connections exist between them, and which one is the root of the graph. A compiler plugin called a KSP processor reads those annotations and statically extracts each module's navigation graph into a JSON file at compile time, without needing to run the app in an emulator. A Gradle plugin renders device-free preview thumbnails of each screen, merges the graphs from all of a project's modules together, and adds several build tasks for generating, dumping, and checking the navigation graph. Finally, the IDE plugin itself draws the merged flow as an interactive diagram inside a dedicated tool window in Android Studio or IntelliJ. Beyond visualization, the project supports saving a navigation baseline file that can be committed to version control, so that pull requests can be checked against it, catching any unreviewed changes to destinations or transitions before they are merged. The README also mentions that its setup can be automated by feeding a bundled guide document directly to an AI coding assistant such as Claude Code, Cursor, or Gemini CLI, which can then apply the Gradle plugin, add the annotations to existing screens, and generate the first navigation graph automatically. The project is written in Kotlin, distributed through Maven Central and the JetBrains Marketplace, supports Android API level 24 and above, and is released under the Apache 2.0 license.

Copy-paste prompts

Prompt 1
Help me install the Compose Navigation Graph plugin in Android Studio and apply its Gradle plugin to my project.
Prompt 2
Use the plugin-agent-guides.md file to have Claude Code set up Compose Navigation Graph and annotate my screens.
Prompt 3
Explain how the KSP processor extracts a navigation graph from my annotated Compose screens.
Prompt 4
Show me how to commit a .nav baseline so pull requests catch unreviewed navigation changes.

Frequently asked questions

What is compose-nav-graph?

Compose Navigation Graph is an Android Studio plugin that visualizes an entire Jetpack Compose app's screens and transitions as an interactive map of rendered previews.

What language is compose-nav-graph written in?

Mainly Kotlin. The stack also includes Kotlin, Jetpack Compose, Gradle.

What license does compose-nav-graph use?

Apache 2.0 license: use freely for any purpose, including commercial use, as long as you keep the copyright and license notices.

Who is compose-nav-graph for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.