Setup renderer and data collection

packages/mermaid/src/diagrams/requirement/requirementDb.ts

@@ -1,5 +1,6 @@
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { log } from '../../logger.js';
+import type { Node, Edge } from '../../rendering-util/types.js';
 
 import {
   setAccTitle,
@@ -7,6 +8,8 @@ import {
   getAccDescription,
   setAccDescription,
   clear as commonClear,
+  setDiagramTitle,
+  getDiagramTitle,
 } from '../common/commonDb.js';
 import type {
   Element,
@@ -170,6 +173,44 @@ const clear = () => {
   commonClear();
 };
 
+const getData = () => {
+  const config = getConfig();
+  const nodes: Node[] = [];
+  const edges: Edge[] = [];
+
+  for (const requirement of requirements.values()) {
+    const node = requirement as unknown as Node;
+    node.shape = 'requirementBox';
+    node.look = config.look;
+    nodes.push(node);
+  }
+
+  for (const element of elements.values()) {
+    const node = element as unknown as Node;
+    node.shape = 'requirementBox';
+    node.look = config.look;
+
+    nodes.push(node);
+  }
+
+  for (const relation of relations) {
+    let counter = 0;
+    const edge: Edge = {
+      id: `${relation.src}-${relation.dst}-${counter}`,
+      start: requirements.get(relation.src)?.id,
+      end: requirements.get(relation.dst)?.id,
+      type: relation.type,
+      classes: 'relationshipLine',
+      style: ['fill:none'],
+    };
+
+    edges.push(edge);
+    counter++;
+  }
+
+  return { nodes, edges, other: {}, config };
+};
+
 export default {
   Relationships,
   RequirementType,
@@ -186,6 +227,8 @@ export default {
   getAccTitle,
   setAccDescription,
   getAccDescription,
+  setDiagramTitle,
+  getDiagramTitle,
   addElement,
   getElements,
   setNewElementType,
@@ -193,4 +236,5 @@ export default {
   addRelationship,
   getRelationships,
   clear,
+  getData,
 };

packages/mermaid/src/diagrams/requirement/requirementDiagram.ts

@@ -3,7 +3,7 @@ import type { DiagramDefinition } from '../../diagram-api/types.js';
 import parser from './parser/requirementDiagram.jison';
 import db from './requirementDb.js';
 import styles from './styles.js';
-import renderer from './requirementRenderer.js';
+import renderer from './requirementRenderer-unified.js';
 
 export const diagram: DiagramDefinition = {
   parser,

packages/mermaid/src/diagrams/requirement/requirementRenderer-unified.ts

@@ -0,0 +1,40 @@
+import { getConfig } from '../../diagram-api/diagramAPI.js';
+import { log } from '../../logger.js';
+import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
+import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
+import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
+import type { LayoutData } from '../../rendering-util/types.js';
+import utils from '../../utils.js';
+
+export const draw = async function (text: string, id: string, _version: string, diag: any) {
+  log.info('REF0:');
+  log.info('Drawing requirement diagram (unified)', id);
+  const { securityLevel, state: conf, layout } = getConfig();
+
+  const data4Layout = diag.db.getData() as LayoutData;
+
+  // Create the root SVG - the element is the div containing the SVG element
+  const svg = getDiagramElement(id, securityLevel);
+
+  data4Layout.type = diag.type;
+  data4Layout.layoutAlgorithm = getRegisteredLayoutAlgorithm(layout);
+
+  data4Layout.nodeSpacing = conf?.nodeSpacing || 50;
+  data4Layout.rankSpacing = conf?.rankSpacing || 50;
+  data4Layout.markers = ['aggregation', 'extension', 'composition', 'dependency', 'lollipop'];
+  data4Layout.diagramId = id;
+  await render(data4Layout, svg);
+  const padding = 8;
+  utils.insertTitle(
+    svg,
+    'requirementDiagramTitleText',
+    conf?.titleTopMargin ?? 25,
+    diag.db.getDiagramTitle()
+  );
+
+  setupViewPortForSVG(svg, padding, 'requirementDiagram', conf?.useMaxWidth ?? true);
+};
+
+export default {
+  draw,
+};