From e7d239b579dcd34f80ab61d86c870fe87b43ec00 Mon Sep 17 00:00:00 2001 From: Mark Qian Date: Thu, 11 Jan 2024 12:09:53 -0500 Subject: [PATCH 1/3] Update integrations-community.md (Add Codemia to the list of productivity tools using Mermaid.) --- cSpell.json | 1 + docs/ecosystem/integrations-community.md | 1 + packages/mermaid/src/docs/ecosystem/integrations-community.md | 1 + 3 files changed, 3 insertions(+) diff --git a/cSpell.json b/cSpell.json index 76f395915f..3ea9594f75 100644 --- a/cSpell.json +++ b/cSpell.json @@ -26,6 +26,7 @@ "città", "classdef", "codedoc", + "codemia", "colour", "commitlint", "cpettitt", diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index b465148c40..956a1a9663 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -70,6 +70,7 @@ To add an integration to this list, see the [Integrations - create page](./integ - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid) - [mermerd](https://github.com/KarnerTh/mermerd) - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive) +- Codemia [a tool to practice system design problems](https://codemia.io) ### CRM/ERP diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md index 019930a3f7..aa223d63e7 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-community.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -69,6 +69,7 @@ To add an integration to this list, see the [Integrations - create page](./integ - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid) - [mermerd](https://github.com/KarnerTh/mermerd) - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive) +- Codemia [a tool to practice system design problems](https://codemia.io) ### CRM/ERP From b46da49f85c2d956cf8d6ea8628ddd2fc9cb9c55 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 15 Jan 2024 13:08:58 +0530 Subject: [PATCH 2/3] Revert "Feature/4935 subgraph title margin config option" --- .../rendering/flowchart-v2.spec.js | 89 ------------------- packages/mermaid/src/config.type.ts | 8 -- .../mermaid/src/dagre-wrapper/clusters.js | 19 ++-- packages/mermaid/src/dagre-wrapper/edges.js | 13 ++- packages/mermaid/src/dagre-wrapper/index.js | 22 +---- .../mermaid/src/schemas/config.schema.yaml | 15 ---- .../src/utils/subGraphTitleMargins.spec.ts | 22 ----- .../mermaid/src/utils/subGraphTitleMargins.ts | 21 ----- 8 files changed, 15 insertions(+), 194 deletions(-) delete mode 100644 packages/mermaid/src/utils/subGraphTitleMargins.spec.ts delete mode 100644 packages/mermaid/src/utils/subGraphTitleMargins.ts diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index e23820ffa3..b7583ccf19 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -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 } } } - ); - }); - }); }); diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index a5bc22f6f6..2965dc0dae 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -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 diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js index 2de3f2489a..5c6e5a4e05 100644 --- a/packages/mermaid/src/dagre-wrapper/clusters.js +++ b/packages/mermaid/src/dagre-wrapper/clusters.js @@ -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)) + ')' ); diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js index 3683901285..c3ae814686 100644 --- a/packages/mermaid/src/dagre-wrapper/edges.js +++ b/packages/mermaid/src/dagre-wrapper/edges.js @@ -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 + ')'); } }; diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js index 76685dd7b9..9843adb8b0 100644 --- a/packages/mermaid/src/dagre-wrapper/index.js +++ b/packages/mermaid/src/dagre-wrapper/index.js @@ -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 = {}; diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index f39dbe9189..a518648866 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -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: diff --git a/packages/mermaid/src/utils/subGraphTitleMargins.spec.ts b/packages/mermaid/src/utils/subGraphTitleMargins.spec.ts deleted file mode 100644 index c607f8bce7..0000000000 --- a/packages/mermaid/src/utils/subGraphTitleMargins.spec.ts +++ /dev/null @@ -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, - }); - }); -}); diff --git a/packages/mermaid/src/utils/subGraphTitleMargins.ts b/packages/mermaid/src/utils/subGraphTitleMargins.ts deleted file mode 100644 index 426f4770d6..0000000000 --- a/packages/mermaid/src/utils/subGraphTitleMargins.ts +++ /dev/null @@ -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, - }; -}; From 11542b3b5ddef1366d59e22e0c105ecdddebdc86 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 15 Jan 2024 13:22:00 +0530 Subject: [PATCH 3/3] Revert "fix: render the participants in same order as they are created" --- demos/sequence.html | 7 ------- .../mermaid/src/diagrams/sequence/sequenceRenderer.ts | 11 ++++------- packages/mermaid/src/diagrams/sequence/svgDraw.js | 2 +- 3 files changed, 5 insertions(+), 15 deletions(-) diff --git a/demos/sequence.html b/demos/sequence.html index 3345fed17a..b2733a384e 100644 --- a/demos/sequence.html +++ b/demos/sequence.html @@ -164,13 +164,6 @@

Sequence diagram demos

end - 
-    sequenceDiagram
-      actor Alice
-      actor John
-      Alice-xJohn: Hello John, how are you?
-      John--xAlice: Great!
-