Merge branch 'sidv/rough' of https://github.com/mermaid-js/mermaid into sidv/rough

* 'sidv/rough' of https://github.com/mermaid-js/mermaid: [autofix.ci] apply automated fixes
test: verify handDrawn look for every diagram type
2025-12-28 15:16:22 +01:00 · 2025-11-05 01:31:16 +07:00 · 2025-11-05 01:31:06 +07:00 · 2025-11-04 17:41:33 +00:00 · 2025-11-05 00:38:17 +07:00 · 2025-11-05 00:25:03 +07:00
17 changed files with 317 additions and 19 deletions
--- a/.changeset/upset-jobs-repair.md
+++ b/.changeset/upset-jobs-repair.md
@@ -0,0 +1,8 @@
+---
+'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.
--- a/cypress/integration/rendering/handDraw.spec.js
+++ b/cypress/integration/rendering/handDraw.spec.js
@@ -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,
+    });
+  });
+});
--- a/cypress/platform/handDrawn.html
+++ b/cypress/platform/handDrawn.html
@@ -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>
--- a/docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md
+++ b/docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md
@@ -10,7 +10,7 @@

 # Interface: ExternalDiagramDefinition

-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)
+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)

 ## Properties

@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/me

 > **detector**: `DiagramDetector`

-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)
+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)

 ---

@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:98](https://github.com/me

 > **id**: `string`

-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)
+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)

 ---

@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/me

 > **loader**: `DiagramLoader`

-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)
+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)
--- a/docs/config/setup/mermaid/type-aliases/SVG.md
+++ b/docs/config/setup/mermaid/type-aliases/SVG.md
@@ -12,4 +12,4 @@

 > **SVG** = `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>

-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)
+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)
--- a/docs/config/setup/mermaid/type-aliases/SVGGroup.md
+++ b/docs/config/setup/mermaid/type-aliases/SVGGroup.md
@@ -12,4 +12,4 @@

 > **SVGGroup** = `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>

-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)
+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)
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -85,6 +85,7 @@
    "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"
  },
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -30,7 +30,7 @@ export class Diagram {
      const { id, diagram } = await loader();
      registerDiagram(id, diagram);
    }
