Merge branch 'develop' into aakansha/bug/5075-fix-getDiagramFromText-api

packages/mermaid/src/diagrams/class/classTypes.spec.ts

@@ -681,3 +681,82 @@ describe('given text representing a method, ', function () {
     });
   });
 });
+
+describe('given text representing an attribute', () => {
+  describe('when the attribute has no modifiers', () => {
+    it('should parse the display text correctly', () => {
+      const str = 'name String';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('name String');
+      expect(displayDetails.cssStyle).toBe('');
+    });
+  });
+
+  describe('when the attribute has public "+" modifier', () => {
+    it('should parse the display text correctly', () => {
+      const str = '+name String';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('+name String');
+      expect(displayDetails.cssStyle).toBe('');
+    });
+  });
+
+  describe('when the attribute has protected "#" modifier', () => {
+    it('should parse the display text correctly', () => {
+      const str = '#name String';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('#name String');
+      expect(displayDetails.cssStyle).toBe('');
+    });
+  });
+
+  describe('when the attribute has private "-" modifier', () => {
+    it('should parse the display text correctly', () => {
+      const str = '-name String';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('-name String');
+      expect(displayDetails.cssStyle).toBe('');
+    });
+  });
+
+  describe('when the attribute has internal "~" modifier', () => {
+    it('should parse the display text correctly', () => {
+      const str = '~name String';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('~name String');
+      expect(displayDetails.cssStyle).toBe('');
+    });
+  });
+
+  describe('when the attribute has static "$" modifier', () => {
+    it('should parse the display text correctly and apply static css style', () => {
+      const str = 'name String$';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('name String');
+      expect(displayDetails.cssStyle).toBe(staticCssStyle);
+    });
+  });
+
+  describe('when the attribute has abstract "*" modifier', () => {
+    it('should parse the display text correctly and apply abstract css style', () => {
+      const str = 'name String*';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('name String');
+      expect(displayDetails.cssStyle).toBe(abstractCssStyle);
+    });
+  });
+});

packages/mermaid/src/diagrams/class/classTypes.ts

@@ -106,7 +106,7 @@ export class ClassMember {
         this.visibility = firstChar as Visibility;
       }
 
