Changed mermaid diagram to PNG and changed paths to support paths in Blog post URLs

_posts/2025-11-21-mvvm.md

@@ -42,7 +42,7 @@ MVVM also uses data-binding that can be done with one way, one way to source, or
 
 When asking guidance from M365 Copilot, Copilot provided following diagram about MVVM usage for different JS and TS UI frameworks.
 
-![MVVM JS and TS frameworks diagram](../img/2025-11-18-mvvm/Designer.png)
+![MVVM JS and TS frameworks diagram](../../../img/2025-11-18-mvvm/Designer.png)
 
 Knockout.js and Vue.js provide possibility to create ViewModels, Views, and Models for MVVM style based application. Angular has components model, which is replacing ViewModel, but works similarly.
 
@@ -65,52 +65,7 @@ Knockout.js, Vue.js and Angular provide possibility to use Two-way data-binding.
 
 Below GitHub Copilot has created diagram that describes two .NET Core based case examples with WPF Windows application and Blazor Web application that are using MVVM pattern.
 
-```mermaid
-flowchart LR
-  subgraph Shared
-    Shared_VM["ViewModel Assembly (C#)"]
-    Shared_Model["Model Assembly (C#)"]
-  end
-
-  subgraph WPF
-    WPF_Page1["XAML Page 1"]
-    WPF_Page2["XAML Page 2"]
-    WPF_View["XAML View"]
-    WPF_Page1 --> WPF_View
-    WPF_Page2 --> WPF_View
-
-    %% pages reference shared viewmodels/models
-    WPF_Page1 ---|references| Shared_VM
-    WPF_Page2 ---|references| Shared_VM
-    WPF_Page1 ---|references| Shared_Model
-    WPF_Page2 ---|references| Shared_Model
-
-    WPF_View -- "Data Binding / Commands" --> Shared_VM
-    Shared_VM --> Shared_Model
-  end
-
-  subgraph Blazor
-    Blazor_Page1["Razor Page 1 (.razor)"]
-    Blazor_Page2["Razor Page 2 (.razor)"]
-    Blazor_View["Razor Component (.razor)"]
-    Blazor_Page1 --> Blazor_View
-    Blazor_Page2 --> Blazor_View
-
-    %% pages reference shared viewmodels/models
-    Blazor_Page1 ---|references| Shared_VM
-    Blazor_Page2 ---|references| Shared_VM
-    Blazor_Page1 ---|references| Shared_Model
-    Blazor_Page2 ---|references| Shared_Model
-
-    Blazor_View -- "Data Binding / Commands" --> Shared_VM
-    Shared_VM --> Shared_Model
-  end
-
-  WPF_View ---|references| Shared_VM
-  WPF_View ---|references| Shared_Model
-  Blazor_View ---|references| Shared_VM
-  Blazor_View ---|references| Shared_Model
-```
+![MVVM Architecture Diagram](../../../img/2025-11-18-mvvm/mermaid-diagram-2025-11-21-141217_c.png)
 
 In past projects, there have been successful experiences about creating two user interface projects with same ViewModel library, like it is shown in the above diagram. This means that same business logic, and same UI logic can be used in Windows application and in Web applications with Blazor and WPF.