fix: 🐛 fix mermaid chart

Author: Drew Yang

mkdocs.yaml

@@ -71,6 +71,7 @@ theme:
         name: Switch to light mode
 plugins:
   - search
+  - mermaid2
   - section-index
   # There is no welcome.md anymore
   # - redirects:
@@ -96,7 +97,7 @@ markdown_extensions:
       custom_fences:
         - name: mermaid
           class: mermaid
-          format: !!python/name:pymdownx.superfences.fence_code_format
+          format: !!python/name:mermaid2.fence_mermaid_custom
   - pymdownx.tabbed:
       alternate_style: true
   - footnotes

pip_requirements.txt

@@ -4,4 +4,5 @@ mkdocs-exclude
 mdx_truly_sane_lists
 mkdocs-pymdownx-material-extras
 pymdown-extensions
-mkdocs-section-index
+mkdocs-section-index
+mkdocs-mermaid2-plugin

src/elements/user-guide.md

@@ -42,27 +42,20 @@ This diagram describes the general components for a local DataJoint environment.
 
 ```mermaid
 flowchart LR
-  py_interp  -->|DataJoint| db_server[("Database Server\n(e.g., MySQL)")]
-  subgraph conda["Conda environment"]
-    direction TB
-    py_interp[Python Interpreter]
-  end
-  subgraph empty1[" "] %% Empty subgraphs prevent overlapping titles
-    direction TB
-    style empty1 fill:none, stroke-dasharray: 0 1
-    conda
-  end
-  subgraph term["Terminal or Jupyter Notebook"]
-    direction TB
-    empty1
-  end
-  subgraph empty2[" "] %% Empty subgraphs prevent overlapping titles
-    direction TB
-    style empty2 fill:none, stroke-dasharray: 0 1
-    term
-  end
-  class py_interp,conda,term,ide,db_server,DataJoint boxes;
-  classDef boxes fill:#ddd, stroke:#333;
+  %% Nodes
+  py_interp["Python Interpreter"]
+  db_server["Database Server<br>(e.g., MySQL)"]
+  conda_env["Conda Environment"]
+  terminal["Terminal or Jupyter Notebook"]
+
+  %% Edges
+  py_interp -->|DataJoint| db_server
+  terminal --> conda_env
+  conda_env --> py_interp
+
+  %% Styling
+  classDef boxes fill:#ddd,stroke:#333;
+  class py_interp,db_server,conda_env,terminal boxes;
 ```
 
 ### Python