mermaid-js · sidharthv96 · Feb 11, 2024 · Aug 20, 2023 · Aug 20, 2023 · Aug 20, 2023
diff --git a/.build/langium-cli.d.ts b/.build/langium-cli.d.ts
diff --git a/docs/community/code.md b/docs/community/code.md
@@ -156,7 +156,7 @@ We know it can sometimes be hard to code _and_ write user documentation.
 
 Our documentation is managed in `packages/mermaid/src/docs`. Details on how to edit is in the [Contributing Documentation](#contributing-documentation) section.
 
-Create another issue specifically for the documentation.\
+Create another issue specifically for the documentation.
 You will need to help with the PR, but definitely ask for help if you feel stuck.
 When it feels hard to write stuff out, explaining it to someone and having that person ask you clarifying questions can often be 80% of the work!
 

diff --git a/docs/intro/getting-started.md b/docs/intro/getting-started.md
@@ -111,9 +111,9 @@ b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.es
 <body>
   Here is a mermaid diagram:
   <pre class="mermaid">
-        graph TD 
-        A[Client] --> B[Load Balancer] 
-        B --> C[Server01] 
+        graph TD
+        A[Client] --> B[Load Balancer]
+        B --> C[Server01]
         B --> D[Server02]
   </pre>
 </body>
@@ -152,18 +152,18 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doi
   <body>
     Here is one mermaid diagram:
     <pre class="mermaid">
-            graph TD 
-            A[Client] --> B[Load Balancer] 
-            B --> C[Server1] 
+            graph TD
+            A[Client] --> B[Load Balancer]
+            B --> C[Server1]
             B --> D[Server2]
     </pre>
 
     And here is another:
     <pre class="mermaid">
-            graph TD 
+            graph TD
             A[Client] -->|tcp_123| B
-            B(Load Balancer) 
-            B -->|tcp_456| C[Server1] 
+            B(Load Balancer)
+            B -->|tcp_456| C[Server1]
             B -->|tcp_456| D[Server2]
     </pre>
 
@@ -185,15 +185,15 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
   </head>
   <body>
     <pre class="mermaid">
-            graph LR 
-            A --- B 
-            B-->C[fa:fa-ban forbidden] 
+            graph LR
+            A --- B
+            B-->C[fa:fa-ban forbidden]
             B-->D(fa:fa-spinner);
     </pre>
     <pre class="mermaid">
-            graph TD 
-            A[Client] --> B[Load Balancer] 
-            B --> C[Server1] 
+            graph TD
+            A[Client] --> B[Load Balancer]
+            B --> C[Server1]
             B --> D[Server2]
     </pre>
     <script type="module">

diff --git a/netlify.toml b/netlify.toml
@@ -7,9 +7,9 @@
   base = ""
 
   # Directory that contains the deploy-ready HTML files and
-  # assets generated by the build. This is an absolute path relative 
+  # assets generated by the build. This is an absolute path relative
   # to the base directory, which is the root by default (/).
-  # This sample publishes the directory located at the absolute 
+  # This sample publishes the directory located at the absolute
   # path "root/project/build-output"
 
   publish = "mermaid-live-editor/docs"

diff --git a/package.json b/package.json
@@ -108,7 +108,7 @@
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
     "jsdom": "^22.0.0",
-    "langium-cli": "2.0.1",
+    "langium-cli": "2.1.0",
     "lint-staged": "^13.2.1",
     "nyc": "^15.1.0",
     "path-browserify": "^1.0.1",

diff --git a/packages/mermaid/src/diagrams/pie/parser/pie.jison b/packages/mermaid/src/diagrams/pie/parser/pie.jison
diff --git a/packages/mermaid/src/diagrams/pie/pie.spec.ts b/packages/mermaid/src/diagrams/pie/pie.spec.ts
@@ -1,5 +1,4 @@
-// @ts-ignore: JISON doesn't support types
-import { parser } from './parser/pie.jison';
+import { parser } from './pieParser.js';
 import { DEFAULT_PIE_DB, db } from './pieDb.js';
 import { setConfig } from '../../diagram-api/diagramAPI.js';
 
@@ -8,13 +7,7 @@ setConfig({
 });
 
 describe('pie', () => {
-  beforeAll(() => {
-    parser.yy = db;
-  });
-
-  beforeEach(() => {
-    parser.yy.clear();
-  });
+  beforeEach(() => db.clear());
 
   describe('parse', () => {
     it('should handle very simple pie', () => {

diff --git a/packages/mermaid/src/diagrams/pie/pieDb.ts b/packages/mermaid/src/diagrams/pie/pieDb.ts
@@ -1,6 +1,4 @@
 import { log } from '../../logger.js';
-import { getConfig as commonGetConfig } from '../../diagram-api/diagramAPI.js';
-import { sanitizeText } from '../common/common.js';
 import {
   setAccTitle,
   getAccTitle,
@@ -10,7 +8,7 @@ import {
   setAccDescription,
   clear as commonClear,
 } from '../common/commonDb.js';
-import type { PieFields, PieDB, Sections } from './pieTypes.js';
+import type { PieFields, PieDB, Sections, D3Section } from './pieTypes.js';
 import type { RequiredDeep } from 'type-fest';
 import type { PieDiagramConfig } from '../../config.type.js';
 import DEFAULT_CONFIG from '../../defaultConfig.js';
@@ -35,8 +33,7 @@ const clear = (): void => {
   commonClear();
 };
 
-const addSection = (label: string, value: number): void => {
-  label = sanitizeText(label, commonGetConfig());
+const addSection = ({ label, value }: D3Section): void => {
   if (sections[label] === undefined) {
     sections[label] = value;
     log.debug(`added new section: ${label}, with value: ${value}`);
@@ -45,13 +42,6 @@ const addSection = (label: string, value: number): void => {
 
 const getSections = (): Sections => sections;
 
-const cleanupValue = (value: string): number => {
-  if (value.substring(0, 1) === ':') {
-    value = value.substring(1).trim();
-  }
-  return Number(value.trim());
-};
-
 const setShowData = (toggle: boolean): void => {
   showData = toggle;
 };
@@ -71,7 +61,6 @@ export const db: PieDB = {
 
   addSection,
   getSections,
-  cleanupValue,
   setShowData,
   getShowData,
 };
diff --git a/packages/mermaid/src/diagrams/pie/pieDiagram.ts b/packages/mermaid/src/diagrams/pie/pieDiagram.ts
@@ -1,6 +1,5 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: JISON doesn't support types
-import parser from './parser/pie.jison';
+import { parser } from './pieParser.js';
 import { db } from './pieDb.js';
 import styles from './pieStyles.js';
 import { renderer } from './pieRenderer.js';

diff --git a/packages/mermaid/src/diagrams/pie/pieParser.ts b/packages/mermaid/src/diagrams/pie/pieParser.ts
@@ -0,0 +1,21 @@
+import type { Pie } from 'mermaid-parser';
+import { parse } from 'mermaid-parser';
+import { log } from '../../logger.js';
+import type { ParserDefinition } from '../../diagram-api/types.js';
+import { populateCommonDb } from '../common/populateCommonDb.js';
+import type { PieDB } from './pieTypes.js';
+import { db } from './pieDb.js';
+
+const populateDb = (ast: Pie, db: PieDB) => {
+  populateCommonDb(ast, db);
+  db.setShowData(ast.showData);
+  ast.sections.map(db.addSection);
+};
+
+export const parser: ParserDefinition = {
+  parse: (input: string): void => {
+    const ast: Pie = parse('pie', input);
+    log.debug(ast);
+    populateDb(ast, db);
+  },
+};
diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts
@@ -6,24 +6,24 @@ import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { cleanAndMerge, parseFontSize } from '../../utils.js';
 import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
-import type { D3Sections, PieDB, Sections } from './pieTypes.js';
+import type { D3Section, PieDB, Sections } from './pieTypes.js';
 import type { MermaidConfig, PieDiagramConfig } from '../../config.type.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 
-const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Sections>[] => {
+const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Section>[] => {
   // Compute the position of each group on the pie:
-  const pieData: D3Sections[] = Object.entries(sections)
-    .map((element: [string, number]): D3Sections => {
+  const pieData: D3Section[] = Object.entries(sections)
+    .map((element: [string, number]): D3Section => {
       return {
         label: element[0],
         value: element[1],
       };
     })
-    .sort((a: D3Sections, b: D3Sections): number => {
+    .sort((a: D3Section, b: D3Section): number => {
       return b.value - a.value;
     });
-  const pie: d3.Pie<unknown, D3Sections> = d3pie<D3Sections>().value(
-    (d3Section: D3Sections): number => d3Section.value
+  const pie: d3.Pie<unknown, D3Section> = d3pie<D3Section>().value(
+    (d3Section: D3Section): number => d3Section.value
   );
   return pie(pieData);
 };
@@ -66,13 +66,11 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
   const textPosition: number = pieConfig.textPosition;
   const radius: number = Math.min(width, height) / 2 - MARGIN;
   // Shape helper to build arcs:
-  const arcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Sections>> = arc<
-    d3.PieArcDatum<D3Sections>
-  >()
+  const arcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Section>> = arc<d3.PieArcDatum<D3Section>>()
     .innerRadius(0)
     .outerRadius(radius);
-  const labelArcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Sections>> = arc<
-    d3.PieArcDatum<D3Sections>
+  const labelArcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Section>> = arc<
+    d3.PieArcDatum<D3Section>
   >()
     .innerRadius(radius * textPosition)
     .outerRadius(radius * textPosition);
@@ -85,7 +83,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
     .attr('class', 'pieOuterCircle');
 
   const sections: Sections = db.getSections();
-  const arcs: d3.PieArcDatum<D3Sections>[] = createPieArcs(sections);
+  const arcs: d3.PieArcDatum<D3Section>[] = createPieArcs(sections);
 
   const myGeneratedColors = [
     themeVariables.pie1,
@@ -111,7 +109,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
     .enter()
     .append('path')
     .attr('d', arcGenerator)
-    .attr('fill', (datum: d3.PieArcDatum<D3Sections>) => {
+    .attr('fill', (datum: d3.PieArcDatum<D3Section>) => {
       return color(datum.data.label);
     })
     .attr('class', 'pieCircle');
@@ -127,10 +125,10 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
     .data(arcs)
     .enter()
     .append('text')
-    .text((datum: d3.PieArcDatum<D3Sections>): string => {
+    .text((datum: d3.PieArcDatum<D3Section>): string => {
       return ((datum.data.value / sum) * 100).toFixed(0) + '%';
     })
-    .attr('transform', (datum: d3.PieArcDatum<D3Sections>): string => {
+    .attr('transform', (datum: d3.PieArcDatum<D3Section>): string => {
       return 'translate(' + labelArcGenerator.centroid(datum) + ')';
     })
     .style('text-anchor', 'middle')
@@ -170,7 +168,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
     .append('text')
     .attr('x', LEGEND_RECT_SIZE + LEGEND_SPACING)
     .attr('y', LEGEND_RECT_SIZE - LEGEND_SPACING)
-    .text((datum: d3.PieArcDatum<D3Sections>): string => {
+    .text((datum: d3.PieArcDatum<D3Section>): string => {
       const { label, value } = datum.data;
       if (db.getShowData()) {
         return `${label} [${value}]`;

diff --git a/packages/mermaid/src/diagrams/pie/pieTypes.ts b/packages/mermaid/src/diagrams/pie/pieTypes.ts
@@ -36,7 +36,7 @@ export interface PieStyleOptions {
 
 export type Sections = Record<string, number>;
 
-export interface D3Sections {
+export interface D3Section {
   label: string;
   value: number;
 }
@@ -55,9 +55,8 @@ export interface PieDB extends DiagramDB {
   getAccDescription: () => string;
 
   // diagram db
-  addSection: (label: string, value: number) => void;
+  addSection: ({ label, value }: D3Section) => void;
   getSections: () => Sections;
-  cleanupValue: (value: string) => number;
   setShowData: (toggle: boolean) => void;
   getShowData: () => boolean;
 }
diff --git a/packages/mermaid/src/docs/community/code.md b/packages/mermaid/src/docs/community/code.md
@@ -145,7 +145,7 @@ We know it can sometimes be hard to code _and_ write user documentation.
 
 Our documentation is managed in `packages/mermaid/src/docs`. Details on how to edit is in the [Contributing Documentation](#contributing-documentation) section.
 
-Create another issue specifically for the documentation.  
+Create another issue specifically for the documentation.
 You will need to help with the PR, but definitely ask for help if you feel stuck.
 When it feels hard to write stuff out, explaining it to someone and having that person ask you clarifying questions can often be 80% of the work!