1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
.mermaid
  display flex
  justify-content center
  margin 1.5rem 0
  padding 1rem
  border-radius 12px
  background var(--efu-card-bg)
  border 1px solid var(--style-border)
  box-shadow var(--efu-shadow-border)
  overflow-x auto

  // 确保响应式设计
  max-width 100%

  // SVG 容器样式
  svg
    max-width 100%
    height auto

  // 所有文本元素的通用样式
  text
    font-family var(--font-family), system-ui, -apple-system, sans-serif
    font-size 14px
    font-weight 500
    line-height 1.4

  // 文本颜色优先级设置
  .labelText,
  .actor,
  .actor-man,
  .actor-woman,
  .messageText,
  .noteText,
  .titleText,
  .loopText,
  .sequenceNumber
    fill var(--efu-fontcolor) !important
    stroke none !important

  // 参与者样式优化
  .actor
    rect
      fill var(--efu-card-bg) !important
      stroke var(--efu-main) !important
      stroke-width 2px !important
      rx 8px !important

    text
      font-weight 600 !important
      font-size 14px !important

  // 激活背景区域
  .activation
    rect
      fill var(--efu-main) !important
      opacity 0.1 !important

  // 序列图中的背景区域
  rect[style*="fill:transparent;"],
  rect[style*="fill: rgba(0,0,0,0)"]
    fill transparent !important

  // 确保所有rect元素都有适当的背景
  .messageLine0 + rect,
  .messageLine1 + rect,
  .messageLine2 + rect
    fill var(--efu-card-bg) !important
    stroke var(--style-border) !important
    stroke-width 1px !important
    rx 4px !important

  // 消息线条样式
  .messageLine0,
  .messageLine1,
  .messageLine2
    stroke var(--efu-main) !important
    stroke-width 2px !important
    stroke-linecap round !important

    &.messageLine1
      stroke-dasharray 5, 5 !important

  // 消息文本样式
  .messageText
    fill var(--efu-fontcolor) !important
    font-size 13px !important
    font-weight 500 !important

  // 激活状态的消息
  .messageLine0,
  .messageLine1,
  .messageLine2
    &.messageLine0
      stroke var(--efu-main) !important
      stroke-width 2.5px !important

  // 备注框样式
  .note
    rect
      fill var(--efu-yellow-op) !important
      stroke var(--efu-yellow) !important
      stroke-width 1.5px !important
      rx 6px !important

    text
      fill var(--efu-fontcolor) !important
      font-size 12px !important
      font-weight 500 !important

  // 循环框样式
  .loop
    rect
      fill var(--efu-blue-op) !important
      stroke var(--efu-blue) !important
      stroke-width 1.5px !important
      rx 6px !important
      stroke-dasharray 8, 4 !important

    text
      fill var(--efu-blue) !important
      font-size 12px !important
      font-weight 600 !important

  // 序号样式
  .sequenceNumber
    fill var(--efu-main) !important
    font-size 11px !important
    font-weight 700 !important
    background var(--efu-main) !important

    rect
      fill var(--efu-main) !important
      rx 10px !important

  // 标题样式
  .titleText
    fill var(--efu-fontcolor) !important
    font-size 16px !important
    font-weight 700 !important

  // 标签框样式
  .labelBox
    rect
      fill var(--efu-card-bg) !important
      stroke var(--efu-fontcolor) !important
      stroke-width 1px !important
      rx 4px !important

  // 箭头头部样式
  .arrowheadPath
    fill var(--efu-main) !important
    stroke var(--efu-main) !important

  // 黑夜模式优化
  [data-theme='dark'] &
    background var(--efu-secondbg) !important
    border-color var(--efu-border) !important

    // 参与者背景在黑夜模式 - 使用更亮的背景
    .actor rect
      fill #2d3748 !important
      stroke var(--efu-main) !important

    // 备注框黑夜模式
    .note rect
      fill rgba(245, 158, 11, 0.2) !important
      stroke var(--efu-yellow) !important

    // 循环框黑夜模式
    .loop rect
      fill rgba(59, 130, 246, 0.2) !important
      stroke var(--efu-blue) !important

    // 增强文本对比度
    text,
    .labelText,
    .actor,
    .actor-man,
    .actor-woman,
    .messageText,
    .noteText,
    .titleText,
    .loopText,
    .sequenceNumber
      fill #f7f7fa !important
      text-shadow 0 1px 2px rgba(0, 0, 0, 0.3) !important

    // 序号背景
    .sequenceNumber rect
      fill var(--efu-main) !important

    .sequenceNumber
      fill #ffffff !important

  // 白天模式优化
  [data-theme='light'] &
    background #ffffff !important

    // 参与者背景在白天模式 - 使用更浅的背景
    .actor rect
      fill #f8fafc !important
      stroke var(--efu-main) !important
      filter drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08)) !important

    // 备注框白天模式 - 使用更亮的背景
    .note rect
      fill #fef3c7 !important
      stroke #f59e0b !important
      filter drop-shadow(0 2px 4px rgba(245, 158, 11, 0.15)) !important

    // 循环框白天模式
    .loop rect
      fill #dbeafe !important
      stroke #3b82f6 !important
      filter drop-shadow(0 2px 4px rgba(59, 130, 246, 0.15)) !important

    // 文本颜色
    text,
    .labelText,
    .actor,
    .actor-man,
    .actor-woman,
    .messageText,
    .noteText,
    .titleText,
    .loopText,
    .sequenceNumber
      fill #1f2937 !important

    // 序号背景
    .sequenceNumber rect
      fill var(--efu-main) !important

    .sequenceNumber
      fill #ffffff !important

  // 响应式调整
  +mobile()
    margin 1rem 0
    padding 0.75rem

    svg
      font-size 12px

    text
      font-size 12px

    .actor text
      font-size 12px

    .messageText
      font-size 11px

    .noteText,
    .loopText
      font-size 10px

  // 动画效果
  .actor rect,
  .messageLine0,
  .messageLine1,
  .messageLine2
    transition all 0.3s ease !important

  .actor:hover rect
    stroke-width 3px !important
    filter drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)) !important

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
if theme.mermaid
       script.
         const initMermaid = () => {
           if (typeof mermaid !== 'undefined') {
             const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';

             mermaid.initialize({
               startOnLoad: false,
               theme: 'base', // 使用基础主题，让我们的 CSS 控制所有样式
               flowchart: {
                 useMaxWidth: true,
                 htmlLabels: true,
                 curve: 'cardinal'
               },
               sequence: {
                 useMaxWidth: true,
                 diagramMarginX: 20,
                 diagramMarginY: 20,
                 boxTextMargin: 5,
                 noteMargin: 10,
                 messageMargin: 35
               }
             });
             mermaid.run();
           }
         };

         document.addEventListener("DOMContentLoaded", initMermaid);
         utils.addEventListenerPjax(document, "pjax:complete", initMermaid);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
