Add vision pipeline diagram to documentation (#7689)

* Add vision pipeline diagram

* Moved pipeline to the Guides section

* Fixing segment storage and other flows

* Added text

* Update docs/docs/guides/video_pipeline.md

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

* Keeping case as other pages

* Changing sections to ##

* Update docs/docs/guides/video_pipeline.md

Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>

* Update docs/docs/guides/video_pipeline.md

Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>

---------

Co-authored-by: cat101 <cat101@nowhere.com>
Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>

docs/docs/configuration/index.md

@@ -25,7 +25,7 @@ cameras:
 
 VSCode (and VSCode addon) supports the JSON schemas which will automatically validate the config. This can be added by adding `# yaml-language-server: $schema=http://frigate_host:5000/api/config/schema.json` to the top of the config file. `frigate_host` being the IP address of Frigate or `ccab4aaf-frigate` if running in the addon.
 
-### Full configuration reference:
+### Full configuration reference
 
 :::caution
 

docs/docs/guides/video_pipeline.md

@@ -0,0 +1,65 @@
+---
+id: video_pipeline
+title: The video pipeline
+---
+Frigate uses a sophisticated video pipeline that starts with the camera feed and progressively applies transformations to it (e.g. decoding, motion detection, etc.).
+
+This guide provides an overview to help users understand some of the key Frigate concepts.
+
+## Overview
+
+At a high level, there are five processing steps that could be applied to a camera feed 
+
+```mermaid
+%%{init: {"themeVariables": {"edgeLabelBackground": "transparent"}}}%%
+
+flowchart LR
+    Feed(Feed\nacquisition) --> Decode(Video\ndecoding)
+    Decode --> Motion(Motion\ndetection)
+    Motion --> Object(Object\ndetection)
+    Feed --> Recording(Recording\nand\nvisualization)
+    Motion --> Recording
+    Object --> Recording
+```
+As the diagram shows, all feeds first need to be acquired. Depending on the data source, it may be as simple as using FFmpeg to connect to an RTSP source via TCP or something more involved like connecting to an Apple Homekit camera using go2rtc. A single camera can produce a main (i.e. high resolution) and a sub (i.e. lower resolution) video feed. 
+
+Typically, the sub-feed will be decoded to produce full-frame images. As part of this process, the resolution may be downscaled and an image sampling frequency may be imposed (e.g. keep 5 frames per second). 
+
+These frames will then be compared over time to detect movement areas (a.k.a. motion boxes). These motion boxes are combined into motion regions and are analyzed by a machine learning model to detect known objects. Finally, the snapshot and recording retention config will decide what video clips and events should be saved.
+
+## Detailed view of the video pipeline
+
+The following diagram adds a lot more detail than the simple view explained before. The goal is to show the detailed data paths between the processing steps.
+
+```mermaid
+%%{init: {"themeVariables": {"edgeLabelBackground": "transparent"}}}%%
+
+flowchart TD
+    RecStore[(Recording\nstore)]
+    SnapStore[(Snapshot\nstore)]
+
+    subgraph Acquisition
+        Cam["Camera"] -->|FFmpeg supported| Stream
+        Cam -->|"Other streaming\nprotocols"| go2rtc
+        go2rtc("go2rtc") --> Stream
+        Stream[Capture main and\nsub streams] --> |detect stream|Decode(Decode and\ndownscale)
+    end
+    subgraph Motion
+        Decode --> MotionM(Apply\nmotion masks)
+        MotionM --> MotionD(Motion\ndetection)
+    end
+    subgraph Detection
+        MotionD --> |motion regions| ObjectD(Object detection)
+        Decode --> ObjectD
+        ObjectD --> ObjectFilter(Apply object filters & zones)
+        ObjectFilter --> ObjectZ(Track objects)
+    end
+    Decode --> |decoded frames|Birdseye
+    MotionD --> |motion event|Birdseye
+    ObjectZ --> |object event|Birdseye
+
+    MotionD --> |"video segments\n(retain motion)"|RecStore
+    ObjectZ --> |detection clip|RecStore
+    Stream -->|"video segments\n(retain all)"| RecStore
+    ObjectZ --> |detection snapshot|SnapStore
+```

docs/docusaurus.config.js

@@ -10,6 +10,10 @@ module.exports = {
   favicon: 'img/favicon.ico',
   organizationName: 'blakeblackshear',
   projectName: 'frigate',
+  markdown: {
+    mermaid: true,
+  },
+  themes: ['@docusaurus/theme-mermaid'],
   themeConfig: {  
     algolia: {
       appId: 'WIURGBNBPY',

docs/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@docusaurus/core": "^2.4.1",
     "@docusaurus/preset-classic": "^2.4.1",
+    "@docusaurus/theme-mermaid": "^2.4.1",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",

docs/sidebars.js

@@ -14,6 +14,7 @@ module.exports = {
       "guides/ha_network_storage",
       "guides/stationary_objects",
       "guides/reverse_proxy",
+      "guides/video_pipeline",
     ],
     Configuration: {
       "Configuration Files": [