memd-cli 2.0.0 → 2.1.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.
- package/.claude/settings.local.json +2 -1
- package/README.md +1 -1
- package/main.js +6 -1
- package/package.json +4 -4
- package/test/memd.test.js +32 -1
- package/highlight-plan.md +0 -710
- package/poc-html.mjs +0 -134
- package/poc-output.html +0 -460
- package/svgplan.md +0 -805
package/poc-html.mjs
DELETED
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
#!/usr/bin/env node
|
|
2
|
-
// PoC: Markdown + Mermaid -> HTML w/ inline SVG
|
|
3
|
-
// Tests: marker ID uniquification, theme CSS, mermaid-error styling
|
|
4
|
-
import { Marked } from 'marked';
|
|
5
|
-
import { renderMermaidSVG, THEMES } from 'beautiful-mermaid';
|
|
6
|
-
import * as fs from 'fs';
|
|
7
|
-
|
|
8
|
-
const THEME_NAMES = Object.keys(THEMES);
|
|
9
|
-
const themeName = process.argv[2] || 'github-dark';
|
|
10
|
-
const inputFile = process.argv[3] || 'test/test3.md';
|
|
11
|
-
|
|
12
|
-
if (!(themeName in THEMES)) {
|
|
13
|
-
console.error(`Unknown theme: ${themeName}`);
|
|
14
|
-
console.error(`Available: ${THEME_NAMES.join(', ')}`);
|
|
15
|
-
process.exit(1);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
const theme = THEMES[themeName];
|
|
19
|
-
console.log(`Theme: ${themeName}, Input: ${inputFile}`);
|
|
20
|
-
console.log(`Theme fields: ${JSON.stringify(theme)}`);
|
|
21
|
-
|
|
22
|
-
const testMarkdown = fs.readFileSync(inputFile, 'utf-8');
|
|
23
|
-
|
|
24
|
-
function escapeHtml(str) {
|
|
25
|
-
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
// Resolve optional DiagramColors fields with color mixing fallback
|
|
29
|
-
// Matches beautiful-mermaid's internal MIX ratios (theme.ts:64-87)
|
|
30
|
-
function mixHex(hex1, hex2, pct) {
|
|
31
|
-
const p = pct / 100;
|
|
32
|
-
const r1 = parseInt(hex1.slice(1, 3), 16), g1 = parseInt(hex1.slice(3, 5), 16), b1 = parseInt(hex1.slice(5, 7), 16);
|
|
33
|
-
const r2 = parseInt(hex2.slice(1, 3), 16), g2 = parseInt(hex2.slice(3, 5), 16), b2 = parseInt(hex2.slice(5, 7), 16);
|
|
34
|
-
const toHex = x => Math.round(x).toString(16).padStart(2, '0');
|
|
35
|
-
return `#${toHex(r1 * p + r2 * (1 - p))}${toHex(g1 * p + g2 * (1 - p))}${toHex(b1 * p + b2 * (1 - p))}`;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
// Resolve theme colors with fallback derivation for optional fields
|
|
39
|
-
function resolveThemeColors(colors) {
|
|
40
|
-
const line = colors.line ?? mixHex(colors.fg, colors.bg, 50);
|
|
41
|
-
const accent = colors.accent ?? mixHex(colors.fg, colors.bg, 85);
|
|
42
|
-
const muted = colors.muted ?? mixHex(colors.fg, colors.bg, 60);
|
|
43
|
-
const border = colors.border ?? mixHex(colors.fg, colors.bg, 20);
|
|
44
|
-
return { bg: colors.bg, fg: colors.fg, line, accent, muted, border };
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
function convertMermaidToSVG(markdown, diagramTheme) {
|
|
48
|
-
const mermaidRegex = /```mermaid\s+([\s\S]+?)```/g;
|
|
49
|
-
let svgIndex = 0;
|
|
50
|
-
return markdown.replace(mermaidRegex, (_, code) => {
|
|
51
|
-
try {
|
|
52
|
-
const prefix = `m${svgIndex++}`;
|
|
53
|
-
let svg = renderMermaidSVG(code.trim(), diagramTheme);
|
|
54
|
-
svg = svg.replace(/@import url\([^)]+\);\s*/g, '');
|
|
55
|
-
// Prefix all id="..." and url(#...) to avoid cross-SVG collisions
|
|
56
|
-
svg = svg.replace(/ id="([^"]+)"/g, ` id="${prefix}-$1"`);
|
|
57
|
-
svg = svg.replace(/url\(#([^)]+)\)/g, `url(#${prefix}-$1)`);
|
|
58
|
-
return svg;
|
|
59
|
-
} catch (e) {
|
|
60
|
-
return `<pre class="mermaid-error">${escapeHtml(e.message)}\n\n${escapeHtml(code.trim())}</pre>`;
|
|
61
|
-
}
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
function renderToHTML(markdown, diagramTheme) {
|
|
66
|
-
const t = resolveThemeColors(diagramTheme);
|
|
67
|
-
const processed = convertMermaidToSVG(markdown, diagramTheme);
|
|
68
|
-
const htmlMarked = new Marked();
|
|
69
|
-
const htmlBody = htmlMarked.parse(processed);
|
|
70
|
-
|
|
71
|
-
return `<!DOCTYPE html>
|
|
72
|
-
<html lang="en">
|
|
73
|
-
<head>
|
|
74
|
-
<meta charset="UTF-8">
|
|
75
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
76
|
-
<title>memd preview</title>
|
|
77
|
-
<style>
|
|
78
|
-
body {
|
|
79
|
-
max-width: 800px;
|
|
80
|
-
margin: 2rem auto;
|
|
81
|
-
padding: 0 1rem;
|
|
82
|
-
font-family: system-ui, -apple-system, sans-serif;
|
|
83
|
-
line-height: 1.6;
|
|
84
|
-
background: ${t.bg};
|
|
85
|
-
color: ${t.fg};
|
|
86
|
-
}
|
|
87
|
-
a { color: ${t.accent}; }
|
|
88
|
-
hr { border-color: ${t.line}; }
|
|
89
|
-
blockquote { border-left: 3px solid ${t.line}; padding-left: 1rem; color: ${t.muted}; }
|
|
90
|
-
svg { max-width: 100%; height: auto; }
|
|
91
|
-
pre { background: color-mix(in srgb, ${t.fg} 8%, ${t.bg}); padding: 1rem; border-radius: 6px; overflow-x: auto; }
|
|
92
|
-
code { font-size: 0.9em; color: ${t.accent}; }
|
|
93
|
-
pre code { color: inherit; }
|
|
94
|
-
table { border-collapse: collapse; }
|
|
95
|
-
th, td { border: 1px solid ${t.line}; padding: 0.4rem 0.8rem; }
|
|
96
|
-
th { background: color-mix(in srgb, ${t.fg} 5%, ${t.bg}); }
|
|
97
|
-
.mermaid-error {
|
|
98
|
-
background: color-mix(in srgb, ${t.accent} 10%, ${t.bg});
|
|
99
|
-
border: 1px solid color-mix(in srgb, ${t.accent} 40%, ${t.bg});
|
|
100
|
-
color: ${t.fg};
|
|
101
|
-
padding: 1rem;
|
|
102
|
-
border-radius: 6px;
|
|
103
|
-
overflow-x: auto;
|
|
104
|
-
white-space: pre-wrap;
|
|
105
|
-
}
|
|
106
|
-
</style>
|
|
107
|
-
</head>
|
|
108
|
-
<body>
|
|
109
|
-
${htmlBody}
|
|
110
|
-
</body>
|
|
111
|
-
</html>`;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
const html = renderToHTML(testMarkdown, theme);
|
|
115
|
-
const outputFile = 'poc-output.html';
|
|
116
|
-
fs.writeFileSync(outputFile, html);
|
|
117
|
-
|
|
118
|
-
// Validation
|
|
119
|
-
const svgCount = (html.match(/<svg/g) || []).length;
|
|
120
|
-
const markerIds = [...html.matchAll(/ id="([^"]+)"/g)].map(m => m[1]);
|
|
121
|
-
const uniqueMarkerIds = new Set(markerIds);
|
|
122
|
-
const errorBlocks = (html.match(/mermaid-error/g) || []).length;
|
|
123
|
-
|
|
124
|
-
console.log(`Written to ${outputFile} (${html.length} bytes)`);
|
|
125
|
-
console.log(`SVGs: ${svgCount}`);
|
|
126
|
-
console.log(`Marker IDs (${markerIds.length}): ${markerIds.join(', ')}`);
|
|
127
|
-
console.log(`Unique: ${uniqueMarkerIds.size}, Duplicates: ${markerIds.length - uniqueMarkerIds.size}`);
|
|
128
|
-
console.log(`Mermaid errors: ${errorBlocks / 2}`); // each error has class + selector = 2 matches
|
|
129
|
-
if (markerIds.length !== uniqueMarkerIds.size) {
|
|
130
|
-
console.error('ERROR: Duplicate marker IDs detected!');
|
|
131
|
-
process.exit(1);
|
|
132
|
-
} else {
|
|
133
|
-
console.log('OK: All marker IDs are unique');
|
|
134
|
-
}
|
package/poc-output.html
DELETED
|
@@ -1,460 +0,0 @@
|
|
|
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: "gantt". Expected "graph TD", "flowchart LR", "stateDiagram-v2", 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>
|