fix: Remove unnecessary changeset

setting canonicals to mermaid.ai/open-source

.changeset/late-bears-chew.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-revert: restore original hexagon and roundedRect implementations

.changeset/restore-hexagon-roundedrect.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-chore: restore original hexagon and roundedRect implementations

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

@@ -8,7 +8,7 @@ import type { CanonicalUrlConfig } from './canonical-urls.js';
  */
 export const canonicalConfig: CanonicalUrlConfig = {
   // Base URL for the Mermaid documentation site
-  baseUrl: 'https://docs.mermaidchart.com',
+  baseUrl: 'https://mermaid.ai/open-source',
 
   // Disable automatic generation - only use specificCanonicalUrls
   autoGenerate: false,
@@ -57,93 +57,6 @@ export const canonicalConfig: CanonicalUrlConfig = {
   },
 };
 
-/**
- * Pages that should have specific canonical URLs
- *
- * Since autoGenerate is set to false, ONLY pages listed here will get canonical URLs.
- *
- * Usage: Add entries to this object where the key is the relative path
- * of the markdown file and the value is the desired canonical URL.
- *
- * Examples:
- * - 'intro/index.md': 'https://docs.mermaidchart.com/intro/index.html'
- * - 'syntax/flowchart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/flowchart.html'
- * - 'config/configuration.md': 'https://docs.mermaidchart.com/mermaid-oss/config/configuration.html'
- */
-export const specificCanonicalUrls: Record<string, string> = {
-  // Add your specific canonical URLs here
-  // Example:
-  // 'syntax/flowchart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/flowchart.html',
-
-  // Intro section
-  'intro/index.md': 'https://docs.mermaidchart.com/intro/index.html',
-  'intro/getting-started.md':
-    'https://docs.mermaidchart.com/mermaid-oss/intro/getting-started.html',
-  'intro/syntax-reference.md':
-    'https://docs.mermaidchart.com/mermaid-oss/intro/syntax-reference.html',
-
-  // Syntax section
-  'syntax/flowchart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/flowchart.html',
-  'syntax/sequenceDiagram.md':
-    'https://docs.mermaidchart.com/mermaid-oss/syntax/sequenceDiagram.html',
-  'syntax/classDiagram.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/classDiagram.html',
-  'syntax/stateDiagram.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/stateDiagram.html',
-  'syntax/entityRelationshipDiagram.md':
-    'https://docs.mermaidchart.com/mermaid-oss/syntax/entityRelationshipDiagram.html',
-  'syntax/userJourney.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/userJourney.html',
-  'syntax/gantt.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/gantt.html',
-  'syntax/pie.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/pie.html',
-  'syntax/quadrantChart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/quadrantChart.html',
-  'syntax/requirementDiagram.md':
-    'https://docs.mermaidchart.com/mermaid-oss/syntax/requirementDiagram.html',
-  'syntax/mindmap.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/mindmap.html',
-  'syntax/timeline.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/timeline.html',
-  'syntax/gitgraph.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/gitgraph.html',
-  'syntax/c4.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/c4.html',
-  'syntax/sankey.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/sankey.html',
-  'syntax/xyChart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/xyChart.html',
-  'syntax/block.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/block.html',
-  'syntax/packet.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/packet.html',
-  'syntax/kanban.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/kanban.html',
-  'syntax/architecture.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/architecture.html',
-  'syntax/radar.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/radar.html',
-  'syntax/examples.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/examples.html',
-
-  // Config section
-  'config/configuration.md': 'https://docs.mermaidchart.com/mermaid-oss/config/configuration.html',
-  'config/usage.md': 'https://docs.mermaidchart.com/mermaid-oss/config/usage.html',
-  'config/icons.md': 'https://docs.mermaidchart.com/mermaid-oss/config/icons.html',
-  'config/directives.md': 'https://docs.mermaidchart.com/mermaid-oss/config/directives.html',
-  'config/theming.md': 'https://docs.mermaidchart.com/mermaid-oss/config/theming.html',
-  'config/math.md': 'https://docs.mermaidchart.com/mermaid-oss/config/math.html',
-  'config/accessibility.md': 'https://docs.mermaidchart.com/mermaid-oss/config/accessibility.html',
-  'config/mermaidCLI.md': 'https://docs.mermaidchart.com/mermaid-oss/config/mermaidCLI.html',
-  'config/faq.md': 'https://docs.mermaidchart.com/mermaid-oss/config/faq.html',
-
-  // Ecosystem section
-  'ecosystem/mermaid-chart.md':
-    'https://docs.mermaidchart.com/mermaid-oss/ecosystem/mermaid-chart.html',
-  'ecosystem/tutorials.md': 'https://docs.mermaidchart.com/mermaid-oss/ecosystem/tutorials.html',
-  'ecosystem/integrations-community.md':
-    'https://docs.mermaidchart.com/mermaid-oss/ecosystem/integrations-community.html',
-  'ecosystem/integrations-create.md':
-    'https://docs.mermaidchart.com/mermaid-oss/ecosystem/integrations-create.html',
-
-  // Community section
-  'community/intro.md': 'https://docs.mermaidchart.com/mermaid-oss/community/intro.html',
-  'community/contributing.md':
-    'https://docs.mermaidchart.com/mermaid-oss/community/contributing.html',
-  'community/new-diagram.md':
-    'https://docs.mermaidchart.com/mermaid-oss/community/new-diagram.html',
-  'community/questions-and-suggestions.md':
-    'https://docs.mermaidchart.com/mermaid-oss/community/questions-and-suggestions.html',
-  'community/security.md': 'https://docs.mermaidchart.com/mermaid-oss/community/security.html',
-};
-
-/**
- * Helper function to get canonical URL for a specific page
- * This can be used in frontmatter or for manual overrides
- */
 export function getCanonicalUrl(relativePath: string): string | undefined {
-  return specificCanonicalUrls[relativePath];
+  return `https://mermaid.ai/open-source/${relativePath}`;
 }

