marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-14 17:54:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

test: verify handDrawn look for every diagram type

Browse Source
This commit is contained in:
Sidharth Vinod
2025-11-05 01:31:06 +07:00
parent 33dfa5a425
commit ffa727084c
3 changed files with 224 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
cypress/integration/rendering/handDraw.spec.js Normal file
View File

@@ -0,0 +1,9 @@
import { urlSnapshotTest } from '../../helpers/util.ts';
describe('Hand Draw', () => {
it('should render the hand drawn look for all diagrams', () => {
urlSnapshotTest('http://localhost:9000/handDrawn.html', {
logLevel: 1,
});
});
});

211
cypress/platform/handDrawn.html Normal file
View File

@@ -0,0 +1,211 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hand Drawn Diagrams</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 32px;
display: flex;
flex-direction: column;
gap: 48px;
}
h1,
h2,
h3,
h4 {
margin: 0;
font-weight: 600;
letter-spacing: -0.01em;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
margin-bottom: 12px;
}
h3 {
font-size: 18px;
}
main {
display: flex;
flex-direction: column;
gap: 64px;
}
section.diagram-group {
display: flex;
flex-direction: column;
gap: 32px;
}
.diagram-example {
display: flex;
flex-direction: column;
gap: 16px;
}
.diagram-row {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.diagram-panel {
flex: 1 1 420px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.diagram-label {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-weight: 500;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.08em;
}
@media (max-width: 960px) {
body {
padding: 20px;
}
.diagram-row {
flex-direction: column;
}
}
</style>
</head>
<body>
<h1>Hand-drawn Look Comparison</h1>
<main id="app"></main>
<script type="module">
import mermaid from './mermaid.esm.mjs';
import { diagramData } from './mermaid-examples.esm.mjs';
mermaid.initialize({ startOnLoad: false });
const app = document.getElementById('app');
const seen = new Set();
const ensureObject = (value) =>
value && typeof value === 'object' && !Array.isArray(value) ? value : {};
let renderIndex = 0;
const renderDiagram = async (target, source, overrides = {}) => {
const id = `diagram-${renderIndex++}`;
const config = {
startOnLoad: false,
...overrides,
};
mermaid.initialize(config);
try {
const { svg, bindFunctions } = await mermaid.render(id, source);
target.innerHTML = svg;
if (typeof bindFunctions === 'function') {
bindFunctions(target);
}
} catch (error) {
console.error('Failed to render diagram', { id, error });
target.innerHTML = '';
const pre = document.createElement('pre');
pre.className = 'diagram-error';
pre.textContent = String(error);
target.appendChild(pre);
}
};
const createPanel = (label) => {
const panel = document.createElement('article');
panel.className = 'diagram-panel';
const heading = document.createElement('div');
heading.className = 'diagram-label';
heading.textContent = label;
panel.appendChild(heading);
const surface = document.createElement('div');
surface.className = 'diagram-surface';
panel.appendChild(surface);
return { panel, surface };
};
const bootstrap = async () => {
const fragment = document.createDocumentFragment();
const groups = diagramData.filter((group) => {
if (!group || seen.has(group.id)) {
return false;
}
seen.add(group.id);
return Array.isArray(group.examples) && group.examples.length > 0;
});
for (const group of groups) {
const groupSection = document.createElement('section');
groupSection.className = 'diagram-group';
const groupHeading = document.createElement('h2');
groupHeading.textContent = group.name ?? group.id;
groupSection.appendChild(groupHeading);
for (const example of group.examples) {
const exampleWrapper = document.createElement('div');
exampleWrapper.className = 'diagram-example';
const exampleHeading = document.createElement('h3');
exampleHeading.textContent = example.title ?? 'Example';
exampleWrapper.appendChild(exampleHeading);
const row = document.createElement('div');
row.className = 'diagram-row';
const defaultPanel = createPanel('Default config');
const handPanel = createPanel('config.look: handDrawn');
row.append(defaultPanel.panel, handPanel.panel);
exampleWrapper.appendChild(row);
groupSection.appendChild(exampleWrapper);
await renderDiagram(defaultPanel.surface, example.code);
await renderDiagram(handPanel.surface, example.code, {
look: 'handDrawn',
handDrawnSeed: 42,
});
}
fragment.appendChild(groupSection);
}
app.appendChild(fragment);
if (window.Cypress) {
window.rendered = true;
}
};
bootstrap().catch((error) => {
console.error('Failed to bootstrap hand-drawn comparison page', error);
});
</script>
</body>
</html>

8
packages/mermaid/src/mermaidAPI.ts
View File

@@ -447,7 +447,7 @@ const render = async function (
svgCode = cleanUpSvgCode(svgCode, isSandboxed, evaluate(config.arrowMarkerAbsolute)); svgCode = cleanUpSvgCode(svgCode, isSandboxed, evaluate(config.arrowMarkerAbsolute));
if (config.look === 'handDrawn' && !diag.capabilities?.handDrawn && includeLargeFeatures) { if (config.look === 'handDrawn' && !diag.capabilities?.handDrawn && includeLargeFeatures) {
const { OutputType, Svg2Roughjs } = await import('svg2roughjs'); const { OutputType, Svg2Roughjs } = await import('svg2roughjs');
const svg2roughjs = new Svg2Roughjs(`${enclosingDivID_selector}`, OutputType.SVG, { const svg2roughjs = new Svg2Roughjs(enclosingDivID_selector, OutputType.SVG, {
seed: config.handDrawnSeed, seed: config.handDrawnSeed,
}); });
const graphDiv = document.querySelector<SVGSVGElement>(idSelector)!; const graphDiv = document.querySelector<SVGSVGElement>(idSelector)!;
@@ -458,13 +458,13 @@ const render = async function (
if (!sketch) { if (!sketch) {
throw new Error('sketch not found'); throw new Error('sketch not found');
} }
const sketchHeight = sketch.getAttribute('height'); const height = sketch.getAttribute('height');
const sketchWidth = sketch.getAttribute('width'); const width = sketch.getAttribute('width');
sketch.setAttribute('id', id); sketch.setAttribute('id', id);
sketch.removeAttribute('height'); sketch.removeAttribute('height');
sketch.setAttribute('width', '100%'); sketch.setAttribute('width', '100%');
sketch.setAttribute('viewBox', `0 0 ${sketchWidth} ${sketchHeight}`); sketch.setAttribute('viewBox', `0 0 ${width} ${height}`);
svgCode = sketch.outerHTML; svgCode = sketch.outerHTML;
} }