diff --git a/packages/docs/guide/advanced/images/vue-router-flow.png b/packages/docs/guide/advanced/images/vue-router-flow.png
new file mode 100644
index 000000000..7d72f9528
Binary files /dev/null and b/packages/docs/guide/advanced/images/vue-router-flow.png differ
diff --git a/packages/docs/guide/advanced/navigation-guards.md b/packages/docs/guide/advanced/navigation-guards.md
index cfd3d1604..20678a5e9 100644
--- a/packages/docs/guide/advanced/navigation-guards.md
+++ b/packages/docs/guide/advanced/navigation-guards.md
@@ -250,15 +250,8 @@ If you are writing your component using the [composition API and a `setup` funct
 
 ## The Full Navigation Resolution Flow
 
-1. Navigation triggered.
-2. Call `beforeRouteLeave` guards in deactivated components.
-3. Call global `beforeEach` guards.
-4. Call `beforeRouteUpdate` guards in reused components.
-5. Call `beforeEnter` in route configs.
-6. Resolve async route components.
-7. Call `beforeRouteEnter` in activated components.
-8. Call global `beforeResolve` guards.
-9. Navigation is confirmed.
-10. Call global `afterEach` hooks.
-11. DOM updates triggered.
-12. Call callbacks passed to `next` in `beforeRouteEnter` guards with instantiated instances.
+![Vue router flow](./images/vue-router-flow.png)
+
+<!-- https://www.figma.com/file/nxHzZVExlwnOiWhfeDU0nB/Vue-Router-Flow -->
+
+See also: [Example](https://codesandbox.io/s/router-flow-umcmb8)