Update program flow diagram (and use Mermaid.js to make it easy to modify) (#917)

* Update program flow diagram (and use Mermaid.js to make it easy to modify)

* Improve diagram

* Make subgraph titles bold

---------

Co-authored-by: Niklas Neher <[email protected]>
Co-authored-by: Sven Berger <[email protected]>

Author: 3 people

docs/Project.toml

@@ -2,6 +2,7 @@
 Asciicast = "2600d445-abca-43b9-92aa-ce144ac0b05b"
 Documenter = "e30172f5-a6a5-5a46-863b-614d45cd2de4"
 DocumenterCitations = "daee34ce-89f3-4625-b898-19384cb65244"
+DocumenterMermaid = "a078cd44-4d9c-4618-b545-3ab9d77f9177"
 Literate = "98b081ad-f1c9-55d3-8b20-4c87d4299306"
 OrdinaryDiffEq = "1dea7af3-3e70-54e6-95c3-0bf5283fa5ed"
 Plots = "91a5bcdd-55d7-5caf-9e0b-520d859cae80"

docs/make.jl

@@ -1,4 +1,4 @@
-using Documenter, DocumenterCitations
+using Documenter, DocumenterCitations, DocumenterMermaid
 using TrixiParticles
 using TrixiParticles.TrixiBase
 using TrixiParticles.PointNeighbors

docs/src/overview.md

@@ -17,8 +17,65 @@ During a single time step or an intermediate step of the time integration scheme
 `drift!` and `kick!` are invoked, followed by the functions depicted in this diagram
 (with key parts highlighted in orange/yellow).
 
-![Main Program Flow](https://github.com/trixi-framework/TrixiParticles.jl/assets/10238714/d7c6eedd-7173-4879-b62e-3e6d4bc5091f)
+```mermaid
+%% Make arrows bend at right angles
+%%{ init : { "flowchart" : { "curve" : "stepAfter" }}}%%
 
+%% TD means vertical layout
+flowchart TD
+    %% --- Define color palette and styles ---
+    classDef start_node fill:#d9ead3,stroke:#333,color:#333
+    classDef time_integration fill:#d9d2e9,stroke:#333,color:#333
+    classDef primary_stage fill:#cfe2f3,stroke:#333,color:#333
+    classDef update fill:#eeeeee,stroke:#333,color:#333
+    classDef updates fill:#fff2cc,stroke:#333,color:#333
+    classDef physics fill:#fce5cd,stroke:#333,color:#333
+
+    A(simulation) --> B[time integration];
+
+    %% Add hidden dummy node to branch the arrow nicely
+    B --- dummy[ ];
+    style dummy width:0;
+    dummy --> C["drift!<br/>(update du/dt)"];
+
+    subgraph kick["<div style='padding: 10px; font-weight: bold;'>kick! (update dv/dt)</div>"]
+        %% Horizontal layout within this subgraph
+        direction LR;
+
+        subgraph updates["<div style='padding: 10px; font-weight: bold;'>update_systems_and_nhs</div>"]
+            %% Vertical layout within this subgraph
+            direction TB;
+
+            H["update_positions!<br/>(moving boundaries and structures)"];
+            I["update_nhs!<br/>(update neighborhood search)"];
+            J["update_quantities!<br/>(recalculate density etc.)"];
+            K["update_pressure!<br/>(recalculate pressure etc.)"];
+            L["update_boundary_interpolation!<br/>(interpolate boundary pressure)"];
+            M["update_final!<br/>(update shifting)"];
+
+            H --> I --> J --> K --> L --> M;
+        end
+
+        F["system_interaction!<br/>(e.g. momentum/continuity equation)"];
+        G["add_source_terms!<br/>(gravity and source terms)"];
+
+        updates --> F --> G;
+    end
+
+    dummy --> kick;
+
+    %% Color the sub-tasks by their function
+    class A start_node;
+    class B time_integration;
+    class C primary_stage;
+    class kick primary_stage;
+    class updates update;
+    class H,I,J,K,L,M updates;
+    class F,G physics;
+
+    %% Style the arrows
+    linkStyle default stroke-width:2px,stroke:#555
+```
 
 ## Structure
 What we refer to as schemes are various models such as Weakly Compressible Smoothed Particle Hydrodynamics (WCSPH)