Compare commits

..

1 Commits

Author SHA1 Message Date
Sidharth Vinod
fed9d3568d Refactor GitHub Actions workflow for lockfile validation
Removed Node.js setup step and pnpm action version.

Co-Authored-By: alois@aloisklink.com
2025-11-03 23:29:28 -08:00
25 changed files with 22 additions and 329 deletions

View File

@@ -1,8 +0,0 @@
---
'mermaid': minor
---
feat: Support `handDrawn` look for all diagrams
This uses svg2roughjs on diagrams that do not natively support roughjs.
So your mileage may vary.

View File

@@ -1,5 +1,3 @@
!viewbox
# It should be viewBox
# This file contains coding related terms
ALPHANUM
antiscript

View File

@@ -64,7 +64,6 @@ rscratch
shiki
Slidev
sparkline
speccharts
sphinxcontrib
ssim
stylis

View File

@@ -42,4 +42,5 @@ jobs:
publish: pnpm changeset:publish
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
NPM_CONFIG_PROVENANCE: true

View File

@@ -99,7 +99,6 @@ export const openURLAndVerifyRendering = (
cy.visit(url);
cy.window().should('have.property', 'rendered', true);
cy.get('svg').should('be.visible');
// cspell:ignore viewbox
cy.get('svg').should('not.have.attr', 'viewbox');
if (validation) {

View File

@@ -1,9 +0,0 @@
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,
});
});
});

View File

@@ -1,211 +0,0 @@
<!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>

View File

@@ -10,7 +10,7 @@
# Interface: ExternalDiagramDefinition
Defined in: [packages/mermaid/src/diagram-api/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L101)
Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96)
## Properties
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:101](https://github.com/m
> **detector**: `DiagramDetector`
Defined in: [packages/mermaid/src/diagram-api/types.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L103)
Defined in: [packages/mermaid/src/diagram-api/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L98)
---
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:103](https://github.com/m
> **id**: `string`
Defined in: [packages/mermaid/src/diagram-api/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L102)
Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97)
---
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:102](https://github.com/m
> **loader**: `DiagramLoader`
Defined in: [packages/mermaid/src/diagram-api/types.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L104)
Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L99)

View File

@@ -12,4 +12,4 @@
> **SVG** = `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
Defined in: [packages/mermaid/src/diagram-api/types.ts:133](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L133)
Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)

View File

@@ -12,4 +12,4 @@
> **SVGGroup** = `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
Defined in: [packages/mermaid/src/diagram-api/types.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L135)
Defined in: [packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)

View File