-    const { db, parser, renderer, init } = getDiagram(type);
+    const { db, parser, renderer, init, capabilities } = 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);
+    return new Diagram(type, text, db, parser, renderer, capabilities);
  }

  private constructor(
@@ -50,7 +50,8 @@ export class Diagram {
    public text: string,
    public db: DiagramDefinition['db'],
    public parser: DiagramDefinition['parser'],
-    public renderer: DiagramDefinition['renderer']
+    public renderer: DiagramDefinition['renderer'],
+    public capabilities: DiagramDefinition['capabilities']
  ) {}

  async render(id: string, version: string) {
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -75,10 +75,15 @@ 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?: (
--- a/packages/mermaid/src/diagrams/class/classDiagram.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.ts
@@ -10,6 +10,9 @@ export const diagram: DiagramDefinition = {
  get db() {
    return new ClassDB();
  },
+  capabilities: {
+    handDrawn: true,
+  },
  renderer,
  styles,
  init: (cnf) => {
--- a/packages/mermaid/src/diagrams/er/erDiagram.ts
+++ b/packages/mermaid/src/diagrams/er/erDiagram.ts
@@ -2,13 +2,16 @@
 import erParser from './parser/erDiagram.jison';
 import { ErDB } from './erDb.js';
 import * as renderer from './erRenderer-unified.js';
-import erStyles from './styles.js';
+import styles from './styles.js';

 export const diagram = {
  parser: erParser,
  get db() {
    return new ErDB();
  },
+  capabilities: {
+    handDrawn: true,
+  },
  renderer,
-  styles: erStyles,
+  styles,
 };
--- a/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
@@ -13,6 +13,9 @@ export const diagram = {
    return new FlowDB();
  },
  renderer,
+  capabilities: {
+    handDrawn: true,
+  },
  styles: flowStyles,
  init: (cnf: MermaidConfig) => {
    if (!cnf.flowchart) {
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts
@@ -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 } = globalConfig;
+  const { themeVariables, look } = globalConfig;
  let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth);
  outerStrokeWidth ??= 2;

@@ -59,12 +59,14 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
    .innerRadius(radius * textPosition)
    .outerRadius(radius * textPosition);

-  group
-    .append('circle')
-    .attr('cx', 0)
-    .attr('cy', 0)
-    .attr('r', radius + outerStrokeWidth / 2)
-    .attr('class', 'pieOuterCircle');
+  if (look !== 'handDrawn') {
+    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);
--- a/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
+++ b/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
@@ -10,6 +10,9 @@ export const diagram: DiagramDefinition = {
  get db() {
    return new RequirementDB();
  },
+  capabilities: {
+    handDrawn: true,
+  },
  renderer,
  styles,
 };
--- a/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
@@ -10,6 +10,9 @@ export const diagram: DiagramDefinition = {
  get db() {
    return new StateDB(2);
  },
+  capabilities: {
+    handDrawn: true,
+  },
  renderer,
  styles,
  init: (cnf) => {
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -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' assert { type: 'json' };
+import packageJson from '../package.json' with { type: 'json' };
 import { addSVGa11yTitleDescription, setA11yDiagramInfo } from './accessibility.js';
 import assignWithDepth from './assignWithDepth.js';
 import * as configApi from './config.js';
@@ -445,6 +445,29 @@ 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();
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -277,6 +277,9 @@ 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
@@ -8857,6 +8860,13 @@ 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==}

@@ -8963,6 +8973,9 @@ 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==}

@@ -19955,6 +19968,14 @@ 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:
@@ -20101,6 +20122,8 @@ snapshots:

  tinybench@2.9.0: {}

+  tinycolor2@1.6.0: {}
+
  tinyexec@0.3.2: {}

  tinyexec@1.0.1: {}
Author	SHA1	Message	Date
Sidharth Vinod	0b4e621e75	Merge branch 'sidv/rough' of https://github.com/mermaid-js/mermaid into sidv/rough * 'sidv/rough' of https://github.com/mermaid-js/mermaid: [autofix.ci] apply automated fixes	2025-11-05 01:31:16 +07:00
Sidharth Vinod	ffa727084c	test: verify handDrawn look for every diagram type	2025-11-05 01:31:06 +07:00
autofix-ci[bot]	55cea7e9df	[autofix.ci] apply automated fixes	2025-11-04 17:41:33 +00:00
Sidharth Vinod	33dfa5a425	Merge branch 'develop' into sidv/rough * develop: (50 commits) chore: forbid use of `viewbox` in code chore: Add missing clean scripts chore: Remove NPM_TOKEN from release workflow [autofix.ci] apply automated fixes chore: Add speccharts to cspell Refactor GitHub Actions workflow for lockfile validation feat: Allow validation workflow to run on forks fix: Prevent duplicate comments by validation workflow chore: Cleanup lockfile Add speccharts to `integrations-community.md` Version Packages Update .changeset/slick-wasps-bathe.md fix: update dagre-d3-es to version 7.0.13 fix: style broken caused by a mistake in merge `3f46c94a` fix: update ClassDB and ClassTypes for improved type safety and consistency fix: add validation to ensure correct casing of 'viewBox' in all rendering tests chore: added changeset fix: correct viewBox casing in radar and packet diagram Fix class diagram example fix: failing argos on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com> ...	2025-11-05 00:38:17 +07:00
Sidharth Vinod	a2476bf7e8	chore: Add changeset	2025-11-05 00:25:03 +07:00
Sidharth Vinod	f4e2b0dead	feat: Mark diagrams capable of handDrawn	2025-11-05 00:22:14 +07:00
Sidharth Vinod	6f29330dc8	feat: Support look for all diagrams	2025-11-05 00:21:46 +07:00
Sidharth Vinod	31345ff241	feat: Add capabilities support to diagrams	2025-11-05 00:21:26 +07:00