memd-cli 1.5.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/.claude/settings.local.json +6 -1
  2. package/README.md +19 -5
  3. package/highlight-plan.md +710 -0
  4. package/main.js +333 -215
  5. package/package.json +6 -3
  6. package/poc-html.mjs +134 -0
  7. package/poc-output.html +460 -0
  8. package/svgplan.md +805 -0
  9. package/test/memd.test.js +199 -1
package/poc-output.html ADDED
@@ -0,0 +1,460 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>memd preview</title>
7
+ <style>
8
+ body {
9
+ max-width: 800px;
10
+ margin: 2rem auto;
11
+ padding: 0 1rem;
12
+ font-family: system-ui, -apple-system, sans-serif;
13
+ line-height: 1.6;
14
+ background: #18181B;
15
+ color: #FAFAFA;
16
+ }
17
+ a { color: #d8d8d9; }
18
+ hr { border-color: #89898b; }
19
+ blockquote { border-left: 3px solid #89898b; padding-left: 1rem; color: #a0a0a1; }
20
+ svg { max-width: 100%; height: auto; }
21
+ pre { background: color-mix(in srgb, #FAFAFA 8%, #18181B); padding: 1rem; border-radius: 6px; overflow-x: auto; }
22
+ code { font-size: 0.9em; color: #d8d8d9; }
23
+ pre code { color: inherit; }
24
+ table { border-collapse: collapse; }
25
+ th, td { border: 1px solid #89898b; padding: 0.4rem 0.8rem; }
26
+ th { background: color-mix(in srgb, #FAFAFA 5%, #18181B); }
27
+ .mermaid-error {
28
+ background: color-mix(in srgb, #d8d8d9 10%, #18181B);
29
+ border: 1px solid color-mix(in srgb, #d8d8d9 40%, #18181B);
30
+ color: #FAFAFA;
31
+ padding: 1rem;
32
+ border-radius: 6px;
33
+ overflow-x: auto;
34
+ white-space: pre-wrap;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body>
39
+ <h1>Complex Mermaid Diagrams Test</h1>
40
+ <h2>flowchart LR Test</h2>
41
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 688.0820000000001 197.82" width="688.0820000000001" height="197.82" style="--bg:#18181B;--fg:#FAFAFA;background:var(--bg)">
42
+ <style>
43
+ text { font-family: 'Inter', system-ui, sans-serif; }
44
+ svg {
45
+ /* Derived from --bg and --fg (overridable via --line, --accent, etc.) */
46
+ --_text: var(--fg);
47
+ --_text-sec: var(--muted, color-mix(in srgb, var(--fg) 60%, var(--bg)));
48
+ --_text-muted: var(--muted, color-mix(in srgb, var(--fg) 40%, var(--bg)));
49
+ --_text-faint: color-mix(in srgb, var(--fg) 25%, var(--bg));
50
+ --_line: var(--line, color-mix(in srgb, var(--fg) 50%, var(--bg)));
51
+ --_arrow: var(--accent, color-mix(in srgb, var(--fg) 85%, var(--bg)));
52
+ --_node-fill: var(--surface, color-mix(in srgb, var(--fg) 3%, var(--bg)));
53
+ --_node-stroke: var(--border, color-mix(in srgb, var(--fg) 20%, var(--bg)));
54
+ --_group-fill: var(--bg);
55
+ --_group-hdr: color-mix(in srgb, var(--fg) 5%, var(--bg));
56
+ --_inner-stroke: color-mix(in srgb, var(--fg) 12%, var(--bg));
57
+ --_key-badge: color-mix(in srgb, var(--fg) 10%, var(--bg));
58
+ }
59
+ </style>
60
+ <defs>
61
+ <marker id="m0-arrowhead" markerWidth="8" markerHeight="5" refX="7" refY="2.5" orient="auto">
62
+ <polygon points="0 0, 8 2.5, 0 5" fill="var(--_arrow)" stroke="var(--_arrow)" stroke-width="0.75" stroke-linejoin="round" />
63
+ </marker>
64
+ <marker id="m0-arrowhead-start" markerWidth="8" markerHeight="5" refX="1" refY="2.5" orient="auto-start-reverse">
65
+ <polygon points="8 0, 0 2.5, 8 5" fill="var(--_arrow)" stroke="var(--_arrow)" stroke-width="0.75" stroke-linejoin="round" />
66
+ </marker>
67
+ </defs>
68
+ <polyline class="edge" data-from="A" data-to="B" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="159.755,98.91 207.755,98.91" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m0-arrowhead)" />
69
+ <polyline class="edge" data-from="B" data-to="C" data-style="solid" data-arrow-start="false" data-arrow-end="true" data-label="Yes" points="305.93833333333333,79.27333333333333 361.575,79.27333333333333 361.575,66.45999999999998 448.01,66.45999999999998" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m0-arrowhead)" />
70
+ <polyline class="edge" data-from="B" data-to="D" data-style="solid" data-arrow-start="false" data-arrow-end="true" data-label="No" points="305.93833333333333,118.54666666666665 363.069,118.54666666666665 363.069,131.35999999999999 448.01,131.36" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m0-arrowhead)" />
71
+ <polyline class="edge" data-from="C" data-to="E" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="532.197,66.45999999999998 559.5315,66.45999999999998 559.5315,98.90999999999998 582.4200000000001,98.90999999999998" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m0-arrowhead)" />
72
+ <polyline class="edge" data-from="D" data-to="E" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="536.643,131.36 559.5315,131.36 559.5315,98.90999999999998 582.4200000000001,98.90999999999998" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m0-arrowhead)" />
73
+ <g class="edge-label" data-from="B" data-to="C" data-label="Yes">
74
+ <rect x="369.575" y="50.45999999999999" width="36.658" height="30.3" rx="2" ry="2" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="1" />
75
+ <text x="387.904" y="65.60999999999999" text-anchor="middle" font-size="11" font-weight="400" fill="var(--_text-sec)" dy="3.8499999999999996">Yes</text>
76
+ </g>
77
+ <g class="edge-label" data-from="B" data-to="D" data-label="No">
78
+ <rect x="371.069" y="115.35999999999999" width="30.718000000000004" height="30.3" rx="2" ry="2" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="1" />
79
+ <text x="386.428" y="130.51" text-anchor="middle" font-size="11" font-weight="400" fill="var(--_text-sec)" dy="3.8499999999999996">No</text>
80
+ </g>
81
+ <g class="node" data-id="A" data-label="Starting Point" data-shape="rectangle">
82
+ <rect x="40" y="80.46" width="119.755" height="36.900000000000006" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
83
+ <text x="99.8775" y="98.91" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Starting Point</text>
84
+ </g>
85
+ <g class="node" data-id="B" data-label="Decision" data-shape="diamond">
86
+ <polygon points="266.66499999999996,40 325.57499999999993,98.91 266.66499999999996,157.82 207.75499999999997,98.91" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
87
+ <text x="266.66499999999996" y="98.91" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Decision</text>
88
+ </g>
89
+ <g class="node" data-id="C" data-label="Action 1" data-shape="rectangle">
90
+ <rect x="448.01" y="48.009999999999984" width="84.18700000000001" height="36.900000000000006" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
91
+ <text x="490.1035" y="66.45999999999998" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Action 1</text>
92
+ </g>
93
+ <g class="node" data-id="D" data-label="Action 2" data-shape="rectangle">
94
+ <rect x="448.01" y="112.91" width="88.633" height="36.900000000000006" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
95
+ <text x="492.3265" y="131.36" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Action 2</text>
96
+ </g>
97
+ <g class="node" data-id="E" data-label="End" data-shape="rectangle">
98
+ <rect x="582.4200000000001" y="80.45999999999998" width="65.662" height="36.900000000000006" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
99
+ <text x="615.2510000000001" y="98.90999999999998" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">End</text>
100
+ </g>
101
+ </svg>
102
+
103
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 484.877 220.84000000000003" width="484.877" height="220.84000000000003" style="--bg:#18181B;--fg:#FAFAFA;background:var(--bg)">
104
+ <style>
105
+ text { font-family: 'Inter', system-ui, sans-serif; }
106
+ svg {
107
+ /* Derived from --bg and --fg (overridable via --line, --accent, etc.) */
108
+ --_text: var(--fg);
109
+ --_text-sec: var(--muted, color-mix(in srgb, var(--fg) 60%, var(--bg)));
110
+ --_text-muted: var(--muted, color-mix(in srgb, var(--fg) 40%, var(--bg)));
111
+ --_text-faint: color-mix(in srgb, var(--fg) 25%, var(--bg));
112
+ --_line: var(--line, color-mix(in srgb, var(--fg) 50%, var(--bg)));
113
+ --_arrow: var(--accent, color-mix(in srgb, var(--fg) 85%, var(--bg)));
114
+ --_node-fill: var(--surface, color-mix(in srgb, var(--fg) 3%, var(--bg)));
115
+ --_node-stroke: var(--border, color-mix(in srgb, var(--fg) 20%, var(--bg)));
116
+ --_group-fill: var(--bg);
117
+ --_group-hdr: color-mix(in srgb, var(--fg) 5%, var(--bg));
118
+ --_inner-stroke: color-mix(in srgb, var(--fg) 12%, var(--bg));
119
+ --_key-badge: color-mix(in srgb, var(--fg) 10%, var(--bg));
120
+ }
121
+ </style>
122
+ <defs>
123
+ <marker id="m1-arrowhead" markerWidth="8" markerHeight="5" refX="7" refY="2.5" orient="auto">
124
+ <polygon points="0 0, 8 2.5, 0 5" fill="var(--_arrow)" stroke="var(--_arrow)" stroke-width="0.75" stroke-linejoin="round" />
125
+ </marker>
126
+ <marker id="m1-arrowhead-start" markerWidth="8" markerHeight="5" refX="1" refY="2.5" orient="auto-start-reverse">
127
+ <polygon points="8 0, 0 2.5, 8 5" fill="var(--_arrow)" stroke="var(--_arrow)" stroke-width="0.75" stroke-linejoin="round" />
128
+ </marker>
129
+ </defs>
130
+ <polyline class="edge" data-from="DB" data-to="Auth" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="295.04999999999995,155.39000000000004 307.935,155.39000000000004 307.935,103.86500000000002 319.935,103.86500000000002" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m1-arrowhead)" />
131
+ <polyline class="edge" data-from="Auth" data-to="API" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="319.935,91.56500000000003 307.935,91.56500000000003 307.935,40.04000000000002 171.899,40.04000000000002 171.899,70.21333333333337 147.899,70.21333333333337" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m1-arrowhead)" />
132
+ <polyline class="edge" data-from="API" data-to="Cache" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="147.899,81.28333333333336 172.3415,81.28333333333336 172.3415,76.49000000000002 196.784,76.49000000000002" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m1-arrowhead)" />
133
+ <polyline class="edge" data-from="API" data-to="DB" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="147.899,81.28333333333336 172.3415,81.28333333333336 172.3415,155.39000000000004 196.784,155.39000000000004" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m1-arrowhead)" />
134
+ <polyline class="edge" data-from="Cache" data-to="API" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="196.784,84.97333333333336 147.899,84.97333333333336" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m1-arrowhead)" />
135
+ <g class="node" data-id="DB" data-label="Database" data-shape="cylinder">
136
+ <rect x="196.784" y="136.94000000000003" width="98.26599999999999" height="36.900000000000006" fill="var(--_node-fill)" stroke="none" />
137
+ <line x1="196.784" y1="136.94000000000003" x2="196.784" y2="173.84000000000003" stroke="var(--_node-stroke)" stroke-width="0.75" />
138
+ <line x1="295.04999999999995" y1="136.94000000000003" x2="295.04999999999995" y2="173.84000000000003" stroke="var(--_node-stroke)" stroke-width="0.75" />
139
+ <ellipse cx="245.91699999999997" cy="173.84000000000003" rx="49.132999999999996" ry="7" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
140
+ <ellipse cx="245.91699999999997" cy="136.94000000000003" rx="49.132999999999996" ry="7" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
141
+ <text x="245.91699999999997" y="155.39000000000004" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Database</text>
142
+ </g>
143
+ <g class="node" data-id="Auth" data-label="Authentication" data-shape="rectangle">
144
+ <rect x="319.935" y="79.26500000000001" width="124.94200000000001" height="36.900000000000006" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
145
+ <text x="382.406" y="97.71500000000002" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Authentication</text>
146
+ </g>
147
+ <g class="node" data-id="API" data-label="API Server" data-shape="rectangle">
148
+ <rect x="40" y="62.83333333333336" width="107.899" height="36.900000000000006" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
149
+ <text x="93.9495" y="81.28333333333336" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">API Server</text>
150
+ </g>
151
+ <g class="node" data-id="Cache" data-label="Redis" data-shape="cylinder">
152
+ <rect x="196.784" y="58.04000000000002" width="76.036" height="36.900000000000006" fill="var(--_node-fill)" stroke="none" />
153
+ <line x1="196.784" y1="58.04000000000002" x2="196.784" y2="94.94000000000003" stroke="var(--_node-stroke)" stroke-width="0.75" />
154
+ <line x1="272.82" y1="58.04000000000002" x2="272.82" y2="94.94000000000003" stroke="var(--_node-stroke)" stroke-width="0.75" />
155
+ <ellipse cx="234.802" cy="94.94000000000003" rx="38.018" ry="7" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
156
+ <ellipse cx="234.802" cy="58.04000000000002" rx="38.018" ry="7" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
157
+ <text x="234.802" y="76.49000000000002" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Redis</text>
158
+ </g>
159
+ </svg>
160
+
161
+ <h2>Sequence Diagram</h2>
162
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 280" width="560" height="280" style="--bg:#18181B;--fg:#FAFAFA;background:var(--bg)">
163
+ <style>
164
+ text { font-family: 'Inter', system-ui, sans-serif; }
165
+ svg {
166
+ /* Derived from --bg and --fg (overridable via --line, --accent, etc.) */
167
+ --_text: var(--fg);
168
+ --_text-sec: var(--muted, color-mix(in srgb, var(--fg) 60%, var(--bg)));
169
+ --_text-muted: var(--muted, color-mix(in srgb, var(--fg) 40%, var(--bg)));
170
+ --_text-faint: color-mix(in srgb, var(--fg) 25%, var(--bg));
171
+ --_line: var(--line, color-mix(in srgb, var(--fg) 50%, var(--bg)));
172
+ --_arrow: var(--accent, color-mix(in srgb, var(--fg) 85%, var(--bg)));
173
+ --_node-fill: var(--surface, color-mix(in srgb, var(--fg) 3%, var(--bg)));
174
+ --_node-stroke: var(--border, color-mix(in srgb, var(--fg) 20%, var(--bg)));
175
+ --_group-fill: var(--bg);
176
+ --_group-hdr: color-mix(in srgb, var(--fg) 5%, var(--bg));
177
+ --_inner-stroke: color-mix(in srgb, var(--fg) 12%, var(--bg));
178
+ --_key-badge: color-mix(in srgb, var(--fg) 10%, var(--bg));
179
+ }
180
+ </style>
181
+ <defs>
182
+ <marker id="m2-seq-arrow" markerWidth="8" markerHeight="5" refX="8" refY="2.5" orient="auto-start-reverse">
183
+ <polygon points="0 0, 8 2.5, 0 5" fill="var(--_arrow)" />
184
+ </marker>
185
+ <marker id="m2-seq-arrow-open" markerWidth="8" markerHeight="5" refX="8" refY="2.5" orient="auto-start-reverse">
186
+ <polyline points="0 0, 8 2.5, 0 5" fill="none" stroke="var(--_arrow)" stroke-width="1" />
187
+ </marker>
188
+ </defs>
189
+ <line class="lifeline" data-actor="Client" x1="70" y1="70" x2="70" y2="250" stroke="var(--_line)" stroke-width="0.75" stroke-dasharray="6 4" />
190
+ <line class="lifeline" data-actor="Server" x1="210" y1="70" x2="210" y2="250" stroke="var(--_line)" stroke-width="0.75" stroke-dasharray="6 4" />
191
+ <line class="lifeline" data-actor="Database" x1="350" y1="70" x2="350" y2="250" stroke="var(--_line)" stroke-width="0.75" stroke-dasharray="6 4" />
192
+ <line class="lifeline" data-actor="Cache" x1="490" y1="70" x2="490" y2="250" stroke="var(--_line)" stroke-width="0.75" stroke-dasharray="6 4" />
193
+ <g class="message" data-from="Client" data-to="Server" data-label="HTTP GET /api/data" data-line-style="solid" data-arrow-head="filled" data-self="false">
194
+ <line x1="70" y1="90" x2="210" y2="90" stroke="var(--_line)" stroke-width="1" marker-end="url(#m2-seq-arrow)" />
195
+ <text x="140" y="80" font-size="11" text-anchor="middle" font-weight="400" fill="var(--_text-muted)" dy="3.8499999999999996">HTTP GET /api/data</text>
196
+ </g>
197
+ <g class="message" data-from="Server" data-to="Cache" data-label="HGET user:123" data-line-style="solid" data-arrow-head="filled" data-self="false">
198
+ <line x1="210" y1="130" x2="490" y2="130" stroke="var(--_line)" stroke-width="1" marker-end="url(#m2-seq-arrow)" />
199
+ <text x="350" y="120" font-size="11" text-anchor="middle" font-weight="400" fill="var(--_text-muted)" dy="3.8499999999999996">HGET user:123</text>
200
+ </g>
201
+ <g class="message" data-from="Cache" data-to="Server" data-label="data (hit)" data-line-style="dashed" data-arrow-head="filled" data-self="false">
202
+ <line x1="490" y1="170" x2="210" y2="170" stroke="var(--_line)" stroke-width="1" stroke-dasharray="6 4" marker-end="url(#m2-seq-arrow)" />
203
+ <text x="350" y="160" font-size="11" text-anchor="middle" font-weight="400" fill="var(--_text-muted)" dy="3.8499999999999996">data (hit)</text>
204
+ </g>
205
+ <g class="message" data-from="Server" data-to="Client" data-label="200 OK" data-line-style="solid" data-arrow-head="filled" data-self="false">
206
+ <line x1="210" y1="210" x2="70" y2="210" stroke="var(--_line)" stroke-width="1" marker-end="url(#m2-seq-arrow)" />
207
+ <text x="140" y="200" font-size="11" text-anchor="middle" font-weight="400" fill="var(--_text-muted)" dy="3.8499999999999996">200 OK</text>
208
+ </g>
209
+ <g class="actor" data-id="Client" data-label="Client" data-type="participant">
210
+ <rect x="30" y="30" width="80" height="40" rx="4" ry="4" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="1" />
211
+ <text x="70" y="50" font-size="13" text-anchor="middle" font-weight="500" fill="var(--_text)" dy="4.55">Client</text>
212
+ </g>
213
+ <g class="actor" data-id="Server" data-label="Server" data-type="participant">
214
+ <rect x="170" y="30" width="80" height="40" rx="4" ry="4" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="1" />
215
+ <text x="210" y="50" font-size="13" text-anchor="middle" font-weight="500" fill="var(--_text)" dy="4.55">Server</text>
216
+ </g>
217
+ <g class="actor" data-id="Database" data-label="Database" data-type="participant">
218
+ <rect x="304.867" y="30" width="90.26599999999999" height="40" rx="4" ry="4" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="1" />
219
+ <text x="350" y="50" font-size="13" text-anchor="middle" font-weight="500" fill="var(--_text)" dy="4.55">Database</text>
220
+ </g>
221
+ <g class="actor" data-id="Cache" data-label="Cache" data-type="participant">
222
+ <rect x="450" y="30" width="80" height="40" rx="4" ry="4" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="1" />
223
+ <text x="490" y="50" font-size="13" text-anchor="middle" font-weight="500" fill="var(--_text)" dy="4.55">Cache</text>
224
+ </g>
225
+ </svg>
226
+
227
+ <h2>Class Diagram</h2>
228
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 336" width="360" height="336" style="--bg:#18181B;--fg:#FAFAFA;background:var(--bg)">
229
+ <style>
230
+ text { font-family: 'Inter', system-ui, sans-serif; }
231
+ .mono { font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace; }
232
+ svg {
233
+ /* Derived from --bg and --fg (overridable via --line, --accent, etc.) */
234
+ --_text: var(--fg);
235
+ --_text-sec: var(--muted, color-mix(in srgb, var(--fg) 60%, var(--bg)));
236
+ --_text-muted: var(--muted, color-mix(in srgb, var(--fg) 40%, var(--bg)));
237
+ --_text-faint: color-mix(in srgb, var(--fg) 25%, var(--bg));
238
+ --_line: var(--line, color-mix(in srgb, var(--fg) 50%, var(--bg)));
239
+ --_arrow: var(--accent, color-mix(in srgb, var(--fg) 85%, var(--bg)));
240
+ --_node-fill: var(--surface, color-mix(in srgb, var(--fg) 3%, var(--bg)));
241
+ --_node-stroke: var(--border, color-mix(in srgb, var(--fg) 20%, var(--bg)));
242
+ --_group-fill: var(--bg);
243
+ --_group-hdr: color-mix(in srgb, var(--fg) 5%, var(--bg));
244
+ --_inner-stroke: color-mix(in srgb, var(--fg) 12%, var(--bg));
245
+ --_key-badge: color-mix(in srgb, var(--fg) 10%, var(--bg));
246
+ }
247
+ </style>
248
+ <defs>
249
+ <marker id="m3-cls-inherit" markerWidth="12" markerHeight="10" refX="12" refY="5" orient="auto-start-reverse">
250
+ <polygon points="0 0, 12 5, 0 10" fill="var(--bg)" stroke="var(--_arrow)" stroke-width="1.5" />
251
+ </marker>
252
+ <marker id="m3-cls-composition" markerWidth="12" markerHeight="10" refX="0" refY="5" orient="auto-start-reverse">
253
+ <polygon points="6 0, 12 5, 6 10, 0 5" fill="var(--_arrow)" stroke="var(--_arrow)" stroke-width="1" />
254
+ </marker>
255
+ <marker id="m3-cls-aggregation" markerWidth="12" markerHeight="10" refX="0" refY="5" orient="auto-start-reverse">
256
+ <polygon points="6 0, 12 5, 6 10, 0 5" fill="var(--bg)" stroke="var(--_arrow)" stroke-width="1.5" />
257
+ </marker>
258
+ <marker id="m3-cls-arrow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto-start-reverse">
259
+ <polyline points="0 0, 8 3, 0 6" fill="none" stroke="var(--_arrow)" stroke-width="1.5" />
260
+ </marker>
261
+ </defs>
262
+ <polyline class="class-relationship" data-from="Animal" data-to="Bird" data-type="inheritance" data-marker-at="from" points="100,148 100,208" fill="none" stroke="var(--_line)" stroke-width="1" marker-start="url(#m3-cls-inherit)" />
263
+ <polyline class="class-relationship" data-from="Animal" data-to="Fish" data-type="inheritance" data-marker-at="from" points="140,148 140,158 260,158 260,208" fill="none" stroke="var(--_line)" stroke-width="1" marker-start="url(#m3-cls-inherit)" />
264
+ <g class="class-node" data-id="Animal" data-label="Animal">
265
+ <rect x="60" y="40" width="120" height="108" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="1" />
266
+ <rect x="60" y="40" width="120" height="32" rx="0" ry="0" fill="var(--_group-hdr)" stroke="var(--_node-stroke)" stroke-width="1" />
267
+ <text x="120" y="56" text-anchor="middle" font-size="13" font-weight="700" fill="var(--_text)" dy="4.55">Animal</text>
268
+ <line x1="60" y1="72" x2="180" y2="72" stroke="var(--_node-stroke)" stroke-width="0.75" />
269
+ <text x="68" y="86" class="mono" dy="0.35em" font-size="11" font-weight="400"><tspan fill="var(--_text-faint)">+ </tspan><tspan fill="var(--_text-sec)">name</tspan><tspan fill="var(--_text-faint)">: </tspan><tspan fill="var(--_text-muted)">String</tspan></text>
270
+ <line x1="60" y1="100" x2="180" y2="100" stroke="var(--_node-stroke)" stroke-width="0.75" />
271
+ <text x="68" y="114" class="mono" dy="0.35em" font-size="11" font-weight="400"><tspan fill="var(--_text-faint)">+ </tspan><tspan fill="var(--_text-sec)">eat()</tspan></text>
272
+ <text x="68" y="134" class="mono" dy="0.35em" font-size="11" font-weight="400"><tspan fill="var(--_text-faint)">+ </tspan><tspan fill="var(--_text-sec)">sleep()</tspan></text>
273
+ </g>
274
+ <g class="class-node" data-id="Bird" data-label="Bird">
275
+ <rect x="40" y="208" width="120" height="88" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="1" />
276
+ <rect x="40" y="208" width="120" height="32" rx="0" ry="0" fill="var(--_group-hdr)" stroke="var(--_node-stroke)" stroke-width="1" />
277
+ <text x="100" y="224" text-anchor="middle" font-size="13" font-weight="700" fill="var(--_text)" dy="4.55">Bird</text>
278
+ <line x1="40" y1="240" x2="160" y2="240" stroke="var(--_node-stroke)" stroke-width="0.75" />
279
+ <line x1="40" y1="248" x2="160" y2="248" stroke="var(--_node-stroke)" stroke-width="0.75" />
280
+ <text x="48" y="262" class="mono" dy="0.35em" font-size="11" font-weight="400"><tspan fill="var(--_text-faint)">+ </tspan><tspan fill="var(--_text-sec)">fly()</tspan></text>
281
+ <text x="48" y="282" class="mono" dy="0.35em" font-size="11" font-weight="400"><tspan fill="var(--_text-faint)">+ </tspan><tspan fill="var(--_text-sec)">layEggs()</tspan></text>
282
+ </g>
283
+ <g class="class-node" data-id="Fish" data-label="Fish">
284
+ <rect x="200" y="208" width="120" height="88" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="1" />
285
+ <rect x="200" y="208" width="120" height="32" rx="0" ry="0" fill="var(--_group-hdr)" stroke="var(--_node-stroke)" stroke-width="1" />
286
+ <text x="260" y="224" text-anchor="middle" font-size="13" font-weight="700" fill="var(--_text)" dy="4.55">Fish</text>
287
+ <line x1="200" y1="240" x2="320" y2="240" stroke="var(--_node-stroke)" stroke-width="0.75" />
288
+ <line x1="200" y1="248" x2="320" y2="248" stroke="var(--_node-stroke)" stroke-width="0.75" />
289
+ <text x="208" y="262" class="mono" dy="0.35em" font-size="11" font-weight="400"><tspan fill="var(--_text-faint)">+ </tspan><tspan fill="var(--_text-sec)">swim()</tspan></text>
290
+ <text x="208" y="282" class="mono" dy="0.35em" font-size="11" font-weight="400"><tspan fill="var(--_text-faint)">+ </tspan><tspan fill="var(--_text-sec)">gills()</tspan></text>
291
+ </g>
292
+
293
+
294
+ </svg>
295
+
296
+ <h2>State Diagram</h2>
297
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 249.69799999999998 277.8" width="249.69799999999998" height="277.8" style="--bg:#18181B;--fg:#FAFAFA;background:var(--bg)">
298
+ <style>
299
+ text { font-family: 'Inter', system-ui, sans-serif; }
300
+ svg {
301
+ /* Derived from --bg and --fg (overridable via --line, --accent, etc.) */
302
+ --_text: var(--fg);
303
+ --_text-sec: var(--muted, color-mix(in srgb, var(--fg) 60%, var(--bg)));
304
+ --_text-muted: var(--muted, color-mix(in srgb, var(--fg) 40%, var(--bg)));
305
+ --_text-faint: color-mix(in srgb, var(--fg) 25%, var(--bg));
306
+ --_line: var(--line, color-mix(in srgb, var(--fg) 50%, var(--bg)));
307
+ --_arrow: var(--accent, color-mix(in srgb, var(--fg) 85%, var(--bg)));
308
+ --_node-fill: var(--surface, color-mix(in srgb, var(--fg) 3%, var(--bg)));
309
+ --_node-stroke: var(--border, color-mix(in srgb, var(--fg) 20%, var(--bg)));
310
+ --_group-fill: var(--bg);
311
+ --_group-hdr: color-mix(in srgb, var(--fg) 5%, var(--bg));
312
+ --_inner-stroke: color-mix(in srgb, var(--fg) 12%, var(--bg));
313
+ --_key-badge: color-mix(in srgb, var(--fg) 10%, var(--bg));
314
+ }
315
+ </style>
316
+ <defs>
317
+ <marker id="m4-arrowhead" markerWidth="8" markerHeight="5" refX="7" refY="2.5" orient="auto">
318
+ <polygon points="0 0, 8 2.5, 0 5" fill="var(--_arrow)" stroke="var(--_arrow)" stroke-width="0.75" stroke-linejoin="round" />
319
+ </marker>
320
+ <marker id="m4-arrowhead-start" markerWidth="8" markerHeight="5" refX="1" refY="2.5" orient="auto-start-reverse">
321
+ <polygon points="8 0, 0 2.5, 8 5" fill="var(--_arrow)" stroke="var(--_arrow)" stroke-width="0.75" stroke-linejoin="round" />
322
+ </marker>
323
+ </defs>
324
+ <polyline class="edge" data-from="_start" data-to="Still" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="54.83725,72.45 54.83725,112.9 55.674499999999995,112.9 55.674499999999995,124.9" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m4-arrowhead)" />
325
+ <polyline class="edge" data-from="Still" data-to="Moving" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="71.34899999999999,124.9 71.34899999999999,100.9 118.25450000000001,100.9 118.25450000000001,81.35000000000001" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m4-arrowhead)" />
326
+ <polyline class="edge" data-from="Moving" data-to="Still" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="139.67175,81.35000000000001 139.67175,103.125 71.34899999999999,103.125 71.34899999999999,124.9" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m4-arrowhead)" />
327
+ <polyline class="edge" data-from="Moving" data-to="Crash" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="139.67175,81.35000000000001 139.67175,103.125 170.19799999999998,103.125 170.19799999999998,124.9" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m4-arrowhead)" />
328
+ <polyline class="edge" data-from="Crash" data-to="_end" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="170.19799999999998,161.8 170.19799999999998,209.8" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m4-arrowhead)" />
329
+ <g class="node" data-id="_start" data-label="" data-shape="state-start">
330
+ <circle cx="54.83725" cy="58.45" r="12" fill="var(--_text)" stroke="none" />
331
+ </g>
332
+ <g class="node" data-id="Still" data-label="Still" data-shape="rounded">
333
+ <rect x="40" y="124.9" width="62.69799999999999" height="36.900000000000006" rx="6" ry="6" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
334
+ <text x="71.34899999999999" y="143.35000000000002" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Still</text>
335
+ </g>
336
+ <g class="node" data-id="Moving" data-label="Moving" data-shape="rounded">
337
+ <rect x="96.83725" y="44.45" width="85.66900000000001" height="36.900000000000006" rx="6" ry="6" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
338
+ <text x="139.67175" y="62.900000000000006" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Moving</text>
339
+ </g>
340
+ <g class="node" data-id="Crash" data-label="Crash" data-shape="rounded">
341
+ <rect x="130.69799999999998" y="124.9" width="79" height="36.900000000000006" rx="6" ry="6" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
342
+ <text x="170.19799999999998" y="143.35000000000002" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Crash</text>
343
+ </g>
344
+ <g class="node" data-id="_end" data-label="" data-shape="state-end">
345
+ <circle cx="170.19799999999998" cy="223.8" r="12" fill="none" stroke="var(--_text)" stroke-width="1.5" />
346
+ <circle cx="170.19799999999998" cy="223.8" r="8" fill="var(--_text)" stroke="none" />
347
+ </g>
348
+ </svg>
349
+
350
+ <h2>Error Handling Example</h2>
351
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 346.3985 964.0129999999999" width="346.3985" height="964.0129999999999" style="--bg:#18181B;--fg:#FAFAFA;background:var(--bg)">
352
+ <style>
353
+ text { font-family: 'Inter', system-ui, sans-serif; }
354
+ svg {
355
+ /* Derived from --bg and --fg (overridable via --line, --accent, etc.) */
356
+ --_text: var(--fg);
357
+ --_text-sec: var(--muted, color-mix(in srgb, var(--fg) 60%, var(--bg)));
358
+ --_text-muted: var(--muted, color-mix(in srgb, var(--fg) 40%, var(--bg)));
359
+ --_text-faint: color-mix(in srgb, var(--fg) 25%, var(--bg));
360
+ --_line: var(--line, color-mix(in srgb, var(--fg) 50%, var(--bg)));
361
+ --_arrow: var(--accent, color-mix(in srgb, var(--fg) 85%, var(--bg)));
362
+ --_node-fill: var(--surface, color-mix(in srgb, var(--fg) 3%, var(--bg)));
363
+ --_node-stroke: var(--border, color-mix(in srgb, var(--fg) 20%, var(--bg)));
364
+ --_group-fill: var(--bg);
365
+ --_group-hdr: color-mix(in srgb, var(--fg) 5%, var(--bg));
366
+ --_inner-stroke: color-mix(in srgb, var(--fg) 12%, var(--bg));
367
+ --_key-badge: color-mix(in srgb, var(--fg) 10%, var(--bg));
368
+ }
369
+ </style>
370
+ <defs>
371
+ <marker id="m5-arrowhead" markerWidth="8" markerHeight="5" refX="7" refY="2.5" orient="auto">
372
+ <polygon points="0 0, 8 2.5, 0 5" fill="var(--_arrow)" stroke="var(--_arrow)" stroke-width="0.75" stroke-linejoin="round" />
373
+ </marker>
374
+ <marker id="m5-arrowhead-start" markerWidth="8" markerHeight="5" refX="1" refY="2.5" orient="auto-start-reverse">
375
+ <polygon points="8 0, 0 2.5, 8 5" fill="var(--_arrow)" stroke="var(--_arrow)" stroke-width="0.75" stroke-linejoin="round" />
376
+ </marker>
377
+ </defs>
378
+ <polyline class="edge" data-from="A" data-to="B" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="156.92108333333334,76.9 156.92108333333334,124.9" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m5-arrowhead)" />
379
+ <polyline class="edge" data-from="B" data-to="C" data-style="solid" data-arrow-start="false" data-arrow-end="true" data-label="Yes" points="132.22091666666665,248.4008333333333 132.22091666666665,637.013 89.29058333333333,637.013 89.29058333333333,705.313 89.18083333333333,705.313 89.18083333333333,717.313" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m5-arrowhead)" />
380
+ <polyline class="edge" data-from="C" data-to="D" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="106.17599999999999,754.213 106.17599999999999,802.213" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m5-arrowhead)" />
381
+ <polyline class="edge" data-from="D" data-to="E" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="106.17599999999999,839.1129999999999 106.17599999999999,887.1129999999999" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m5-arrowhead)" />
382
+ <polyline class="edge" data-from="B" data-to="F" data-style="solid" data-arrow-start="false" data-arrow-end="true" data-label="No" points="181.62125,248.40083333333334 181.62125,309.101 208.6798333333333,309.101 208.67983333333333,389.40100000000007" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m5-arrowhead)" />
383
+ <polyline class="edge" data-from="F" data-to="G" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="208.67983333333333,426.30100000000004 208.6798333333333,474.30100000000004" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m5-arrowhead)" />
384
+ <polyline class="edge" data-from="G" data-to="H" data-style="solid" data-arrow-start="false" data-arrow-end="true" data-label="Yes" points="229.7985,579.8943333333334 229.7985,637.013 245.78,637.013 245.77999999999997,717.313" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m5-arrowhead)" />
385
+ <polyline class="edge" data-from="G" data-to="C" data-style="solid" data-arrow-start="false" data-arrow-end="true" data-label="No" points="187.56116666666668,579.8943333333334 187.56116666666668,637.013 147.37541666666667,637.013 147.37541666666667,705.313 123.17116666666666,705.313 123.17116666666666,717.313" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#m5-arrowhead)" />
386
+ <g class="edge-label" data-from="B" data-to="C" data-label="Yes">
387
+ <rect x="70.79058333333333" y="644.013" width="36.658" height="30.3" rx="2" ry="2" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="1" />
388
+ <text x="89.11958333333334" y="659.163" text-anchor="middle" font-size="11" font-weight="400" fill="var(--_text-sec)" dy="3.8499999999999996">Yes</text>
389
+ </g>
390
+ <g class="edge-label" data-from="B" data-to="F" data-label="No">
391
+ <rect x="193.1798333333333" y="316.101" width="30.718000000000004" height="30.3" rx="2" ry="2" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="1" />
392
+ <text x="208.53883333333332" y="331.251" text-anchor="middle" font-size="11" font-weight="400" fill="var(--_text-sec)" dy="3.8499999999999996">No</text>
393
+ </g>
394
+ <g class="edge-label" data-from="G" data-to="H" data-label="Yes">
395
+ <rect x="227.28" y="644.013" width="36.658" height="30.3" rx="2" ry="2" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="1" />
396
+ <text x="245.609" y="659.163" text-anchor="middle" font-size="11" font-weight="400" fill="var(--_text-sec)" dy="3.8499999999999996">Yes</text>
397
+ </g>
398
+ <g class="edge-label" data-from="G" data-to="C" data-label="No">
399
+ <rect x="131.87541666666667" y="644.013" width="30.718000000000004" height="30.3" rx="2" ry="2" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="1" />
400
+ <text x="147.23441666666668" y="659.163" text-anchor="middle" font-size="11" font-weight="400" fill="var(--_text-sec)" dy="3.8499999999999996">No</text>
401
+ </g>
402
+ <g class="node" data-id="A" data-label="Start" data-shape="rectangle">
403
+ <rect x="121.86708333333333" y="40" width="70.108" height="36.900000000000006" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
404
+ <text x="156.92108333333334" y="58.45" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Start</text>
405
+ </g>
406
+ <g class="node" data-id="B" data-label="Check Error?" data-shape="diamond">
407
+ <polygon points="156.92108333333334,124.9 231.02158333333335,199.00050000000002 156.92108333333334,273.101 82.82058333333333,199.00050000000002" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
408
+ <text x="156.92108333333334" y="199.00050000000002" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Check Error?</text>
409
+ </g>
410
+ <g class="node" data-id="C" data-label="Log Error" data-shape="rectangle">
411
+ <rect x="55.190499999999986" y="717.313" width="101.971" height="36.900000000000006" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
412
+ <text x="106.17599999999999" y="735.763" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Log Error</text>
413
+ </g>
414
+ <g class="node" data-id="D" data-label="Show Message" data-shape="rectangle">
415
+ <rect x="40" y="802.213" width="132.35199999999998" height="36.900000000000006" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
416
+ <text x="106.17599999999999" y="820.663" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Show Message</text>
417
+ </g>
418
+ <g class="node" data-id="E" data-label="Return Null" data-shape="rectangle">
419
+ <rect x="52.96749999999999" y="887.1129999999999" width="106.417" height="36.900000000000006" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
420
+ <text x="106.17599999999999" y="905.563" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Return Null</text>
421
+ </g>
422
+ <g class="node" data-id="F" data-label="Process Data" data-shape="rectangle">
423
+ <rect x="147.32033333333334" y="389.40100000000007" width="122.71900000000001" height="36.900000000000006" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
424
+ <text x="208.67983333333333" y="407.85100000000006" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Process Data</text>
425
+ </g>
426
+ <g class="node" data-id="G" data-label="Success?" data-shape="diamond">
427
+ <polygon points="208.67983333333333,474.30100000000004 272.03583333333336,537.657 208.67983333333333,601.013 145.32383333333334,537.657" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
428
+ <text x="208.67983333333333" y="537.657" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Success?</text>
429
+ </g>
430
+ <g class="node" data-id="H" data-label="Return Result" data-shape="rectangle">
431
+ <rect x="185.1615" y="717.313" width="121.23700000000001" height="36.900000000000006" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
432
+ <text x="245.78" y="735.763" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Return Result</text>
433
+ </g>
434
+ </svg>
435
+
436
+ <h2>Gantt Chart (not supported by beautiful-mermaid)</h2>
437
+ <pre class="mermaid-error">Invalid mermaid header: &quot;gantt&quot;. Expected &quot;graph TD&quot;, &quot;flowchart LR&quot;, &quot;stateDiagram-v2&quot;, etc.
438
+
439
+ gantt
440
+ title Project Development
441
+ dateFormat YYYY-MM-DD
442
+ section Section
443
+ Task 1 :a1, 2024-01-01, 30d
444
+ Task 2 :after a1 , 20d
445
+ section Another
446
+ Task 3 :2024-01-12 , 12d
447
+ Task 4 : 24d</pre>
448
+
449
+ <h2>Regular Text</h2>
450
+ <p>This is regular text between mermaid diagrams.</p>
451
+ <ul>
452
+ <li>Point 1</li>
453
+ <li>Point 2</li>
454
+ <li>Point 3</li>
455
+ </ul>
456
+ <p><code>Inline code</code> is also supported.</p>
457
+ <p><strong>Bold</strong> and <em>italic</em> text work fine.</p>
458
+
459
+ </body>
460
+ </html>