-      if (lastChar.match(/[*?]/)) {
+      if (lastChar.match(/[$*]/)) {
         potentialClassifier = lastChar;
       }
 

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

@@ -145,6 +145,7 @@ g.classGroup line {
 
 .edgeTerminals {
   font-size: 11px;
+  line-height: initial;
 }
 
 .classTitleText {

packages/mermaid/src/diagrams/git/gitGraphRenderer.js

@@ -338,26 +338,34 @@ const drawCommits = (svg, commits, modifyGraph) => {
 };
 
 /**
- * Detect if there are other commits between commit1's x-position and commit2's x-position on the
- * same branch as commit2.
+ * Detect if there are commits
+ * between commitA's x-position
+ * and commitB's x-position on the
+ * same branch as commitA, where
+ * commitA isn't main
  *
- * @param {any} commit1
- * @param {any} commit2
+ * @param {any} commitA
+ * @param {any} commitB
+ * @param branchToGetCurve
+ * @param p1
+ * @param p2
  * @param allCommits
- * @returns {boolean} If there are commits between commit1's x-position and commit2's x-position
+ * @returns {boolean}
+ * If there are commits between
+ * commitA's x-position
+ * and commitB's x-position
+ * on the source branch, where
+ * source branch is not main
+ * return true
  */
-const hasOverlappingCommits = (commit1, commit2, allCommits) => {
-  // Find commits on the same branch as commit2
-  const keys = Object.keys(allCommits);
-  const overlappingComits = keys.filter((key) => {
-    return (
-      allCommits[key].branch === commit2.branch &&
-      allCommits[key].seq > commit1.seq &&
-      allCommits[key].seq < commit2.seq
-    );
+const shouldRerouteArrow = (commitA, commitB, p1, p2, allCommits) => {
+  const commitBIsFurthest = dir === 'TB' ? p1.x < p2.x : p1.y < p2.y;
+  const branchToGetCurve = commitBIsFurthest ? commitB.branch : commitA.branch;
+  const isOnBranchToGetCurve = (x) => x.branch === branchToGetCurve;
+  const isBetweenCommits = (x) => x.seq > commitA.seq && x.seq < commitB.seq;
+  return Object.values(allCommits).some((commitX) => {
+    return isBetweenCommits(commitX) && isOnBranchToGetCurve(commitX);
   });
-
-  return overlappingComits.length > 0;
 };
 
 /**
@@ -388,49 +396,61 @@ const findLane = (y1, y2, depth = 0) => {
  * Draw the lines between the commits. They were arrows initially.
  *
  * @param {any} svg
- * @param {any} commit1
- * @param {any} commit2
+ * @param {any} commitA
+ * @param {any} commitB
  * @param {any} allCommits
  */
-const drawArrow = (svg, commit1, commit2, allCommits) => {
-  const p1 = commitPos[commit1.id];
-  const p2 = commitPos[commit2.id];
-  const overlappingCommits = hasOverlappingCommits(commit1, commit2, allCommits);
-  // log.debug('drawArrow', p1, p2, overlappingCommits, commit1.id, commit2.id);
+const drawArrow = (svg, commitA, commitB, allCommits) => {
+  const p1 = commitPos[commitA.id]; // arrowStart
+  const p2 = commitPos[commitB.id]; // arrowEnd
+  const arrowNeedsRerouting = shouldRerouteArrow(commitA, commitB, p1, p2, allCommits);
+  // log.debug('drawArrow', p1, p2, arrowNeedsRerouting, commitA.id, commitB.id);
+
+  // Lower-right quadrant logic; top-left is 0,0
 
   let arc = '';
   let arc2 = '';
   let radius = 0;
   let offset = 0;
-  let colorClassNum = branchPos[commit2.branch].index;
+  let colorClassNum = branchPos[commitB.branch].index;
   let lineDef;
-  if (overlappingCommits) {
+  if (arrowNeedsRerouting) {
     arc = 'A 10 10, 0, 0, 0,';
     arc2 = 'A 10 10, 0, 0, 1,';
     radius = 10;
     offset = 10;
-    // Figure out the color of the arrow,arrows going down take the color from the destination branch
-    colorClassNum = branchPos[commit2.branch].index;
 
     const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y);
     const lineX = p1.x < p2.x ? findLane(p1.x, p2.x) : findLane(p2.x, p1.x);
 
     if (dir === 'TB') {
       if (p1.x < p2.x) {
+        // Source commit is on branch position left of destination commit
+        // so render arrow rightward with colour of destination branch
+        colorClassNum = branchPos[commitB.branch].index;
         lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${
           p1.y + offset
         } L ${lineX} ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
       } else {
+        // Source commit is on branch position right of destination commit
+        // so render arrow leftward with colour of source branch
+        colorClassNum = branchPos[commitA.branch].index;
         lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${
           p1.y + offset
         } L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
       }
     } else {
       if (p1.y < p2.y) {
+        // Source commit is on branch positioned above destination commit
+        // so render arrow downward with colour of destination branch
+        colorClassNum = branchPos[commitB.branch].index;
         lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${
           p1.x + offset
         } ${lineY} L ${p2.x - radius} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
       } else {
+        // Source commit is on branch positioned below destination commit
+        // so render arrow upward with colour of source branch
+        colorClassNum = branchPos[commitA.branch].index;
         lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${
           p1.x + offset
         } ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`;
@@ -445,7 +465,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
         offset = 20;
 
         // Figure out the color of the arrow,arrows going down take the color from the destination branch
-        colorClassNum = branchPos[commit2.branch].index;
+        colorClassNum = branchPos[commitB.branch].index;
 
         lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
           p1.y + offset
@@ -458,14 +478,14 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
         offset = 20;
 
         // Arrows going up take the color from the source branch
-        colorClassNum = branchPos[commit1.branch].index;
+        colorClassNum = branchPos[commitA.branch].index;
         lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${
           p2.y
         } L ${p2.x} ${p2.y}`;
       }
 
       if (p1.x === p2.x) {
-        colorClassNum = branchPos[commit1.branch].index;
+        colorClassNum = branchPos[commitA.branch].index;
         lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${
           p2.y + radius
         } L ${p2.x} ${p2.y}`;
@@ -475,10 +495,8 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
         arc = 'A 20 20, 0, 0, 0,';
         radius = 20;
         offset = 20;
-
-        // Figure out the color of the arrow,arrows going down take the color from the destination branch
-        colorClassNum = branchPos[commit2.branch].index;
-
+        // Arrows going up take the color from the target branch
+        colorClassNum = branchPos[commitB.branch].index;
         lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
           p2.x
         } ${p2.y}`;
@@ -487,16 +505,15 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
         arc = 'A 20 20, 0, 0, 0,';
         radius = 20;
         offset = 20;
-
         // Arrows going up take the color from the source branch
-        colorClassNum = branchPos[commit1.branch].index;
+        colorClassNum = branchPos[commitA.branch].index;
         lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
           p2.x
         } ${p2.y}`;
       }
 
       if (p1.y === p2.y) {
-        colorClassNum = branchPos[commit1.branch].index;
+        colorClassNum = branchPos[commitA.branch].index;
         lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
           p2.x
         } ${p2.y}`;

packages/mermaid/src/docs/.vitepress/config.ts

@@ -4,7 +4,10 @@ import { defineConfig, MarkdownOptions } from 'vitepress';
 
 const allMarkdownTransformers: MarkdownOptions = {
   // the shiki theme to highlight code blocks
-  theme: 'github-dark',
+  theme: {
+    light: 'github-light',
+    dark: 'github-dark',
+  },
   config: async (md) => {
     await MermaidExample(md);
   },

packages/mermaid/src/docs/ecosystem/integrations-community.md

@@ -177,7 +177,7 @@ Communication tools and platforms
 ### Document Generation
 
 - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
-- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts)
+- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
 - [Sphinx](https://www.sphinx-doc.org/en/master/)
   - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
 - [remark](https://remark.js.org/)

packages/mermaid/src/docs/news/announcements.md

@@ -1,17 +1,9 @@
 # Announcements
 
-<br />
+Check out our latest blog posts below. See more blog posts [here](blog.md).
 
-<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
 
-## Calling all fans of Mermaid and Mermaid Chart! 🎉
+14 November 2023 · 5 mins
 
-We’ve officially made our Product Hunt debut, and would love any and all support from the community!
-
-[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch.
-
-Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year.
-
-We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen.
-
-Your support means the world to us. Thank you for being part of the diagramming movement.
+Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.

packages/mermaid/src/docs/news/blog.md

@@ -1,5 +1,23 @@
 # Blog
 
+## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
+
+14 November 2023 · 5 mins
+
+Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
+
+## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
+
+1 November 2023 · 5 mins
+
+Would an AI diagram generator make your life easier?
+
+## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/)
+
+12 October 2023 · 4 mins
+
+Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals.
+
 ## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
 
 22 September 2023 · 7 mins

packages/mermaid/src/docs/package.json

@@ -23,7 +23,7 @@
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.16",
     "@unocss/reset": "^0.57.0",
-    "@vite-pwa/vitepress": "^0.2.0",
+    "@vite-pwa/vitepress": "^0.3.0",
     "@vitejs/plugin-vue": "^4.2.1",
     "fast-glob": "^3.2.12",
     "https-localhost": "^4.7.1",
@@ -31,8 +31,8 @@
     "unocss": "^0.57.0",
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.3.9",
-    "vite-plugin-pwa": "^0.16.0",
-    "vitepress": "1.0.0-rc.25",
+    "vite-plugin-pwa": "^0.17.0",
+    "vitepress": "1.0.0-rc.31",
     "workbox-window": "^7.0.0"
   }
 }

packages/mermaid/src/mermaid.spec.ts

@@ -2,7 +2,7 @@ import mermaid from './mermaid.js';
 import { mermaidAPI } from './mermaidAPI.js';
 import './diagram-api/diagram-orchestration.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
-import { beforeAll, describe, it, expect, vi } from 'vitest';
+import { beforeAll, describe, it, expect, vi, afterEach } from 'vitest';
 import type { DiagramDefinition } from './diagram-api/types.js';
 
 beforeAll(async () => {
@@ -89,7 +89,7 @@ describe('when using mermaid and ', () => {
       ).resolves.not.toThrow();
       // should still render, even if lazyLoadedDiagrams fails
       expect(mermaidAPI.render).toHaveBeenCalled();
-    });
+    }, 20_000);
 
     it('should defer diagram load based on parameter', async () => {
       let loaded = false;

packages/mermaid/src/utils/lineWithOffset.ts

@@ -19,9 +19,12 @@ const markerOffsets = {
  * @returns The angle, deltaX and deltaY
  */
 function calculateDeltaAndAngle(
-  point1: Point | [number, number],
-  point2: Point | [number, number]
+  point1?: Point | [number, number],
+  point2?: Point | [number, number]
 ): { angle: number; deltaX: number; deltaY: number } {
+  if (point1 === undefined || point2 === undefined) {
+    return { angle: 0, deltaX: 0, deltaY: 0 };
+  }
   point1 = pointTransformer(point1);
   point2 = pointTransformer(point2);
   const [x1, y1] = [point1.x, point1.y];
@@ -90,3 +93,44 @@ export const getLineFunctionsWithOffset = (
     },
   };
 };
+
+if (import.meta.vitest) {
+  const { it, expect, describe } = import.meta.vitest;
+  describe('calculateDeltaAndAngle', () => {
+    it('should calculate the angle and deltas between two points', () => {
+      expect(calculateDeltaAndAngle([0, 0], [0, 1])).toStrictEqual({
+        angle: 1.5707963267948966,
+        deltaX: 0,
+        deltaY: 1,
+      });
+      expect(calculateDeltaAndAngle([1, 0], [0, -1])).toStrictEqual({
+        angle: 0.7853981633974483,
+        deltaX: -1,
+        deltaY: -1,
+      });
+      expect(calculateDeltaAndAngle({ x: 1, y: 0 }, [0, -1])).toStrictEqual({
+        angle: 0.7853981633974483,
+        deltaX: -1,
+        deltaY: -1,
+      });
+      expect(calculateDeltaAndAngle({ x: 1, y: 0 }, { x: 1, y: 0 })).toStrictEqual({
+        angle: NaN,
+        deltaX: 0,
+        deltaY: 0,
+      });
+    });
+
+    it('should calculate the angle and deltas if one point in undefined', () => {
+      expect(calculateDeltaAndAngle(undefined, [0, 1])).toStrictEqual({
+        angle: 0,
+        deltaX: 0,
+        deltaY: 0,
+      });
+      expect(calculateDeltaAndAngle([0, 1], undefined)).toStrictEqual({
+        angle: 0,
+        deltaX: 0,
+        deltaY: 0,
+      });
+    });
+  });
+}

packages/mermaid/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "outDir": "./dist"
+    "outDir": "./dist",
+    "types": ["vitest/importMeta", "vitest/globals"]
   },
   "include": ["./src/**/*.ts", "./package.json"]
 }