fix: convert Mermaid diagrams to use pre tags

- Updated all Mermaid diagrams to use <pre class='mermaid'> format
- Verified Mermaid library inclusion in default template
- Confirmed proper CSS styling for diagrams
- Updated memory bank documentation

Files modified:
- getting-started-template.md
- extension-lifecycle.md
- api-integration-patterns.md
- getting-started-index-template.md
- guide-template.md
- social-media-integration.md
- woocommerce-integration.md
- memory-bank/activeContext.md
- memory-bank/progress.md

Author: dennisdornon

assets/css/style.scss assets/css/style.scss.backupassets/css/style.scss renamed to assets/css/style.scss.backup

@@ -16,15 +16,15 @@ This guide applies to both extensions and integrations, with specific considerat
 
 The MainWP add-on development lifecycle consists of several distinct phases:
 
-```mermaid
+<pre class="mermaid">
 flowchart TD
     A[Planning] --> B[Development]
     B --> C[Testing]
     C --> D[Distribution]
     D --> E[Maintenance]
     E --> F[Updates]
     F --> C
-```
+</pre>
 
 Each phase has specific goals, activities, and deliverables that contribute to creating a successful extension.
 

guides/concepts/extension-lifecycle.md

@@ -31,14 +31,14 @@ A MainWP social media integration allows you to centrally manage and monitor soc
 
 The integration works by communicating between the MainWP Dashboard and social media platforms via child sites:
 
-```mermaid
+<pre class="mermaid">
 flowchart TD
     A[MainWP Dashboard] -->|API Request| B[MainWP Child]
     B -->|Social Media API Request| C[LinkedIn API]
     C -->|API Response| B
     B -->|API Response| A
     D[Social Media Data] -->|Stored During Sync| A
-```
+</pre>
 
 ## Step 1: Setting Up LinkedIn API Access
 

guides/how-to/social-media-integration.md

@@ -31,14 +31,14 @@ A MainWP WooCommerce integration allows you to centrally manage and monitor WooC
 
 The integration works by communicating between the MainWP Dashboard and WooCommerce on child sites:
 
-```mermaid
+<pre class="mermaid">
 flowchart TD
     A[MainWP Dashboard] -->|API Request| B[MainWP Child]
     B -->|WC API Request| C[WooCommerce]
     C -->|WC API Response| B
     B -->|API Response| A
     D[WooCommerce Data] -->|Stored During Sync| A
-```
+</pre>
 
 ## Step 1: Setting Up WooCommerce API Access
 

guides/how-to/woocommerce-integration.md

@@ -6,7 +6,7 @@ This reference guide documents common patterns and architectures for integrating
 
 Use this decision tree to help you choose the right pattern for your integration needs:
 
-```mermaid
+<pre class="mermaid">
 flowchart TD
     Start[Start] --> Q1{Are you using an\nexisting API client?}
     Q1 -->|Yes| Q1a{Does it match your\nneeds exactly?}
@@ -62,7 +62,7 @@ flowchart TD
 
     Rate -->|Token bucket| R1[Token Bucket Pattern]
     Rate -->|Constant rate| R2[Leaky Bucket Pattern]
-```
+</pre>
 
 ## Overview
 

guides/reference/api-integration-patterns.md

@@ -4,7 +4,7 @@ Welcome to the MainWP Developer Documentation! This comprehensive resource is de
 
 ## Documentation Overview
 
-```mermaid
+<pre class="mermaid">
 flowchart TD
     A[Getting Started] --> B[Core Concepts]
     A --> C[How-To Guides]
@@ -20,7 +20,7 @@ flowchart TD
     style B fill:#2196F3,stroke:#1976D2,color:white
     style C fill:#FFC107,stroke:#FFA000,color:white
     style D fill:#9C27B0,stroke:#7B1FA2,color:white
-```
+</pre>
 
 ## Getting Started
 

guides/templates/getting-started-index-template.md

@@ -6,7 +6,7 @@ Welcome to MainWP development! This guide will walk you through the essential st
 
 Follow these steps to begin your MainWP development journey:
 
-```mermaid
+<pre class="mermaid">
 flowchart LR
     A[1. Setup Environment] --> B[2. Choose Add-on Type]
     B --> C1[3a. Create Basic Extension]
@@ -19,7 +19,7 @@ flowchart LR
     style C1 fill:#FFC107,stroke:#FFA000,color:white
     style C2 fill:#FFC107,stroke:#FFA000,color:white
     style D fill:#9C27B0,stroke:#7B1FA2,color:white
-```
+</pre>
 
 ## Step 1: Set Up Your Development Environment
 
@@ -74,7 +74,7 @@ MainWP uses specific terminology to distinguish between different types of add-o
 
 Use this decision tree to determine whether you should build an Extension or an Integration:
 
-```mermaid
+<pre class="mermaid">
 flowchart TD
     A[Do you need to connect with\na third-party service or plugin?] -->|Yes| B[Integration]
     A -->|No| C[Extension]
@@ -86,7 +86,7 @@ flowchart TD
     style C fill:#FFC107,stroke:#FFA000,color:white
     style D fill:#9E9E9E,stroke:#757575,color:white
     style E fill:#9E9E9E,stroke:#757575,color:white
-```
+</pre>
 
 ### Extension Examples
 

guides/templates/getting-started-template.md

@@ -43,12 +43,12 @@ A brief introduction to the topic that explains:
 - Why this is important for MainWP developers
 - How this fits into the broader MainWP ecosystem
 
-```mermaid
+<pre class="mermaid">
 flowchart TD
     A[First Step] --> B[Second Step]
     B --> C[Third Step]
     C --> D[Final Result]
-```
+</pre>
 
 ## Step 1: First Major Step