Mermaid 다이어그램 지원 개선 및 아키텍처 문서 추가

- Mermaid 다이어그램을 전체적으로 적용하도록 변경
- AWS 서버리스 아키텍처 및 포스팅 프로세스 플로우에 대한 다이어그램 추가
- 테스트용 Mermaid 테마 관련 포스트 삭제

Author: realcoding2003

_layouts/default.html

@@ -68,10 +68,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
     <script src="{{ '/assets/js/main.js' | relative_url }}"></script>
 
-    <!-- Mermaid 다이어그램 지원 (조건부 로드) -->
-    {% if page.mermaid %}
-        {% include mermaid.html %}
-    {% endif %}
+    <!-- Mermaid 다이어그램 지원 (전체 적용) -->
+    {% include mermaid.html %}
 
     <!-- Google Tag Manager (noscript) -->
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T3KNH95M"

_posts/2024-04-10-aws-serverless-naver-blog-automation.md

@@ -128,6 +128,78 @@ aws logs put-metric-filter \
 
 ### 아키텍처 상세 설계
 
+#### AWS 서버리스 아키텍처 전체 구조
+
+```mermaid
+graph TB
+    subgraph "외부 트리거"
+        A[CloudWatch Events<br/>스케줄 기반]
+        B[S3 Event<br/>파일 업로드]
+        C[API Gateway<br/>수동 트리거]
+    end
+    
+    subgraph "AWS 서버리스 서비스"
+        D[Lambda Function<br/>네이버 블로그 포스팅]
+        E[S3 Bucket<br/>콘텐츠 & 이미지 저장]
+        F[CloudWatch<br/>로그 & 메트릭]
+        G[SNS<br/>알림 서비스]
+    end
+    
+    subgraph "외부 서비스"
+        H[네이버 블로그<br/>Selenium 자동화]
+        I[이메일/슬랙<br/>알림 수신]
+    end
+    
+    A --> D
+    B --> D
+    C --> D
+    
+    D <--> E
+    D --> F
+    D --> G
+    D --> H
+    
+    G --> I
+    
+    style D fill:#667eea,stroke:#5a67d8,color:#fff
+    style H fill:#f093fb,stroke:#e879f9,color:#1a202c
+    style I fill:#4ade80,stroke:#22c55e,color:#1a202c
+```
+
+#### 포스팅 프로세스 플로우
+
+```mermaid
+sequenceDiagram
+    participant CW as CloudWatch Events
+    participant Lambda as Lambda Function
+    participant S3 as S3 Bucket
+    participant Selenium as Selenium Driver
+    participant Naver as 네이버 블로그
+    participant SNS as SNS 알림
+    participant User as 사용자
+
+    CW->>Lambda: 스케줄 트리거 (예: 매일 오전 9시)
+    Lambda->>S3: 포스팅 데이터 조회
+    S3-->>Lambda: JSON 데이터 반환
+    
+    Lambda->>Selenium: Chrome 드라이버 시작
+    Selenium->>Naver: 로그인 & 포스팅 페이지 접근
+    Selenium->>Naver: 제목, 내용, 이미지 입력
+    Selenium->>Naver: 포스팅 게시
+    Naver-->>Selenium: 게시 완료 확인
+    Selenium-->>Lambda: 결과 반환
+    
+    alt 성공 시
+        Lambda->>S3: 상태 업데이트 (completed)
+        Lambda->>SNS: 성공 알림 발송
+        SNS->>User: 이메일/슬랙 알림
+    else 실패 시
+        Lambda->>S3: 에러 로그 저장
+        Lambda->>SNS: 실패 알림 발송
+        SNS->>User: 에러 알림
+    end
+```
+
 #### 1. S3 기반 콘텐츠 관리
 ```json
 {

_posts/2025-06-07-mermaid-theme-test.md _posts/2025-06-06-mermaid-theme-test.md_posts/2025-06-07-mermaid-theme-test.md renamed to _posts/2025-06-06-mermaid-theme-test.md

@@ -1,7 +1,7 @@
 ---
 layout: post
 title: "Mermaid 다크모드/라이트모드 자동 대응 테스트"
-date: 2025-06-07 00:00:00 +0900
+date: 2025-06-06 00:00:00 +0900
 categories: [Test, Theme]
 tags: [mermaid, dark-mode, light-mode, responsive-design]
 author: "Kevin Park"

_posts/2025-06-06-vertex-ai-imagen-python-guide.md

@@ -190,6 +190,32 @@ batch_results = generate_batch_images(prompts)
 ![프로덕션 환경 아키텍처](/assets/images/posts/vertex-ai-imagen-diagram-architecture.png)
 *Vertex AI Imagen을 활용한 프로덕션 시스템 아키텍처*
 
+#### Vertex AI Imagen 워크플로우
+
+```mermaid
+graph TD
+    A[Python 애플리케이션] --> B[Vertex AI 인증]
+    B --> C[ImageGenerationModel 로드]
+    C --> D[프롬프트 입력]
+    D --> E{배치 처리?}
+    
+    E -->|단일| F[단일 이미지 생성]
+    E -->|배치| G[배치 이미지 생성]
+    
+    F --> H[이미지 후처리]
+    G --> I[배치 결과 수집]
+    I --> H
+    
+    H --> J[로컬 저장]
+    H --> K[Cloud Storage 업로드]
+    
+    J --> L[완료]
+    K --> L
+    
+    style A fill:#667eea,stroke:#5a67d8,color:#fff
+    style L fill:#4ade80,stroke:#22c55e,color:#1a202c
+```
+
 #### 1. 프롬프트 엔지니어링
 
 ```python