marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(arch): improved group rendering

Browse Source
This commit is contained in:
NicolasNewman
2024-03-17 15:24:17 -05:00
parent 6c6ce28f7d
commit 84bd20b04b
4 changed files with 228 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
View File

@@ -1,6 +1,6 @@
import cytoscape from 'cytoscape';
import type { Diagram } from '../../Diagram.js';
import fcose, {FcoseLayoutOptions} from 'cytoscape-fcose';
import fcose, { FcoseLayoutOptions } from 'cytoscape-fcose';
import type { MermaidConfig } from '../../config.type.js';
import { getConfig } from '../../diagram-api/diagramAPI.js';
import type { DrawDefinition, SVG } from '../../diagram-api/types.js';
@@ -17,9 +17,9 @@ import {
} from './architectureTypes.js';
import { select } from 'd3';
import { setupGraphViewbox } from '../../setupGraphViewbox.js';
import defaultConfig from '../../defaultConfig.js';
import defaultConfig from '../../defaultConfig.js';
import type { D3Element } from '../../mermaidAPI.js';
import { drawEdges, drawService, getEdgeThicknessCallback } from './svgDraw.js';
import { drawEdges, drawGroups, drawService } from './svgDraw.js';
cytoscape.use(fcose);
@@ -28,23 +28,25 @@ function addServices(services: ArchitectureService[], cy: cytoscape.Core) {
cy.add({
group: 'nodes',
data: {
type: 'service',
id: service.id,
icon: service.icon,
title: service.title,
label: service.title,
parent: service.in,
// TODO: dynamic size
width: 80,
height: 80
height: 80,
},
classes: 'node-service'
});
});
}
function drawServices(
db: ArchitectureDB,
svg: D3Element,
services: ArchitectureService[],
conf: MermaidConfig
db: ArchitectureDB,
svg: D3Element,
services: ArchitectureService[],
conf: MermaidConfig
) {
services.forEach((service) => drawService(db, svg, service, conf));
}
@@ -54,19 +56,22 @@ function addGroups(groups: ArchitectureGroup[], cy: cytoscape.Core) {
cy.add({
group: 'nodes',
data: {
type: 'group',
id: group.id,
icon: group.icon,
title: group.title,
label: group.title,
parent: group.in
},
classes: 'node-group'
});
});
}
function positionServices(db: ArchitectureDB, cy: cytoscape.Core) {
cy.nodes().map((node, id) => {
const data = node.data();
if (data.type === 'group') return;
data.x = node.position().x;
data.y = node.position().y;
@@ -104,10 +109,40 @@ function layoutArchitecture(
selector: 'edge',
style: {
'curve-style': 'straight',
'source-endpoint': '100% 100%',
'target-endpoint': '100% 100%',
'source-endpoint': '50% 50%',
'target-endpoint': '50% 50%',
},
},
{
selector: 'node',
style: {
//@ts-ignore
'compound-sizing-wrt-labels': 'include',
}
},
{
selector: 'node[label]',
style: {
'text-valign': 'bottom',
'text-halign': 'center',
'font-size': '16px',
}
},
{
selector: '.node-service',
style: {
'label': 'data(label)',
'width': 'data(width)',
'height': 'data(height)',
}
},
{
selector: '.node-group',
style: {
//@ts-ignore
"padding": '30px'
}
}
],
});
// Remove element after layout
@@ -115,55 +150,97 @@ function layoutArchitecture(
addGroups(groups, cy);
addServices(services, cy);
addEdges(lines, cy);
addEdges(lines, cy);
// Make cytoscape care about the dimensions of the nodes
cy.nodes().forEach(function (n) {
n.layoutDimensions = () => {
const data = n.data();
return { w: data.width, h: data.height };
};
});
/**
* Merge alignment pairs together if they share a common node.
*
* Example: [["a", "b"], ["b", "c"], ["d", "e"]] -> [["a", "b", "c"], ["d", "e"]]
*/
const mergeAlignments = (orig: string[][]): string[][] => {
console.log('Start: ', orig);
// Mapping of discovered ids to their index in the new alignment array
const map: Record<string, number> = {};
const newAlignments: string[][] = [orig[0]];
map[orig[0][0]] = 0;
map[orig[0][1]] = 0;
orig = orig.slice(1);
while (orig.length > 0) {
const pair = orig[0];
const pairLHSIdx = map[pair[0]];
const pairRHSIdx = map[pair[1]];
console.log(pair);
console.log(map);
console.log(newAlignments);
// If neither id appears in the new array, add the pair to the new array
if (pairLHSIdx === undefined && pairRHSIdx === undefined) {
newAlignments.push(pair);
map[pair[0]] = newAlignments.length - 1;
map[pair[1]] = newAlignments.length - 1;
// If the LHS of the pair doesn't appear in the new array, add the LHS to the existing array it shares an id with
} else if (pairLHSIdx === undefined) {
newAlignments[pairRHSIdx].push(pair[0]);
map[pair[0]] = pairRHSIdx;
// If the RHS of the pair doesn't appear in the new array, add the RHS to the existing array it shares an id with
} else if (pairRHSIdx === undefined) {
newAlignments[pairLHSIdx].push(pair[1]);
map[pair[1]] = pairLHSIdx;
// If both ids already have been added to the new array and their index is different, merge all 3 arrays
} else if (pairLHSIdx != pairRHSIdx) {
console.log('ELSE');
newAlignments.push(pair);
}
orig = orig.slice(1);
}
console.log('End: ', newAlignments);
return newAlignments;
}
const horizontalAlignments = cy
.edges()
.filter(
(edge) =>
isArchitectureDirectionX(edge.data('sourceDir')) &&
isArchitectureDirectionX(edge.data('targetDir'))
)
.map((edge) => [edge.data('source'), edge.data('target')]);
const verticalAlignments = cy
.edges()
.filter(
(edge) =>
isArchitectureDirectionY(edge.data('sourceDir')) &&
isArchitectureDirectionY(edge.data('targetDir'))
)
.map((edge) => [edge.data('source'), edge.data('target')]);
cy.layout({
name: 'fcose',
quality: 'proof',
styleEnabled: false,
animate: false,
nodeDimensionsIncludeLabels: true,
alignmentConstraint: {
horizontal: cy
.edges()
.filter(
(edge) =>
isArchitectureDirectionX(edge.data('sourceDir')) &&
isArchitectureDirectionX(edge.data('targetDir'))
)
.map((edge) => [edge.data('source'), edge.data('target')]),
vertical: cy
.edges()
.filter(
(edge) =>
isArchitectureDirectionY(edge.data('sourceDir')) &&
isArchitectureDirectionY(edge.data('targetDir'))
)
.map((edge) => [edge.data('source'), edge.data('target')]),
horizontal: mergeAlignments(horizontalAlignments),
vertical: mergeAlignments(verticalAlignments)
},
relativePlacementConstraint: cy.edges().map((edge) => {
const sourceDir = edge.data('sourceDir') as ArchitectureDirection;
const targetDir = edge.data('targetDir') as ArchitectureDirection;
const sourceId = edge.data('source') as ArchitectureDirection;
const targetId = edge.data('target') as ArchitectureDirection;
const sourceId = edge.data('source') as string;
const targetId = edge.data('target') as string;
if (
isArchitectureDirectionX(sourceDir) &&
isArchitectureDirectionX(targetDir)
isArchitectureDirectionX(sourceDir) &&
isArchitectureDirectionX(targetDir)
) {
return {left: sourceDir === 'L' ? sourceId : targetId, right: sourceDir === 'R' ? sourceId : targetId, gap: 180}
return { left: sourceDir === 'R' ? sourceId : targetId, right: sourceDir === 'L' ? sourceId : targetId, gap: 180 }
} else if (
isArchitectureDirectionY(sourceDir) &&
isArchitectureDirectionY(targetDir)
isArchitectureDirectionY(sourceDir) &&
isArchitectureDirectionY(targetDir)
) {
return {top: sourceDir === 'T' ? sourceId : targetId, bottom: sourceDir === 'B' ? sourceId : targetId, gap: 180}
return { top: sourceDir === 'B' ? sourceId : targetId, bottom: sourceDir === 'T' ? sourceId : targetId, gap: 180 }
}
// TODO: fallback case + RB, TL, etc
@@ -183,8 +260,9 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram)
const services = db.getServices();
const groups = db.getGroups();
const lines = db.getLines();
log.info('Services: ', services);
log.info('Lines: ', lines);
console.log('Services: ', services);
console.log('Lines: ', lines);
console.log('Groups: ', groups);
const svg: SVG = selectSvgElement(id);
@@ -194,13 +272,15 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram)
const servicesElem = svg.append('g');
servicesElem.attr('class', 'architecture-services');
const groupElem = svg.append('g');
groupElem.attr('class', 'architecture-groups');
drawServices(db, servicesElem, services, conf);
const getEdgeThickness = getEdgeThicknessCallback(svg);
const cy = await layoutArchitecture(services, groups, lines);
const edgeThickness = getEdgeThickness();
drawEdges(edgesElem, edgeThickness, cy);
drawEdges(edgesElem, cy);
drawGroups(groupElem, cy);
positionServices(db, cy);
setupGraphViewbox(

7
packages/mermaid/src/diagrams/architecture/architectureStyles.ts
View File

@@ -68,6 +68,13 @@ const getStyles: DiagramStylesProvider = (options: ArchitectureStyleOptions) =>
.edge {
fill: none;
}
.node-bkg {
fill: none;
stroke: #000;
stroke-width: 2px;
stroke-dasharray: 8;
}
`;
export default getStyles;

2
packages/mermaid/src/diagrams/architecture/architectureTypes.ts
View File

@@ -25,6 +25,8 @@ export interface ArchitectureService {
icon?: string;
title?: string;
in?: string;
width?: number;
height?: number;
}
export interface ArchitectureGroup {

139
packages/mermaid/src/diagrams/architecture/svgDraw.ts
View File

@@ -1,10 +1,10 @@
import type { D3Element } from '../../mermaidAPI.js';
import { createText } from '../../rendering-util/createText.js';
import type { ArchitectureDB, ArchitectureService } from './architectureTypes.js';
import type { ArchitectureDB, ArchitectureGroup, ArchitectureService } from './architectureTypes.js';
import type { MermaidConfig } from '../../config.type.js';
import type cytoscape from 'cytoscape';
import { log } from '../../logger.js';
import {getIcon, isIconNameInUse} from '../../rendering-util/svgRegister.js';
import { getIcon, isIconNameInUse } from '../../rendering-util/svgRegister.js';
declare module 'cytoscape' {
interface EdgeSingular {
@@ -20,48 +20,86 @@ declare module 'cytoscape' {
};
};
}
}
/**
* Creates a temporary path which can be used to compute the line thickness.
* @param root root element to add the temporary path to
* @returns callback function which gets the bounding box dimensions and removes the path from root
*/
export const getEdgeThicknessCallback = function (root: D3Element) {
const tempPath = root.insert('path')
.attr(
'd',
`M 10,10 L 10,20`
)
.attr('class', 'edge')
.attr('id', 'temp-thickness-edge');
return () => {
const dims = tempPath.node().getBBox();
tempPath.remove();
return dims.height as number;
interface NodeSingular {
_private: {
bodyBounds: {
h: number;
w: number;
x1: number;
x2: number;
y1: number;
y2: number;
};
children: cytoscape.NodeSingular[]
};
data: () => {
type: 'service',
id: string,
icon?: string,
label?: string,
parent?: string,
width: number,
height: number,
[key: string]: any
} | {
type: 'group',
id: string,
icon?: string,
label?: string,
parent?: string,
[key: string]: any
}
}
}
export const drawEdges = function (edgesEl: D3Element, edgeThickness: number, cy: cytoscape.Core) {
export const drawEdges = function (edgesEl: D3Element, cy: cytoscape.Core) {
cy.edges().map((edge, id) => {
const data = edge.data();
if (edge[0]._private.bodyBounds) {
const bounds = edge[0]._private.rscratch;
const translateX = bounds.startX === bounds.endX ? ((edgeThickness + 2) / 1.5) : 0;
const translateY = bounds.startY === bounds.endY ? ((edgeThickness + 2) / 1.5) : 0;
log.trace('Edge: ', id, data);
edgesEl
.insert('path')
.attr(
'd',
`M ${bounds.startX},${bounds.startY} L ${bounds.midX},${bounds.midY} L${bounds.endX},${bounds.endY} `
)
.attr('class', 'edge')
.attr(
log.trace('Edge: ', id, data);
edgesEl
.insert('path')
.attr(
'd',
`M ${bounds.startX},${bounds.startY} L ${bounds.midX},${bounds.midY} L${bounds.endX},${bounds.endY} `
)
.attr('class', 'edge')
}
})
}
export const drawGroups = function (
groupsEl: D3Element,
cy: cytoscape.Core
) {
cy.nodes().map((node, id) => {
const data = node.data();
if (data.type === 'group') {
const { h, w, x1, x2, y1, y2 } = node.boundingBox();
let bkgElem = groupsEl.append('rect')
.attr('x', x1 + 40)
.attr('y', y1 + 40)
.attr('width', w)
.attr('height', h)
.attr('class', 'node-bkg');
const textElem = groupsEl.append('g');
createText(textElem, data.title, {
useHtmlLabels: false,
width: w,
classes: 'architecture-service-label',
});
textElem
.attr('dy', '1em')
.attr('alignment-baseline', 'middle')
.attr('dominant-baseline', 'start')
.attr('text-anchor', 'start');
textElem.attr(
'transform',
'translate(' + translateX + ', ' + translateY + ')'
'translate(' + (x1 + 44) + ', ' + (y1 + 42) + ')'
);
}
})
@@ -76,22 +114,23 @@ export const drawService = function (
const serviceElem = elem.append('g');
if (service.title) {
const textElem = serviceElem.append('g');
createText(textElem, service.title, {
useHtmlLabels: false,
width: 80,
classes: 'architecture-service-label',
});
textElem
const textElem = serviceElem.append('g');
createText(textElem, service.title, {
useHtmlLabels: false,
width: 110,
classes: 'architecture-service-label',
});
textElem
.attr('dy', '1em')
.attr('alignment-baseline', 'middle')
.attr('dominant-baseline', 'middle')
.attr('text-anchor', 'middle');
textElem.attr(
'transform',
'translate(' + 80 / 2 + ', ' + 80 + ')'
);
textElem.attr(
'transform',
// TODO: dynamic size
'translate(' + 80 / 2 + ', ' + 80 + ')'
);
}
@@ -104,16 +143,16 @@ export const drawService = function (
} else {
bkgElem.append('path').attr('class', 'node-bkg').attr('id', 'node-' + service.id).attr(
'd',
`M0 ${80 - 0} v${-80 + 2 * 0} q0,-5 5,-5 h${
80 - 2 * 0
`M0 ${80 - 0} v${-80 + 2 * 0} q0,-5 5,-5 h${80 - 2 * 0
} q5,0 5,5 v${80 - 0} H0 Z`
);
}
serviceElem.attr('class', 'architecture-service');
const icon = serviceElem.append('foreignObject').attr('height', '80px').attr('width', '80px');
icon.append('div').attr('class', 'icon-container').append('i').attr('class', 'service-icon fa fa-phone')
const { width, height } = serviceElem._groups[0][0].getBBox();
service.width = width;
service.height = height;
db.setElementForId(service.id, serviceElem);
return 0;