marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-12-02 18:45:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into add-pie-langium-parser

Browse Source
This commit is contained in:
Reda Al Sulais
2023-09-20 17:56:36 +03:00
parent fedbd48c0f 91eb824c21
commit 8c31db6352
7 changed files with 88 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
cypress/integration/rendering/conf-and-directives.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest } from '../../helpers/util.ts'; import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts';
describe('Configuration and directives - nodes should be light blue', () => { describe('Configuration and directives - nodes should be light blue', () => {
it('No config - use default', () => { it('No config - use default', () => {
@@ -206,8 +206,7 @@ graph TD
describe('when rendering several diagrams', () => { describe('when rendering several diagrams', () => {
it('diagrams should not taint later diagrams', () => { it('diagrams should not taint later diagrams', () => {
const url = 'http://localhost:9000/theme-directives.html'; const url = 'http://localhost:9000/theme-directives.html';
cy.visit(url); urlSnapshotTest(url, {});
cy.matchImageSnapshot('conf-and-directives.spec-when-rendering-several-diagrams-diagram-1');
}); });
}); });
}); });

3
cypress/platform/marker_unique_id.html
View File

@@ -42,7 +42,8 @@
</pre> </pre>
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ startOnLoad: true, logLevel: 0 }); mermaid.initialize({ startOnLoad: false, logLevel: 0 });
await mermaid.run();
if (window.Cypress) { if (window.Cypress) {
window.rendered = true; window.rendered = true;

28
cypress/platform/theme-directives.html
View File

@@ -1,15 +1,6 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@@ -122,26 +113,21 @@
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({ mermaid.initialize({
// theme: 'dark',
// theme: 'dark',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0, logLevel: 0,
// flowchart: { useMaxWidth: true },
graph: { curve: 'cardinal', htmlLabels: false }, graph: { curve: 'cardinal', htmlLabels: false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true }, sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif', fontFamily: '"arial", sans-serif',
curve: 'cardinal', curve: 'cardinal',
securityLevel: 'strict', securityLevel: 'strict',
startOnLoad: false,
}); });
function callback() {
alert('It worked'); await mermaid.run();
if (window.Cypress) {
window.rendered = true;
} }
</script> </script>
</body> </body>

2
package.json
View File

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

89
packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
View File

@@ -569,8 +569,9 @@ export const addEdges = function (edges, diagObj, graph, svg) {
* @param edgeData * @param edgeData
* @param diagramType * @param diagramType
* @param arrowMarkerAbsolute * @param arrowMarkerAbsolute
* @param id
*/ */
const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAbsolute) { const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAbsolute, id) {
let url = ''; let url = '';
// Check configuration for absolute path // Check configuration for absolute path
if (arrowMarkerAbsolute) { if (arrowMarkerAbsolute) {
@@ -587,61 +588,103 @@ const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAb
// look in edge data and decide which marker to use // look in edge data and decide which marker to use
switch (edgeData.arrowTypeStart) { switch (edgeData.arrowTypeStart) {
case 'arrow_cross': case 'arrow_cross':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-crossStart' + ')'); svgPath.attr(
'marker-start',
'url(' + url + '#' + id + '_' + diagramType + '-crossStart' + ')'
);
break; break;
case 'arrow_point': case 'arrow_point':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-pointStart' + ')'); svgPath.attr(
'marker-start',
'url(' + url + '#' + id + '_' + diagramType + '-pointStart' + ')'
);
break; break;
case 'arrow_barb': case 'arrow_barb':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-barbStart' + ')'); svgPath.attr(
'marker-start',
'url(' + url + '#' + id + '_' + diagramType + '-barbStart' + ')'
);
break; break;
case 'arrow_circle': case 'arrow_circle':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-circleStart' + ')'); svgPath.attr(
'marker-start',
'url(' + url + '#' + id + '_' + diagramType + '-circleStart' + ')'
);
break; break;
case 'aggregation': case 'aggregation':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-aggregationStart' + ')'); svgPath.attr(
'marker-start',
'url(' + url + '#' + id + '_' + diagramType + '-aggregationStart' + ')'
);
break; break;
case 'extension': case 'extension':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-extensionStart' + ')'); svgPath.attr(
'marker-start',
'url(' + url + '#' + id + '_' + diagramType + '-extensionStart' + ')'
);
break; break;
case 'composition': case 'composition':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-compositionStart' + ')'); svgPath.attr(
'marker-start',
'url(' + url + '#' + id + '_' + diagramType + '-compositionStart' + ')'
);
break; break;
case 'dependency': case 'dependency':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-dependencyStart' + ')'); svgPath.attr(
'marker-start',
'url(' + url + '#' + id + '_' + diagramType + '-dependencyStart' + ')'
);
break; break;
case 'lollipop': case 'lollipop':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-lollipopStart' + ')'); svgPath.attr(
'marker-start',
'url(' + url + '#' + id + '_' + diagramType + '-lollipopStart' + ')'
);
break; break;
default: default:
} }
switch (edgeData.arrowTypeEnd) { switch (edgeData.arrowTypeEnd) {
case 'arrow_cross': case 'arrow_cross':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')'); svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-crossEnd' + ')');
break; break;
case 'arrow_point': case 'arrow_point':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')'); svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-pointEnd' + ')');
break; break;
case 'arrow_barb': case 'arrow_barb':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barbEnd' + ')'); svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-barbEnd' + ')');
break; break;
case 'arrow_circle': case 'arrow_circle':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')'); svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-circleEnd' + ')');
break; break;
case 'aggregation': case 'aggregation':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-aggregationEnd' + ')'); svgPath.attr(
'marker-end',
'url(' + url + '#' + id + '_' + diagramType + '-aggregationEnd' + ')'
);
break; break;
case 'extension': case 'extension':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-extensionEnd' + ')'); svgPath.attr(
'marker-end',
'url(' + url + '#' + id + '_' + diagramType + '-extensionEnd' + ')'
);
break; break;
case 'composition': case 'composition':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-compositionEnd' + ')'); svgPath.attr(
'marker-end',
'url(' + url + '#' + id + '_' + diagramType + '-compositionEnd' + ')'
);
break; break;
case 'dependency': case 'dependency':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-dependencyEnd' + ')'); svgPath.attr(
'marker-end',
'url(' + url + '#' + id + '_' + diagramType + '-dependencyEnd' + ')'
);
break; break;
case 'lollipop': case 'lollipop':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-lollipopEnd' + ')'); svgPath.attr(
'marker-end',
'url(' + url + '#' + id + '_' + diagramType + '-lollipopEnd' + ')'
);
break; break;
default: default:
} }
@@ -692,7 +735,7 @@ const calcOffset = function (src, dest, parentLookupDb) {
return { x: ancestorOffset.posX, y: ancestorOffset.posY }; return { x: ancestorOffset.posX, y: ancestorOffset.posY };
}; };
const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb) { const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb, id) {
const offset = calcOffset(edge.sourceId, edge.targetId, parentLookupDb); const offset = calcOffset(edge.sourceId, edge.targetId, parentLookupDb);
const src = edge.sections[0].startPoint; const src = edge.sections[0].startPoint;
@@ -723,7 +766,7 @@ const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb) {
'transform', 'transform',
`translate(${edge.labels[0].x + offset.x}, ${edge.labels[0].y + offset.y})` `translate(${edge.labels[0].x + offset.x}, ${edge.labels[0].y + offset.y})`
); );
addMarkersToEdge(edgePath, edgeData, diagObj.type, diagObj.arrowMarkerAbsolute); addMarkersToEdge(edgePath, edgeData, diagObj.type, diagObj.arrowMarkerAbsolute, id);
}; };
/** /**
@@ -816,7 +859,7 @@ export const draw = async function (text, id, _version, diagObj) {
const markers = ['point', 'circle', 'cross']; const markers = ['point', 'circle', 'cross'];
// Add the marker definitions to the svg as marker tags // Add the marker definitions to the svg as marker tags
insertMarkers(svg, markers, diagObj.type, diagObj.arrowMarkerAbsolute); insertMarkers(svg, markers, diagObj.type, id);
// Fetch the vertices/nodes and edges/links from the parsed graph definition // Fetch the vertices/nodes and edges/links from the parsed graph definition
const vert = diagObj.db.getVertices(); const vert = diagObj.db.getVertices();
@@ -895,7 +938,7 @@ export const draw = async function (text, id, _version, diagObj) {
drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0); drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0);
log.info('after layout', g); log.info('after layout', g);
g.edges?.map((edge) => { g.edges?.map((edge) => {
insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb); insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb, id);
}); });
setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth); setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth);
// Remove element after layout // Remove element after layout

2
packages/mermaid/src/docs/package.json
View File

@@ -32,7 +32,7 @@
"unplugin-vue-components": "^0.25.0", "unplugin-vue-components": "^0.25.0",
"vite": "^4.3.9", "vite": "^4.3.9",
"vite-plugin-pwa": "^0.16.0", "vite-plugin-pwa": "^0.16.0",
"vitepress": "1.0.0-rc.12", "vitepress": "1.0.0-rc.14",
"workbox-window": "^7.0.0" "workbox-window": "^7.0.0"
} }
} }

13
pnpm-lock.yaml generated
View File

@@ -475,8 +475,8 @@ importers:
specifier: ^0.16.0 specifier: ^0.16.0
version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0) version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
vitepress: vitepress:
specifier: 1.0.0-rc.12 specifier: 1.0.0-rc.14
version: 1.0.0-rc.12(@algolia/client-search@4.19.1)(@types/node@18.16.0)(search-insights@2.7.0) version: 1.0.0-rc.14(@algolia/client-search@4.19.1)(@types/node@18.16.0)(search-insights@2.6.0)
workbox-window: workbox-window:
specifier: ^7.0.0 specifier: ^7.0.0
version: 7.0.0 version: 7.0.0
@@ -15775,9 +15775,14 @@ packages:
- universal-cookie - universal-cookie
dev: true dev: true
/vitepress@1.0.0-rc.12(@algolia/client-search@4.19.1)(@types/node@18.16.0)(search-insights@2.7.0): /vitepress@1.0.0-rc.14(@algolia/client-search@4.19.1)(@types/node@18.16.0)(search-insights@2.6.0):
resolution: {integrity: sha512-mZknN5l9lgbBjXwumwdOQQDM+gPivswFEykEQeenY0tv7eocS+bb801IpFZT3mFV6YRhSddmbutHlFgPPADjEg==} resolution: {integrity: sha512-yChIeXOAcNvVnSVjhziH1vte0uhKb00PuZf7KdIMfx3ixTMAz73Nn+6gREvCv0SdH+anteGUKz5eljv0ygcgGQ==}
hasBin: true hasBin: true
peerDependencies:
markdown-it-mathjax3: ^4.3.2
peerDependenciesMeta:
markdown-it-mathjax3:
optional: true
dependencies: dependencies:
'@docsearch/css': 3.5.2 '@docsearch/css': 3.5.2
'@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0) '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0)