Try with rendered SVGs in Markdown and <details>

docs/architecture/diagrams/model_timeline.md

@@ -19,7 +19,12 @@ A more complete diagram of the data models, their fields, and their
 relationships are in [models_diagram.md](./models_diagram.md), created with
 the `django-model2puml` plugin.
 
-```mermaid
+![./model_timeline.svg]
+
+<details>
+<summary>PlantUML source code</summary>
+```plantuml
+@startuml
 
 allowmixing
 left to right direction
@@ -130,4 +135,7 @@ user2 -[#green]-> DomainInformation : **/domain/<id>/?????**
 actor user3 #Green
 user3 -right[#green]-> UserDomainRole : **/domain/<id>/users/add**
 user3 -right[#green]-> DomainInvitation : **/domain/<id>/users/add**
+
+@enduml
 ```
+</details>

docs/architecture/diagrams/models_diagram.md

@@ -8,7 +8,11 @@ using the command
 $ docker compose app ./manage.py generate_puml --include registrar
 ```
 
-```mermaid
+![./models_diagram.svg]
+
+<details>
+<summary>PlantUML source code</summary>
+```plantuml
 @startuml 
 class "registrar.Contact <Registrar>" as registrar.Contact #d6f4e9 {
     contact
@@ -260,3 +264,4 @@ class "registrar.Website <Registrar>" as registrar.Website #d6f4e9 {
 
 @enduml
 ```
+</details>