GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'develop' into feature/add-point-styling-quadrant-to-charts

Browse Source
This commit is contained in:
ilyes-ced 2024-01-16 10:06:08 +00:00 committed by GitHub
commit 38ee1724a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 46 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/e2e-applitools.yml vendored
View File

@ -28,7 +28,7 @@ jobs:
- if: ${{ ! env.USE_APPLI }}
name: Warn if not using Applitools
run: |
echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
- uses: actions/checkout@v4

2
.github/workflows/release-draft.yml vendored
View File

@ -3,7 +3,7 @@ name: Draft Release
on:
push:
branches:
- develop
- master
permissions:
contents: read

89
cypress/integration/rendering/flowchart-v2.spec.js
View File

@ -886,93 +886,4 @@ end
});
});
});
describe('Subgraph title margins', () => {
it('Should render subgraphs with title margins set (LR)', () => {
imgSnapshotTest(
`flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
`,
{ flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
);
});
it('Should render subgraphs with title margins set (TD)', () => {
imgSnapshotTest(
`flowchart TD
subgraph TOP
direction LR
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
`,
{ flowchart: { subGraphTitleMargin: { top: 8, bottom: 16 } } }
);
});
it('Should render subgraphs with title margins set (LR) and htmlLabels set to false', () => {
imgSnapshotTest(
`flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
`,
{
htmlLabels: false,
flowchart: { htmlLabels: false, subGraphTitleMargin: { top: 10, bottom: 5 } },
}
);
});
it('Should render subgraphs with title margins and edge labels', () => {
imgSnapshotTest(
`flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 --lb1-->f1
end
subgraph B2
direction BT
i2 --lb2-->f2
end
end
A --lb3--> TOP --lb4--> B
B1 --lb5--> B2
`,
{ flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
);
});
});
});

7
demos/sequence.html
View File

@ -164,13 +164,6 @@
end
</pre>
<pre class="mermaid">
sequenceDiagram
actor Alice
actor John
Alice-xJohn: Hello John, how are you?
John--xAlice: Great!
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({

8
docs/syntax/classDiagram.md
View File

@ -459,9 +459,9 @@ The different cardinality options are :
- `0..1` Zero or One
- `1..*` One or more
- `*` Many
- `n` n {where n>1}
- `0..n` zero to n {where n>1}
- `1..n` one to n {where n>1}
- `n` n (where n>1)
- `0..n` zero to n (where n>1)
- `1..n` one to n (where n>1)
Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
@ -766,7 +766,7 @@ Beginner's tip—a full example using interactive links in an HTML page:
## Styling
### Styling a node (v\<MERMAID_RELEASE_VERSION>+)
### Styling a node (v10.7.0+)
It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.

2
docs/syntax/sequenceDiagram.md
View File

@ -137,7 +137,7 @@ If an error of the following type occurs when creating or deleting an actor/part
> The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram.
And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v\<MERMAID_RELEASE_VERSION>+).
And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v10.7.0+).
### Grouping / Box

2
packages/mermaid/package.json
View File

@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "10.6.1",
"version": "10.7.0",
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module",
"module": "./dist/mermaid.core.mjs",

8
packages/mermaid/src/config.type.ts
View File