.mermaid
  display flex
  justify-content center
  margin 1.5rem 0
  padding 1.5rem
  border-radius 12px
  // 使用统一的白色背景，不受主题影响
  background #ffffff !important
  border 1px solid #e5e7eb
  box-shadow 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
  overflow-x auto

  // 确保响应式设计
  max-width 100%

  // SVG 容器样式
  svg
    max-width 100%
    height auto

  // 统一文本颜色 - 使用深色确保在任何背景下都清晰
  text
    font-family var(--font-family), system-ui, -apple-system, sans-serif
    font-size 14px
    font-weight 500
    line-height 1.4
    fill #1f2937 !important

  // 所有文本元素使用统一的深色
  .labelText,
  .actor,
  .actor-man,
  .actor-woman,
  .messageText,
  .noteText,
  .titleText,
  .loopText,
  .sequenceNumber
    fill #1f2937 !important
    stroke none !important

  // 参与者样式 - 使用统一的浅色背景
  .actor
    rect
      fill #f8fafc !important
      stroke #425AEF !important
      stroke-width 2px !important
      rx 8px !important

    text
      font-weight 600 !important
      font-size 14px !important

  // 激活背景区域
  .activation
    rect
      fill #425AEF !important
      opacity 0.1 !important

  // 消息线条样式 - 使用统一的主题色
  .messageLine0,
  .messageLine1,
  .messageLine2
    stroke #425AEF !important
    stroke-width 2px !important
    stroke-linecap round !important

    &.messageLine1
      stroke-dasharray 5, 5 !important

  // 消息文本样式
  .messageText
    fill #1f2937 !important
    font-size 13px !important
    font-weight 500 !important

  // 激活状态的消息
  .messageLine0,
  .messageLine1,
  .messageLine2
    &.messageLine0
      stroke #425AEF !important
      stroke-width 2.5px !important

  // 备注框样式 - 使用统一的暖色
  .note
    rect
      fill #fef3c7 !important
      stroke #f59e0b !important
      stroke-width 1.5px !important
      rx 6px !important

    text
      fill #1f2937 !important
      font-size 12px !important
      font-weight 500 !important

  // 循环框样式 - 使用统一的冷色
  .loop
    rect
      fill #dbeafe !important
      stroke #3b82f6 !important
      stroke-width 1.5px !important
      rx 6px !important
      stroke-dasharray 8, 4 !important

    text
      fill #1e40af !important
      font-size 12px !important
      font-weight 600 !important

  // 序号样式 - 使用主题色背景
  .sequenceNumber
    fill #ffffff !important
    font-size 11px !important
    font-weight 700 !important

    rect
      fill #425AEF !important
      rx 10px !important

  // 标题样式
  .titleText
    fill #1f2937 !important
    font-size 16px !important
    font-weight 700 !important

  // 标签框样式
  .labelBox
    rect
      fill #f8fafc !important
      stroke #d1d5db !important
      stroke-width 1px !important
      rx 4px !important

  // 箭头头部样式
  .arrowheadPath
    fill #425AEF !important
    stroke #425AEF !important

  // 在任何主题下都保持一致的外观
  &[data-theme='dark'],
  [data-theme='light']
    background #ffffff !important
    border-color #e5e7eb !important
    box-shadow 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important

  // 响应式调整
  +mobile()
    margin 1rem 0
    padding 1rem

    svg
      font-size 12px

    text
      font-size 12px

    .actor text
      font-size 12px

    .messageText
      font-size 11px

    .noteText,
    .loopText
      font-size 10px

  // 动画效果
  .actor rect,
  .messageLine0,
  .messageLine1,
  .messageLine2
    transition all 0.3s ease !important

  .actor:hover rect
    stroke-width 3px !important
    filter drop-shadow(0 4px 8px rgba(66, 90, 239, 0.3)) !important