packages/mermaid/src/docs/.vitepress/canonical-urls.ts

@@ -1,5 +1,5 @@
 import type { PageData } from 'vitepress';
-import { canonicalConfig, specificCanonicalUrls } from './canonical-config.js';
+import { canonicalConfig } from './canonical-config.js';
 
 /**
  * Configuration for canonical URL generation
@@ -48,31 +48,15 @@ const defaultConfig: CanonicalUrlConfig = {
   },
 };
 
-/**
- * Check if a path matches any of the exclude patterns
- */
-function shouldExcludePath(relativePath: string, excludePatterns: string[] = []): boolean {
-  return excludePatterns.some((pattern) => {
-    // Convert glob pattern to regex
-    const regexPattern = pattern
-      .replace(/\*\*/g, '.*')
-      .replace(/\*/g, '[^/]*')
-      .replace(/\?/g, '.')
-      .replace(/\./g, '\\.');
-    const regex = new RegExp(`^${regexPattern}$`);
-    return regex.test(relativePath);
-  });
-}
-
 /**
  * Transform a relative path to a canonical URL path
  */
-function transformPath(relativePath: string, config: CanonicalUrlConfig): string {
+export function transformPath(relativePath: string, config: CanonicalUrlConfig): string {
   let transformedPath = relativePath;
 
   // Apply built-in transformations
   if (config.transformations?.removeMarkdownExtension) {
-    transformedPath = transformedPath.replace(/\.md$/, '');
+    transformedPath = transformedPath.replace(/\.md$/, '.html');
   }
 
   if (config.transformations?.removeIndex) {
@@ -116,45 +100,9 @@ function generateCanonicalUrl(relativePath: string, config: CanonicalUrlConfig):
 export function addCanonicalUrls(pageData: PageData): void {
   const config = canonicalConfig;
 
-  // Check for specific canonical URLs first
-  const specificUrl = specificCanonicalUrls[pageData.relativePath];
-  if (specificUrl) {
-    addCanonicalToHead(pageData, specificUrl);
-    return;
-  }
-
-  // Skip if canonical URL is already explicitly set in frontmatter
-  if (pageData.frontmatter.canonical) {
-    // If it's already a full URL, use as-is
-    if (pageData.frontmatter.canonical.startsWith('http')) {
-      addCanonicalToHead(pageData, pageData.frontmatter.canonical);
-      return;
-    }
-    // If it's a relative path, convert to absolute URL
-    const canonicalUrl = config.baseUrl + pageData.frontmatter.canonical;
-    addCanonicalToHead(pageData, canonicalUrl);
-    return;
-  }
-
-  // Skip if canonicalPath is set in frontmatter
-  if (pageData.frontmatter.canonicalPath) {
-    const canonicalUrl = config.baseUrl + pageData.frontmatter.canonicalPath;
-    addCanonicalToHead(pageData, canonicalUrl);
-    return;
-  }
-
-  // Skip if auto-generation is disabled
-  if (!config.autoGenerate) {
-    return;
-  }
-
-  // Skip if path should be excluded
-  if (shouldExcludePath(pageData.relativePath, config.excludePatterns)) {
-    return;
-  }
-
   // Generate canonical URL
   const canonicalUrl = generateCanonicalUrl(pageData.relativePath, config);
+  transformPath(pageData.relativePath, config);
   addCanonicalToHead(pageData, canonicalUrl);
 }
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts

@@ -1,9 +1,8 @@
-import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
-import { insertPolygonShape } from './insertPolygonShape.js';
 import type { D3Selection } from '../../../types.js';
 
 export const createHexagonPathD = (
@@ -29,42 +28,50 @@ export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<
   node.labelStyle = labelStyles;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const f = 4;
-  const h = bbox.height + node.padding;
-  const m = h / f;
-  const w = bbox.width + 2 * m + node.padding;
-  const points = [
-    { x: m, y: 0 },
-    { x: w - m, y: 0 },
-    { x: w, y: -h / 2 },
-    { x: w - m, y: -h },
-    { x: m, y: -h },
-    { x: 0, y: -h / 2 },
-  ];
-
-  let polygon: D3Selection<SVGGElement> | Awaited<ReturnType<typeof insertPolygonShape>>;
+  const h = bbox.height + (node.padding ?? 0);
+  const w = bbox.width + (node.padding ?? 0) * 2.5;
   const { cssStyles } = node;
+  // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
+  const rc = rough.svg(shapeSvg);
+  const options = userNodeOverrides(node, {});
 
-  if (node.look === 'handDrawn') {
-    // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
-    const rc = rough.svg(shapeSvg);
-    const options = userNodeOverrides(node, {});
-    const pathData = createHexagonPathD(0, 0, w, h, m);
-    const roughNode = rc.path(pathData, options);
-
-    polygon = shapeSvg
-      .insert(() => roughNode, ':first-child')
-      .attr('transform', `translate(${-w / 2}, ${h / 2})`);
-
-    if (cssStyles) {
-      polygon.attr('style', cssStyles);
-    }
-  } else {
-    polygon = insertPolygonShape(shapeSvg, w, h, points);
+  if (node.look !== 'handDrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
   }
 
-  if (nodeStyles) {
-    polygon.attr('style', nodeStyles);
+  let halfWidth = w / 2;
+  const m = halfWidth / 6; // Margin for label
+  halfWidth = halfWidth + m; // Adjusted half width for hexagon
+
+  const halfHeight = h / 2;
+
+  const fixedLength = halfHeight / 2;
+  const deducedWidth = halfWidth - fixedLength;
+
+  const points = [
+    { x: -deducedWidth, y: -halfHeight },
+    { x: 0, y: -halfHeight },
+    { x: deducedWidth, y: -halfHeight },
+    { x: halfWidth, y: 0 },
+    { x: deducedWidth, y: halfHeight },
+    { x: 0, y: halfHeight },
+    { x: -deducedWidth, y: halfHeight },
+    { x: -halfWidth, y: 0 },
+  ];
+
+  const pathData = createPathFromPoints(points);
+  const shapeNode = rc.path(pathData, options);
+
+  const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
+  polygon.attr('class', 'basic label-container');
+
+  if (cssStyles && node.look !== 'handDrawn') {
+    polygon.selectChildren('path').attr('style', cssStyles);
+  }
+
+  if (nodeStyles && node.look !== 'handDrawn') {
+    polygon.selectChildren('path').attr('style', nodeStyles);
   }
 
   node.width = w;

packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts

@@ -1,18 +1,161 @@
-import type { Node, RectOptions } from '../../types.js';
+import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
+import intersect from '../intersect/index.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
+import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
-import { drawRect } from './drawRect.js';
+
+/**
+ * Generates evenly spaced points along an elliptical arc connecting two points.
+ *
+ * @param x1 - x-coordinate of the start point of the arc
+ * @param y1 - y-coordinate of the start point of the arc
+ * @param x2 - x-coordinate of the end point of the arc
+ * @param y2 - y-coordinate of the end point of the arc
+ * @param rx - horizontal radius of the ellipse
+ * @param ry - vertical radius of the ellipse
+ * @param clockwise - direction of the arc; true for clockwise, false for counterclockwise
+ * @returns Array of points `{ x, y }` along the elliptical arc
+ *
+ * @throws Error if the given radii are too small to draw an arc between the points
+ */
+export function generateArcPoints(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  rx: number,
+  ry: number,
+  clockwise: boolean
+) {
+  const numPoints = 20;
+  // Calculate midpoint
+  const midX = (x1 + x2) / 2;
+  const midY = (y1 + y2) / 2;
+
+  // Calculate the angle of the line connecting the points
+  const angle = Math.atan2(y2 - y1, x2 - x1);
+
+  // Calculate transformed coordinates for the ellipse
+  const dx = (x2 - x1) / 2;
+  const dy = (y2 - y1) / 2;
+
+  // Scale to unit circle
+  const transformedX = dx / rx;
+  const transformedY = dy / ry;
+
+  // Calculate the distance between points on the unit circle
+  const distance = Math.sqrt(transformedX ** 2 + transformedY ** 2);
+
+  // Check if the ellipse can be drawn with the given radii
+  if (distance > 1) {
+    throw new Error('The given radii are too small to create an arc between the points.');
+  }
+
+  // Calculate the distance from the midpoint to the center of the ellipse
+  const scaledCenterDistance = Math.sqrt(1 - distance ** 2);
+
+  // Calculate the center of the ellipse
+  const centerX = midX + scaledCenterDistance * ry * Math.sin(angle) * (clockwise ? -1 : 1);
+  const centerY = midY - scaledCenterDistance * rx * Math.cos(angle) * (clockwise ? -1 : 1);
+
+  // Calculate the start and end angles on the ellipse
+  const startAngle = Math.atan2((y1 - centerY) / ry, (x1 - centerX) / rx);
+  const endAngle = Math.atan2((y2 - centerY) / ry, (x2 - centerX) / rx);
+
+  // Adjust angles for clockwise/counterclockwise
+  let angleRange = endAngle - startAngle;
+  if (clockwise && angleRange < 0) {
+    angleRange += 2 * Math.PI;
+  }
+  if (!clockwise && angleRange > 0) {
+    angleRange -= 2 * Math.PI;
+  }
+
+  // Generate points
+  const points = [];
+  for (let i = 0; i < numPoints; i++) {
+    const t = i / (numPoints - 1);
+    const angle = startAngle + t * angleRange;
+    const x = centerX + rx * Math.cos(angle);
+    const y = centerY + ry * Math.sin(angle);
+    points.push({ x, y });
+  }
+
+  return points;
+}
 
 export async function roundedRect<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
   node: Node
 ) {
-  const options = {
-    rx: 5,
-    ry: 5,
-    classes: '',
-    labelPaddingX: (node?.padding || 0) * 1,
-    labelPaddingY: (node?.padding || 0) * 1,
-  } as RectOptions;
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
-  return drawRect(parent, node, options);
+  const labelPaddingX = node?.padding ?? 0;
+  const labelPaddingY = node?.padding ?? 0;
+
+  const w = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2;
+  const h = (node?.height ? node?.height : bbox.height) + labelPaddingY * 2;
+  const radius = node.radius || 5;
+  const taper = node.taper || 5; // Taper width for the rounded corners
+  const { cssStyles } = node;
+  // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
+  const rc = rough.svg(shapeSvg);
+  const options = userNodeOverrides(node, {});
+  if (node.stroke) {
+    options.stroke = node.stroke;
+  }
+  if (node.look !== 'handDrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
+  }
+  const points = [
+    // Top edge (left to right)
+    { x: -w / 2 + taper, y: -h / 2 }, // Top-left corner start (1)
+    { x: w / 2 - taper, y: -h / 2 }, // Top-right corner start (2)
+
+    ...generateArcPoints(w / 2 - taper, -h / 2, w / 2, -h / 2 + taper, radius, radius, true), // Top-left arc (2 to 3)
+
+    // Right edge (top to bottom)
+    { x: w / 2, y: -h / 2 + taper }, // Top-right taper point (3)
+    { x: w / 2, y: h / 2 - taper }, // Bottom-right taper point (4)
+
+    ...generateArcPoints(w / 2, h / 2 - taper, w / 2 - taper, h / 2, radius, radius, true), // Top-left arc (4 to 5)
+
+    // Bottom edge (right to left)
+    { x: w / 2 - taper, y: h / 2 }, // Bottom-right corner start (5)
+    { x: -w / 2 + taper, y: h / 2 }, // Bottom-left corner start (6)
+
+    ...generateArcPoints(-w / 2 + taper, h / 2, -w / 2, h / 2 - taper, radius, radius, true), // Top-left arc (4 to 5)
+
+    // Left edge (bottom to top)
+    { x: -w / 2, y: h / 2 - taper }, // Bottom-left taper point (7)
+    { x: -w / 2, y: -h / 2 + taper }, // Top-left taper point (8)
+    ...generateArcPoints(-w / 2, -h / 2 + taper, -w / 2 + taper, -h / 2, radius, radius, true), // Top-left arc (4 to 5)
+  ];
+
+  const pathData = createPathFromPoints(points);
+  const shapeNode = rc.path(pathData, options);
+
+  const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
+  polygon.attr('class', 'basic label-container outer-path');
+
+  if (cssStyles && node.look !== 'handDrawn') {
+    polygon.selectChildren('path').attr('style', cssStyles);
+  }
+
+  if (nodeStyles && node.look !== 'handDrawn') {
+    polygon.selectChildren('path').attr('style', nodeStyles);
+  }
+
+  updateNodeBounds(node, polygon);
+
+  node.intersect = function (point) {
+    const pos = intersect.polygon(node, points, point);
+    return pos;
+  };
+
+  return shapeSvg;
 }