compose-nav-graph
⛵️ Compose Navigation Graph plugin for Android Studio that visualizes your entire app flow as an interactive map of rendered previews, typed arguments, and transitions.
Compose Navigation Graph is a tool for developers building Android apps. In an app, users move from screen to screen, for example from a home screen to a detail screen, and that web of connections is called the navigation flow. In a large project this flow is spread across many files and is hard to picture in your head. This tool draws the whole thing as a single interactive map.
The map shows every screen as a small rendered thumbnail and every transition between screens as an arrow you can follow. A useful detail is that those thumbnails are generated without running a phone emulator, so previews appear quickly. Developers mark up their screens with short labels in the code, called annotations, to say which screen is which, where the flow starts, and which arrows connect them. The tool then reads those labels automatically and builds the graph, merging the picture across all parts of a multi-part project.
There are four cooperating pieces. A set of annotations describe the graph in code. A build-time processor extracts each part's graph into a data file. A Gradle plugin, Gradle being the standard build system for Android, renders the thumbnails and merges everything together. Finally a plugin for Android Studio or IntelliJ, the editors developers use, draws the merged map in a side panel where you can double-click a screen to jump to its code or add a transition directly from the map.
The README says it works with several navigation approaches, including older and newer ones, and even plain screens, without needing to rewrite existing code. It can also check navigation changes during code review by comparing against a saved baseline file, so no screen or transition changes without being noticed. Installation is done through the JetBrains plugin marketplace and by adding the plugin to the project's build file.