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

Merge branch 'neo-new-shapes' of github.com:Mermaid-Chart/alana-mermaid into neo-new-shapes

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-09-20 15:10:43 +02:00
parent 6d64c75121 62bcfefa7c
commit 3fc723003c
17 changed files with 109 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
cypress/platform/saurabh.html
View File

@@ -63,23 +63,21 @@
<body style="display: flex; gap: 2rem; flex-direction: row"> <body style="display: flex; gap: 2rem; flex-direction: row">
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
flowchart TD flowchart TD
B2@{ icon: "fa:bell", form: "square", label: "B2 agsyua duadu", pos: "t", h: 80 }@ B2@{ icon: "fa:bell", form: "square", label: "B2 agsyua duadu", pos: "b" }
W --> B2
X --> B2
Y --> B2
Z --> B2
B2 --<strong>sas</strong>--> C
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart TB flowchart TD
A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }@ B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
B2 --test--> C </pre
D --> B2 --> E >
style B2 fill:#f9f,stroke:#333,stroke-width:4px <pre id="diagram4" class="mermaid">
flowchart TD
B2@{ icon: "fa:bell", form: "circle", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
</pre
>
<pre id="diagram4" class="mermaid">
flowchart TD
B2@{ icon: "fa:bell", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
</pre </pre
> >
<pre id="diagram43" class="mermaid2"> <pre id="diagram43" class="mermaid2">
@@ -125,7 +123,9 @@
{ {
name: 'fa', name: 'fa',
loader: () => loader: () =>
fetch('https://unpkg.com/@iconify-json/fa6-solid/icons.json').then((res) => res.json()), fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
res.json()
),
}, },
]); ]);
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
@@ -137,7 +137,7 @@
mermaid.initialize({ mermaid.initialize({
// theme: 'base', // theme: 'base',
// handdrawnSeed: 12, // handdrawnSeed: 12,
look: 'classic', // look: 'classic',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX', // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// 'elk.nodePlacement.strategy': 'SIMPLE', // 'elk.nodePlacement.strategy': 'SIMPLE',
// 'elk.nodePlacement.strategy': 'LAYERED', // 'elk.nodePlacement.strategy': 'LAYERED',

6
docs/config/setup/interfaces/mermaid.LayoutData.md
View File

@@ -20,7 +20,7 @@
#### Defined in #### Defined in
[packages/mermaid/src/rendering-util/types.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L122) [packages/mermaid/src/rendering-util/types.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L125)
--- ---
@@ -30,7 +30,7 @@
#### Defined in #### Defined in
[packages/mermaid/src/rendering-util/types.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L121) [packages/mermaid/src/rendering-util/types.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L124)
--- ---
@@ -40,4 +40,4 @@
#### Defined in #### Defined in
[packages/mermaid/src/rendering-util/types.ts:120](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L120) [packages/mermaid/src/rendering-util/types.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L123)

2
docs/config/setup/interfaces/mermaid.ParseOptions.md
View File

@@ -19,4 +19,4 @@ The `parseError` function will not be called.
#### Defined in #### Defined in
[packages/mermaid/src/types.ts:57](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L57) [packages/mermaid/src/types.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L56)

4
docs/config/setup/interfaces/mermaid.ParseResult.md
View File

@@ -36,7 +36,7 @@ Omit.defaultConfig
#### Defined in #### Defined in
[packages/mermaid/src/mermaid.ts:327](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L327) [packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67)
--- ---
@@ -52,7 +52,7 @@ Omit.diagram
#### Defined in #### Defined in
[packages/mermaid/src/types.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L72) [packages/mermaid/src/types.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L63)
--- ---

6
docs/config/setup/interfaces/mermaid.RenderResult.md
View File

@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
#### Defined in #### Defined in
[packages/mermaid/src/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L95) [packages/mermaid/src/types.ts:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L90)
--- ---
@@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
#### Defined in #### Defined in
[packages/mermaid/src/types.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L85) [packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80)
--- ---
@@ -63,4 +63,4 @@ The svg code for the rendered graph.
#### Defined in #### Defined in
[packages/mermaid/src/types.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L81) [packages/mermaid/src/types.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L76)

2
packages/mermaid/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@mermaid-chart/mermaid", "name": "@mermaid-chart/mermaid",
"version": "11.2.0-b.3", "version": "11.2.0-b.4",
"description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.", "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
"type": "module", "type": "module",
"module": "./dist/mermaid.core.mjs", "module": "./dist/mermaid.core.mjs",

4
packages/mermaid/src/diagrams/flowchart/flowDb.ts
View File

@@ -161,6 +161,7 @@ export const addVertex = function (
if (!doc.label?.trim() && vertex.text === id) { if (!doc.label?.trim() && vertex.text === id) {
vertex.text = ''; vertex.text = '';
} }
vertex.constrainedImage = !!doc.constrainedImage;
} }
if (doc.w) { if (doc.w) {
vertex.assetWidth = Number(doc.w); vertex.assetWidth = Number(doc.w);
@@ -900,6 +901,9 @@ const addNodeFromVertex = (
img: vertex.img, img: vertex.img,
assetWidth: vertex.assetWidth, assetWidth: vertex.assetWidth,
assetHeight: vertex.assetHeight, assetHeight: vertex.assetHeight,
imageAspectRatio: vertex.imageAspectRatio,
defaultWidth: vertex.defaultWidth,
constrainedImage: vertex.constrainedImage,
}); });
} }
}; };

