mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

#5237 WIP

This commit is contained in:
Ashish Jain 2024-04-24 14:40:05 +02:00
parent b7f864cdb0
commit d220720dde
9 changed files with 89 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -35,7 +35,7 @@ cypress/snapshots/
.tsbuildinfo .tsbuildinfo
tsconfig.tsbuildinfo tsconfig.tsbuildinfo
knsv*.html #knsv*.html
local*.html local*.html
stats/ stats/

2
cypress/platform/knsv2.html
View File

@ -59,7 +59,7 @@
<body> <body>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
stateDiagram-v2 stateDiagram-v2
Second ASH --> KNUT
</pre </pre
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">

17
packages/mermaid/src/dagre-wrapper/nodes.js
View File

@ -372,13 +372,26 @@ const rect = async (parent, node) => {
// add the rect // add the rect
const rect = shapeSvg.insert('rect', ':first-child'); const rect = shapeSvg.insert('rect', ':first-child');
// console.log('Rect node:', node, 'bbox:', bbox, 'halfPadding:', halfPadding, 'node.padding:', node.padding); // console.log('Rect node:', node, 'bbox:', bbox, 'halfPadding:', halfPadding, 'node.padding:', node.padding);
// const totalWidth = bbox.width + node.padding * 2; // const totalWidth = bbox.width + node.padding * 2;
// const totalHeight = bbox.height + node.padding * 2; // const totalHeight = bbox.height + node.padding * 2;
const totalWidth = bbox.width + node.padding; const totalWidth = bbox.width + node.padding;
const totalHeight = bbox.height + node.padding; const totalHeight = bbox.height + node.padding;
console.log('Rect node:', node, rect.node(), 'bbox:', bbox, 'halfPadding:', halfPadding, 'node.padding:', node.padding, 'totalWidth:', totalWidth, 'totalHeight:', totalHeight); console.log(
'Rect node:',
node,
rect.node(),
'bbox:',
bbox,
'halfPadding:',
halfPadding,
'node.padding:',
node.padding,
'totalWidth:',
totalWidth,
'totalHeight:',
totalHeight
);
rect rect
.attr('class', 'basic label-container') .attr('class', 'basic label-container')
.attr('style', node.style) .attr('style', node.style)

70
packages/mermaid/src/diagrams/state/stateDb.js
View File

@ -21,6 +21,7 @@ import {
DEFAULT_STATE_TYPE, DEFAULT_STATE_TYPE,
DIVIDER_TYPE, DIVIDER_TYPE,
} from './stateCommon.js'; } from './stateCommon.js';
import { node } from 'stylis';
const START_NODE = '[*]'; const START_NODE = '[*]';
const START_TYPE = 'start'; const START_TYPE = 'start';
@ -542,37 +543,48 @@ const setDirection = (dir) => {
const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.trim()); const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.trim());
const dataFetcher = (parentId, doc, nodes, edges) => { const dataFetcher = (parentId, doc, nodes, edges) => {
doc.forEach((item) => { extract(doc);
switch (item.stmt) {
case STMT_STATE: //states
if (parentId) { const stateKeys = Object.keys(currentDocument.states);
nodes.push({ ...item, labelText: item.id, labelType: 'text', parentId, shape: 'rect' });
} else { stateKeys.forEach((key) => {
nodes.push({ const item = currentDocument.states[key];
...item,
labelText: item.id, if (parentId) {
// description: item.id, nodes.push({ ...item, labelText: item.id, labelType: 'text', parentId, shape: 'rect' });
labelType: 'text', } else {
labelStyle: '', nodes.push({
shape: 'rect', ...item,
domId: 'state-bla-bla-bla', labelText: item.id,
x: 100, // description: item.id,
y: 100, labelType: 'text',
height: 100, labelStyle: '',
width: 100, shape: 'rect',
padding: 15, padding: 15,
classes: ' statediagram-state', classes: ' statediagram-state',
}); });
}
if (item.doc) {
dataFetcher(item.id, item.doc, nodes, edges);
}
break;
case STMT_RELATION:
edges.push(item);
break;
} }
}); });
//edges
currentDocument.relations.forEach((item) => {
edges.push({
id: item.id1 + item.id2,
from: item.id1,
to: item.id2,
label: item.relationTitle,
});
});
// if (item.doc) {
// dataFetcher(item.id, item.doc, nodes, edges);
// }
//break;
// case STMT_RELATION:
// edges.push(item);
// break;
// }
}; };
export const getData = () => { export const getData = () => {
const nodes = []; const nodes = [];

3
packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
View File

@ -83,7 +83,6 @@ export const draw = async function (text: string, id: string, _version: string,
// // The performRender method provided in all supported diagrams is used to render the data // // The performRender method provided in all supported diagrams is used to render the data
// performRender(data4Rendering); // performRender(data4Rendering);
console.log('REF1:', data4Layout);
data4Layout.type = diag.type; data4Layout.type = diag.type;
data4Layout.layoutAlgorithm = 'dagre-wrapper'; data4Layout.layoutAlgorithm = 'dagre-wrapper';
data4Layout.skin = 'roughjs'; data4Layout.skin = 'roughjs';
@ -92,7 +91,7 @@ export const draw = async function (text: string, id: string, _version: string,
data4Layout.rankSpacing = conf.rankSpacing || 50; data4Layout.rankSpacing = conf.rankSpacing || 50;
data4Layout.markers = ['barb']; data4Layout.markers = ['barb'];
data4Layout.diagramId = id; data4Layout.diagramId = id;
console.log('REF1:', data4Layout);
await render(data4Layout, svg, element); await render(data4Layout, svg, element);
}; };

5
packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
View File

@ -203,6 +203,11 @@ export const render = async (data4Layout, svg, element) => {
graph.setNode(node.id, { ...node }); graph.setNode(node.id, { ...node });
}); });
console.log('Edges:', data4Layout.edges);
data4Layout.edges.forEach((edge) => {
graph.setEdge(edge.from, edge.to, { ...edge });
});
log.warn('Graph at first:', JSON.stringify(graphlibJson.write(graph))); log.warn('Graph at first:', JSON.stringify(graphlibJson.write(graph)));
adjustClustersAndEdges(graph); adjustClustersAndEdges(graph);
log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph))); log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph)));

