Skip to content

Commit e448254

Browse files
Mermaid 다이어그램 스타일 및 가독성 개선
- 간트 차트 및 파이 차트의 배경 색상 조정으로 텍스트 가독성 향상 - 노드 배경의 투명도 조정 및 에지 라벨 배경 추가로 시각적 일관성 강화 - 다크모드 지원을 위한 에지 라벨 스타일 개선 - 전반적인 Mermaid 다이어그램의 시각적 품질 향상
1 parent 560ed29 commit e448254

File tree

1 file changed

+32
-8
lines changed

1 file changed

+32
-8
lines changed

_includes/mermaid.html

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -140,22 +140,21 @@
140140
activationBorderColor: '#a78bfa',
141141

142142
// 간트 차트 (개선된 텍스트 가시성)
143-
gridColor: '#6b7280',
143+
gridColor: '#4b5563',
144144
section0: '#a78bfa',
145145
section1: '#c084fc',
146146
section2: '#fbbf24',
147147
section3: '#34d399',
148148
cScale0: '#a78bfa',
149149
cScale1: '#c084fc',
150150
cScale2: '#fbbf24',
151-
taskBkgColor: 'rgba(167, 139, 250, 0.8)',
151+
taskBkgColor: '#6366f1',
152152
taskTextColor: '#ffffff',
153153
taskTextOutsideColor: '#ffffff',
154154
taskTextLightColor: '#ffffff',
155155
taskTextDarkColor: '#1a202c',
156-
activeTaskBkgColor: '#c084fc',
156+
activeTaskBkgColor: '#8b5cf6',
157157
activeTaskBorderColor: '#a78bfa',
158-
gridColor: '#4b5563',
159158
todayLineColor: '#fbbf24',
160159

161160
// 파이 차트
@@ -221,12 +220,12 @@
221220
cScale0: '#667eea',
222221
cScale1: '#764ba2',
223222
cScale2: '#f093fb',
224-
taskBkgColor: 'rgba(102, 126, 234, 0.8)',
223+
taskBkgColor: '#4f46e5',
225224
taskTextColor: '#ffffff',
226225
taskTextOutsideColor: '#2d3748',
227226
taskTextLightColor: '#2d3748',
228227
taskTextDarkColor: '#ffffff',
229-
activeTaskBkgColor: '#764ba2',
228+
activeTaskBkgColor: '#6d28d9',
230229
activeTaskBorderColor: '#667eea',
231230
todayLineColor: '#f59e0b',
232231
section0: '#667eea',
@@ -435,7 +434,6 @@
435434
.mermaid .nodeLabel {
436435
color: #ffffff !important;
437436
font-weight: 600 !important;
438-
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
439437
}
440438

441439
/* 시퀀스 다이어그램 텍스트 강화 */
@@ -467,7 +465,6 @@
467465
.mermaid .taskText3 {
468466
font-weight: 600 !important;
469467
fill: #ffffff !important;
470-
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
471468
}
472469

473470
.mermaid .gridLabel {
@@ -485,6 +482,21 @@
485482
font-weight: 600 !important;
486483
}
487484

485+
/* 노드 배경 강화로 텍스트 가독성 향상 */
486+
.mermaid .node rect,
487+
.mermaid .node circle,
488+
.mermaid .node polygon {
489+
opacity: 0.95 !important;
490+
}
491+
492+
/* 에지 라벨 배경 추가 */
493+
.mermaid .edgeLabel rect {
494+
fill: var(--background, #ffffff) !important;
495+
stroke: var(--border, #e2e8f0) !important;
496+
stroke-width: 1px !important;
497+
opacity: 0.9 !important;
498+
}
499+
488500
/* 그라데이션 정의 */
489501
.mermaid svg defs {
490502
background: transparent;
@@ -563,6 +575,13 @@
563575
fill: #f7fafc !important;
564576
}
565577

578+
/* 다크모드 에지 라벨 배경 */
579+
[data-theme="dark"] .mermaid .edgeLabel rect,
580+
.dark .mermaid .edgeLabel rect {
581+
fill: var(--dark-surface, #1a202c) !important;
582+
stroke: var(--border, #4a5568) !important;
583+
}
584+
566585
@media (prefers-color-scheme: dark) {
567586
.mermaid {
568587
border: 1px solid rgba(139, 124, 248, 0.3);
@@ -595,6 +614,11 @@
595614
.mermaid .gridLabel {
596615
fill: #f7fafc !important;
597616
}
617+
618+
.mermaid .edgeLabel rect {
619+
fill: var(--dark-surface, #1a202c) !important;
620+
stroke: var(--border, #4a5568) !important;
621+
}
598622
}
599623

600624
/* 반응형 대응 */

0 commit comments

Comments
 (0)