3
packages/mermaid/src/diagrams/flowchart/types.ts
View File

@@ -17,6 +17,9 @@ export interface FlowVertex {
img?: string; img?: string;
assetWidth?: number; assetWidth?: number;
assetHeight?: number; assetHeight?: number;
defaultWidth?: number;
imageAspectRatio?: number;
constrainedImage?: boolean;
} }
export interface FlowText { export interface FlowText {

11
packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
View File

@@ -55,9 +55,9 @@ export const icon = async (
const iconShape = shapeSvg.insert(() => iconNode, ':first-child'); const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
const outerShape = shapeSvg.insert(() => outerNode); const outerShape = shapeSvg.insert(() => outerNode);
const iconElem = shapeSvg.append('g');
if (node.icon) { if (node.icon) {
const iconElem = shapeSvg.append('g');
iconElem.html( iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
); );
@@ -71,6 +71,7 @@ export const icon = async (
`translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY : -outerHeight / 2 - iconY})` `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY : -outerHeight / 2 - iconY})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
iconElem.attr('class', 'icon');
} }
label.attr( label.attr(
@@ -83,6 +84,14 @@ export const icon = async (
`translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})`
); );
if (stylesMap.get('stroke')) {
iconElem.selectAll('path').attr('style', `fill: ${stylesMap.get('stroke')}`);
}
if (stylesMap.get('fill')) {
iconShape.selectAll('path').attr('style', `stroke: ${stylesMap.get('fill')}`);
}
updateNodeBounds(node, outerShape); updateNodeBounds(node, outerShape);
node.intersect = function (point) { node.intersect = function (point) {

17
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
View File

@@ -21,7 +21,7 @@ export const iconCircle = async (
node.width = Math.max(iconSize, defaultWidth ?? 0); node.width = Math.max(iconSize, defaultWidth ?? 0);
const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'icon-shape default'); const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'icon-shape default');
const padding = 20; const padding = node.look === 'neo' ? 30 : 20;
const labelPadding = node.label ? 8 : 0; const labelPadding = node.label ? 8 : 0;
const topLabel = node.pos === 't'; const topLabel = node.pos === 't';
@@ -65,19 +65,28 @@ export const iconCircle = async (
const outerShape = shapeSvg.insert(() => outerNode); const outerShape = shapeSvg.insert(() => outerNode);
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? diameter / 2 - iconHeight - padding + bbox.height / 2 - iconY : -diameter / 2 + padding - bbox.height / 2 - labelPadding / 2 - iconY})` `translate(${-iconWidth / 2 - iconX},${topLabel ? diameter / 2 - iconHeight - padding + bbox.height / 2 - iconY + labelPadding / 2 : -diameter / 2 + padding - bbox.height / 2 - labelPadding / 2 - iconY})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
iconElem.attr('class', 'icon');
label.attr( label.attr(
'transform', 'transform',
`translate(${-bbox.width / 2},${topLabel ? -diameter / 2 - bbox.height / 2 : diameter / 2 - bbox.height / 2 + labelPadding / 2})` `translate(${-bbox.width / 2},${topLabel ? -diameter / 2 - bbox.height / 2 - labelPadding / 2 : diameter / 2 - bbox.height / 2 + labelPadding / 2})`
); );
iconShape.attr( iconShape.attr(
'transform', 'transform',
`translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2 - labelPadding / 2})` `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})`
); );
if (stylesMap.get('stroke')) {
iconElem.selectAll('path').attr('style', `fill: ${stylesMap.get('stroke')}`);
}
if (stylesMap.get('fill')) {
iconShape.selectAll('path').attr('style', `stroke: ${stylesMap.get('fill')}`);
}
updateNodeBounds(node, outerShape); updateNodeBounds(node, outerShape);
node.intersect = function (point) { node.intersect = function (point) {

19
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
View File

@@ -28,8 +28,10 @@ export const iconRounded = async (
const topLabel = node.pos === 't'; const topLabel = node.pos === 't';
const height = iconSize + halfPadding * 2; const padding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
const width = iconSize + halfPadding * 2;
const height = iconSize + padding * 2;
const width = iconSize + padding * 2;
const { nodeBorder, mainBkg } = themeVariables; const { nodeBorder, mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node); const { stylesMap } = compileStyles(node);
@@ -60,9 +62,9 @@ export const iconRounded = async (
const iconShape = shapeSvg.insert(() => iconNode, ':first-child'); const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
const outerShape = shapeSvg.insert(() => outerNode); const outerShape = shapeSvg.insert(() => outerNode);
const iconElem = shapeSvg.append('g');
if (node.icon) { if (node.icon) {
const iconElem = shapeSvg.append('g');
iconElem.html( iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
); );
@@ -73,9 +75,10 @@ export const iconRounded = async (
const iconY = iconBBox.y; const iconY = iconBBox.y;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - halfPadding - iconY : -outerHeight / 2 + halfPadding - iconY})` `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - padding - iconY : -outerHeight / 2 + padding - iconY})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
iconElem.attr('class', 'icon');
} }
label.attr( label.attr(
@@ -88,6 +91,14 @@ export const iconRounded = async (
`translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})`
); );
if (stylesMap.get('stroke')) {
iconElem.selectAll('path').attr('style', `fill: ${stylesMap.get('stroke')}`);
}
if (stylesMap.get('fill')) {
iconShape.selectAll('path').attr('style', `stroke: ${stylesMap.get('fill')}`);
}
updateNodeBounds(node, outerShape); updateNodeBounds(node, outerShape);
node.intersect = function (point) { node.intersect = function (point) {

19
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
View File

@@ -27,8 +27,10 @@ export const iconSquare = async (
const topLabel = node.pos === 't'; const topLabel = node.pos === 't';
const height = iconSize + halfPadding * 2; const padding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
const width = iconSize + halfPadding * 2;
const height = iconSize + padding * 2;
const width = iconSize + padding * 2;
const { nodeBorder, mainBkg } = themeVariables; const { nodeBorder, mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node); const { stylesMap } = compileStyles(node);
@@ -59,9 +61,9 @@ export const iconSquare = async (
const iconShape = shapeSvg.insert(() => iconNode, ':first-child'); const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
const outerShape = shapeSvg.insert(() => outerNode); const outerShape = shapeSvg.insert(() => outerNode);
const iconElem = shapeSvg.append('g');
if (node.icon) { if (node.icon) {
const iconElem = shapeSvg.append('g');
iconElem.html( iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
); );
@@ -72,9 +74,10 @@ export const iconSquare = async (
const iconY = iconBBox.y; const iconY = iconBBox.y;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - halfPadding - iconY : -outerHeight / 2 + halfPadding - iconY})` `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - padding - iconY : -outerHeight / 2 + padding - iconY})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
iconElem.attr('class', 'icon');
} }
label.attr( label.attr(
@@ -87,6 +90,14 @@ export const iconSquare = async (
`translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})`
); );
if (stylesMap.get('stroke')) {
iconElem.selectAll('path').attr('style', `fill: ${stylesMap.get('stroke')}`);
}
if (stylesMap.get('fill')) {
iconShape.selectAll('path').attr('style', `stroke: ${stylesMap.get('fill')}`);
}
updateNodeBounds(node, outerShape); updateNodeBounds(node, outerShape);
node.intersect = function (point) { node.intersect = function (point) {

6
packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts
View File

@@ -17,18 +17,22 @@ export const imageSquare = async (
const imageNaturalWidth = Number(img.naturalWidth.toString().replace('px', '')); const imageNaturalWidth = Number(img.naturalWidth.toString().replace('px', ''));
const imageNaturalHeight = Number(img.naturalHeight.toString().replace('px', '')); const imageNaturalHeight = Number(img.naturalHeight.toString().replace('px', ''));
node.imageAspectRatio = imageNaturalWidth / imageNaturalHeight;
const { labelStyles } = styles2String(node); const { labelStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const defaultWidth = flowchart?.wrappingWidth; const defaultWidth = flowchart?.wrappingWidth;
node.defaultWidth = flowchart?.wrappingWidth;
const imageWidth = Math.max( const imageWidth = Math.max(
node.label ? (defaultWidth ?? 0) : 0, node.label ? (defaultWidth ?? 0) : 0,
node?.assetWidth ?? imageNaturalWidth node?.assetWidth ?? imageNaturalWidth
); );
const imageHeight = node?.assetHeight ?? imageNaturalHeight; const imageHeight = node.constrainedImage
? imageWidth / node.imageAspectRatio
: (node?.assetHeight ?? imageNaturalHeight);
node.width = Math.max(imageWidth, defaultWidth ?? 0); node.width = Math.max(imageWidth, defaultWidth ?? 0);
const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'image-shape default'); const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'image-shape default');

4
packages/mermaid/src/rendering-util/types.ts
View File

@@ -69,6 +69,9 @@ export interface Node {
img?: string; img?: string;
assetWidth?: number; assetWidth?: number;
assetHeight?: number; assetHeight?: number;
defaultWidth?: number;
imageAspectRatio?: number;
constrainedImage?: boolean;
} }
// Common properties for any edge in the system // Common properties for any edge in the system
@@ -100,6 +103,7 @@ export interface Edge {
pattern?: string; pattern?: string;
thickness?: 'normal' | 'thick' | 'invisible' | 'dotted'; thickness?: 'normal' | 'thick' | 'invisible' | 'dotted';
look?: string; look?: string;
showPoints?: boolean;
} }
export interface RectOptions { export interface RectOptions {

2
packages/mermaid/src/schemas/config.schema.yaml
View File

@@ -2036,7 +2036,7 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
description: | description: |
Defines how mermaid renders curves for flowcharts. Defines how mermaid renders curves for flowcharts.
type: string type: string
enum: ['basis', 'linear', 'cardinal','rounded'] enum: ['basis', 'linear', 'cardinal', 'rounded']
default: 'rounded' default: 'rounded'
edgeDebug: edgeDebug:
description: | description: |

10
packages/mermaid/src/styles.ts
View File

@@ -115,6 +115,16 @@ const getStyles = (
stroke-width: 1px; stroke-width: 1px;
} }
[data-look="neo"].icon-shape .icon path {
fill: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
filter: ${options.dropShadow};
}
[data-look="neo"].icon-shape path {
stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
filter: ${options.dropShadow};
}
${userStyles} ${userStyles}
`; `;
}; };

1
packages/mermaid/src/types.ts
View File

@@ -10,6 +10,7 @@ export interface NodeMetaData {
img?: string; img?: string;
w?: string; w?: string;
h?: string; h?: string;
constrainedImage?: boolean;
} }
export interface Point { export interface Point {