Merge branch 'develop' into move-commondb-to-common-dir

demos/er.html

@@ -125,6 +125,21 @@
  </pre>
  <hr />
 
+ <pre class="mermaid">
+ erDiagram
+ _customer_order {
+ bigint id PK
+ bigint customer_id FK
+ text shipping_address 
+ text delivery_method 
+ timestamp_with_time_zone ordered_at 
+ numeric total_tax_amount 
+ numeric total_price 
+ text payment_method 
+ }
+ </pre>
+ <hr />
+
  <script type="module">
  import mermaid from './mermaid.esm.mjs';
  mermaid.initialize({

docs/syntax/entityRelationshipDiagram.md

@@ -90,7 +90,7 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to
 
 Where:
 
-- `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores.
+- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v\<MERMAID_RELEASE_VERSION>+), and may also contain digits and hyphens.
 - `relationship` describes the way that both entities inter-relate. See below.
 - `second-entity` is the name of the other entity.
 - `relationship-label` describes the relationship from the perspective of the first entity.

package.json

@@ -4,7 +4,7 @@
  "version": "10.2.4",
  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "type": "module",
- "packageManager": "pnpm@8.7.0",
+ "packageManager": "pnpm@8.7.1",
  "keywords": [
  "diagram",
  "markdown",

packages/mermaid/src/dagre-wrapper/edges.js

@@ -368,7 +368,20 @@ const cutPathAtIntersect = (_points, boundryNode) => {
  return points;
 };
 
-//(edgePaths, e, edge, clusterDb, diagramtype, graph)
+/**
+ * Calculate the deltas and angle between two points
+ * @param {{x: number, y:number}} point1
+ * @param {{x: number, y:number}} point2
+ * @returns {{angle: number, deltaX: number, deltaY: number}}
+ */
+function calculateDeltaAndAngle(point1, point2) {
+ const [x1, y1] = [point1.x, point1.y];
+ const [x2, y2] = [point2.x, point2.y];
+ const deltaX = x2 - x1;
+ const deltaY = y2 - y1;
+ return { angle: Math.atan(deltaY / deltaX), deltaX, deltaY };
+}
+
 export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph) {
  let points = edge.points;
  let pointsHasChanged = false;
@@ -435,22 +448,62 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
  const lineData = points.filter((p) => !Number.isNaN(p.y));
 
  // This is the accessor function we talked about above
- let curve;
+ let curve = curveBasis;
  // Currently only flowcharts get the curve from the settings, perhaps this should
  // be expanded to a common setting? Restricting it for now in order not to cause side-effects that
  // have not been thought through
- if (diagramType === 'graph' || diagramType === 'flowchart') {
- curve = edge.curve || curveBasis;
- } else {
- curve = curveBasis;
+ if (edge.curve && (diagramType === 'graph' || diagramType === 'flowchart')) {
+ curve = edge.curve;
  }
- // curve = curveLinear;
+
+ // We need to draw the lines a bit shorter to avoid drawing
+ // under any transparent markers.
+ // The offsets are calculated from the markers' dimensions.
+ const markerOffsets = {
+ aggregation: 18,
+ extension: 18,
+ composition: 18,
+ dependency: 6,
+ lollipop: 13.5,
+ arrow_point: 5.3,
+ };
+
  const lineFunction = line()
- .x(function (d) {
- return d.x;
+ .x(function (d, i, data) {
+ let offset = 0;
+ if (i === 0 && Object.hasOwn(markerOffsets, edge.arrowTypeStart)) {
+ // Handle first point
+ // Calculate the angle and delta between the first two points
+ const { angle, deltaX } = calculateDeltaAndAngle(data[0], data[1]);
+ // Calculate the offset based on the angle and the marker's dimensions
+ offset = markerOffsets[edge.arrowTypeStart] * Math.cos(angle) * (deltaX >= 0 ? 1 : -1) || 0;
+ } else if (i === data.length - 1 && Object.hasOwn(markerOffsets, edge.arrowTypeEnd)) {
+ // Handle last point
+ // Calculate the angle and delta between the last two points
+ const { angle, deltaX } = calculateDeltaAndAngle(
+ data[data.length - 1],
+ data[data.length - 2]
+ );
+ offset = markerOffsets[edge.arrowTypeEnd] * Math.cos(angle) * (deltaX >= 0 ? 1 : -1) || 0;
+ }
+ return d.x + offset;
  })
- .y(function (d) {
- return d.y;
+ .y(function (d, i, data) {
+ // Same handling as X above
+ let offset = 0;
+ if (i === 0 && Object.hasOwn(markerOffsets, edge.arrowTypeStart)) {
+ const { angle, deltaY } = calculateDeltaAndAngle(data[0], data[1]);
+ offset =
+ markerOffsets[edge.arrowTypeStart] * Math.abs(Math.sin(angle)) * (deltaY >= 0 ? 1 : -1);
+ } else if (i === data.length - 1 && Object.hasOwn(markerOffsets, edge.arrowTypeEnd)) {
+ const { angle, deltaY } = calculateDeltaAndAngle(
+ data[data.length - 1],
+ data[data.length - 2]
+ );
+ offset =
+ markerOffsets[edge.arrowTypeEnd] * Math.abs(Math.sin(angle)) * (deltaY >= 0 ? 1 : -1);
+ }
+ return d.y + offset;
  })
  .curve(curve);
 

packages/mermaid/src/dagre-wrapper/index.js

@@ -155,9 +155,9 @@ export const render = async (elem, graph, markers, diagramtype, id) => {
  clearClusters();
  clearGraphlib();
 
- log.warn('Graph at first:', graphlibJson.write(graph));
+ log.warn('Graph at first:', JSON.stringify(graphlibJson.write(graph)));
  adjustClustersAndEdges(graph);
- log.warn('Graph after:', graphlibJson.write(graph));
+ log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph)));
  // log.warn('Graph ever after:', graphlibJson.write(graph.node('A').graph));
  await recursiveRender(elem, graph, diagramtype);
 };

packages/mermaid/src/dagre-wrapper/markers.js

@@ -16,7 +16,7 @@ const extension = (elem, type, id) => {
  .append('marker')
  .attr('id', type + '-extensionStart')
  .attr('class', 'marker extension ' + type)
- .attr('refX', 0)
+ .attr('refX', 18)
  .attr('refY', 7)
  .attr('markerWidth', 190)
  .attr('markerHeight', 240)
@@ -29,7 +29,7 @@ const extension = (elem, type, id) => {
  .append('marker')
  .attr('id', type + '-extensionEnd')
  .attr('class', 'marker extension ' + type)
- .attr('refX', 19)
+ .attr('refX', 1)
  .attr('refY', 7)
  .attr('markerWidth', 20)
  .attr('markerHeight', 28)
@@ -44,7 +44,7 @@ const composition = (elem, type) => {
  .append('marker')
  .attr('id', type + '-compositionStart')
  .attr('class', 'marker composition ' + type)
- .attr('refX', 0)
+ .attr('refX', 18)
  .attr('refY', 7)
  .attr('markerWidth', 190)
  .attr('markerHeight', 240)
@@ -57,7 +57,7 @@ const composition = (elem, type) => {
  .append('marker')
  .attr('id', type + '-compositionEnd')
  .attr('class', 'marker composition ' + type)
- .attr('refX', 19)
+ .attr('refX', 1)
  .attr('refY', 7)
  .attr('markerWidth', 20)
  .attr('markerHeight', 28)
@@ -71,7 +71,7 @@ const aggregation = (elem, type) => {
  .append('marker')
  .attr('id', type + '-aggregationStart')
  .attr('class', 'marker aggregation ' + type)
- .attr('refX', 0)
+ .attr('refX', 18)
  .attr('refY', 7)
  .attr('markerWidth', 190)
  .attr('markerHeight', 240)
@@ -84,7 +84,7 @@ const aggregation = (elem, type) => {
  .append('marker')
  .attr('id', type + '-aggregationEnd')
  .attr('class', 'marker aggregation ' + type)
- .attr('refX', 19)
+ .attr('refX', 1)
  .attr('refY', 7)
  .attr('markerWidth', 20)
  .attr('markerHeight', 28)
@@ -98,7 +98,7 @@ const dependency = (elem, type) => {
  .append('marker')
  .attr('id', type + '-dependencyStart')
  .attr('class', 'marker dependency ' + type)
- .attr('refX', 0)
+ .attr('refX', 6)
  .attr('refY', 7)
  .attr('markerWidth', 190)
  .attr('markerHeight', 240)
@@ -111,7 +111,7 @@ const dependency = (elem, type) => {
  .append('marker')
  .attr('id', type + '-dependencyEnd')
  .attr('class', 'marker dependency ' + type)
- .attr('refX', 19)
+ .attr('refX', 13)
  .attr('refY', 7)
  .attr('markerWidth', 20)
  .attr('markerHeight', 28)
@@ -125,15 +125,32 @@ const lollipop = (elem, type) => {
  .append('marker')
  .attr('id', type + '-lollipopStart')
  .attr('class', 'marker lollipop ' + type)
- .attr('refX', 0)
+ .attr('refX', 13)
+ .attr('refY', 7)
+ .attr('markerWidth', 190)
+ .attr('markerHeight', 240)
+ .attr('orient', 'auto')
+ .append('circle')
+ .attr('stroke', 'black')
+ .attr('fill', 'transparent')
+ .attr('cx', 7)
+ .attr('cy', 7)
+ .attr('r', 6);
+
+ elem
+ .append('defs')
+ .append('marker')
+ .attr('id', type + '-lollipopEnd')
+ .attr('class', 'marker lollipop ' + type)
+ .attr('refX', 1)
  .attr('refY', 7)
  .attr('markerWidth', 190)
  .attr('markerHeight', 240)
  .attr('orient', 'auto')
  .append('circle')
  .attr('stroke', 'black')
- .attr('fill', 'white')
- .attr('cx', 6)
+ .attr('fill', 'transparent')
+ .attr('cx', 7)
  .attr('cy', 7)
  .attr('r', 6);
 };
@@ -143,7 +160,7 @@ const point = (elem, type) => {
  .attr('id', type + '-pointEnd')
  .attr('class', 'marker ' + type)
  .attr('viewBox', '0 0 10 10')
- .attr('refX', 10)
+ .attr('refX', 6)
  .attr('refY', 5)
  .attr('markerUnits', 'userSpaceOnUse')
  .attr('markerWidth', 12)

packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js

@@ -291,8 +291,8 @@ export const adjustClustersAndEdges = (graph, depth) => {
  shape: 'labelRect',
  style: '',
  });
- const edge1 = JSON.parse(JSON.stringify(edge));
- const edge2 = JSON.parse(JSON.stringify(edge));
+ const edge1 = structuredClone(edge);
+ const edge2 = structuredClone(edge);
  edge1.label = '';
  edge1.arrowTypeEnd = 'none';
  edge2.label = '';

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

@@ -109,25 +109,25 @@ g.classGroup line {
 }
 
 #extensionStart, .extension {
- fill: ${options.mainBkg} !important;
+ fill: transparent !important;
  stroke: ${options.lineColor} !important;
  stroke-width: 1;
 }
 
 #extensionEnd, .extension {
- fill: ${options.mainBkg} !important;
+ fill: transparent !important;
  stroke: ${options.lineColor} !important;
  stroke-width: 1;
 }
 
 #aggregationStart, .aggregation {
- fill: ${options.mainBkg} !important;
+ fill: transparent !important;
  stroke: ${options.lineColor} !important;
  stroke-width: 1;
 }
 
 #aggregationEnd, .aggregation {
- fill: ${options.mainBkg} !important;
+ fill: transparent !important;
  stroke: ${options.lineColor} !important;
  stroke-width: 1;
 }

packages/mermaid/src/diagrams/er/parser/erDiagram.jison

@@ -66,7 +66,7 @@ o\{ return 'ZERO_OR_MORE';
 "optionally to" return 'NON_IDENTIFYING';
 \.\- return 'NON_IDENTIFYING';
 \-\. return 'NON_IDENTIFYING';
-[A-Za-z][A-Za-z0-9\-_]*  return 'ALPHANUM';
+[A-Za-z_][A-Za-z0-9\-_]* return 'ALPHANUM';
 . return yytext[0];
 <<EOF>> return 'EOF';
 

packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js

@@ -33,7 +33,7 @@ describe('when parsing ER diagram it...', function () {
  describe('has non A-Za-z0-9_- chars', function () {
  // these were entered using the Mac keyboard utility.
  const chars =
- "~ ` ! @ # $ ^ & * ( ) - _ = + [ ] { } | / ; : ' . ? ¡ ⁄ ™ € £ ‹ ¢ › ∞ fi § ‡ • ° ª · º ‚ ≠ ± œ Œ ∑ „ ® † ˇ ¥ Á ¨ ˆ ˆ Ø π ∏ “ « » å Å ß Í ∂ Î ƒ Ï © ˙ Ó ∆ Ô ˚  ¬ Ò … Ú æ Æ Ω ¸ ≈ π ˛ ç Ç √ ◊ ∫ ı ˜ µ  ≤ ¯ ≥ ˘ ÷ ¿";
+ "~ ` ! @ # $ ^ & * ( ) - = + [ ] { } | / ; : ' . ? ¡ ⁄ ™ € £ ‹ ¢ › ∞ fi § ‡ • ° ª · º ‚ ≠ ± œ Œ ∑ „ ® † ˇ ¥ Á ¨ ˆ ˆ Ø π ∏ “ « » å Å ß Í ∂ Î ƒ Ï © ˙ Ó ∆ Ô ˚  ¬ Ò … Ú æ Æ Ω ¸ ≈ π ˛ ç Ç √ ◊ ∫ ı ˜ µ  ≤ ¯ ≥ ˘ ÷ ¿";
  const allowed = chars.split(' ');
 
  allowed.forEach((allowedChar) => {
@@ -170,6 +170,13 @@ describe('when parsing ER diagram it...', function () {
  expect(entities[firstEntity].alias).toBe(alias);
  expect(entities[secondEntity].alias).toBeUndefined();
  });
+
+ it('can start with an underscore', function () {
+ const entity = '_foo';
+ erDiagram.parser.parse(`erDiagram\n${entity}\n`);
+ const entities = erDb.getEntities();
+ expect(entities.hasOwnProperty(entity)).toBe(true);
+ });
  });
 
  describe('attribute name', () => {

packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison

@@ -301,7 +301,7 @@ placement
 
 signal
  : actor signaltype '+' actor text2
- { $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5},
+ { $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5, activate: true},
  {type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $4}
  ]}
  | actor signaltype '-' actor text2

packages/mermaid/src/diagrams/sequence/sequenceDb.js

@@ -124,7 +124,8 @@ export const addSignal = function (
  idFrom,
  idTo,
  message = { text: undefined, wrap: undefined },
- messageType
+ messageType,
+ activate = false
 ) {
  if (messageType === LINETYPE.ACTIVE_END) {
  const cnt = activationCount(idFrom.actor);
@@ -147,6 +148,7 @@ export const addSignal = function (
  message: message.text,
  wrap: (message.wrap === undefined && autoWrap()) || !!message.wrap,
  type: messageType,
+ activate,
  });
  return true;
 };
@@ -450,6 +452,19 @@ export const getActorProperty = function (actor, key) {
  return undefined;
 };
 
+/**
+ * @typedef {object} AddMessageParams A message from one actor to another.
+ * @property {string} from - The id of the actor sending the message.
+ * @property {string} to - The id of the actor receiving the message.
+ * @property {string} msg - The message text.
+ * @property {number} signalType - The type of signal.
+ * @property {"addMessage"} type - Set to `"addMessage"` if this is an `AddMessageParams`.
+ * @property {boolean} [activate] - If `true`, this signal starts an activation.
+ */
+
+/**
+ * @param {object | object[] | AddMessageParams} param - Object of parameters.
+ */
 export const apply = function (param) {
  if (Array.isArray(param)) {
  param.forEach(function (item) {
@@ -530,7 +545,7 @@ export const apply = function (param) {
  lastDestroyed = undefined;
  }
  }
- addSignal(param.from, param.to, param.msg, param.signalType);
+ addSignal(param.from, param.to, param.msg, param.signalType, param.activate);
  break;
  case 'boxStart':
  addBox(param.boxData);