Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: JSON format representation of diagram is returned in render fun… #6095

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions packages/mermaid/src/Diagram.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?:
* @privateRemarks This is exported as part of the public mermaidAPI.
*/
export class Diagram {

graphData: string | null = null;

public static async fromText(text: string, metadata: Pick<DiagramMetadata, 'title'> = {}) {
const config = configApi.getConfig();
const type = detectType(text, config);
Expand Down Expand Up @@ -64,4 +67,12 @@ export class Diagram {
getType() {
return this.type;
}

setGraphData(graphString: string) {
this.graphData = graphString;
}

getGraphData(): string | null {
return this.graphData;
}
}
4 changes: 4 additions & 0 deletions packages/mermaid/src/diagrams/class/classRenderer-v2.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// @ts-nocheck - don't check until handle it
import { select, curveLinear } from 'd3';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
import { log } from '../../logger.js';
import { getConfig } from '../../diagram-api/diagramAPI.js';
import { render } from '../../dagre-wrapper/index.js';
Expand Down Expand Up @@ -357,6 +358,9 @@ export const draw = async function (text: string, id: string, _version: string,
id
);

const jsonData = graphlibJson.write(g);
diagObj.setGraphData(JSON.stringify(jsonData));

utils.insertTitle(svg, 'classTitleText', conf?.titleTopMargin ?? 5, diagObj.db.getDiagramTitle());

setupGraphViewbox(g, svg, conf?.diagramPadding, conf?.useMaxWidth);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export const draw = async function (text: string, id: string, _version: string,
data4Layout.rankSpacing = conf?.rankSpacing || 50;
data4Layout.markers = ['aggregation', 'extension', 'composition', 'dependency', 'lollipop'];
data4Layout.diagramId = id;
await render(data4Layout, svg);
await render(data4Layout, svg, (data) => diag.setGraphData(data));
const padding = 8;
utils.insertTitle(
svg,
Expand Down
5 changes: 5 additions & 0 deletions packages/mermaid/src/diagrams/er/erRenderer.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
import { line, curveBasis, select } from 'd3';
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import { getConfig } from '../../diagram-api/diagramAPI.js';
Expand Down Expand Up @@ -656,6 +657,10 @@ export const draw = function (text, id, _version, diagObj) {
configureSvgSize(svg, height, width, conf.useMaxWidth);

svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);

const jsonData = graphlibJson.write(g);
diagObj.setGraphData(JSON.stringify(jsonData));

}; // draw

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const draw = async function (text: string, id: string, _version: string,

data4Layout.diagramId = id;
log.debug('REF1:', data4Layout);
await render(data4Layout, svg);
await render(data4Layout, svg, (data) => diag.setGraphData(data));
const padding = data4Layout.config.flowchart?.diagramPadding ?? 8;
utils.insertTitle(
svg,
Expand Down
10 changes: 9 additions & 1 deletion packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,13 @@ export const bounds = {
return activation.actor;
})
.lastIndexOf(message.from);
return this.activations.splice(lastActorActivationIdx, 1)[0];
const activationData = this.activations.splice(lastActorActivationIdx, 1)[0];
bounds.models.addMessage({
activation: activationData,
type: message.type,
order: lastActorActivationIdx,
});
return activationData;
},
createLoop: function (title = { message: undefined, wrap: false, width: undefined }, fill) {
return {
Expand All @@ -176,6 +182,7 @@ export const bounds = {
width: title.width,
height: 0,
fill: fill,
type: title.type,
};
},
newLoop: function (title = { message: undefined, wrap: false, width: undefined }, fill) {
Expand Down Expand Up @@ -1143,6 +1150,7 @@ export const draw = async function (_text: string, id: string, _version: string,
);

log.debug(`models:`, bounds.models);
diagObj.setGraphData(JSON.stringify(bounds.models));
};

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const draw = async function (text: string, id: string, _version: string,
data4Layout.markers = ['barb'];
data4Layout.diagramId = id;
// console.log('REF1:', data4Layout);
await render(data4Layout, svg);
await render(data4Layout, svg, (data) => diag.setGraphData(data));
const padding = 8;
utils.insertTitle(
svg,
Expand Down
2 changes: 2 additions & 0 deletions packages/mermaid/src/mermaidAPI.ts
Original file line number Diff line number Diff line change
Expand Up @@ -466,9 +466,11 @@ const render = async function (
}

removeTempElements();
const graph = diag.getGraphData();

return {
diagramType,
graph,
svg: svgCode,
bindFunctions: diag.db.bindFunctions,
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@
return { elem, diff };
};

export const render = async (data4Layout, svg) => {
export const render = async (data4Layout, svg, _svghelpers, _options, setGraphData) => {

Check failure on line 271 in packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js

View workflow job for this annotation

GitHub Actions / autofix

Unknown word: "svghelpers"

Check failure on line 271 in packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js

View workflow job for this annotation

GitHub Actions / lint

Unknown word: "svghelpers"
const graph = new graphlib.Graph({
multigraph: true,
compound: true,
Expand Down Expand Up @@ -374,4 +374,10 @@
undefined,
siteConfig
);

if (setGraphData) {
const jsonData = graphlibJson.write(graph);
const graphData = JSON.stringify(jsonData)
setGraphData(graphData);
}
};
14 changes: 9 additions & 5 deletions packages/mermaid/src/rendering-util/render.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ export interface LayoutAlgorithm {
layoutData: LayoutData,
svg: SVG,
helpers: InternalHelpers,
options?: RenderOptions
options?: RenderOptions,
setGraphData?: (data: string) => void
): Promise<void>;
}

Expand Down Expand Up @@ -44,16 +45,19 @@ const registerDefaultLayoutLoaders = () => {

registerDefaultLayoutLoaders();

export const render = async (data4Layout: LayoutData, svg: SVG) => {
export const render = async (data4Layout: LayoutData, svg: SVG, setGraphData?: (data: string) => void) => {
if (!(data4Layout.layoutAlgorithm in layoutAlgorithms)) {
throw new Error(`Unknown layout algorithm: ${data4Layout.layoutAlgorithm}`);
}

const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
const layoutRenderer = await layoutDefinition.loader();
return layoutRenderer.render(data4Layout, svg, internalHelpers, {
algorithm: layoutDefinition.algorithm,
});
return layoutRenderer.render(data4Layout,
svg,
internalHelpers,
{ algorithm: layoutDefinition.algorithm },
setGraphData
);
};

/**
Expand Down
6 changes: 6 additions & 0 deletions packages/mermaid/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,12 @@ export type D3Element = any;
export type D3Selection<T extends SVGElement> = d3.Selection<T, unknown, Element | null, unknown>;

export interface RenderResult {

/**
* Graphical stringified JSON representation of the diagram
*/
graph: string | null;

/**
* The svg code for the rendered graph.
*/
Expand Down
Loading