standardized error diagram'

* remove empty `styles.js`
* use named imports/exports instead of default
* remove unnecessary data in diagram definition

packages/mermaid/src/diagram-api/diagram-orchestration.ts

@@ -14,7 +14,7 @@ import classDiagramV2 from '../diagrams/class/classDetector-V2.js';
 import state from '../diagrams/state/stateDetector.js';
 import stateV2 from '../diagrams/state/stateDetector-V2.js';
 import journey from '../diagrams/user-journey/journeyDetector.js';
-import errorDiagram from '../diagrams/error/errorDiagram.js';
+import { diagram as errorDiagram } from '../diagrams/error/errorDiagram.js';
 import flowchartElk from '../diagrams/flowchart/elk/detector.js';
 import timeline from '../diagrams/timeline/detector.js';
 import mindmap from '../diagrams/mindmap/detector.js';

packages/mermaid/src/diagrams/error/errorDiagram.ts

@@ -1,23 +1,13 @@
-import { DiagramDefinition } from '../../diagram-api/types.js';
+import type { DiagramDefinition } from '../../diagram-api/types.js';
-import styles from './styles.js';
+import { renderer } from './errorRenderer.js';
-import renderer from './errorRenderer.js';
+
 export const diagram: DiagramDefinition = {
-  db: {
+  db: {},
-    clear: () => {
-      // Quite ok, clear needs to be there for error to work as a regular diagram
-    },
-  },
-  styles,
   renderer,
   parser: {
     parser: { yy: {} },
-    parse: () => {
+    parse: (): void => {
-      // no op
+      return;
     },
   },
-  init: () => {
-    // no op
-  },
 };
-
-export default diagram;

packages/mermaid/src/diagrams/error/errorRenderer.ts

@@ -1,100 +1,79 @@
-/** Created by knut on 14-12-11. */
-// @ts-ignore TODO: Investigate D3 issue
-import { select } from 'd3';
 import { log } from '../../logger.js';
-import { getErrorMessage } from '../../utils.js';
+import type { Group, SVG } from '../../diagram-api/types.js';
-
+import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
-/**
+import { configureSvgSize } from '../../setupGraphViewbox.js';
- * Merges the value of `conf` with the passed `cnf`
- *
- * @param cnf - Config to merge
- */
-export const setConf = function () {
-  // no-op
-};
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
  *
  * @param _text - Mermaid graph definition.
  * @param id - The text for the error
- * @param mermaidVersion - The version
+ * @param version - The version
  */
-export const draw = (_text: string, id: string, mermaidVersion: string) => {
+export const draw = (_text: string, id: string, version: string) => {
-  try {
+  log.debug('renering svg for syntax error\n');
-    log.debug('Renering svg for syntax error\n');
 
-    const svg = select('#' + id);
+  const svg: SVG = selectSvgElement(id);
+  svg.attr('viewBox', '768 0 912 512');
+  configureSvgSize(svg, 100, 500, true);
 
-    const g = svg.append('g');
+  const g: Group = svg.append('g');
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'
+    );
 
-    g.append('path')
+  g.append('path')
-      .attr('class', 'error-icon')
+    .attr('class', 'error-icon')
-      .attr(
+    .attr(
-        'd',
+      'd',
-        'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'
+      'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'
-      );
+    );
 
-    g.append('path')
+  g.append('path')
-      .attr('class', 'error-icon')
+    .attr('class', 'error-icon')
-      .attr(
+    .attr(
-        'd',
+      'd',
-        'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'
+      'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'
-      );
+    );
 
-    g.append('path')
+  g.append('path')
-      .attr('class', 'error-icon')
+    .attr('class', 'error-icon')
-      .attr(
+    .attr(
-        'd',
+      'd',
-        'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'
+      'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'
-      );
+    );
 
-    g.append('path')
+  g.append('path')
-      .attr('class', 'error-icon')
+    .attr('class', 'error-icon')
-      .attr(
+    .attr(
-        'd',
+      'd',
-        'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'
+      'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'
-      );
+    );
 
-    g.append('path')
+  g.append('path')
-      .attr('class', 'error-icon')
+    .attr('class', 'error-icon')
-      .attr(
+    .attr(
-        'd',
+      'd',
-        'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'
+      'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'
-      );
+    );
 
-    g.append('path')
+  g.append('text') // text label for the x axis
-      .attr('class', 'error-icon')
+    .attr('class', 'error-text')
-      .attr(
+    .attr('x', 1440)
-        'd',
+    .attr('y', 250)
-        'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'
+    .attr('font-size', '150px')
-      );
+    .style('text-anchor', 'middle')
-
+    .text('Syntax error in text');
-    g.append('text') // text label for the x axis
+  g.append('text') // text label for the x axis
-      .attr('class', 'error-text')
+    .attr('class', 'error-text')
-      .attr('x', 1440)
+    .attr('x', 1250)
-      .attr('y', 250)
+    .attr('y', 400)
-      .attr('font-size', '150px')
+    .attr('font-size', '100px')
-      .style('text-anchor', 'middle')
+    .style('text-anchor', 'middle')
-      .text('Syntax error in text');
+    .text(`mermaid version ${version}`);
-    g.append('text') // text label for the x axis
-      .attr('class', 'error-text')
-      .attr('x', 1250)
-      .attr('y', 400)
-      .attr('font-size', '100px')
-      .style('text-anchor', 'middle')
-      .text('mermaid version ' + mermaidVersion);
-
-    svg.attr('height', 100);
-    svg.attr('width', 500);
-    svg.attr('viewBox', '768 0 912 512');
-  } catch (e) {
-    log.error('Error while rendering info diagram');
-    log.error(getErrorMessage(e));
-  }
 };
 
-export default {
+export const renderer = { draw };
-  setConf,
-  draw,
-};

packages/mermaid/src/diagrams/error/styles.js

@@ -1,3 +0,0 @@
-const getStyles = () => ``;
-
-export default getStyles;

packages/mermaid/src/mermaidAPI.ts

@@ -18,7 +18,7 @@ import { version } from '../package.json';
 import * as configApi from './config.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import { Diagram, getDiagramFromText } from './Diagram.js';
-import errorRenderer from './diagrams/error/errorRenderer.js';
+import { renderer as errorRenderer } from './diagrams/error/errorRenderer.js';
 import { attachFunctions } from './interactionDb.js';
 import { log, setLogLevel } from './logger.js';
 import getStyles from './styles.js';

packages/mermaid/src/styles.spec.ts

@@ -19,7 +19,6 @@ import classDiagram from './diagrams/class/styles.js';
 import flowchart from './diagrams/flowchart/styles.js';
 import flowchartElk from './diagrams/flowchart/elk/styles.js';
 import er from './diagrams/er/styles.js';
-import error from './diagrams/error/styles.js';
 import git from './diagrams/git/styles.js';
 import gantt from './diagrams/gantt/styles.js';
 import pie from './diagrams/pie/styles.js';
@@ -86,7 +85,6 @@ describe('styles', () => {
         c4,
         classDiagram,
         er,
-        error,
         flowchart,
         flowchartElk,
         gantt,