From 5cfa919672ebeaaf5b45bc21a32d7cf49dd8cba2 Mon Sep 17 00:00:00 2001
From: Alois Klink
/gi, '
');
@@ -288,8 +289,7 @@ const initThrowsErrorsAsync = async function (
txt = element.innerHTML;
// transforms the html to pure text
- txt = utils
- .entityDecode(txt)
+ txt = dedent(utils.entityDecode(txt)) // removes indentation, required for YAML parsing
.trim()
.replace(/
/gi, '
');
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ebb71f65e..cc91b753c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -211,6 +211,9 @@ importers:
stylis:
specifier: ^4.1.2
version: 4.1.2
+ ts-dedent:
+ specifier: ^2.2.0
+ version: 2.2.0
uuid:
specifier: ^9.0.0
version: 9.0.0
@@ -3634,7 +3637,7 @@ packages:
/axios/0.21.4_debug@4.3.2:
resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
dependencies:
- follow-redirects: 1.15.2_debug@4.3.2
+ follow-redirects: 1.15.2
transitivePeerDependencies:
- debug
dev: true
@@ -6309,7 +6312,7 @@ packages:
resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==}
dev: true
- /follow-redirects/1.15.2_debug@4.3.2:
+ /follow-redirects/1.15.2:
resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
engines: {node: '>=4.0'}
peerDependencies:
@@ -6317,8 +6320,6 @@ packages:
peerDependenciesMeta:
debug:
optional: true
- dependencies:
- debug: 4.3.2
dev: true
/foreground-child/2.0.0:
@@ -6911,7 +6912,7 @@ packages:
engines: {node: '>=8.0.0'}
dependencies:
eventemitter3: 4.0.7
- follow-redirects: 1.15.2_debug@4.3.2
+ follow-redirects: 1.15.2
requires-port: 1.0.0
transitivePeerDependencies:
- debug
@@ -10613,6 +10614,11 @@ packages:
resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==}
dev: true
+ /ts-dedent/2.2.0:
+ resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
+ engines: {node: '>=6.10'}
+ dev: false
+
/ts-node/10.9.1_cbe7ovvae6zqfnmtgctpgpys54:
resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
hasBin: true
From 4cc3b17d362b3c8edff9ac0ab7d7248a309fa988 Mon Sep 17 00:00:00 2001
From: Alois Klink Class diagram demos
----
-title: Demo Class Diagram
----
- classDiagram
+ ---
+ title: Demo Class Diagram
+ ---
+ classDiagram
accTitle: Demo Class Diagram
accDescr: This class diagram show the abstract Animal class, and 3 classes that inherit from it: Duck, Fish, and Zebra.
diff --git a/demos/er.html b/demos/er.html
index 06fbf020e..b5d1966f7 100644
--- a/demos/er.html
+++ b/demos/er.html
@@ -19,43 +19,42 @@
+ ---
+ title: This is a title
+ ---
+ erDiagram
+ %% title This is a title
+ %% accDescription Test a description
----
-title: This is a title
----
-erDiagram
- %% title This is a title
- %% accDescription Test a description
+ "Person . CUSTOMER"||--o{ ORDER : places
- "Person . CUSTOMER"||--o{ ORDER : places
+ ORDER ||--|{ "€£LINE_ITEM ¥" : contains
- ORDER ||--|{ "€£LINE_ITEM ¥" : contains
+ "Person . CUSTOMER" }|..|{ "Address//StreetAddress::[DELIVERY ADDRESS]" : uses
- "Person . CUSTOMER" }|..|{ "Address//StreetAddress::[DELIVERY ADDRESS]" : uses
+ "Address//StreetAddress::[DELIVERY ADDRESS]" {
+ int customerID FK
+ string line1 "this is the first address line comment"
+ string line2
+ string city
+ string region
+ string state
+ string postal_code
+ string country
+ }
- "Address//StreetAddress::[DELIVERY ADDRESS]" {
- int customerID FK
- string line1 "this is the first address line comment"
- string line2
- string city
- string region
- string state
- string postal_code
- string country
- }
+ "a_~`!@#$^&*()-_=+[]{}|/;:'.?¡⁄™€£‹¢›∞fi§‡•°ª·º‚≠±œŒ∑„®†ˇ¥Á¨ˆˆØπ∏“«»åÅßÍ∂΃ϩ˙Ó∆Ô˚¬Ò…ÚæÆΩ¸≈π˛çÇ√◊∫ı˜µÂ≤¯≥˘÷¿" {
+ string name "this is an entity with an absurd name just to show characters that are now acceptable as long as the name is in double quotes"
+ }
- "a_~`!@#$^&*()-_=+[]{}|/;:'.?¡⁄™€£‹¢›∞fi§‡•°ª·º‚≠±œŒ∑„®†ˇ¥Á¨ˆˆØπ∏“«»åÅßÍ∂΃ϩ˙Ó∆Ô˚¬Ò…ÚæÆΩ¸≈π˛çÇ√◊∫ı˜µÂ≤¯≥˘÷¿" {
- string name "this is an entity with an absurd name just to show characters that are now acceptable as long as the name is in double quotes"
- }
-
- "€£LINE_ITEM ¥" {
- int orderID FK
- int currencyId FK
- number price
- number quantity
- number adjustment
- number final_price
- }
+ "€£LINE_ITEM ¥" {
+ int orderID FK
+ int currencyId FK
+ number price
+ number quantity
+ number adjustment
+ number final_price
+ }
diff --git a/demos/flowchart.html b/demos/flowchart.html
index 7251e586e..60e6160c3 100644
--- a/demos/flowchart.html
+++ b/demos/flowchart.html
@@ -17,9 +17,9 @@
Sample 1
graph
----
-title: This is a complicated flow
----
+ ---
+ title: This is a complicated flow
+ ---
graph LR
accTitle: This is a complicated flow
accDescr: This is the descriptoin for the complicated flow.
@@ -224,9 +224,9 @@ title: This is a complicated flow
Sample 2
graph
----
-title: What to buy
----
+ ---
+ title: What to buy
+ ---
graph TD
accTitle: What to buy
accDescr: Options of what to buy with Christmas money
diff --git a/demos/git.html b/demos/git.html
index 99c53d7d0..5e683152a 100644
--- a/demos/git.html
+++ b/demos/git.html
@@ -16,9 +16,9 @@
Git diagram demo
----
-title: Simple Git diagram
----
+ ---
+ title: Simple Git diagram
+ ---
gitGraph:
options
{
diff --git a/demos/journey.html b/demos/journey.html
index dadcfb13c..96c89a215 100644
--- a/demos/journey.html
+++ b/demos/journey.html
@@ -16,9 +16,9 @@
Journey diagram demo
----
-title: My working day
----
+ ---
+ title: My working day
+ ---
journey
accTitle: Very simple journey demo
accDescr: 2 main sections: work and home, each with just a few tasks
diff --git a/demos/state.html b/demos/state.html
index 3d070f379..9251e837c 100644
--- a/demos/state.html
+++ b/demos/state.html
@@ -17,11 +17,11 @@
State diagram demos
Very simple showing change from State1 to State2
----
-title: Very simple diagram
----
- stateDiagram
- accTitle: This is the accessible title
+ ---
+ title: Very simple diagram
+ ---
+ stateDiagram
+ accTitle: This is the accessible title
accDescr:This is an accessible description
State1 --> State2
@@ -47,13 +47,13 @@ title: Very simple diagram
---- -title: Very simple diagram ---- - stateDiagram + --- + title: Very simple diagram + --- + stateDiagram direction TB - accTitle: This is the accessible title + accTitle: This is the accessible title accDescr: This is an accessible description classDef notMoving fill:white From accba3f408d1f1a9a68a05fff9899e2d51627fe7 Mon Sep 17 00:00:00 2001 From: Alois KlinkDate: Thu, 1 Dec 2022 22:43:03 +0000 Subject: [PATCH 03/81] chore: improve errors for bad YAML frontmatter Adds a custom error message for any mermaid diagram that starts with a `---`. Normally, these are expected to be part of a YAML front-matter block, but indentation issues or a missing closing `---` may cause these to be not parsed correctly. --- .../src/diagram-api/diagram-orchestration.ts | 27 +++++++++++++++++++ packages/mermaid/src/mermaidAPI.spec.ts | 13 +++++++++ packages/mermaid/src/utils.spec.js | 4 +-- 3 files changed, 42 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index a26edb303..6c7ab6907 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -125,6 +125,33 @@ export const addDiagrams = () => { }, (text) => text.toLowerCase().trim() === 'error' ); + registerDiagram( + '---', + // --- diagram type may appear if YAML front-matter is not parsed correctly + { + db: { + clear: () => { + // Quite ok, clear needs to be there for --- to work as a regular diagram + }, + }, + styles: errorStyles, // should never be used + renderer: errorRenderer, // should never be used + parser: { + parser: { yy: {} }, + parse: () => { + throw new Error( + 'Diagrams beginning with --- are not valid. ' + + 'If you were trying to use a YAML front-matter, please ensure that ' + + "you've correctly opened and closed the YAML front-matter with unindented `---` blocks" + ); + }, + }, + init: () => null, // no op + }, + (text) => { + return text.toLowerCase().trimStart().startsWith('---'); + } + ); registerDiagram( 'c4', diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts index 55d46ae7c..092661dc6 100644 --- a/packages/mermaid/src/mermaidAPI.spec.ts +++ b/packages/mermaid/src/mermaidAPI.spec.ts @@ -629,6 +629,19 @@ describe('mermaidAPI', function () { expect(mermaid.parseError).toEqual(undefined); expect(() => mermaidAPI.parse('this is not a mermaid diagram definition')).toThrow(); }); + it('throws for a nicer error for a invalid definition starting with `---`', function () { + expect(mermaid.parseError).toEqual(undefined); + expect(() => + mermaidAPI.parse(` + --- + title: a malformed YAML front-matter + `) + ).toThrow( + 'Diagrams beginning with --- are not valid. ' + + 'If you were trying to use a YAML front-matter, please ensure that ' + + "you've correctly opened and closed the YAML front-matter with unindented `---` blocks" + ); + }); it('does not throw for a valid definition', function () { expect(() => mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).not.toThrow(); }); diff --git a/packages/mermaid/src/utils.spec.js b/packages/mermaid/src/utils.spec.js index 54262f10e..bdf94d992 100644 --- a/packages/mermaid/src/utils.spec.js +++ b/packages/mermaid/src/utils.spec.js @@ -238,9 +238,9 @@ Alice->Bob: hi`; const type = detectType(str); expect(type).toBe('gitGraph'); }); - it('should not allow frontmatter with leading spaces', function () { + it('should handle malformed frontmatter (with leading spaces) with `---` error graphtype', function () { const str = ' ---\ntitle: foo\n---\n gitGraph TB:\nbfs1:queue'; - expect(() => detectType(str)).toThrow('No diagram type detected for text'); + expect(detectType(str)).toBe('---'); }); }); describe('when finding substring in array ', function () { From 49ca2e358897ab366ac008b89603025fcf188aa0 Mon Sep 17 00:00:00 2001 From: BD103 <59022059+BD103@users.noreply.github.com> Date: Mon, 5 Dec 2022 17:41:30 -0500 Subject: [PATCH 04/81] feat: add links to theme listing --- packages/mermaid/src/docs/config/theming.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md index 78f3546cc..b9c5d0850 100644 --- a/packages/mermaid/src/docs/config/theming.md +++ b/packages/mermaid/src/docs/config/theming.md @@ -10,15 +10,15 @@ Themes follow and build upon the Levels of Configuration, and employ `directives The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls. -1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes. +1. [**base**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-base.js) - Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes. -2. **forest**- A theme full of light greens that is easy on the eyes. +2. [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - A theme full of light greens that is easy on the eyes. -3. **dark**- A theme that would go well with other dark-colored elements. +3. [**dark**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-dark.js) - A theme that would go well with other dark-colored elements. -4. **default**- The default theme for all diagrams. +4. [**default**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-default.js) - The default theme for all diagrams. -5. **neutral**- The theme to be used for black and white printing. +5. [**neutral**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-neutral.js) - The theme to be used for black and white printing. ## Site-wide Themes From 4dadf8a72da15f2236c26989c1a9f55b917f8025 Mon Sep 17 00:00:00 2001 From: Maho Pacheco Date: Tue, 6 Dec 2022 10:38:21 -0800 Subject: [PATCH 05/81] Adding support for parentheses --- cypress/integration/rendering/erDiagram.spec.js | 14 ++++++++++++++ docs/syntax/entityRelationshipDiagram.md | 8 +++++--- .../mermaid/src/diagrams/er/parser/erDiagram.jison | 2 +- .../src/docs/syntax/entityRelationshipDiagram.md | 5 +++-- 4 files changed, 23 insertions(+), 6 deletions(-) diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js index 8e8946170..c72df49b6 100644 --- a/cypress/integration/rendering/erDiagram.spec.js +++ b/cypress/integration/rendering/erDiagram.spec.js @@ -182,6 +182,20 @@ describe('Entity Relationship Diagram', () => { cy.get('svg'); }); + it('should render entities with length in attributes type', () => { + renderGraph( + ` + erDiagram + CLUSTER { + varchar(99) name + string(255) description + } + `, + { logLevel: 1 } + ); + cy.get('svg'); + }); + it('should render entities and attributes with big and small entity names', () => { renderGraph( ` diff --git a/docs/syntax/entityRelationshipDiagram.md b/docs/syntax/entityRelationshipDiagram.md index 9b938bc36..4f33b1edc 100644 --- a/docs/syntax/entityRelationshipDiagram.md +++ b/docs/syntax/entityRelationshipDiagram.md @@ -230,7 +230,7 @@ erDiagram } ``` -The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types. +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. #### Attribute Keys and Comments @@ -244,11 +244,12 @@ erDiagram string registrationNumber string make string model + string[] parts } PERSON ||--o{ NAMED-DRIVER : is PERSON { string driversLicense PK "The license #" - string firstName + string(99) firstName "Only 99 characters are allowed" string lastName int age } @@ -263,11 +264,12 @@ erDiagram string registrationNumber string make string model + string[] parts } PERSON ||--o{ NAMED-DRIVER : is PERSON { string driversLicense PK "The license #" - string firstName + string(99) firstName "Only 99 characters are allowed" string lastName int age } diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison index f0411fd72..bd8dc20f0 100644 --- a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison +++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison @@ -31,7 +31,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili \s+ /* skip whitespace in block */ \b((?:PK)|(?:FK))\b return 'ATTRIBUTE_KEY' (.*?)[~](.*?)*[~] return 'ATTRIBUTE_WORD'; - [A-Za-z][A-Za-z0-9\-_\[\]]* return 'ATTRIBUTE_WORD' + [A-Za-z][A-Za-z0-9\-_\[\]\(\)]* return 'ATTRIBUTE_WORD' \"[^"]*\" return 'COMMENT'; [\n]+ /* nothing */ "}" { this.popState(); return 'BLOCK_STOP'; } diff --git a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md index c666877c5..d83fd4b09 100644 --- a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md +++ b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md @@ -160,7 +160,7 @@ erDiagram } ``` -The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types. +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. #### Attribute Keys and Comments @@ -174,11 +174,12 @@ erDiagram string registrationNumber string make string model + string[] parts } PERSON ||--o{ NAMED-DRIVER : is PERSON { string driversLicense PK "The license #" - string firstName + string(99) firstName "Only 99 characters are allowed" string lastName int age } From 9b27396344648d11c4f459edeae6fd4a3440642b Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 8 Dec 2022 13:21:56 +0100 Subject: [PATCH 06/81] Small fix --- cypress/integration/other/ghsa.spec.js | 6 + cypress/platform/ghsa1.html | 2 +- cypress/platform/ghsa3.html | 100 +++++++ cypress/platform/knsv3.html | 276 ++++-------------- .../mermaid/src/diagrams/common/common.ts | 4 +- packages/mermaid/src/mermaidAPI.ts | 4 +- 6 files changed, 173 insertions(+), 219 deletions(-) create mode 100644 cypress/platform/ghsa3.html diff --git a/cypress/integration/other/ghsa.spec.js b/cypress/integration/other/ghsa.spec.js index 5b168a8a8..4fadc7855 100644 --- a/cypress/integration/other/ghsa.spec.js +++ b/cypress/integration/other/ghsa.spec.js @@ -7,4 +7,10 @@ describe('CSS injections', () => { flowchart: { htmlLabels: false }, }); }); + it('should not allow adding styletags affecting the page', () => { + urlSnapshotTest('http://localhost:9000/ghsa3.html', { + logLevel: 1, + flowchart: { htmlLabels: false }, + }); + }); }); diff --git a/cypress/platform/ghsa1.html b/cypress/platform/ghsa1.html index c54358862..890a8e0dd 100644 --- a/cypress/platform/ghsa1.html +++ b/cypress/platform/ghsa1.html @@ -4,7 +4,7 @@ -diff --git a/cypress/platform/ghsa3.html b/cypress/platform/ghsa3.html new file mode 100644 index 000000000..63dfa0d01 --- /dev/null +++ b/cypress/platform/ghsa3.html @@ -0,0 +1,100 @@ + + + + + + + + + +This element does not belong to the SVG but we can style it
+Background should be yellow!!!
PAGE SHOULD NOT BE RED
++ + ++ + + + diff --git a/cypress/platform/knsv3.html b/cypress/platform/knsv3.html index 0c1afadb7..e5ca66c87 100644 --- a/cypress/platform/knsv3.html +++ b/cypress/platform/knsv3.html @@ -6,6 +6,10 @@ rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> + -info below--- - --> + + + + + diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index 194a9a4c0..628908aab 100644 --- a/packages/mermaid/src/diagrams/common/common.ts +++ b/packages/mermaid/src/diagrams/common/common.ts @@ -47,7 +47,9 @@ export const sanitizeText = (text: string, config: MermaidConfig): string => { if (config.dompurifyConfig) { text = DOMPurify.sanitize(sanitizeMore(text, config), config.dompurifyConfig).toString(); } else { - text = DOMPurify.sanitize(sanitizeMore(text, config)); + text = DOMPurify.sanitize(sanitizeMore(text, config), { + FORBID_TAGS: ['style'], + }).toString(); } return text; }; diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index a77aed96d..193f5a9cc 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -536,7 +536,7 @@ const render = function ( if (isSandboxed) { const svgEl = root.select(enclosingDivID_selector + ' svg').node(); svgCode = putIntoIFrame(svgCode, svgEl); - } else if (isLooseSecurityLevel) { + } else if (!isLooseSecurityLevel) { // Sanitize the svgCode using DOMPurify svgCode = DOMPurify.sanitize(svgCode, { ADD_TAGS: DOMPURE_TAGS, @@ -738,7 +738,7 @@ const renderAsync = async function ( if (isSandboxed) { const svgEl = root.select(enclosingDivID_selector + ' svg').node(); svgCode = putIntoIFrame(svgCode, svgEl); - } else if (isLooseSecurityLevel) { + } else if (!isLooseSecurityLevel) { // Sanitize the svgCode using DOMPurify svgCode = DOMPurify.sanitize(svgCode, { ADD_TAGS: DOMPURE_TAGS, From c6fce2431b81b72a8915f224aa038300e72df1ac Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist-flowchart TB;subgraph "number as labels";1;end; ---flowchart TB;a[APA]; ---graph TD - work --> sleep - sleep --> work - eat --> sleep - work --> eat ---flowchart TD - work --> sleep - sleep --> work - eat --> sleep - work --> eat --- graph TB - A - B - subgraph foo[Foo SubGraph] - C - D - end - subgraph bar[Bar SubGraph] - E - F - end - G - - A-->B - B-->C - C-->D - B-->D - D-->E - E-->A - E-->F - F-->D - F-->G - B-->G - G-->D - - style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred - style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue --- graph TB -%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% - A - B - subgraph foo[Foo SubGraph] - C - D - end - subgraph bar[Bar SubGraph] - E - F - end - G - - A-->B - B-->C - C-->D - B-->D - D-->E - E-->A - E-->F - F-->D - F-->G - B-->G - G-->D - - style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred - style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue --+Security check+graph TD - A[Christmas] ==> D - A[Christmas] -->|Get money| B(Go shopping) - A[Christmas] ==> C --- graph TD -%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% - A[Christmas] ==> D - A[Christmas] -->|Get money| B(Go shopping) - A[Christmas] ==> C --- flowchart TD - A[Christmas] ==> D - A[Christmas] -->|Get money| B(Go shopping) - A[Christmas] ==> C --- flowchart TD -%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% - A[Christmas] ==> D - A[Christmas] -->|Get money| B(Go shopping) - A[Christmas] ==> C ---flowchart LR - a["Haiya"]---->b ---flowchart LR -%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% - a["Haiya"]---->b --- flowchart TD - A[Christmas] ==> D - A[Christmas] -->|Get money| B(Go shopping) - A[Christmas] ==> C --- flowchart TD -%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% - A[Christmas] ==> D - A[Christmas] -->|Get money| B(Go shopping) - A[Christmas] ==> C --- %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% -classDiagram-v2 - Class01 <|-- AveryLongClass : Cool - <<interface>> Class01 - Class03 *-- Class04 - Class05 o-- Class06 - Class07 .. Class08 - Class09 --> C2 : Where am i? - Class09 --* C3 - Class09 --|> Class07 - Class12 <|.. Class08 - Class11 ..>Class12 - Class07 : equals() - Class07 : Object[] elementData - Class01 : size() - Class01 : int chimp - Class01 : int gorilla - Class01 : -int privateChimp - Class01 : +int publicGorilla - Class01 : #int protectedMarmoset - Class08 <--> C2: Cool label - class Class10 { - <<service>> - int id - test() - } ---classDiagram-v2 - Class01 <|-- AveryLongClass : Cool - <<interface>> Class01 - Class03 *-- Class04 - Class05 o-- Class06 - Class07 .. Class08 - Class09 --> C2 : Where am i? - Class09 --* C3 - Class09 --|> Class07 - Class12 <|.. Class08 - Class11 ..>Class12 - Class07 : equals() - Class07 : Object[] elementData - Class01 : size() - Class01 : int chimp - Class01 : int gorilla - Class01 : -int privateChimp - Class01 : +int publicGorilla - Class01 : #int protectedMarmoset - Class08 <--> C2: Cool label - class Class10 { - <<service>> - int id - test() - } ---flowchart BT - subgraph S1 - sub1 -->sub2 - end - subgraph S2 - sub4 - end - S1 --> S2 - sub1 --> sub4 --Date: Thu, 8 Dec 2022 14:14:31 +0100 Subject: [PATCH 07/81] Fixes for tests --- cypress/integration/rendering/classDiagram-v2.spec.js | 3 +-- cypress/integration/rendering/classDiagram.spec.js | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js index f97458857..9536a074d 100644 --- a/cypress/integration/rendering/classDiagram-v2.spec.js +++ b/cypress/integration/rendering/classDiagram-v2.spec.js @@ -485,8 +485,7 @@ describe('Class diagram V2', () => { classDiagram-v2 note "I love this diagram!\nDo you love it?" class Class10 { - < > - int id + int id size() } note for Class10 "Cool class\nI said it's very cool class!" diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index 16601652d..e21be67ec 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -414,7 +414,6 @@ describe('Class diagram', () => { classDiagram note "I love this diagram!\nDo you love it?" class Class10 { - < > int id size() } From 98fc8664443f12e5bed5fe6209fa67e073619bc5 Mon Sep 17 00:00:00 2001 From: Per Brolin Date: Thu, 8 Dec 2022 14:16:25 +0100 Subject: [PATCH 08/81] Minor change of test code --- cypress/integration/rendering/current.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js index 56b5f774b..033752c66 100644 --- a/cypress/integration/rendering/current.spec.js +++ b/cypress/integration/rendering/current.spec.js @@ -1,6 +1,6 @@ import { imgSnapshotTest } from '../../helpers/util'; -describe('State diagram', () => { +describe('Current diagram', () => { it('should render a state with states in it', () => { imgSnapshotTest( ` From 7656916cef292828785b9f104df93ca1e2fe5211 Mon Sep 17 00:00:00 2001 From: Per Brolin Date: Thu, 8 Dec 2022 15:03:51 +0100 Subject: [PATCH 09/81] Updated package number to 9.3.0-rc1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1faa1628d..c027fa71f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "mermaid-monorepo", "private": true, - "version": "9.2.2", + "version": "9.3.0-rc1", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "packageManager": "pnpm@7.17.1", From 23a44952ace8d7e2779769d124c8e9d1a96945d0 Mon Sep 17 00:00:00 2001 From: Per Brolin Date: Thu, 8 Dec 2022 15:09:49 +0100 Subject: [PATCH 10/81] Updated package number --- packages/mermaid/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 66fa4f224..81d1d9be9 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "9.2.3-rc.1", + "version": "9.3.0-rc.1", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "main": "./dist/mermaid.min.js", "module": "./dist/mermaid.core.mjs", From 4f169dd2b8bd6aa0e1e1023b8e2b6754620a1e64 Mon Sep 17 00:00:00 2001 From: Per Brolin Date: Thu, 8 Dec 2022 15:16:13 +0100 Subject: [PATCH 11/81] Updated package number --- packages/mermaid-mindmap/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid-mindmap/package.json b/packages/mermaid-mindmap/package.json index 852c0871b..2795cf73b 100644 --- a/packages/mermaid-mindmap/package.json +++ b/packages/mermaid-mindmap/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-js/mermaid-mindmap", - "version": "9.2.2", + "version": "9.3.0-rc1", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "module": "dist/mermaid-mindmap.core.mjs", "types": "dist/detector.d.ts", From e1a501c66b7b03d30aa66177bd88b747e1c7ec70 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 8 Dec 2022 16:38:47 +0100 Subject: [PATCH 12/81] Update url snapshot test for external diagrams --- cypress/integration/other/external-diagrams.spec.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js index 3a6c37e88..903f8b77b 100644 --- a/cypress/integration/other/external-diagrams.spec.js +++ b/cypress/integration/other/external-diagrams.spec.js @@ -1,13 +1,16 @@ +import { urlSnapshotTest } from '../../helpers/util'; + describe('mermaid', () => { describe('registerDiagram', () => { it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => { const url = 'http://localhost:9000/external-diagrams-mindmap.html'; - cy.visit(url); + urlSnapshotTest(url, {}, false, false); + // cy.visit(url); - cy.get('svg', { - // may be a bit slower than normal, since vite might need to re-compile mermaid/mermaid-mindmap/mermaid-example-diagram - timeout: 10000, - }).matchImageSnapshot(); + // cy.get('svg', { + // // may be a bit slower than normal, since vite might need to re-compile mermaid/mermaid-mindmap/mermaid-example-diagram + // timeout: 10000, + // }).matchImageSnapshot(); }); }); }); From 6c2647e8cf79c5c5a3d57ef3ebff036a38773e30 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 8 Dec 2022 16:39:21 +0100 Subject: [PATCH 13/81] Update url snapshot test for external diagrams --- cypress/integration/other/external-diagrams.spec.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js index 903f8b77b..be69dfc98 100644 --- a/cypress/integration/other/external-diagrams.spec.js +++ b/cypress/integration/other/external-diagrams.spec.js @@ -5,12 +5,6 @@ describe('mermaid', () => { it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => { const url = 'http://localhost:9000/external-diagrams-mindmap.html'; urlSnapshotTest(url, {}, false, false); - // cy.visit(url); - - // cy.get('svg', { - // // may be a bit slower than normal, since vite might need to re-compile mermaid/mermaid-mindmap/mermaid-example-diagram - // timeout: 10000, - // }).matchImageSnapshot(); }); }); }); From e59b830d747750977d5ac4bf24ce86bb96e90292 Mon Sep 17 00:00:00 2001 From: "Ashley Engelund (weedySeaDragon @ github)" Date: Thu, 8 Dec 2022 11:25:04 -0800 Subject: [PATCH 14/81] set svg role to 'graphics-document document' --- packages/mermaid/src/accessibility.spec.ts | 12 ++++++++++-- packages/mermaid/src/accessibility.ts | 17 ++++++++++++++++- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/accessibility.spec.ts b/packages/mermaid/src/accessibility.spec.ts index c633d0e15..60415ea37 100644 --- a/packages/mermaid/src/accessibility.spec.ts +++ b/packages/mermaid/src/accessibility.spec.ts @@ -6,6 +6,13 @@ describe('accessibility', () => { const fauxSvgNode = new MockedD3(); describe('setA11yDiagramInfo', () => { + it('sets the svg element role to "graphics-document document"', () => { + // @ts-ignore Required to easily handle the d3 select types + const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); + setA11yDiagramInfo(fauxSvgNode, 'flowchart'); + expect(svgAttrSpy).toHaveBeenCalledWith('role', 'graphics-document document'); + }); + it('sets the aria-roledescription to the diagram type', () => { // @ts-ignore Required to easily handle the d3 select types const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); @@ -13,11 +20,12 @@ describe('accessibility', () => { expect(svgAttrSpy).toHaveBeenCalledWith('aria-roledescription', 'flowchart'); }); - it('does nothing if the diagram type is empty', () => { + it('does not set the aria-roledescription if the diagram type is empty', () => { // @ts-ignore Required to easily handle the d3 select types const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); setA11yDiagramInfo(fauxSvgNode, ''); - expect(svgAttrSpy).not.toHaveBeenCalled(); + expect(svgAttrSpy).toHaveBeenCalledTimes(1); + expect(svgAttrSpy).toHaveBeenCalledWith('role', expect.anything()); // only called to set the role }); }); diff --git a/packages/mermaid/src/accessibility.ts b/packages/mermaid/src/accessibility.ts index b9e088e0b..13c2aa43a 100644 --- a/packages/mermaid/src/accessibility.ts +++ b/packages/mermaid/src/accessibility.ts @@ -1,5 +1,8 @@ /** * Accessibility (a11y) functions, types, helpers + * @see https://www.w3.org/WAI/ + * @see https://www.w3.org/TR/wai-aria-1.1/ + * @see https://www.w3.org/TR/svg-aam-1.0/ * */ import { D3Element } from './mermaidAPI'; @@ -7,12 +10,24 @@ import { D3Element } from './mermaidAPI'; import isEmpty from 'lodash-es/isEmpty'; /** - * Add aria-roledescription to the svg element to the diagramType + * SVG element role: + * The SVG element role _should_ be set to 'graphics-document' per SVG standard + * but in practice is not always done by browsers, etc. (As of 2022-12-08). + * A fallback role of 'document' should be set for those browsers, etc., that only support ARIA 1.0. + * + * @see https://www.w3.org/TR/svg-aam-1.0/#roleMappingGeneralRules + * @see https://www.w3.org/TR/graphics-aria-1.0/#graphics-document + */ +const SVG_ROLE = 'graphics-document document'; + +/** + * Add role and aria-roledescription to the svg element * * @param svg - d3 object that contains the SVG HTML element * @param diagramType - diagram name for to the aria-roledescription */ export function setA11yDiagramInfo(svg: D3Element, diagramType: string | null | undefined) { + svg.attr('role', SVG_ROLE); if (!isEmpty(diagramType)) { svg.attr('aria-roledescription', diagramType); } From 72a3cff13e3cf630ebf009a661d2abdada3febc1 Mon Sep 17 00:00:00 2001 From: steph Date: Sun, 11 Dec 2022 14:04:41 -0800 Subject: [PATCH 15/81] fix dev server watch mode --- .vite/build.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vite/build.ts b/.vite/build.ts index 50b7fb1ad..9d2295322 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -127,7 +127,7 @@ const main = async () => { }; if (watch) { - build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' })); + build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' })); if (!mermaidOnly) { build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' })); // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' })); From 1b0ea981f9415ae1daa987243bfc90c79c9a2ec0 Mon Sep 17 00:00:00 2001 From: steph Date: Sun, 11 Dec 2022 18:59:01 -0800 Subject: [PATCH 16/81] update navbar --- .../mermaid/src/docs/.vitepress/config.ts | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 7d3ec40dd..b7c033b11 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -32,19 +32,13 @@ export default defineConfig({ function nav() { return [ - { text: 'Intro', link: '/intro/', activeMatch: '/intro/' }, + { text: 'Docs', link: '/intro/', activeMatch: '/intro/' }, { - text: 'Configuration', + text: 'Tutorials', link: '/config/Tutorials', activeMatch: '/config/', }, - { text: 'Syntax', link: '/syntax/classDiagram', activeMatch: '/syntax/' }, - { text: 'Misc', link: '/misc/integrations', activeMatch: '/misc/' }, - { - text: 'Community', - link: '/community/n00b-overview', - activeMatch: '/community/', - }, + { text: 'Integrations', link: '/misc/integrations', activeMatch: '/misc/' }, { text: version, items: [ @@ -62,6 +56,14 @@ function nav() { text: '💻 Live Editor', link: 'https://mermaid.live', }, + { + text: 'Slack', + link: 'https://mermaid-talk.slack.com', + }, + { + text: 'GitHub', + link: 'https://github.com/mermaid-js/mermaid', + }, ]; } From 07d8684fc76c6ffdbe77e8652d3de026bfa7b24c Mon Sep 17 00:00:00 2001 From: Maho Pacheco Date: Sun, 11 Dec 2022 19:34:25 -0800 Subject: [PATCH 17/81] Adding size to postal code --- demos/er.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demos/er.html b/demos/er.html index 06fbf020e..124311a03 100644 --- a/demos/er.html +++ b/demos/er.html @@ -40,7 +40,7 @@ erDiagram string city string region string state - string postal_code + string(5) postal_code string country } From 6fb9b3b35367719e75ca61ade50991ab2fd9eb6a Mon Sep 17 00:00:00 2001 From: Maho Pacheco Date: Sun, 11 Dec 2022 19:45:05 -0800 Subject: [PATCH 18/81] Adding UTs for attributes with variable length in er diagram --- .../src/diagrams/er/parser/erDiagram.spec.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js index eb738fe4b..06e2d7993 100644 --- a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js +++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js @@ -214,6 +214,19 @@ describe('when parsing ER diagram it...', function () { expect(entities[entity].attributes.length).toBe(2); }); + it('should allow an entity with attribute that is a limited length string', function () { + const entity = 'BOOK'; + const attribute1 = 'character(10) isbn FK'; + const attribute2 = 'varchar(5) postal_code "Five digits"'; + + erDiagram.parser.parse(`erDiagram\n${entity} {\n${attribute1}\n${attribute2}\n}`); + const entities = erDb.getEntities(); + expect(Object.keys(entities).length).toBe(1); + expect(entities[entity].attributes.length).toBe(2); + expect(entities[entity].attributes[0].attributeType).toBe('character(10)'); + expect(entities[entity].attributes[1].attributeType).toBe('varchar(5)'); + }); + it('should allow an entity with multiple attributes to be defined', function () { const entity = 'BOOK'; const attribute1 = 'string title'; From e4622ba06e3cc8c5b1980f415db6b71260c00294 Mon Sep 17 00:00:00 2001 From: steph Date: Sun, 11 Dec 2022 20:53:14 -0800 Subject: [PATCH 19/81] fix text overflow --- docs/config/accessibility.md | 9 +- docs/config/directives.md | 4 +- docs/config/n00b-advanced.md | 20 ++-- docs/config/usage.md | 19 ++- docs/syntax/gantt.md | 109 ++++++++++-------- .../mermaid/src/docs/config/accessibility.md | 9 +- .../mermaid/src/docs/config/directives.md | 6 +- .../mermaid/src/docs/config/n00b-advanced.md | 14 +-- packages/mermaid/src/docs/config/usage.md | 21 ++-- packages/mermaid/src/docs/syntax/gantt.md | 59 +++++----- 10 files changed, 143 insertions(+), 127 deletions(-) diff --git a/docs/config/accessibility.md b/docs/config/accessibility.md index e5b96670e..bf8b3e591 100644 --- a/docs/config/accessibility.md +++ b/docs/config/accessibility.md @@ -80,9 +80,12 @@ A **multiple line accessible description** _does not have a colon (`:`) after th Ex: - accDescr { The official Bob's Burgers corporate processes that are used - for making very, very big decisions. - This is actually a very simple flow: see the big decision and then make the big decision.} +```markdown +accDescr { +This is a multiple line accessible description. +It does not have a colon and is surrounded by curly brackets. +} +``` See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated. diff --git a/docs/config/directives.md b/docs/config/directives.md index 550707080..f011085c3 100644 --- a/docs/config/directives.md +++ b/docs/config/directives.md @@ -32,7 +32,9 @@ Mermaid basically supports two types of configuration options to be overridden b **NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. - Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs +::: info +We plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs soon. +::: ## Declaring directives diff --git a/docs/config/n00b-advanced.md b/docs/config/n00b-advanced.md index 5dd907429..39c20d632 100644 --- a/docs/config/n00b-advanced.md +++ b/docs/config/n00b-advanced.md @@ -10,17 +10,21 @@ A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so: - stuff stuff - - - +```html +... + +