28
packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.js → packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts
View File

@ -1,6 +1,7 @@
import { log } from '$root/logger.js'; import { log } from '$root/logger.js';
import { labelHelper, updateNodeBounds } from './util.js'; import { labelHelper, updateNodeBounds } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts';
/** /**
* *
@ -9,12 +10,20 @@ import intersect from '../intersect/index.js';
* @param totalWidth * @param totalWidth
* @param totalHeight * @param totalHeight
*/ */
function applyNodePropertyBorders(rect, borders, totalWidth, totalHeight) { function applyNodePropertyBorders(
const strokeDashArray = []; rect: d3.Selection<SVGRectElement, unknown, null, undefined>,
const addBorder = (length) => { borders: string | undefined,
totalWidth: number,
totalHeight: number
) {
if (!borders) {
return;
}
const strokeDashArray: number[] = [];
const addBorder = (length: number) => {
strokeDashArray.push(length, 0); strokeDashArray.push(length, 0);
}; };
const skipBorder = (length) => { const skipBorder = (length: number) => {
strokeDashArray.push(0, length); strokeDashArray.push(0, length);
}; };
if (borders.includes('t')) { if (borders.includes('t')) {
@ -41,10 +50,11 @@ function applyNodePropertyBorders(rect, borders, totalWidth, totalHeight) {
} else { } else {
skipBorder(totalHeight); skipBorder(totalHeight);
} }
rect.attr('stroke-dasharray', strokeDashArray.join(' ')); rect.attr('stroke-dasharray', strokeDashArray.join(' '));
} }
export const rect = async (parent, node) => { export const rect = async (parent: SVGAElement, node: Node) => {
const { shapeSvg, bbox, halfPadding } = await labelHelper( const { shapeSvg, bbox, halfPadding } = await labelHelper(
parent, parent,
node, node,
@ -52,7 +62,7 @@ export const rect = async (parent, node) => {
true true
); );
console.log('rect node', node); console.log('new rect node', node);
// add the rect // add the rect
const rect = shapeSvg.insert('rect', ':first-child'); const rect = shapeSvg.insert('rect', ':first-child');
@ -75,7 +85,7 @@ export const rect = async (parent, node) => {
if (node.props) { if (node.props) {
const propKeys = new Set(Object.keys(node.props)); const propKeys = new Set(Object.keys(node.props));
if (node.props.borders) { if (node.props.borders) {
applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight); applyNodePropertyBorders(rect, node.props.borders + '', totalWidth, totalHeight);
propKeys.delete('borders'); propKeys.delete('borders');
} }
propKeys.forEach((propKey) => { propKeys.forEach((propKey) => {
@ -92,7 +102,7 @@ export const rect = async (parent, node) => {
return shapeSvg; return shapeSvg;
}; };
export const labelRect = async (parent, node) => { export const labelRect = async (parent: SVGElement, node: Node) => {
const { shapeSvg } = await labelHelper(parent, node, 'label', true); const { shapeSvg } = await labelHelper(parent, node, 'label', true);
log.trace('Classes = ', node.class); log.trace('Classes = ', node.class);
@ -108,7 +118,7 @@ export const labelRect = async (parent, node) => {
if (node.props) { if (node.props) {
const propKeys = new Set(Object.keys(node.props)); const propKeys = new Set(Object.keys(node.props));
if (node.props.borders) { if (node.props.borders) {
applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight); applyNodePropertyBorders(rect, node.borders, totalWidth, totalHeight);
propKeys.delete('borders'); propKeys.delete('borders');
} }
propKeys.forEach((propKey) => { propKeys.forEach((propKey) => {

5
packages/mermaid/src/rendering-util/types.d.ts vendored
View File

@ -33,6 +33,11 @@ interface Node {
tooltip?: string; tooltip?: string;
type: string; type: string;
width?: number; width?: number;
intersect?: (point: any) => any;
// Specific properties for State Diagram nodes TODO remove and use generic properties
style?: string;
class?: string;
borders?: string;
} }
// Common properties for any edge in the system // Common properties for any edge in the system

160
pnpm-lock.yaml
View File

@ -503,61 +503,6 @@ importers:
specifier: ^7.0.0 specifier: ^7.0.0
version: 7.0.0 version: 7.0.0
packages/mermaid/src/vitepress:
dependencies:
'@vueuse/core':
specifier: ^10.1.0
version: 10.1.0(vue@3.3.4)
jiti:
specifier: ^1.18.2
version: 1.18.2
mermaid:
specifier: workspace:^
version: link:../..
vue:
specifier: ^3.3
version: 3.3.4
devDependencies:
'@iconify-json/carbon':
specifier: ^1.1.16
version: 1.1.16
'@unocss/reset':
specifier: ^0.58.0
version: 0.58.0
'@vite-pwa/vitepress':
specifier: ^0.3.0
version: 0.3.0(vite-plugin-pwa@0.17.0)
'@vitejs/plugin-vue':
specifier: ^4.2.1
version: 4.2.1(vite@4.4.12)(vue@3.3.4)
fast-glob:
specifier: ^3.2.12
version: 3.2.12
https-localhost:
specifier: ^4.7.1
version: 4.7.1
pathe:
specifier: ^1.1.0
version: 1.1.0
unocss:
specifier: ^0.58.0
version: 0.58.0(postcss@8.4.33)(rollup@2.79.1)(vite@4.4.12)
unplugin-vue-components:
specifier: ^0.26.0
version: 0.26.0(rollup@2.79.1)(vue@3.3.4)
vite:
specifier: ^4.4.12
version: 4.4.12(@types/node@18.17.5)
vite-plugin-pwa:
specifier: ^0.17.0
version: 0.17.0(vite@4.4.12)(workbox-build@7.0.0)(workbox-window@7.0.0)
vitepress:
specifier: 1.0.0-rc.39
version: 1.0.0-rc.39(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.33)(search-insights@2.7.0)(typescript@5.1.6)
workbox-window:
specifier: ^7.0.0
version: 7.0.0
packages/parser: packages/parser:
dependencies: dependencies:
langium: langium:
@ -5351,22 +5296,6 @@ packages:
eslint-visitor-keys: 3.4.3 eslint-visitor-keys: 3.4.3
dev: true dev: true
/@unocss/astro@0.58.0(rollup@2.79.1)(vite@4.4.12):
resolution: {integrity: sha512-df+tEFO5eKXjQOwSWQhS9IdjD0sfLHLtn8U09sEKR2Nmh5CvpwyBxmvLQgOCilPou7ehmyKfsyGRLZg7IMp+Ew==}
peerDependencies:
vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
peerDependenciesMeta:
vite:
optional: true
dependencies:
'@unocss/core': 0.58.0
'@unocss/reset': 0.58.0
'@unocss/vite': 0.58.0(rollup@2.79.1)(vite@4.4.12)
vite: 4.4.12(@types/node@18.17.5)
transitivePeerDependencies:
- rollup
dev: true
/@unocss/astro@0.58.0(rollup@2.79.1)(vite@4.5.0): /@unocss/astro@0.58.0(rollup@2.79.1)(vite@4.5.0):
resolution: {integrity: sha512-df+tEFO5eKXjQOwSWQhS9IdjD0sfLHLtn8U09sEKR2Nmh5CvpwyBxmvLQgOCilPou7ehmyKfsyGRLZg7IMp+Ew==} resolution: {integrity: sha512-df+tEFO5eKXjQOwSWQhS9IdjD0sfLHLtn8U09sEKR2Nmh5CvpwyBxmvLQgOCilPou7ehmyKfsyGRLZg7IMp+Ew==}
peerDependencies: peerDependencies:
@ -5561,26 +5490,6 @@ packages:
'@unocss/core': 0.58.0 '@unocss/core': 0.58.0
dev: true dev: true
/@unocss/vite@0.58.0(rollup@2.79.1)(vite@4.4.12):
resolution: {integrity: sha512-OCUOLMSOBEtXOEyBbAvMI3/xdR175BWRzmvV9Wc34ANZclEvCdVH8+WU725ibjY4VT0gVIuX68b13fhXdHV41A==}
peerDependencies:
vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
dependencies:
'@ampproject/remapping': 2.2.1
'@rollup/pluginutils': 5.1.0(rollup@2.79.1)
'@unocss/config': 0.58.0
'@unocss/core': 0.58.0
'@unocss/inspector': 0.58.0
'@unocss/scope': 0.58.0
'@unocss/transformer-directives': 0.58.0
chokidar: 3.5.3
fast-glob: 3.3.2
magic-string: 0.30.5
vite: 4.4.12(@types/node@18.17.5)
transitivePeerDependencies:
- rollup
dev: true
/@unocss/vite@0.58.0(rollup@2.79.1)(vite@4.5.0): /@unocss/vite@0.58.0(rollup@2.79.1)(vite@4.5.0):
resolution: {integrity: sha512-OCUOLMSOBEtXOEyBbAvMI3/xdR175BWRzmvV9Wc34ANZclEvCdVH8+WU725ibjY4VT0gVIuX68b13fhXdHV41A==} resolution: {integrity: sha512-OCUOLMSOBEtXOEyBbAvMI3/xdR175BWRzmvV9Wc34ANZclEvCdVH8+WU725ibjY4VT0gVIuX68b13fhXdHV41A==}
peerDependencies: peerDependencies:
@ -5609,17 +5518,6 @@ packages:
vite-plugin-pwa: 0.17.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0) vite-plugin-pwa: 0.17.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0)
dev: true dev: true
/@vitejs/plugin-vue@4.2.1(vite@4.4.12)(vue@3.3.4):
resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
vite: ^4.0.0
vue: ^3.2.25
dependencies:
vite: 4.4.12(@types/node@18.17.5)
vue: 3.3.4
dev: true
/@vitejs/plugin-vue@4.2.1(vite@4.5.0)(vue@3.3.4): /@vitejs/plugin-vue@4.2.1(vite@4.5.0)(vue@3.3.4):
resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==} resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==}
engines: {node: ^14.18.0 || >=16.0.0} engines: {node: ^14.18.0 || >=16.0.0}
@ -15861,45 +15759,6 @@ packages:
engines: {node: '>= 10.0.0'} engines: {node: '>= 10.0.0'}
dev: true dev: true
/unocss@0.58.0(postcss@8.4.33)(rollup@2.79.1)(vite@4.4.12):
resolution: {integrity: sha512-MSPRHxBqWN+1AHGV+J5uUy4//e6ZBK6O+ISzD0qrXcCD/GNtxk1+lYjOK2ltkUiKX539+/KF91vNxzhhwEf+xA==}
engines: {node: '>=14'}
peerDependencies:
'@unocss/webpack': 0.58.0
vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
peerDependenciesMeta:
'@unocss/webpack':
optional: true
vite:
optional: true
dependencies:
'@unocss/astro': 0.58.0(rollup@2.79.1)(vite@4.4.12)
'@unocss/cli': 0.58.0(rollup@2.79.1)
'@unocss/core': 0.58.0
'@unocss/extractor-arbitrary-variants': 0.58.0
'@unocss/postcss': 0.58.0(postcss@8.4.33)
'@unocss/preset-attributify': 0.58.0
'@unocss/preset-icons': 0.58.0
'@unocss/preset-mini': 0.58.0
'@unocss/preset-tagify': 0.58.0
'@unocss/preset-typography': 0.58.0
'@unocss/preset-uno': 0.58.0
'@unocss/preset-web-fonts': 0.58.0
'@unocss/preset-wind': 0.58.0
'@unocss/reset': 0.58.0
'@unocss/transformer-attributify-jsx': 0.58.0
'@unocss/transformer-attributify-jsx-babel': 0.58.0
'@unocss/transformer-compile-class': 0.58.0
'@unocss/transformer-directives': 0.58.0
'@unocss/transformer-variant-group': 0.58.0
'@unocss/vite': 0.58.0(rollup@2.79.1)(vite@4.4.12)
vite: 4.4.12(@types/node@18.17.5)
transitivePeerDependencies:
- postcss
- rollup
- supports-color
dev: true
/unocss@0.58.0(postcss@8.4.33)(rollup@2.79.1)(vite@4.5.0): /unocss@0.58.0(postcss@8.4.33)(rollup@2.79.1)(vite@4.5.0):
resolution: {integrity: sha512-MSPRHxBqWN+1AHGV+J5uUy4//e6ZBK6O+ISzD0qrXcCD/GNtxk1+lYjOK2ltkUiKX539+/KF91vNxzhhwEf+xA==} resolution: {integrity: sha512-MSPRHxBqWN+1AHGV+J5uUy4//e6ZBK6O+ISzD0qrXcCD/GNtxk1+lYjOK2ltkUiKX539+/KF91vNxzhhwEf+xA==}
engines: {node: '>=14'} engines: {node: '>=14'}
@ -16129,24 +15988,6 @@ packages:
- supports-color - supports-color
dev: true dev: true
/vite-plugin-pwa@0.17.0(vite@4.4.12)(workbox-build@7.0.0)(workbox-window@7.0.0):
resolution: {integrity: sha512-cOyEG8EEc7JHmyMapTnjK2j0g2BIC3ErlmOHyGzVu8hqjyF9Jt6yWMmVNFtpA6v/NNyzP28ARf3vwzIAzR1kaw==}
engines: {node: '>=16.0.0'}
peerDependencies:
vite: ^3.1.0 || ^4.0.0 || ^5.0.0
workbox-build: ^7.0.0
workbox-window: ^7.0.0
dependencies:
debug: 4.3.4(supports-color@8.1.1)
fast-glob: 3.3.2
pretty-bytes: 6.1.1
vite: 4.4.12(@types/node@18.17.5)
workbox-build: 7.0.0
workbox-window: 7.0.0
transitivePeerDependencies:
- supports-color
dev: true
/vite-plugin-pwa@0.17.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0): /vite-plugin-pwa@0.17.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0):
resolution: {integrity: sha512-cOyEG8EEc7JHmyMapTnjK2j0g2BIC3ErlmOHyGzVu8hqjyF9Jt6yWMmVNFtpA6v/NNyzP28ARf3vwzIAzR1kaw==} resolution: {integrity: sha512-cOyEG8EEc7JHmyMapTnjK2j0g2BIC3ErlmOHyGzVu8hqjyF9Jt6yWMmVNFtpA6v/NNyzP28ARf3vwzIAzR1kaw==}
engines: {node: '>=16.0.0'} engines: {node: '>=16.0.0'}
@ -16996,6 +16837,7 @@ packages:
/workbox-google-analytics@7.0.0: /workbox-google-analytics@7.0.0:
resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==} resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==}
deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
dependencies: dependencies:
workbox-background-sync: 7.0.0 workbox-background-sync: 7.0.0
workbox-core: 7.0.0 workbox-core: 7.0.0