From 592e9c959be891c136cff37c67462580bd8eda59 Mon Sep 17 00:00:00 2001 From: Dmitry Kisler Date: Sun, 2 Jul 2023 17:10:06 +0200 Subject: [PATCH 01/16] fix(diagrams/c4/parser): fixes support of the macro ContainerQueue_Ext for C4 diagrams. --- .../diagrams/c4/parser/c4Container.spec.js | 135 ++++++++++++++++++ .../src/diagrams/c4/parser/c4Diagram.jison | 54 +++---- 2 files changed, 162 insertions(+), 27 deletions(-) create mode 100644 packages/mermaid/src/diagrams/c4/parser/c4Container.spec.js diff --git a/packages/mermaid/src/diagrams/c4/parser/c4Container.spec.js b/packages/mermaid/src/diagrams/c4/parser/c4Container.spec.js new file mode 100644 index 000000000..76dca3bc2 --- /dev/null +++ b/packages/mermaid/src/diagrams/c4/parser/c4Container.spec.js @@ -0,0 +1,135 @@ +import c4Db from '../c4Db.js'; +import c4 from './c4Diagram.jison'; +import { setConfig } from '../../../config.js'; + +setConfig({ + securityLevel: 'strict', +}); + +describe.each([ + ['Container', 'container'], + ['ContainerDb', 'container_db'], + ['ContainerQueue', 'container_queue'], + ['Container_Ext', 'external_container'], + ['ContainerDb_Ext', 'external_container_db'], + ['ContainerQueue_Ext', 'external_container_queue'], +])('parsing a C4 %s', function (macroName, elementName) { + beforeEach(function () { + c4.parser.yy = c4Db; + c4.parser.yy.clear(); + }); + + it('should parse a C4 diagram with one Container correctly', function () { + c4.parser.parse(`C4Context +title Container diagram for Internet Banking Container +${macroName}(ContainerAA, "Internet Banking Container", "Technology", "Allows customers to view information about their bank accounts, and make payments.")`); + + const yy = c4.parser.yy; + + const shapes = yy.getC4ShapeArray(); + expect(shapes.length).toBe(1); + const onlyShape = shapes[0]; + + expect(onlyShape).toEqual({ + alias: 'ContainerAA', + descr: { + text: 'Allows customers to view information about their bank accounts, and make payments.', + }, + label: { + text: 'Internet Banking Container', + }, + link: undefined, + sprite: undefined, + tags: undefined, + parentBoundary: 'global', + typeC4Shape: { + text: elementName, + }, + techn: { + text: 'Technology', + }, + wrap: false, + }); + }); + + it('should parse the alias', function () { + c4.parser.parse(`C4Context +${macroName}(ContainerAA, "Internet Banking Container")`); + + expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({ + alias: 'ContainerAA', + }); + }); + + it('should parse the label', function () { + c4.parser.parse(`C4Context +${macroName}(ContainerAA, "Internet Banking Container")`); + + expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({ + label: { + text: 'Internet Banking Container', + }, + }); + }); + + it('should parse the technology', function () { + c4.parser.parse(`C4Context +${macroName}(ContainerAA, "", "Java")`); + + expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({ + techn: { + text: 'Java', + }, + }); + }); + + it('should parse the description', function () { + c4.parser.parse(`C4Context +${macroName}(ContainerAA, "", "", "Allows customers to view information about their bank accounts, and make payments.")`); + + expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({ + descr: { + text: 'Allows customers to view information about their bank accounts, and make payments.', + }, + }); + }); + + it('should parse a sprite', function () { + c4.parser.parse(`C4Context +${macroName}(ContainerAA, $sprite="users")`); + + expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({ + label: { + text: { + sprite: 'users', + }, + }, + }); + }); + + it('should parse a link', function () { + c4.parser.parse(`C4Context +${macroName}(ContainerAA, $link="https://github.com/mermaidjs")`); + + expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({ + label: { + text: { + link: 'https://github.com/mermaidjs', + }, + }, + }); + }); + + it('should parse tags', function () { + c4.parser.parse(`C4Context +${macroName}(ContainerAA, $tags="tag1,tag2")`); + + expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({ + label: { + text: { + tags: 'tag1,tag2', + }, + }, + }); + }); +}); diff --git a/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison b/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison index 03b851458..1dfa69ef1 100644 --- a/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison +++ b/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison @@ -150,27 +150,27 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} "Node_R" { this.begin("node_r"); return 'NODE_R';} -"Rel" { this.begin("rel"); return 'REL';} -"BiRel" { this.begin("birel"); return 'BIREL';} -"Rel_Up" { this.begin("rel_u"); return 'REL_U';} -"Rel_U" { this.begin("rel_u"); return 'REL_U';} -"Rel_Down" { this.begin("rel_d"); return 'REL_D';} -"Rel_D" { this.begin("rel_d"); return 'REL_D';} -"Rel_Left" { this.begin("rel_l"); return 'REL_L';} -"Rel_L" { this.begin("rel_l"); return 'REL_L';} -"Rel_Right" { this.begin("rel_r"); return 'REL_R';} -"Rel_R" { this.begin("rel_r"); return 'REL_R';} -"Rel_Back" { this.begin("rel_b"); return 'REL_B';} -"RelIndex" { this.begin("rel_index"); return 'REL_INDEX';} +"Rel" { this.begin("rel"); return 'REL';} +"BiRel" { this.begin("birel"); return 'BIREL';} +"Rel_Up" { this.begin("rel_u"); return 'REL_U';} +"Rel_U" { this.begin("rel_u"); return 'REL_U';} +"Rel_Down" { this.begin("rel_d"); return 'REL_D';} +"Rel_D" { this.begin("rel_d"); return 'REL_D';} +"Rel_Left" { this.begin("rel_l"); return 'REL_L';} +"Rel_L" { this.begin("rel_l"); return 'REL_L';} +"Rel_Right" { this.begin("rel_r"); return 'REL_R';} +"Rel_R" { this.begin("rel_r"); return 'REL_R';} +"Rel_Back" { this.begin("rel_b"); return 'REL_B';} +"RelIndex" { this.begin("rel_index"); return 'REL_INDEX';} -"UpdateElementStyle" { this.begin("update_el_style"); return 'UPDATE_EL_STYLE';} -"UpdateRelStyle" { this.begin("update_rel_style"); return 'UPDATE_REL_STYLE';} -"UpdateLayoutConfig" { this.begin("update_layout_config"); return 'UPDATE_LAYOUT_CONFIG';} +"UpdateElementStyle" { this.begin("update_el_style"); return 'UPDATE_EL_STYLE';} +"UpdateRelStyle" { this.begin("update_rel_style"); return 'UPDATE_REL_STYLE';} +"UpdateLayoutConfig" { this.begin("update_layout_config"); return 'UPDATE_LAYOUT_CONFIG';} -<> return "EOF_IN_STRUCT"; -[(][ ]*[,] { this.begin("attribute"); return "ATTRIBUTE_EMPTY";} -[(] { this.begin("attribute"); } -[)] { this.popState();this.popState();} +<> return "EOF_IN_STRUCT"; +[(][ ]*[,] { this.begin("attribute"); return "ATTRIBUTE_EMPTY";} +[(] { this.begin("attribute"); } +[)] { this.popState();this.popState();} ",," { return 'ATTRIBUTE_EMPTY';} "," { } @@ -189,7 +189,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} '{' { /* this.begin("lbrace"); */ return "LBRACE";} '}' { /* this.popState(); */ return "RBRACE";} - + [\s]+ return 'SPACE'; [\n\r]+ return 'EOL'; <> return 'EOF'; @@ -257,7 +257,7 @@ graphConfig statements : otherStatements | diagramStatements - | otherStatements diagramStatements + | otherStatements diagramStatements ; otherStatements @@ -268,10 +268,10 @@ otherStatements otherStatement : title {yy.setTitle($1.substring(6));$$=$1.substring(6);} - | accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);} + | accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);} | acc_title acc_title_value { $$=$2.trim();yy.setTitle($$); } | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); } - | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); } + | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); } ; boundaryStatement @@ -301,7 +301,7 @@ boundaryStopStatement diagramStatements : diagramStatement | diagramStatement NEWLINE - | diagramStatement NEWLINE statements + | diagramStatement NEWLINE statements ; diagramStatement @@ -312,19 +312,19 @@ diagramStatement | SYSTEM_QUEUE attributes {yy.addPersonOrSystem('system_queue', ...$2); $$=$2;} | SYSTEM_EXT attributes {yy.addPersonOrSystem('external_system', ...$2); $$=$2;} | SYSTEM_EXT_DB attributes {yy.addPersonOrSystem('external_system_db', ...$2); $$=$2;} - | SYSTEM_EXT_QUEUE attributes {yy.addPersonOrSystem('external_system_queue', ...$2); $$=$2;} + | SYSTEM_EXT_QUEUE attributes {yy.addPersonOrSystem('external_system_queue', ...$2); $$=$2;} | CONTAINER attributes {yy.addContainer('container', ...$2); $$=$2;} | CONTAINER_DB attributes {yy.addContainer('container_db', ...$2); $$=$2;} | CONTAINER_QUEUE attributes {yy.addContainer('container_queue', ...$2); $$=$2;} | CONTAINER_EXT attributes {yy.addContainer('external_container', ...$2); $$=$2;} | CONTAINER_EXT_DB attributes {yy.addContainer('external_container_db', ...$2); $$=$2;} - | CONTAINER_EXT_QUEUE attributes {yy.addContainer('external_container_queue', ...$2); $$=$2;} + | CONTAINER_EXT_QUEUE attributes {yy.addContainer('external_container_queue', ...$2); $$=$2;} | COMPONENT attributes {yy.addComponent('component', ...$2); $$=$2;} | COMPONENT_DB attributes {yy.addComponent('component_db', ...$2); $$=$2;} | COMPONENT_QUEUE attributes {yy.addComponent('component_queue', ...$2); $$=$2;} | COMPONENT_EXT attributes {yy.addComponent('external_component', ...$2); $$=$2;} | COMPONENT_EXT_DB attributes {yy.addComponent('external_component_db', ...$2); $$=$2;} - | COMPONENT_EXT_QUEUE attributes {yy.addComponent('external_component_queue', ...$2); $$=$2;} + | COMPONENT_EXT_QUEUE attributes {yy.addComponent('external_component_queue', ...$2); $$=$2;} | boundaryStatement | REL attributes {yy.addRel('rel', ...$2); $$=$2;} | BIREL attributes {yy.addRel('birel', ...$2); $$=$2;} From 4af2fca339735a9343be7b77185c03acf1b58b1e Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Thu, 6 Jul 2023 19:40:54 -0300 Subject: [PATCH 02/16] Add documentation for feature --- docs/syntax/entityRelationshipDiagram.md | 2 +- packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/syntax/entityRelationshipDiagram.md b/docs/syntax/entityRelationshipDiagram.md index 9fa5fa517..dd887b0ee 100644 --- a/docs/syntax/entityRelationshipDiagram.md +++ b/docs/syntax/entityRelationshipDiagram.md @@ -196,7 +196,7 @@ erDiagram } ``` -The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. Other than that, there are no restrictions, and there is no implicit set of valid data types. +The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types. #### Attribute Keys and Comments diff --git a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md index b7066ab3d..7e5fa2711 100644 --- a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md +++ b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md @@ -142,7 +142,7 @@ erDiagram } ``` -The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. Other than that, there are no restrictions, and there is no implicit set of valid data types. +The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types. #### Attribute Keys and Comments From 42da53f58a4b933035325c8762af80b5297fb976 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Thu, 6 Jul 2023 22:15:18 -0300 Subject: [PATCH 03/16] Add imgSnapshotTest --- .../integration/rendering/erDiagram.spec.js | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js index 0c6eaa838..91c93b6a8 100644 --- a/cypress/integration/rendering/erDiagram.spec.js +++ b/cypress/integration/rendering/erDiagram.spec.js @@ -200,6 +200,27 @@ describe('Entity Relationship Diagram', () => { ); }); + it('should render entities with attributes that begin with asterisk', () => { + imgSnapshotTest( + ` + erDiagram + BOOKS { + int *id + string name + varchar(99) summary + } + BOOKS }o..o{ STORES : sold + STORES { + int *id + string name + varchar(50) address + } + `, + { loglevel: 1 } + ); + cy.get('svg'); + }); + it('should render entities with keys', () => { renderGraph( ` From fad11bce9551d6efa5d65696f4e1127245e0bcf8 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Thu, 6 Jul 2023 22:17:33 -0300 Subject: [PATCH 04/16] Correct one unit test and add another --- .../src/diagrams/er/parser/erDiagram.spec.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js index 4ab09b2f8..2bf2f5b8c 100644 --- a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js +++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js @@ -154,11 +154,21 @@ describe('when parsing ER diagram it...', function () { expect(entities[entity].attributes[2].attributeName).toBe('author-ref[name](1)'); }); - it('should allow asterisk at the start of title', function () { + it('should allow asterisk at the start of attribute name', function () { const entity = 'BOOK'; const attribute = 'string *title'; - erDiagram.parser.parse(`erDiagram\n${entity}{${attribute}}`); + erDiagram.parser.parse(`erDiagram\n${entity}{\n${attribute}}`); + const entities = erDb.getEntities(); + expect(Object.keys(entities).length).toBe(1); + expect(entities[entity].attributes.length).toBe(1); + }); + + it('should allow asterisks at the start of attribute declared with type and name', () => { + const entity = 'BOOK'; + const attribute = 'id *the_Primary_Key'; + + erDiagram.parser.parse(`erDiagram\n${entity} {\n${attribute}}`); const entities = erDb.getEntities(); expect(Object.keys(entities).length).toBe(1); expect(entities[entity].attributes.length).toBe(1); From cd118ad5cbb402aff7703fa7b78301fd6f586848 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Fri, 7 Jul 2023 19:59:52 -0300 Subject: [PATCH 05/16] Update erDiagram to make entity names in singular form --- cypress/integration/rendering/erDiagram.spec.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js index 91c93b6a8..c125d6f74 100644 --- a/cypress/integration/rendering/erDiagram.spec.js +++ b/cypress/integration/rendering/erDiagram.spec.js @@ -204,13 +204,13 @@ describe('Entity Relationship Diagram', () => { imgSnapshotTest( ` erDiagram - BOOKS { + BOOK { int *id string name varchar(99) summary } - BOOKS }o..o{ STORES : sold - STORES { + BOOK }o..o{ STORE : soldBy + STORE { int *id string name varchar(50) address From d46ef4cc91810371aaf9f3e4bb2ce7765a85e670 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 11 Jul 2023 17:19:31 +0000 Subject: [PATCH 06/16] chore(deps): update all patch dependencies --- docker-compose.yml | 2 +- package.json | 2 +- packages/mermaid/package.json | 2 +- pnpm-lock.yaml | 8 ++++---- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index f7195b362..1037b5102 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -17,7 +17,7 @@ services: - 9000:9000 - 3333:3333 cypress: - image: cypress/included:12.17.0 + image: cypress/included:12.17.1 stdin_open: true tty: true working_dir: /mermaid diff --git a/package.json b/package.json index 1b4cb6233..b23c8bd98 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "10.2.4", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", - "packageManager": "pnpm@8.6.5", + "packageManager": "pnpm@8.6.7", "keywords": [ "diagram", "markdown", diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index afbbed2e6..481eef888 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -65,7 +65,7 @@ "d3-sankey": "^0.12.3", "dagre-d3-es": "7.0.10", "dayjs": "^1.11.7", - "dompurify": "3.0.4", + "dompurify": "3.0.5", "elkjs": "^0.8.2", "khroma": "^2.0.0", "lodash-es": "^4.17.21", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e09d023f7..6d604e524 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -225,8 +225,8 @@ importers: specifier: ^1.11.7 version: 1.11.7 dompurify: - specifier: 3.0.4 - version: 3.0.4 + specifier: 3.0.5 + version: 3.0.5 elkjs: specifier: ^0.8.2 version: 0.8.2 @@ -8082,8 +8082,8 @@ packages: domelementtype: 2.3.0 dev: true - /dompurify@3.0.4: - resolution: {integrity: sha512-ae0mA+Qiqp6C29pqZX3fQgK+F91+F7wobM/v8DRzDqJdZJELXiFUx4PP4pK/mzUS0xkiSEx3Ncd9gr69jg3YsQ==} + /dompurify@3.0.5: + resolution: {integrity: sha512-F9e6wPGtY+8KNMRAVfxeCOHU0/NPWMSENNq4pQctuXRqqdEPW7q3CrLbR5Nse044WwacyjHGOMlvNsBe1y6z9A==} dev: false /domutils@3.0.1: From d2ab132a182279e8d8a9e5df1aad96f7f1a0c3c2 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Tue, 11 Jul 2023 19:39:39 -0300 Subject: [PATCH 07/16] Change class member height to use own BBox --- packages/mermaid/src/dagre-wrapper/nodes.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js index 410703f6c..b30084e90 100644 --- a/packages/mermaid/src/dagre-wrapper/nodes.js +++ b/packages/mermaid/src/dagre-wrapper/nodes.js @@ -917,7 +917,9 @@ const class_box = (parent, node) => { ((-1 * maxHeight) / 2 + verticalPos + lineHeight / 2) + ')' ); - verticalPos += classTitleBBox.height + rowPadding; + //get the height of the bounding box of each member if exists + const memberBBox = lbl ? lbl.getBBox() : null; + verticalPos += (memberBBox.height ?? 0) + rowPadding; }); verticalPos += lineHeight; @@ -935,7 +937,8 @@ const class_box = (parent, node) => { 'transform', 'translate( ' + -maxWidth / 2 + ', ' + ((-1 * maxHeight) / 2 + verticalPos) + ')' ); - verticalPos += classTitleBBox.height + rowPadding; + const methodBBox = lbl ? lbl.getBBox() : null; + verticalPos += (methodBBox.height ?? 0) + rowPadding; }); rect From 12c657f514f494c9538457d3d3c22b640e8481bf Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Tue, 11 Jul 2023 19:40:26 -0300 Subject: [PATCH 08/16] Add imgSnapshotTests --- .../rendering/classDiagram.spec.js | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index 427b4cf0b..cc4a7bfa9 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -423,4 +423,67 @@ describe('Class diagram', () => { ); cy.get('svg'); }); + + it('20: should render class diagram with newlines in title', () => { + imgSnapshotTest(` + classDiagram + Animal <|-- \`Du\nck\` + Animal : +int age + Animal : +String gender + Animal: +isMammal() + Animal: +mate() + class \`Du\nck\` { + +String beakColor + +String featherColor + +swim() + +quack() + } + `); + cy.get('svg'); + }); + + it('21: should render class diagram with many newlines in title', () => { + imgSnapshotTest(` + classDiagram + class \`This\nTitle\nHas\nMany\nNewlines\` { + +String Also + -Stirng Many + #int Members + +And() + -Many() + #Methods() + } + `); + }); + + it('22: should render with newlines in title and an annotation', () => { + imgSnapshotTest(` + classDiagram + class \`This\nTitle\nHas\nMany\nNewlines\` { + +String Also + -Stirng Many + #int Members + +And() + -Many() + #Methods() + } + <<Interface>> \`This\nTitle\nHas\nMany\nNewlines\` + `); + }); + + it('23: should handle newline title in namespace', () => { + imgSnapshotTest(` + classDiagram + namespace testingNamespace { + class \`This\nTitle\nHas\nMany\nNewlines\` { + +String Also + -Stirng Many + #int Members + +And() + -Many() + #Methods() + } + } + `); + }); }); From aeba7a1d0eddd0d61cd54a3b8d50b66d61131db5 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf <104177348+ibrahimWassouf@users.noreply.github.com> Date: Thu, 13 Jul 2023 15:57:28 -0300 Subject: [PATCH 09/16] Update packages/mermaid/src/dagre-wrapper/nodes.js Co-authored-by: Sidharth Vinod --- packages/mermaid/src/dagre-wrapper/nodes.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js index b30084e90..1e1fbd41e 100644 --- a/packages/mermaid/src/dagre-wrapper/nodes.js +++ b/packages/mermaid/src/dagre-wrapper/nodes.js @@ -918,8 +918,8 @@ const class_box = (parent, node) => { ')' ); //get the height of the bounding box of each member if exists - const memberBBox = lbl ? lbl.getBBox() : null; - verticalPos += (memberBBox.height ?? 0) + rowPadding; + const memberBBox = lbl?.getBBox(); + verticalPos += (memberBBox?.height ?? 0) + rowPadding; }); verticalPos += lineHeight; From e9f032ccebb2de301284e047b1c940c2e376da38 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf <104177348+ibrahimWassouf@users.noreply.github.com> Date: Thu, 13 Jul 2023 15:57:58 -0300 Subject: [PATCH 10/16] Update packages/mermaid/src/dagre-wrapper/nodes.js Co-authored-by: Sidharth Vinod --- packages/mermaid/src/dagre-wrapper/nodes.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js index 1e1fbd41e..6c6733358 100644 --- a/packages/mermaid/src/dagre-wrapper/nodes.js +++ b/packages/mermaid/src/dagre-wrapper/nodes.js @@ -937,8 +937,8 @@ const class_box = (parent, node) => { 'transform', 'translate( ' + -maxWidth / 2 + ', ' + ((-1 * maxHeight) / 2 + verticalPos) + ')' ); - const methodBBox = lbl ? lbl.getBBox() : null; - verticalPos += (methodBBox.height ?? 0) + rowPadding; + const memberBBox = lbl?.getBBox(); + verticalPos += (memberBBox?.height ?? 0) + rowPadding; }); rect From 80add648e6d82eb99508b7ffa2acbf52200905c9 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Thu, 13 Jul 2023 16:43:52 -0300 Subject: [PATCH 11/16] Refactor integration tests --- .../rendering/classDiagram.spec.js | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index cc4a7bfa9..3d91426e6 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -1,7 +1,7 @@ import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; describe('Class diagram', () => { - it('1: should render a simple class diagram', () => { + it('should render a simple class diagram', () => { imgSnapshotTest( ` classDiagram @@ -35,7 +35,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('2: should render a simple class diagrams with cardinality', () => { + it('should render a simple class diagrams with cardinality', () => { imgSnapshotTest( ` classDiagram @@ -64,7 +64,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('3: should render a simple class diagram with different visibilities', () => { + it('should render a simple class diagram with different visibilities', () => { imgSnapshotTest( ` classDiagram @@ -82,7 +82,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('4: should render a simple class diagram with comments', () => { + it('should render a simple class diagram with comments', () => { imgSnapshotTest( ` classDiagram @@ -112,7 +112,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('5: should render a simple class diagram with abstract method', () => { + it('should render a simple class diagram with abstract method', () => { imgSnapshotTest( ` classDiagram @@ -124,7 +124,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('6: should render a simple class diagram with static method', () => { + it('should render a simple class diagram with static method', () => { imgSnapshotTest( ` classDiagram @@ -136,7 +136,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('7: should render a simple class diagram with Generic class', () => { + it('should render a simple class diagram with Generic class', () => { imgSnapshotTest( ` classDiagram @@ -156,7 +156,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('8: should render a simple class diagram with Generic class and relations', () => { + it('should render a simple class diagram with Generic class and relations', () => { imgSnapshotTest( ` classDiagram @@ -177,7 +177,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('9: should render a simple class diagram with clickable link', () => { + it('should render a simple class diagram with clickable link', () => { imgSnapshotTest( ` classDiagram @@ -199,7 +199,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('10: should render a simple class diagram with clickable callback', () => { + it('should render a simple class diagram with clickable callback', () => { imgSnapshotTest( ` classDiagram @@ -221,7 +221,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('11: should render a simple class diagram with return type on method', () => { + it('should render a simple class diagram with return type on method', () => { imgSnapshotTest( ` classDiagram @@ -236,7 +236,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('12: should render a simple class diagram with generic types', () => { + it('should render a simple class diagram with generic types', () => { imgSnapshotTest( ` classDiagram @@ -252,7 +252,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('13: should render a simple class diagram with css classes applied', () => { + it('should render a simple class diagram with css classes applied', () => { imgSnapshotTest( ` classDiagram @@ -270,7 +270,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('14: should render a simple class diagram with css classes applied directly', () => { + it('should render a simple class diagram with css classes applied directly', () => { imgSnapshotTest( ` classDiagram @@ -286,7 +286,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('15: should render a simple class diagram with css classes applied to multiple classes', () => { + it('should render a simple class diagram with css classes applied to multiple classes', () => { imgSnapshotTest( ` classDiagram @@ -301,7 +301,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('16: should render multiple class diagrams', () => { + it('should render multiple class diagrams', () => { imgSnapshotTest( [ ` @@ -354,7 +354,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - // it('17: should render a class diagram when useMaxWidth is true (default)', () => { + // it('should render a class diagram when useMaxWidth is true (default)', () => { // renderGraph( // ` // classDiagram @@ -382,7 +382,7 @@ describe('Class diagram', () => { // }); // }); - // it('18: should render a class diagram when useMaxWidth is false', () => { + // it('should render a class diagram when useMaxWidth is false', () => { // renderGraph( // ` // classDiagram @@ -408,7 +408,7 @@ describe('Class diagram', () => { // }); // }); - it('19: should render a simple class diagram with notes', () => { + it('should render a simple class diagram with notes', () => { imgSnapshotTest( ` classDiagram @@ -424,7 +424,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('20: should render class diagram with newlines in title', () => { + it('should render class diagram with newlines in title', () => { imgSnapshotTest(` classDiagram Animal <|-- \`Du\nck\` @@ -442,7 +442,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('21: should render class diagram with many newlines in title', () => { + it('should render class diagram with many newlines in title', () => { imgSnapshotTest(` classDiagram class \`This\nTitle\nHas\nMany\nNewlines\` { @@ -456,7 +456,7 @@ describe('Class diagram', () => { `); }); - it('22: should render with newlines in title and an annotation', () => { + it('should render with newlines in title and an annotation', () => { imgSnapshotTest(` classDiagram class \`This\nTitle\nHas\nMany\nNewlines\` { @@ -467,11 +467,11 @@ describe('Class diagram', () => { -Many() #Methods() } - <<Interface>> \`This\nTitle\nHas\nMany\nNewlines\` + <<Interface>> \`This\nTitle\nHas\nMany\nNewlines\` `); }); - it('23: should handle newline title in namespace', () => { + it('should handle newline title in namespace', () => { imgSnapshotTest(` classDiagram namespace testingNamespace { From bb220b8b87bfd1043080b415696307972220e918 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Thu, 13 Jul 2023 16:53:29 -0300 Subject: [PATCH 12/16] Add test for string label --- .../integration/rendering/classDiagram.spec.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index 3d91426e6..21fe8c726 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -486,4 +486,19 @@ describe('Class diagram', () => { } `); }); + + it('should handle newline in string label', () => { + imgSnapshotTest(` + classDiagram + class A["This has\na newline!"] { + +String boop + -Int beep + #double bop + } + + class B["This title also has\na newline"] + B : +with(more) + B : -methods() + `); + }); }); From a0a25ed7561c7420324be8a9e187f0b2c4b3d711 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sun, 16 Jul 2023 00:20:48 +0100 Subject: [PATCH 13/16] chore: remove unused `devDependency` on coveralls This `devDependency` hasn't been used for a long time. --- package.json | 1 - packages/mermaid/package.json | 1 - pnpm-lock.yaml | 102 ---------------------------------- 3 files changed, 104 deletions(-) diff --git a/package.json b/package.json index b23c8bd98..9cbdcdb1e 100644 --- a/package.json +++ b/package.json @@ -84,7 +84,6 @@ "ajv": "^8.12.0", "concurrently": "^8.0.1", "cors": "^2.8.5", - "coveralls": "^3.1.1", "cypress": "^12.10.0", "cypress-image-snapshot": "^4.0.1", "esbuild": "^0.18.0", diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 481eef888..d04083baa 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -94,7 +94,6 @@ "ajv": "^8.11.2", "chokidar": "^3.5.3", "concurrently": "^8.0.1", - "coveralls": "^3.1.1", "cpy-cli": "^4.2.0", "cspell": "^6.31.1", "csstree-validator": "^3.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6d604e524..f258400a6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -80,9 +80,6 @@ importers: cors: specifier: ^2.8.5 version: 2.8.5 - coveralls: - specifier: ^3.1.1 - version: 3.1.1 cypress: specifier: ^12.10.0 version: 12.10.0 @@ -306,9 +303,6 @@ importers: concurrently: specifier: ^8.0.1 version: 8.0.1 - coveralls: - specifier: ^3.1.1 - version: 3.1.1 cpy-cli: specifier: ^4.2.0 version: 4.2.0 @@ -7163,18 +7157,6 @@ packages: path-type: 4.0.0 dev: true - /coveralls@3.1.1: - resolution: {integrity: sha512-+dxnG2NHncSD1NrqbSM3dn/lE57O6Qf/koe9+I7c+wzkqRmEvcp0kgJdxKInzYzkICKkFMZsX3Vct3++tsF9ww==} - engines: {node: '>=6'} - hasBin: true - dependencies: - js-yaml: 3.14.1 - lcov-parse: 1.0.0 - log-driver: 1.2.7 - minimist: 1.2.6 - request: 2.88.2 - dev: true - /cp-file@9.1.0: resolution: {integrity: sha512-3scnzFj/94eb7y4wyXRWwvzLFaQp87yyfTnChIjlfYrVqp5lVO3E2hIJMeQIltUT0K2ZAB3An1qXcBmwGyvuwA==} engines: {node: '>=10'} @@ -9658,20 +9640,6 @@ packages: uglify-js: 3.17.3 dev: true - /har-schema@2.0.0: - resolution: {integrity: sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==} - engines: {node: '>=4'} - dev: true - - /har-validator@5.1.5: - resolution: {integrity: sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==} - engines: {node: '>=6'} - deprecated: this library is no longer supported - dependencies: - ajv: 6.12.6 - har-schema: 2.0.0 - dev: true - /hard-rejection@2.1.0: resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==} engines: {node: '>=6'} @@ -9869,15 +9837,6 @@ packages: - debug dev: true - /http-signature@1.2.0: - resolution: {integrity: sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==} - engines: {node: '>=0.8', npm: '>=1.3.7'} - dependencies: - assert-plus: 1.0.0 - jsprim: 1.4.2 - sshpk: 1.17.0 - dev: true - /http-signature@1.3.6: resolution: {integrity: sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==} engines: {node: '>=0.10'} @@ -11175,16 +11134,6 @@ packages: engines: {node: '>=0.10.0'} dev: true - /jsprim@1.4.2: - resolution: {integrity: sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==} - engines: {node: '>=0.6.0'} - dependencies: - assert-plus: 1.0.0 - extsprintf: 1.3.0 - json-schema: 0.4.0 - verror: 1.10.0 - dev: true - /jsprim@2.0.2: resolution: {integrity: sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==} engines: {'0': node >=0.6.0} @@ -11246,11 +11195,6 @@ packages: engines: {node: '> 0.8'} dev: true - /lcov-parse@1.0.0: - resolution: {integrity: sha512-aprLII/vPzuQvYZnDRU78Fns9I2Ag3gi4Ipga/hxnVMCZC8DnR2nI7XBqrPoywGfxqIx/DgarGvDJZAD3YBTgQ==} - hasBin: true - dev: true - /leven@3.1.0: resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==} engines: {node: '>=6'} @@ -11455,11 +11399,6 @@ packages: /lodash@4.17.21: resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} - /log-driver@1.2.7: - resolution: {integrity: sha512-U7KCmLdqsGHBLeWqYlFA0V0Sl6P08EE1ZrmA9cxjUE0WVqT9qnyVDPz1kzpFEP0jdJuFnasWIfSd7fsaNXkpbg==} - engines: {node: '>=0.8.6'} - dev: true - /log-symbols@4.1.0: resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==} engines: {node: '>=10'} @@ -12153,10 +12092,6 @@ packages: kind-of: 6.0.3 dev: true - /minimist@1.2.6: - resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==} - dev: true - /minimist@1.2.8: resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} dev: true @@ -12437,10 +12372,6 @@ packages: - supports-color dev: true - /oauth-sign@0.9.0: - resolution: {integrity: sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==} - dev: true - /object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} @@ -13470,33 +13401,6 @@ packages: throttleit: 1.0.0 dev: true - /request@2.88.2: - resolution: {integrity: sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==} - engines: {node: '>= 6'} - deprecated: request has been deprecated, see https://github.com/request/request/issues/3142 - dependencies: - aws-sign2: 0.7.0 - aws4: 1.11.0 - caseless: 0.12.0 - combined-stream: 1.0.8 - extend: 3.0.2 - forever-agent: 0.6.1 - form-data: 2.3.3 - har-validator: 5.1.5 - http-signature: 1.2.0 - is-typedarray: 1.0.0 - isstream: 0.1.2 - json-stringify-safe: 5.0.1 - mime-types: 2.1.35 - oauth-sign: 0.9.0 - performance-now: 2.1.0 - qs: 6.5.3 - safe-buffer: 5.2.1 - tough-cookie: 2.5.0 - tunnel-agent: 0.6.0 - uuid: 3.4.0 - dev: true - /require-directory@2.1.1: resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} @@ -15280,12 +15184,6 @@ packages: engines: {node: '>= 0.4.0'} dev: true - /uuid@3.4.0: - resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==} - deprecated: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. - hasBin: true - dev: true - /uuid@8.3.2: resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==} hasBin: true From 855f6ef9bf6e870a7b834ddbc3721abfba82d9c1 Mon Sep 17 00:00:00 2001 From: Guilherme Gonzaga Date: Sun, 16 Jul 2023 23:16:37 +0000 Subject: [PATCH 14/16] docs: Fix checkbox syntax --- docs/syntax/c4c.md | 143 +++++++++--------------- packages/mermaid/src/docs/syntax/c4c.md | 108 +++++++++--------- 2 files changed, 108 insertions(+), 143 deletions(-) diff --git a/docs/syntax/c4c.md b/docs/syntax/c4c.md index dd5fa21b0..34b3b392a 100644 --- a/docs/syntax/c4c.md +++ b/docs/syntax/c4c.md @@ -123,10 +123,10 @@ The layout does not use a fully automated layout algorithm. The position of shap The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig. - Layout -- - Lay_U, Lay_Up -- - Lay_D, Lay_Down -- - Lay_L, Lay_Left -- - Lay_R, Lay_Right + - Lay_U, Lay_Up + - Lay_D, Lay_Down + - Lay_L, Lay_Left + - Lay_R, Lay_Right The following unfinished features are not supported in the short term. @@ -140,111 +140,70 @@ The following unfinished features are not supported in the short term. - [x] System Context -- - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link) - -- - [x] Person_Ext - -- - [x] System(alias, label, ?descr, ?sprite, ?tags, $link) - -- - [x] SystemDb - -- - [x] SystemQueue - -- - [x] System_Ext - -- - [x] SystemDb_Ext - -- - [x] SystemQueue_Ext - -- - [x] Boundary(alias, label, ?type, ?tags, $link) - -- - [x] Enterprise_Boundary(alias, label, ?tags, $link) - -- - [x] System_Boundary + - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link) + - [x] Person_Ext + - [x] System(alias, label, ?descr, ?sprite, ?tags, $link) + - [x] SystemDb + - [x] SystemQueue + - [x] System_Ext + - [x] SystemDb_Ext + - [x] SystemQueue_Ext + - [x] Boundary(alias, label, ?type, ?tags, $link) + - [x] Enterprise_Boundary(alias, label, ?tags, $link) + - [x] System_Boundary - [x] Container diagram -- - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) - -- - [x] ContainerDb - -- - [x] ContainerQueue - -- - [x] Container_Ext - -- - [x] ContainerDb_Ext - -- - [x] ContainerQueue_Ext - -- - [x] Container_Boundary(alias, label, ?tags, $link) + - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) + - [x] ContainerDb + - [x] ContainerQueue + - [x] Container_Ext + - [x] ContainerDb_Ext + - [x] ContainerQueue_Ext + - [x] Container_Boundary(alias, label, ?tags, $link) - [x] Component diagram -- - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) - -- - [x] ComponentDb - -- - [x] ComponentQueue - -- - [x] Component_Ext - -- - [x] ComponentDb_Ext - -- - [x] ComponentQueue_Ext + - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) + - [x] ComponentDb + - [x] ComponentQueue + - [x] Component_Ext + - [x] ComponentDb_Ext + - [x] ComponentQueue_Ext - [x] Dynamic diagram -- - [x] RelIndex(index, from, to, label, ?tags, $link) + - [x] RelIndex(index, from, to, label, ?tags, $link) - [x] Deployment diagram -- - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link) - -- - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node() - -- - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node() - -- - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node() + - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link) + - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node() + - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node() + - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node() - [x] Relationship Types -- - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link) - -- - [x] BiRel (bidirectional relationship) - -- - [x] Rel_U, Rel_Up - -- - [x] Rel_D, Rel_Down - -- - [x] Rel_L, Rel_Left - -- - [x] Rel_R, Rel_Right - -- - [x] Rel_Back - -- - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written. + - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link) + - [x] BiRel (bidirectional relationship) + - [x] Rel_U, Rel_Up + - [x] Rel_D, Rel_Down + - [x] Rel_L, Rel_Left + - [x] Rel_R, Rel_Right + - [x] Rel_Back + - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written. - [ ] Custom tags/stereotypes support and skin param updates - -- - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend. - -- - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend. - -- - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry. - -- - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text. - -- - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument. - -- - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument. - -- - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument. - -- - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument. - -- - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument. - -- - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2). + - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend. + - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend. + - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry. + - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text. + - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument. + - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument. + - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument. + - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument. + - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument. + - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2). There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol. diff --git a/packages/mermaid/src/docs/syntax/c4c.md b/packages/mermaid/src/docs/syntax/c4c.md index 78528f7b9..0b7b6e87d 100644 --- a/packages/mermaid/src/docs/syntax/c4c.md +++ b/packages/mermaid/src/docs/syntax/c4c.md @@ -70,10 +70,10 @@ The layout does not use a fully automated layout algorithm. The position of shap The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig. - Layout -- - Lay_U, Lay_Up -- - Lay_D, Lay_Down -- - Lay_L, Lay_Left -- - Lay_R, Lay_Right + - Lay_U, Lay_Up + - Lay_D, Lay_Down + - Lay_L, Lay_Left + - Lay_R, Lay_Right The following unfinished features are not supported in the short term. @@ -83,65 +83,71 @@ The following unfinished features are not supported in the short term. - [ ] Legend - [x] System Context -- - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link) -- - [x] Person_Ext -- - [x] System(alias, label, ?descr, ?sprite, ?tags, $link) -- - [x] SystemDb -- - [x] SystemQueue -- - [x] System_Ext -- - [x] SystemDb_Ext -- - [x] SystemQueue_Ext -- - [x] Boundary(alias, label, ?type, ?tags, $link) -- - [x] Enterprise_Boundary(alias, label, ?tags, $link) -- - [x] System_Boundary + + - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link) + - [x] Person_Ext + - [x] System(alias, label, ?descr, ?sprite, ?tags, $link) + - [x] SystemDb + - [x] SystemQueue + - [x] System_Ext + - [x] SystemDb_Ext + - [x] SystemQueue_Ext + - [x] Boundary(alias, label, ?type, ?tags, $link) + - [x] Enterprise_Boundary(alias, label, ?tags, $link) + - [x] System_Boundary - [x] Container diagram -- - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) -- - [x] ContainerDb -- - [x] ContainerQueue -- - [x] Container_Ext -- - [x] ContainerDb_Ext -- - [x] ContainerQueue_Ext -- - [x] Container_Boundary(alias, label, ?tags, $link) + + - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) + - [x] ContainerDb + - [x] ContainerQueue + - [x] Container_Ext + - [x] ContainerDb_Ext + - [x] ContainerQueue_Ext + - [x] Container_Boundary(alias, label, ?tags, $link) - [x] Component diagram -- - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) -- - [x] ComponentDb -- - [x] ComponentQueue -- - [x] Component_Ext -- - [x] ComponentDb_Ext -- - [x] ComponentQueue_Ext + + - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) + - [x] ComponentDb + - [x] ComponentQueue + - [x] Component_Ext + - [x] ComponentDb_Ext + - [x] ComponentQueue_Ext - [x] Dynamic diagram -- - [x] RelIndex(index, from, to, label, ?tags, $link) + + - [x] RelIndex(index, from, to, label, ?tags, $link) - [x] Deployment diagram -- - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link) -- - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node() -- - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node() -- - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node() + + - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link) + - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node() + - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node() + - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node() - [x] Relationship Types -- - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link) -- - [x] BiRel (bidirectional relationship) -- - [x] Rel_U, Rel_Up -- - [x] Rel_D, Rel_Down -- - [x] Rel_L, Rel_Left -- - [x] Rel_R, Rel_Right -- - [x] Rel_Back -- - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written. + + - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link) + - [x] BiRel (bidirectional relationship) + - [x] Rel_U, Rel_Up + - [x] Rel_D, Rel_Down + - [x] Rel_L, Rel_Left + - [x] Rel_R, Rel_Right + - [x] Rel_Back + - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written. - [ ] Custom tags/stereotypes support and skin param updates -- - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend. -- - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend. -- - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry. -- - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text. -- - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument. -- - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument. -- - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument. -- - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument. -- - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument. -- - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2). + - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend. + - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend. + - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry. + - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text. + - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument. + - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument. + - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument. + - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument. + - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument. + - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2). There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol. From b5bcc3b9925d914e2987987a0b9981d64f0b4b6d Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 17 Jul 2023 15:11:14 +0530 Subject: [PATCH 15/16] Revert "Refactor integration tests" This reverts commit 80add648e6d82eb99508b7ffa2acbf52200905c9. --- .../rendering/classDiagram.spec.js | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index 21fe8c726..21117e8a1 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -1,7 +1,7 @@ import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; describe('Class diagram', () => { - it('should render a simple class diagram', () => { + it('1: should render a simple class diagram', () => { imgSnapshotTest( ` classDiagram @@ -35,7 +35,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagrams with cardinality', () => { + it('2: should render a simple class diagrams with cardinality', () => { imgSnapshotTest( ` classDiagram @@ -64,7 +64,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with different visibilities', () => { + it('3: should render a simple class diagram with different visibilities', () => { imgSnapshotTest( ` classDiagram @@ -82,7 +82,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with comments', () => { + it('4: should render a simple class diagram with comments', () => { imgSnapshotTest( ` classDiagram @@ -112,7 +112,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with abstract method', () => { + it('5: should render a simple class diagram with abstract method', () => { imgSnapshotTest( ` classDiagram @@ -124,7 +124,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with static method', () => { + it('6: should render a simple class diagram with static method', () => { imgSnapshotTest( ` classDiagram @@ -136,7 +136,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with Generic class', () => { + it('7: should render a simple class diagram with Generic class', () => { imgSnapshotTest( ` classDiagram @@ -156,7 +156,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with Generic class and relations', () => { + it('8: should render a simple class diagram with Generic class and relations', () => { imgSnapshotTest( ` classDiagram @@ -177,7 +177,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with clickable link', () => { + it('9: should render a simple class diagram with clickable link', () => { imgSnapshotTest( ` classDiagram @@ -199,7 +199,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with clickable callback', () => { + it('10: should render a simple class diagram with clickable callback', () => { imgSnapshotTest( ` classDiagram @@ -221,7 +221,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with return type on method', () => { + it('11: should render a simple class diagram with return type on method', () => { imgSnapshotTest( ` classDiagram @@ -236,7 +236,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with generic types', () => { + it('12: should render a simple class diagram with generic types', () => { imgSnapshotTest( ` classDiagram @@ -252,7 +252,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with css classes applied', () => { + it('13: should render a simple class diagram with css classes applied', () => { imgSnapshotTest( ` classDiagram @@ -270,7 +270,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with css classes applied directly', () => { + it('14: should render a simple class diagram with css classes applied directly', () => { imgSnapshotTest( ` classDiagram @@ -286,7 +286,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with css classes applied to multiple classes', () => { + it('15: should render a simple class diagram with css classes applied to multiple classes', () => { imgSnapshotTest( ` classDiagram @@ -301,7 +301,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render multiple class diagrams', () => { + it('16: should render multiple class diagrams', () => { imgSnapshotTest( [ ` @@ -354,7 +354,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - // it('should render a class diagram when useMaxWidth is true (default)', () => { + // it('17: should render a class diagram when useMaxWidth is true (default)', () => { // renderGraph( // ` // classDiagram @@ -382,7 +382,7 @@ describe('Class diagram', () => { // }); // }); - // it('should render a class diagram when useMaxWidth is false', () => { + // it('18: should render a class diagram when useMaxWidth is false', () => { // renderGraph( // ` // classDiagram @@ -408,7 +408,7 @@ describe('Class diagram', () => { // }); // }); - it('should render a simple class diagram with notes', () => { + it('19: should render a simple class diagram with notes', () => { imgSnapshotTest( ` classDiagram @@ -424,7 +424,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render class diagram with newlines in title', () => { + it('20: should render class diagram with newlines in title', () => { imgSnapshotTest(` classDiagram Animal <|-- \`Du\nck\` @@ -442,7 +442,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render class diagram with many newlines in title', () => { + it('21: should render class diagram with many newlines in title', () => { imgSnapshotTest(` classDiagram class \`This\nTitle\nHas\nMany\nNewlines\` { @@ -456,7 +456,7 @@ describe('Class diagram', () => { `); }); - it('should render with newlines in title and an annotation', () => { + it('22: should render with newlines in title and an annotation', () => { imgSnapshotTest(` classDiagram class \`This\nTitle\nHas\nMany\nNewlines\` { @@ -467,11 +467,11 @@ describe('Class diagram', () => { -Many() #Methods() } - <<Interface>> \`This\nTitle\nHas\nMany\nNewlines\` + <<Interface>> \`This\nTitle\nHas\nMany\nNewlines\` `); }); - it('should handle newline title in namespace', () => { + it('23: should handle newline title in namespace', () => { imgSnapshotTest(` classDiagram namespace testingNamespace { From d3006f6298be294ad58f6a36a2b875f897b0e434 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 17 Jul 2023 15:16:05 +0530 Subject: [PATCH 16/16] chore: Remove numbers from tests --- cypress/integration/rendering/classDiagram.spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index 21117e8a1..dd79303b8 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -424,7 +424,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('20: should render class diagram with newlines in title', () => { + it('should render class diagram with newlines in title', () => { imgSnapshotTest(` classDiagram Animal <|-- \`Du\nck\` @@ -442,7 +442,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('21: should render class diagram with many newlines in title', () => { + it('should render class diagram with many newlines in title', () => { imgSnapshotTest(` classDiagram class \`This\nTitle\nHas\nMany\nNewlines\` { @@ -456,7 +456,7 @@ describe('Class diagram', () => { `); }); - it('22: should render with newlines in title and an annotation', () => { + it('should render with newlines in title and an annotation', () => { imgSnapshotTest(` classDiagram class \`This\nTitle\nHas\nMany\nNewlines\` { @@ -471,7 +471,7 @@ describe('Class diagram', () => { `); }); - it('23: should handle newline title in namespace', () => { + it('should handle newline title in namespace', () => { imgSnapshotTest(` classDiagram namespace testingNamespace {