feat: Mark diagrams capable of handDrawn

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) => {

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,
 };

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

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
+  if (look !== 'handDrawn') {
-    .append('circle')
+    group
-    .attr('cx', 0)
+      .append('circle')
-    .attr('cy', 0)
+      .attr('cx', 0)
-    .attr('r', radius + outerStrokeWidth / 2)
+      .attr('cy', 0)
-    .attr('class', 'pieOuterCircle');
+      .attr('r', radius + outerStrokeWidth / 2)
+      .attr('class', 'pieOuterCircle');
+  }
 
   const sections: Sections = db.getSections();
   const arcs: d3.PieArcDatum<D3Section>[] = createPieArcs(sections);

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,
 };

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) => {