@ -1416,14 +1416,6 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
* Margin top for the text over the diagram
*/
titleTopMargin?: number;
/**
* Defines a top/bottom margin for subgraph titles
*
*/
subGraphTitleMargin?: {
top?: number;
bottom?: number;
};
arrowMarkerAbsolute?: boolean;
/**
* The amount of padding around the diagram as a whole so that embedded

19
packages/mermaid/src/dagre-wrapper/clusters.js
View File

@ -5,11 +5,9 @@ import { createText } from '../rendering-util/createText.js';
import { select } from 'd3';
import { getConfig } from '../diagram-api/diagramAPI.js';
import { evaluate } from '../diagrams/common/common.js';
import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
const rect = (parent, node) => {
log.info('Creating subgraph rect for ', node.id, node);
const siteConfig = getConfig();
// Add outer g element
const shapeSvg = parent
@ -20,7 +18,7 @@ const rect = (parent, node) => {
// add the rect
const rect = shapeSvg.insert('rect', ':first-child');
const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
// Create the label and insert it after the rect
const label = shapeSvg.insert('g').attr('class', 'cluster-label');
@ -36,7 +34,7 @@ const rect = (parent, node) => {
// Get the size of the label
let bbox = text.getBBox();
if (evaluate(siteConfig.flowchart.htmlLabels)) {
if (evaluate(getConfig().flowchart.htmlLabels)) {
const div = text.children[0];
const dv = select(text);
bbox = div.getBoundingClientRect();
@ -65,18 +63,17 @@ const rect = (parent, node) => {
.attr('width', width)
.attr('height', node.height + padding);
const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
if (useHtmlLabels) {
label.attr(
'transform',
// This puts the labal on top of the box instead of inside it
`translate(${node.x - bbox.width / 2}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
);
} else {
label.attr(
'transform',
// This puts the labal on top of the box instead of inside it
`translate(${node.x}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
);
}
// Center the label
@ -130,8 +127,6 @@ const noteGroup = (parent, node) => {
return shapeSvg;
};
const roundedWithTitle = (parent, node) => {
const siteConfig = getConfig();
// Add outer g element
const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);
@ -148,7 +143,7 @@ const roundedWithTitle = (parent, node) => {
// Get the size of the label
let bbox = text.getBBox();
if (evaluate(siteConfig.flowchart.htmlLabels)) {
if (evaluate(getConfig().flowchart.htmlLabels)) {
const div = text.children[0];
const dv = select(text);
bbox = div.getBoundingClientRect();
@ -180,7 +175,6 @@ const roundedWithTitle = (parent, node) => {
.attr('width', width + padding)
.attr('height', node.height + padding - bbox.height - 3);
const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
// Center the label
label.attr(
'transform',
@ -190,8 +184,7 @@ const roundedWithTitle = (parent, node) => {
(node.y -
node.height / 2 -
node.padding / 3 +
(evaluate(siteConfig.flowchart.htmlLabels) ? 5 : 3)) +
subGraphTitleTopMargin +
(evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) +
')'
);

13
packages/mermaid/src/dagre-wrapper/edges.js
View File

@ -6,7 +6,6 @@ import { getConfig } from '../diagram-api/diagramAPI.js';
import utils from '../utils.js';
import { evaluate } from '../diagrams/common/common.js';
import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
import { addEdgeMarkers } from './edgeMarker.js';
let edgeLabels = {};
@ -137,8 +136,6 @@ function setTerminalWidth(fo, value) {
export const positionEdgeLabel = (edge, paths) => {
log.info('Moving label abc78 ', edge.id, edge.label, edgeLabels[edge.id]);
let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
const siteConfig = getConfig();
const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
if (edge.label) {
const el = edgeLabels[edge.id];
let x = edge.x;
@ -162,7 +159,7 @@ export const positionEdgeLabel = (edge, paths) => {
y = pos.y;
}
}
el.attr('transform', `translate(${x}, ${y + subGraphTitleTotalMargin / 2})`);
el.attr('transform', 'translate(' + x + ', ' + y + ')');
}
//let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
@ -176,7 +173,7 @@ export const positionEdgeLabel = (edge, paths) => {
x = pos.x;
y = pos.y;
}
el.attr('transform', `translate(${x}, ${y})`);
el.attr('transform', 'translate(' + x + ', ' + y + ')');
}
if (edge.startLabelRight) {
const el = terminalLabels[edge.id].startRight;
@ -192,7 +189,7 @@ export const positionEdgeLabel = (edge, paths) => {
x = pos.x;
y = pos.y;
}
el.attr('transform', `translate(${x}, ${y})`);
el.attr('transform', 'translate(' + x + ', ' + y + ')');
}
if (edge.endLabelLeft) {
const el = terminalLabels[edge.id].endLeft;
@ -204,7 +201,7 @@ export const positionEdgeLabel = (edge, paths) => {
x = pos.x;
y = pos.y;
}
el.attr('transform', `translate(${x}, ${y})`);
el.attr('transform', 'translate(' + x + ', ' + y + ')');
}
if (edge.endLabelRight) {
const el = terminalLabels[edge.id].endRight;
@ -216,7 +213,7 @@ export const positionEdgeLabel = (edge, paths) => {
x = pos.x;
y = pos.y;
}
el.attr('transform', `translate(${x}, ${y})`);
el.attr('transform', 'translate(' + x + ', ' + y + ')');
}
};

22
packages/mermaid/src/dagre-wrapper/index.js
View File

@ -13,10 +13,8 @@ import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './no
import { insertCluster, clear as clearClusters } from './clusters.js';
import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
import { log } from '../logger.js';
import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
import { getConfig } from '../diagram-api/diagramAPI.js';
const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, siteConfig) => {
const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) => {
log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
const dir = graph.graph().rankdir;
log.trace('Dir in recursive render - dir:', dir);
@ -54,14 +52,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
if (node && node.clusterNode) {
// const children = graph.children(v);
log.info('Cluster identified', v, node.width, graph.node(v));
const o = await recursiveRender(
nodes,
node.graph,
diagramtype,
id,
graph.node(v),
siteConfig
);
const o = await recursiveRender(nodes, node.graph, diagramtype, id, graph.node(v));
const newEl = o.elem;
updateNodeBounds(node, newEl);
node.diff = o.diff || 0;
@ -110,7 +101,6 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
log.info('Graph after layout:', graphlibJson.write(graph));
// Move the nodes to the correct place
let diff = 0;
const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
sortNodesByHierarchy(graph).forEach(function (v) {
const node = graph.node(v);
log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
@ -124,18 +114,16 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
);
if (node && node.clusterNode) {
// clusterDb[node.id].node = node;
node.y += subGraphTitleTotalMargin;
positionNode(node);
} else {
// Non cluster node
if (graph.children(v).length > 0) {
// A cluster in the non-recursive way
// positionCluster(node);
node.height += subGraphTitleTotalMargin;
insertCluster(clusters, node);
clusterDb[node.id].node = node;
} else {
node.y += subGraphTitleTotalMargin / 2;
positionNode(node);
}
}
@ -146,7 +134,6 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
const edge = graph.edge(e);
log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
edge.points.forEach((point) => (point.y += subGraphTitleTotalMargin / 2));
const paths = insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph, id);
positionEdgeLabel(edge, paths);
});
@ -172,8 +159,7 @@ export const render = async (elem, graph, markers, diagramtype, id) => {
adjustClustersAndEdges(graph);
log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph)));
// log.warn('Graph ever after:', graphlibJson.write(graph.node('A').graph));
const siteConfig = getConfig();
await recursiveRender(elem, graph, diagramtype, id, undefined, siteConfig);
await recursiveRender(elem, graph, diagramtype, id);
};
// const shapeDefinitions = {};

11
packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
View File

@ -829,11 +829,6 @@ export const draw = function (_text: string, id: string, _version: string, diagO
bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos);
}
log.debug('createdActors', createdActors);
log.debug('destroyedActors', destroyedActors);
drawActors(diagram, actors, actorKeys, false);
// Draw the messages/signals
let sequenceIndex = 1;
let sequenceIndexStep = 1;
@ -1033,12 +1028,14 @@ export const draw = function (_text: string, id: string, _version: string, diagO
}
});
messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
log.debug('createdActors', createdActors);
log.debug('destroyedActors', destroyedActors);
drawActors(diagram, actors, actorKeys, false);
messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
if (conf.mirrorActors) {
drawActors(diagram, actors, actorKeys, true);
}
backgrounds.forEach((e) => svgDraw.drawBackgroundRect(diagram, e));
fixLifeLineHeights(diagram, actors, actorKeys, conf);

2
packages/mermaid/src/diagrams/sequence/svgDraw.js
View File

@ -324,7 +324,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
const center = actor.x + actor.width / 2;
const centerY = actorY + 5;
const boxpluslineGroup = elem.append('g');
const boxpluslineGroup = elem.append('g').lower();
var g = boxpluslineGroup;
if (!isFooter) {

18
packages/mermaid/src/docs/.vitepress/components/TopBar.vue
View File

@ -4,14 +4,22 @@
>
<p class="flex-grow text-center tracking-wide text-text">
<a
href="https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023"
href="https://www.mermaidchart.com/app/user/billing/checkout"
target="_blank"
class="unstyled text-white plausible-event-name=bannerClick"
class="unstyled flex-grow tracking-wide plausible-event-name=bannerClick"
>
Get AI, team collaboration, storage, and more with
<span class="font-bold underline"
>Mermaid Chart Pro. Start free trial today & get 25% off.</span
<span class="text-primary-50 font-semibold">{{
[
'Try diagramming with ChatGPT at Mermaid Chart',
'Try Mermaid’s Visual Editor at Mermaid Chart',
'Enjoy live collaboration with teammates at Mermaid Chart',
][Math.floor(Math.random() * 3)]
}}</span>
<button
class="ml-4 rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide text-white"
>
Try it now
</button>
</a>
</p>
</div>

8
packages/mermaid/src/docs/syntax/classDiagram.md
View File

@ -304,9 +304,9 @@ The different cardinality options are :
- `0..1` Zero or One
- `1..*` One or more
- `*` Many
- `n` n {where n>1}
- `0..n` zero to n {where n>1}
- `1..n` one to n {where n>1}
- `n` n (where n>1)
- `0..n` zero to n (where n>1)
- `1..n` one to n (where n>1)
Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
@ -518,7 +518,7 @@ Beginner's tip—a full example using interactive links in an HTML page:
## Styling
### Styling a node (v<MERMAID_RELEASE_VERSION>+)
### Styling a node (v10.7.0+)
It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.

2
packages/mermaid/src/docs/syntax/sequenceDiagram.md
View File

@ -89,7 +89,7 @@ If an error of the following type occurs when creating or deleting an actor/part
> The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram.
And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v<MERMAID_RELEASE_VERSION>+).
And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v10.7.0+).
### Grouping / Box

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

@ -1869,7 +1869,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
unevaluatedProperties: false
required:
- titleTopMargin
- subGraphTitleMargin
- diagramPadding
- htmlLabels
- nodeSpacing
@ -1882,20 +1881,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
titleTopMargin:
$ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
default: 25
subGraphTitleMargin:
description: |
Defines a top/bottom margin for subgraph titles
type: object
properties:
top:
type: integer
minimum: 0
bottom:
type: integer
minimum: 0
default:
top: 0
bottom: 0
arrowMarkerAbsolute:
type: boolean # TODO, is this actually used here (it has no default value but was in types)
diagramPadding:

22
packages/mermaid/src/utils/subGraphTitleMargins.spec.ts
View File

@ -1,22 +0,0 @@
import { getSubGraphTitleMargins } from './subGraphTitleMargins.js';
import * as configApi from '../config.js';
describe('getSubGraphTitleMargins', () => {
it('should get subgraph title margins after config has been set', () => {
const config_0 = {
flowchart: {
subGraphTitleMargin: {
top: 10,
bottom: 5,
},
},
};
configApi.setSiteConfig(config_0);
expect(getSubGraphTitleMargins(config_0)).toEqual({
subGraphTitleTopMargin: 10,
subGraphTitleBottomMargin: 5,
subGraphTitleTotalMargin: 15,
});
});
});

21
packages/mermaid/src/utils/subGraphTitleMargins.ts
View File

@ -1,21 +0,0 @@
import type { FlowchartDiagramConfig } from '../config.type.js';
export const getSubGraphTitleMargins = ({
flowchart,
}: {
flowchart: FlowchartDiagramConfig;
}): {
subGraphTitleTopMargin: number;
subGraphTitleBottomMargin: number;
subGraphTitleTotalMargin: number;
} => {
const subGraphTitleTopMargin = flowchart?.subGraphTitleMargin?.top ?? 0;
const subGraphTitleBottomMargin = flowchart?.subGraphTitleMargin?.bottom ?? 0;
const subGraphTitleTotalMargin = subGraphTitleTopMargin + subGraphTitleBottomMargin;
return {
subGraphTitleTopMargin,
subGraphTitleBottomMargin,
subGraphTitleTotalMargin,
};
};