@@ -272,7 +272,6 @@ Communication tools and platforms
- [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
- [Reveal CK](https://github.com/jedcn/reveal-ck)
- [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
- [speccharts: Turn your test suites into specification diagrams](https://github.com/arnaudrenaud/speccharts)
- [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
<!--- cspell:ignore Blazorade HueHive --->

View File

@@ -18,9 +18,7 @@
"elk",
"mermaid"
],
"scripts": {
"clean": "rimraf dist"
},
"scripts": {},
"repository": {
"type": "git",
"url": "https://github.com/mermaid-js/mermaid"

View File

@@ -19,9 +19,7 @@
"mermaid",
"layout"
],
"scripts": {
"clean": "rimraf dist"
},
"scripts": {},
"repository": {
"type": "git",
"url": "https://github.com/mermaid-js/mermaid"

View File

@@ -85,7 +85,6 @@
"marked": "^16.3.0",
"roughjs": "^4.6.6",
"stylis": "^4.3.6",
"svg2roughjs": "^3.2.1",
"ts-dedent": "^2.2.0",
"uuid": "^11.1.0"
},

View File

@@ -30,7 +30,7 @@ export class Diagram {
const { id, diagram } = await loader();
registerDiagram(id, diagram);
}
const { db, parser, renderer, init, capabilities } = getDiagram(type);
const { db, parser, renderer, init } = getDiagram(type);
if (parser.parser) {
// The parser.parser.yy is only present in JISON parsers. So, we'll only set if required.
parser.parser.yy = db;
@@ -42,7 +42,7 @@ export class Diagram {
db.setDiagramTitle?.(metadata.title);
}
await parser.parse(text);
return new Diagram(type, text, db, parser, renderer, capabilities);
return new Diagram(type, text, db, parser, renderer);
}
private constructor(
@@ -50,8 +50,7 @@ export class Diagram {
public text: string,
public db: DiagramDefinition['db'],
public parser: DiagramDefinition['parser'],
public renderer: DiagramDefinition['renderer'],
public capabilities: DiagramDefinition['capabilities']
public renderer: DiagramDefinition['renderer']
) {}
async render(id: string, version: string) {

View File

@@ -75,15 +75,10 @@ export interface DiagramRenderer {
) => Map<string, DiagramStyleClassDef>;
}
export interface DiagramCapabilities {
handDrawn?: boolean;
}
export interface DiagramDefinition {
db: DiagramDB;
renderer: DiagramRenderer;
parser: ParserDefinition;
capabilities?: DiagramCapabilities;
styles?: any;
init?: (config: MermaidConfig) => void;
injectUtils?: (

View File

@@ -10,9 +10,6 @@ export const diagram: DiagramDefinition = {
get db() {
return new ClassDB();
},
capabilities: {
handDrawn: true,
},
renderer,
styles,
init: (cnf) => {

View File

@@ -2,16 +2,13 @@
import erParser from './parser/erDiagram.jison';
import { ErDB } from './erDb.js';
import * as renderer from './erRenderer-unified.js';
import styles from './styles.js';
import erStyles from './styles.js';
export const diagram = {
parser: erParser,
get db() {
return new ErDB();
},
capabilities: {
handDrawn: true,
},
renderer,
styles,
styles: erStyles,
};

View File

@@ -13,9 +13,6 @@ export const diagram = {
return new FlowDB();
},
renderer,
capabilities: {
handDrawn: true,
},
styles: flowStyles,
init: (cnf: MermaidConfig) => {
if (!cnf.flowchart) {

View File

@@ -43,7 +43,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
const group: SVGGroup = svg.append('g');
group.attr('transform', 'translate(' + pieWidth / 2 + ',' + height / 2 + ')');
const { themeVariables, look } = globalConfig;
const { themeVariables } = globalConfig;
let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth);
outerStrokeWidth ??= 2;
@@ -59,14 +59,12 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
.innerRadius(radius * textPosition)
.outerRadius(radius * textPosition);
if (look !== 'handDrawn') {
group
.append('circle')
.attr('cx', 0)
.attr('cy', 0)
.attr('r', radius + outerStrokeWidth / 2)
.attr('class', 'pieOuterCircle');
}
group
.append('circle')
.attr('cx', 0)
.attr('cy', 0)
.attr('r', radius + outerStrokeWidth / 2)
.attr('class', 'pieOuterCircle');
const sections: Sections = db.getSections();
const arcs: d3.PieArcDatum<D3Section>[] = createPieArcs(sections);

View File

@@ -10,9 +10,6 @@ export const diagram: DiagramDefinition = {
get db() {
return new RequirementDB();
},
capabilities: {
handDrawn: true,
},
renderer,
styles,
};

View File

@@ -10,9 +10,6 @@ export const diagram: DiagramDefinition = {
get db() {
return new StateDB(2);
},
capabilities: {
handDrawn: true,
},
renderer,
styles,
init: (cnf) => {

View File

@@ -267,7 +267,6 @@ Communication tools and platforms
- [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
- [Reveal CK](https://github.com/jedcn/reveal-ck)
- [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
- [speccharts: Turn your test suites into specification diagrams](https://github.com/arnaudrenaud/speccharts)
- [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
<!--- cspell:ignore Blazorade HueHive --->

View File

@@ -7,7 +7,7 @@ import { select } from 'd3';
import { compile, serialize, stringify } from 'stylis';
import DOMPurify from 'dompurify';
import isEmpty from 'lodash-es/isEmpty.js';
import packageJson from '../package.json' with { type: 'json' };
import packageJson from '../package.json' assert { type: 'json' };
import { addSVGa11yTitleDescription, setA11yDiagramInfo } from './accessibility.js';
import assignWithDepth from './assignWithDepth.js';
import * as configApi from './config.js';
@@ -445,29 +445,6 @@ const render = async function (
log.debug('config.arrowMarkerAbsolute', config.arrowMarkerAbsolute);
svgCode = cleanUpSvgCode(svgCode, isSandboxed, evaluate(config.arrowMarkerAbsolute));
if (config.look === 'handDrawn' && !diag.capabilities?.handDrawn && includeLargeFeatures) {
const { OutputType, Svg2Roughjs } = await import('svg2roughjs');
const svg2roughjs = new Svg2Roughjs(enclosingDivID_selector, OutputType.SVG, {
seed: config.handDrawnSeed,
});
const graphDiv = document.querySelector<SVGSVGElement>(idSelector)!;
svg2roughjs.svg = graphDiv;
await svg2roughjs.sketch();
graphDiv.remove();
const sketch = document.querySelector<SVGSVGElement>(`${enclosingDivID_selector} > svg`);
if (!sketch) {
throw new Error('sketch not found');
}
const height = sketch.getAttribute('height');
const width = sketch.getAttribute('width');
sketch.setAttribute('id', id);
sketch.removeAttribute('height');
sketch.setAttribute('width', '100%');
sketch.setAttribute('viewBox', `0 0 ${width} ${height}`);
svgCode = sketch.outerHTML;
}
if (isSandboxed) {
const svgEl = root.select(enclosingDivID_selector + ' svg').node();

23
pnpm-lock.yaml generated
View File

@@ -277,9 +277,6 @@ importers:
stylis:
specifier: ^4.3.6
version: 4.3.6
svg2roughjs:
specifier: ^3.2.1
version: 3.2.1
ts-dedent:
specifier: ^2.2.0
version: 2.2.0
@@ -8860,13 +8857,6 @@ packages:
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
engines: {node: '>= 0.4'}
svg-pathdata@6.0.3:
resolution: {integrity: sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==}
engines: {node: '>=12.0.0'}
svg2roughjs@3.2.1:
resolution: {integrity: sha512-38OYXS0/otPfF3sdutfv1u+iZ7bvLIptaDTNHQh0hBjOYm5KsObAhWdVqUsmWKk85xt7XWOD8obyrqkELq7apw==}
symbol-tree@3.2.4:
resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
@@ -8973,9 +8963,6 @@ packages:
tinybench@2.9.0:
resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
tinycolor2@1.6.0:
resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
tinyexec@0.3.2:
resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
@@ -19968,14 +19955,6 @@ snapshots:
supports-preserve-symlinks-flag@1.0.0: {}
svg-pathdata@6.0.3: {}
svg2roughjs@3.2.1:
dependencies:
roughjs: 4.6.6(patch_hash=3543d47108cb41b68ec6a671c0e1f9d0cfe2ce524fea5b0992511ae84c3c6b64)
svg-pathdata: 6.0.3
tinycolor2: 1.6.0
symbol-tree@3.2.4: {}
synckit@0.11.11:
@@ -20122,8 +20101,6 @@ snapshots:
tinybench@2.9.0: {}
tinycolor2@1.6.0: {}
tinyexec@0.3.2: {}
tinyexec@1.0.1: {}