doc: add diagram about jotai atoms

doc/Development.md

@@ -31,3 +31,85 @@ Automated integration tests using `cypress`.
   ```
 
 The tests produce screenshots on failure. In the Github-CI, failing tests will produce screenshots and videos which will be attached as artifacts for inspection.
+
+### Application Design
+
+#### Atom structure
+
+The project uses various jotai atoms to describe the internal state. Below is an overview. Downwards-arrows mean the lower atom depends on the upper one, upwards arrows (red) mean the setter of the lower atom writes the upper one. Dotted lines are "setter-only".
+
+The colors symbolise outside influence: queries (blue), the page url (orange) or browser storage (green). Red atoms are "setter-only".
+
+Atoms which are considered "prinicipal input" are in a rhomboid.
+
+```mermaid
+graph TD;
+
+  %% getter
+  urlArgsAtom-->urlArgsStableAtom;
+  urlArgsStableAtom-->importUrlAtom;
+  importUrlAtom-->importedCodeQueryAtom;
+  importedCodeQueryAtom-->importedCodeAtom;
+  projectsQueryAtom-->projectsAtom
+  projectsAtom-->defaultProjectAtom;
+  projectsAtom-->currentProjectAtom;
+  defaultProjectAtom-->currentProjectAtom;
+  projectsAtom-->visibleProjectsAtom;
+  currentProjectAtom-->visibleProjectsAtom;
+  codeAtom[/codeAtom/]
+  urlArgsStableAtom-->codeAtom;
+  importedCodeAtom-->codeAtom;
+  locationAtom-->settingsUrlAtom;
+  settingsUrlAtom-->settingsUrlStableAtom;
+  settingsAtom[/settingsAtom/]
+  settingsUrlStableAtom-->settingsAtom;
+  settingsAtom-->mobileAtom;
+
+  %% getter and setter
+  locationAtom<-->urlArgsAtom;
+  importUrlBaseAtom<-->importUrlAtom;
+  urlArgsAtom<-->currentProjectAtom;
+  settingsBaseAtom<-->settingsAtom;
+  settingsStoreAtom<-->settingsAtom;
+
+  %% setter
+  importUrlAtom -.-> urlArgsAtom;
+  codeAtom -.-> urlArgsAtom;
+  settingsAtom -.-> locationAtom;
+
+  setImportUrlAndProjectAtom[/setImportUrlAndProjectAtom/]
+  importUrlAtom <-.-> setImportUrlAndProjectAtom
+  currentProjectAtom <-.-> setImportUrlAndProjectAtom
+
+  %% Styles
+
+  linkStyle 16 stroke: red;
+  linkStyle 17 stroke: red;
+  linkStyle 18 stroke: red;
+  linkStyle 19 stroke: red;
+  linkStyle 20 stroke: red;
+  linkStyle 21 stroke: red;
+  linkStyle 22 stroke: red;
+  linkStyle 23 stroke: red;
+  linkStyle 24 stroke: red;
+  linkStyle 25 stroke: red;
+
+  classDef query fill:#d0ebff,stroke:#1c7ed6,stroke-width:2px;
+  classDef storage fill:#d3f9d8,stroke:#2b8a3e,stroke-width:2px;
+  classDef location fill:#ffe8cc,stroke:#e8590c,stroke-width:2px;
+  classDef setter fill:#fff5f5,stroke:#e03131,stroke-width:2px;
+
+  %% Location atoms
+  class locationAtom location;
+
+  %% Query atoms
+  class importedCodeQueryAtom query;
+  class projectsQueryAtom query;
+
+  %% Storage atoms
+  class settingsStoreAtom storage;
+
+  %% Setter
+  class setImportUrlAndProjectAtom setter;
+  class applySettingsAtom setter;
+```