Mermaid 다이어그램 클래스 구조 개선 및 가독성 향상

- Mermaid 다이어그램의 클래스 정의 방식을 개선하여 가독성을 높임
- 클래스 속성과 메서드를 명확하게 구분하여 구조를 간소화
- 관계 표현 방식을 개선하여 다이어그램의 이해도를 높임

Author: realcoding2003

_posts/2025-06-06-mermaid-diagram-test.md

@@ -67,35 +67,32 @@ gantt
 
 ```mermaid
 classDiagram
-    class User {
-        +String name
-        +String email
-        +Date createdAt
-        +login()
-        +logout()
-    }
+    class User
+    User : +String name
+    User : +String email
+    User : +Date createdAt
+    User : +login()
+    User : +logout()
     
-    class Post {
-        +String title
-        +String content
-        +Date publishedAt
-        +User author
-        +publish()
-        +draft()
-    }
+    class Post
+    Post : +String title
+    Post : +String content
+    Post : +Date publishedAt
+    Post : +User author
+    Post : +publish()
+    Post : +draft()
     
-    class Comment {
-        +String content
-        +Date createdAt
-        +User author
-        +Post post
-        +create()
-        +delete()
-    }
+    class Comment
+    Comment : +String content
+    Comment : +Date createdAt
+    Comment : +User author
+    Comment : +Post post
+    Comment : +create()
+    Comment : +delete()
     
-    User ||--o{ Post : writes
-    User ||--o{ Comment : writes
-    Post ||--o{ Comment : has
+    User --> Post
+    User --> Comment
+    Post --> Comment
 ```
 
 ## 🔢 파이 차트

_posts/2025-06-06-mermaid-styled-test.md

@@ -116,63 +116,58 @@ gantt
 
 ```mermaid
 classDiagram
-    class BlogPost {
-        +String title
-        +String content
-        +Date publishedAt
-        +String[] tags
-        +Category category
-        +Author author
-        +Boolean mermaid
-        +publish()
-        +draft()
-        +addTag(tag)
-        +setCategory(category)
-    }
+    class BlogPost
+    BlogPost : +String title
+    BlogPost : +String content
+    BlogPost : +Date publishedAt
+    BlogPost : +String[] tags
+    BlogPost : +Category category
+    BlogPost : +Author author
+    BlogPost : +Boolean mermaid
+    BlogPost : +publish()
+    BlogPost : +draft()
+    BlogPost : +addTag(tag)
+    BlogPost : +setCategory(category)
     
-    class Author {
-        +String name
-        +String email
-        +String bio
-        +String avatar
-        +Date joinedAt
-        +write(post)
-        +updateProfile()
-    }
+    class Author
+    Author : +String name
+    Author : +String email
+    Author : +String bio
+    Author : +String avatar
+    Author : +Date joinedAt
+    Author : +write(post)
+    Author : +updateProfile()
     
-    class Category {
-        +String name
-        +String description
-        +String color
-        +Integer postCount
-        +addPost(post)
-        +removePost(post)
-    }
+    class Category
+    Category : +String name
+    Category : +String description
+    Category : +String color
+    Category : +Integer postCount
+    Category : +addPost(post)
+    Category : +removePost(post)
     
-    class Comment {
-        +String content
-        +Date createdAt
-        +Author author
-        +BlogPost post
-        +Boolean approved
-        +create()
-        +approve()
-        +delete()
-    }
+    class Comment
+    Comment : +String content
+    Comment : +Date createdAt
+    Comment : +Author author
+    Comment : +BlogPost post
+    Comment : +Boolean approved
+    Comment : +create()
+    Comment : +approve()
+    Comment : +delete()
     
-    class Tag {
-        +String name
-        +String color
-        +Integer usageCount
-        +increaseUsage()
-        +decreaseUsage()
-    }
+    class Tag
+    Tag : +String name
+    Tag : +String color
+    Tag : +Integer usageCount
+    Tag : +increaseUsage()
+    Tag : +decreaseUsage()
     
-    Author ||--o{ BlogPost : writes
-    Category ||--o{ BlogPost : contains
-    BlogPost ||--o{ Comment : has
-    BlogPost }|--|| Tag : tagged_with
-    Author ||--o{ Comment : writes
+    Author --> BlogPost
+    Category --> BlogPost
+    BlogPost --> Comment
+    BlogPost --> Tag
+    Author --> Comment
 ```
 
 ## 🌊 **상태 다이어그램 - 포스트 게시 워크플로우**

_posts/2025-06-06-mermaid-theme-test.md

@@ -100,47 +100,40 @@ gantt
 
 ```mermaid
 classDiagram
-    class ThemeDetector {
-        +Boolean isDarkMode
-        +detectDarkMode()
-        +handleThemeChange()
-        +addEventListener()
-    }
-    
-    class ThemeVariables {
-        +Object lightTheme
-        +Object darkTheme
-        +getThemeVariables(isDark)
-        +updateColors()
-    }
-    
-    class MermaidRenderer {
-        +initialize(themeVars)
-        +rerender()
-        +addGradients()
-        +updateElements()
-    }
-    
-    class GradientManager {
-        +createGradient()
-        +updateGradient()
-        +removeGradient()
-        +applyToSVG()
-    }
-    
-    ThemeDetector --> ThemeVariables : provides theme state
-    ThemeVariables --> MermaidRenderer : supplies color config
-    MermaidRenderer --> GradientManager : manages gradients
-    
+    class ThemeDetector
+    ThemeDetector : +Boolean isDarkMode
+    ThemeDetector : +detectDarkMode()
+    ThemeDetector : +handleThemeChange()
+    ThemeDetector : +addEventListener()
     ThemeDetector : +MediaQueryList mediaQuery
     ThemeDetector : +MutationObserver observer
     
+    class ThemeVariables
+    ThemeVariables : +Object lightTheme
+    ThemeVariables : +Object darkTheme
+    ThemeVariables : +getThemeVariables(isDark)
+    ThemeVariables : +updateColors()
     ThemeVariables : +String primaryColor
     ThemeVariables : +String secondaryColor
     ThemeVariables : +String textColor
     
+    class MermaidRenderer
+    MermaidRenderer : +initialize(themeVars)
+    MermaidRenderer : +rerender()
+    MermaidRenderer : +addGradients()
+    MermaidRenderer : +updateElements()
     MermaidRenderer : +Array diagrams
     MermaidRenderer : +Object config
+    
+    class GradientManager
+    GradientManager : +createGradient()
+    GradientManager : +updateGradient()
+    GradientManager : +removeGradient()
+    GradientManager : +applyToSVG()
+    
+    ThemeDetector --> ThemeVariables
+    ThemeVariables --> MermaidRenderer
+    MermaidRenderer --> GradientManager
 ```
 
 ## 🔢 **파이 차트 - 색상 사용률 분석**