From c9da36dc8b1e3e5cb14f34724ebd8541011f0a9e Mon Sep 17 00:00:00 2001 From: Garen Torikian Date: Sun, 14 May 2023 14:27:08 -0400 Subject: [PATCH 001/263] Fix a typo --- docs/config/usage.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/usage.md b/docs/config/usage.md index 0ab60012f6..8d48c12462 100644 --- a/docs/config/usage.md +++ b/docs/config/usage.md @@ -228,7 +228,7 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm The main idea of the API is to be able to call a render function with the graph definition as a string. The render function will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site. -The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console. +The example below shows an example of how this could be used. The example just logs the resulting SVG to the JavaScript console. ```html + + diff --git a/docker-compose.yml b/docker-compose.yml index cdf21c936e..2bd00a2772 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -7,5 +7,10 @@ services: working_dir: /mermaid volumes: - ./:/mermaid + - root_cache:/root/.cache + - root_local:/root/.local ports: - 9000:9000 +volumes: + root_cache: + root_local: \ No newline at end of file diff --git a/run b/run index 4da4093ee4..7dbdf918a5 100755 --- a/run +++ b/run @@ -13,7 +13,7 @@ sh) $RUN mermaid sh $args ;; -install) +i | install) $RUN mermaid sh -c "npx pnpm install" ;; @@ -40,7 +40,7 @@ cat < Date: Sun, 18 Jun 2023 01:32:45 +0300 Subject: [PATCH 026/263] Started sankey syntax --- .../src/diagrams/sankey/parser/sankey.jison | 342 +----------------- .../src/diagrams/sankey/parser/sankey.spec.js | 52 +-- 2 files changed, 40 insertions(+), 354 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison index 074cd5975e..d77b0b2416 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison @@ -1,350 +1,30 @@ -/** mermaid - * https://mermaidjs.github.io/ - * (c) 2014-2015 Knut Sveidqvist - * MIT license. - * - * Based on js sequence diagrams jison grammr - * https://bramp.github.io/js-sequence-diagrams/ - * (c) 2012-2013 Andrew Brampton (bramp.net) - * Simplified BSD license. - */ +/** mermaid */ %lex %options case-insensitive -// Special states for recognizing aliases -// A special state for grabbing text up to the first comment/newline -%x ID ALIAS LINE - -// Directive states -%x open_directive type_directive arg_directive -%x acc_title -%x acc_descr -%x acc_descr_multiline %% +"sankey" return 'SANKEY' +"->" return 'ARROW' +\w+ return 'NODE' +[\n]+ return 'NEWLINE'; +\s+ /* skip all whitespace */ -\%\%\{ { this.begin('open_directive'); return 'open_directive'; } -((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } -":" { this.popState(); this.begin('arg_directive'); return ':'; } -\}\%\% { this.popState(); this.popState(); return 'close_directive'; } -((?:(?!\}\%\%).|\n)*) return 'arg_directive'; -[\n]+ return 'NEWLINE'; -\s+ /* skip all whitespace */ -((?!\n)\s)+ /* skip same-line whitespace */ -\#[^\n]* /* skip comments */ -\%%(?!\{)[^\n]* /* skip comments */ -[^\}]\%\%[^\n]* /* skip comments */ -[0-9]+(?=[ \n]+) return 'NUM'; -"box" { this.begin('LINE'); return 'box'; } -"participant" { this.begin('ID'); return 'participant'; } -"actor" { this.begin('ID'); return 'participant_actor'; } -[^\->:\n,;]+?([\-]*[^\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } -"as" { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; } -(?:) { this.popState(); this.popState(); return 'NEWLINE'; } -"loop" { this.begin('LINE'); return 'loop'; } -"rect" { this.begin('LINE'); return 'rect'; } -"opt" { this.begin('LINE'); return 'opt'; } -"alt" { this.begin('LINE'); return 'alt'; } -"else" { this.begin('LINE'); return 'else'; } -"par" { this.begin('LINE'); return 'par'; } -"par_over" { this.begin('LINE'); return 'par_over'; } -"and" { this.begin('LINE'); return 'and'; } -"critical" { this.begin('LINE'); return 'critical'; } -"option" { this.begin('LINE'); return 'option'; } -"break" { this.begin('LINE'); return 'break'; } -(?:[:]?(?:no)?wrap:)?[^#\n;]* { this.popState(); return 'restOfLine'; } -"end" return 'end'; -"left of" return 'left_of'; -"right of" return 'right_of'; -"links" return 'links'; -"link" return 'link'; -"properties" return 'properties'; -"details" return 'details'; -"over" return 'over'; -"note" return 'note'; -"activate" { this.begin('ID'); return 'activate'; } -"deactivate" { this.begin('ID'); return 'deactivate'; } -"title"\s[^#\n;]+ return 'title'; -"title:"\s[^#\n;]+ return 'legacy_title'; -accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } -(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } -accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } -(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } -accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} -[\}] { this.popState(); } -[^\}]* return "acc_descr_multiline_value"; -"sequenceDiagram" return 'SD'; -"autonumber" return 'autonumber'; -"off" return 'off'; -"," return ','; -";" return 'NEWLINE'; -[^\+\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+\->:\n,;]+)* { yytext = yytext.trim(); return 'ACTOR'; } -"->>" return 'SOLID_ARROW'; -"-->>" return 'DOTTED_ARROW'; -"->" return 'SOLID_OPEN_ARROW'; -"-->" return 'DOTTED_OPEN_ARROW'; -\-[x] return 'SOLID_CROSS'; -\-\-[x] return 'DOTTED_CROSS'; -\-[\)] return 'SOLID_POINT'; -\-\-[\)] return 'DOTTED_POINT'; -":"(?:(?:no)?wrap:)?[^#\n;]+ return 'TXT'; -"+" return '+'; -"-" return '-'; -<> return 'NEWLINE'; -. return 'INVALID'; +// TODO: check if jison will return 2 separate tokens (for nodes) while ignoring whitespace /lex -%left '^' - %start start %% /* language grammar */ start : SPACE start - | NEWLINE start - | directive start - | SD document { yy.apply($2);return $2; } + | SANKEY document ; document - : /* empty */ { $$ = [] } - | document line {$1.push($2);$$ = $1} - ; - -line - : SPACE statement { $$ = $2 } - | statement { $$ = $1 } - | NEWLINE { $$=[]; } - ; - -box_section - : /* empty */ { $$ = [] } - | box_section box_line {$1.push($2);$$ = $1} - ; - -box_line - : SPACE participant_statement { $$ = $2 } - | participant_statement { $$ = $1 } - | NEWLINE { $$=[]; } - ; - - -directive - : openDirective typeDirective closeDirective 'NEWLINE' - | openDirective typeDirective ':' argDirective closeDirective 'NEWLINE' - ; - -statement - : participant_statement - | 'box' restOfLine box_section end - { - $3.unshift({type: 'boxStart', boxData:yy.parseBoxData($2) }); - $3.push({type: 'boxEnd', boxText:$2}); - $$=$3;} - | signal 'NEWLINE' - | autonumber NUM NUM 'NEWLINE' { $$= {type:'sequenceIndex',sequenceIndex: Number($2), sequenceIndexStep:Number($3), sequenceVisible:true, signalType:yy.LINETYPE.AUTONUMBER};} - | autonumber NUM 'NEWLINE' { $$ = {type:'sequenceIndex',sequenceIndex: Number($2), sequenceIndexStep:1, sequenceVisible:true, signalType:yy.LINETYPE.AUTONUMBER};} - | autonumber off 'NEWLINE' { $$ = {type:'sequenceIndex', sequenceVisible:false, signalType:yy.LINETYPE.AUTONUMBER};} - | autonumber 'NEWLINE' {$$ = {type:'sequenceIndex', sequenceVisible:true, signalType:yy.LINETYPE.AUTONUMBER}; } - | 'activate' actor 'NEWLINE' {$$={type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $2};} - | 'deactivate' actor 'NEWLINE' {$$={type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $2};} - | note_statement 'NEWLINE' - | links_statement 'NEWLINE' - | link_statement 'NEWLINE' - | properties_statement 'NEWLINE' - | details_statement 'NEWLINE' - | title {yy.setDiagramTitle($1.substring(6));$$=$1.substring(6);} - | legacy_title {yy.setDiagramTitle($1.substring(7));$$=$1.substring(7);} - | acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); } - | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); } - | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); } - | 'loop' restOfLine document end - { - $3.unshift({type: 'loopStart', loopText:yy.parseMessage($2), signalType: yy.LINETYPE.LOOP_START}); - $3.push({type: 'loopEnd', loopText:$2, signalType: yy.LINETYPE.LOOP_END}); - $$=$3;} - | 'rect' restOfLine document end - { - $3.unshift({type: 'rectStart', color:yy.parseMessage($2), signalType: yy.LINETYPE.RECT_START }); - $3.push({type: 'rectEnd', color:yy.parseMessage($2), signalType: yy.LINETYPE.RECT_END }); - $$=$3;} - | opt restOfLine document end - { - $3.unshift({type: 'optStart', optText:yy.parseMessage($2), signalType: yy.LINETYPE.OPT_START}); - $3.push({type: 'optEnd', optText:yy.parseMessage($2), signalType: yy.LINETYPE.OPT_END}); - $$=$3;} - | alt restOfLine else_sections end - { - // Alt start - $3.unshift({type: 'altStart', altText:yy.parseMessage($2), signalType: yy.LINETYPE.ALT_START}); - // Content in alt is already in $3 - // End - $3.push({type: 'altEnd', signalType: yy.LINETYPE.ALT_END}); - $$=$3;} - | par restOfLine par_sections end - { - // Parallel start - $3.unshift({type: 'parStart', parText:yy.parseMessage($2), signalType: yy.LINETYPE.PAR_START}); - // Content in par is already in $3 - // End - $3.push({type: 'parEnd', signalType: yy.LINETYPE.PAR_END}); - $$=$3;} - | par_over restOfLine par_sections end - { - // Parallel (overlapped) start - $3.unshift({type: 'parStart', parText:yy.parseMessage($2), signalType: yy.LINETYPE.PAR_OVER_START}); - // Content in par is already in $3 - // End - $3.push({type: 'parEnd', signalType: yy.LINETYPE.PAR_END}); - $$=$3;} - | critical restOfLine option_sections end - { - // critical start - $3.unshift({type: 'criticalStart', criticalText:yy.parseMessage($2), signalType: yy.LINETYPE.CRITICAL_START}); - // Content in critical is already in $3 - // critical end - $3.push({type: 'criticalEnd', signalType: yy.LINETYPE.CRITICAL_END}); - $$=$3;} - | break restOfLine document end - { - $3.unshift({type: 'breakStart', breakText:yy.parseMessage($2), signalType: yy.LINETYPE.BREAK_START}); - $3.push({type: 'breakEnd', optText:yy.parseMessage($2), signalType: yy.LINETYPE.BREAK_END}); - $$=$3;} - | directive - ; - -option_sections - : document - | document option restOfLine option_sections - { $$ = $1.concat([{type: 'option', optionText:yy.parseMessage($3), signalType: yy.LINETYPE.CRITICAL_OPTION}, $4]); } - ; - -par_sections - : document - | document and restOfLine par_sections - { $$ = $1.concat([{type: 'and', parText:yy.parseMessage($3), signalType: yy.LINETYPE.PAR_AND}, $4]); } - ; - -else_sections - : document - | document else restOfLine else_sections - { $$ = $1.concat([{type: 'else', altText:yy.parseMessage($3), signalType: yy.LINETYPE.ALT_ELSE}, $4]); } - ; - -participant_statement - : 'participant' actor 'AS' restOfLine 'NEWLINE' {$2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;} - | 'participant' actor 'NEWLINE' {$2.type='addParticipant';$$=$2;} - | 'participant_actor' actor 'AS' restOfLine 'NEWLINE' {$2.type='addActor';$2.description=yy.parseMessage($4); $$=$2;} - | 'participant_actor' actor 'NEWLINE' {$2.type='addActor'; $$=$2;} - ; - -note_statement - : 'note' placement actor text2 - { - $$ = [$3, {type:'addNote', placement:$2, actor:$3.actor, text:$4}];} - | 'note' 'over' actor_pair text2 - { - // Coerce actor_pair into a [to, from, ...] array - $2 = [].concat($3, $3).slice(0, 2); - $2[0] = $2[0].actor; - $2[1] = $2[1].actor; - $$ = [$3, {type:'addNote', placement:yy.PLACEMENT.OVER, actor:$2.slice(0, 2), text:$4}];} - ; - -links_statement - : 'links' actor text2 - { - $$ = [$2, {type:'addLinks', actor:$2.actor, text:$3}]; - } + : node document + | /* empty */ ; - -link_statement - : 'link' actor text2 - { - $$ = [$2, {type:'addALink', actor:$2.actor, text:$3}]; - } - ; - -properties_statement - : 'properties' actor text2 - { - $$ = [$2, {type:'addProperties', actor:$2.actor, text:$3}]; - } - ; - -details_statement - : 'details' actor text2 - { - $$ = [$2, {type:'addDetails', actor:$2.actor, text:$3}]; - } - ; - -spaceList - : SPACE spaceList - | SPACE - ; -actor_pair - : actor ',' actor { $$ = [$1, $3]; } - | actor { $$ = $1; } - ; - -placement - : 'left_of' { $$ = yy.PLACEMENT.LEFTOF; } - | 'right_of' { $$ = yy.PLACEMENT.RIGHTOF; } - ; - -signal - : actor signaltype '+' actor text2 - { $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5}, - {type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $4} - ]} - | actor signaltype '-' actor text2 - { $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5}, - {type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $1} - ]} - | actor signaltype actor text2 - { $$ = [$1,$3,{type: 'addMessage', from:$1.actor, to:$3.actor, signalType:$2, msg:$4}]} - ; - -// actor -// : actor_participant -// | actor_actor -// ; - -actor: ACTOR {$$={ type: 'addParticipant', actor:$1}}; -// actor_actor: ACTOR {$$={type: 'addActor', actor:$1}}; - -signaltype - : SOLID_OPEN_ARROW { $$ = yy.LINETYPE.SOLID_OPEN; } - | DOTTED_OPEN_ARROW { $$ = yy.LINETYPE.DOTTED_OPEN; } - | SOLID_ARROW { $$ = yy.LINETYPE.SOLID; } - | DOTTED_ARROW { $$ = yy.LINETYPE.DOTTED; } - | SOLID_CROSS { $$ = yy.LINETYPE.SOLID_CROSS; } - | DOTTED_CROSS { $$ = yy.LINETYPE.DOTTED_CROSS; } - | SOLID_POINT { $$ = yy.LINETYPE.SOLID_POINT; } - | DOTTED_POINT { $$ = yy.LINETYPE.DOTTED_POINT; } - ; - -text2 - : TXT {$$ = yy.parseMessage($1.trim().substring(1)) } - ; - -openDirective - : open_directive { yy.parseDirective('%%{', 'open_directive'); } - ; - -typeDirective - : type_directive { yy.parseDirective($1, 'type_directive'); } - ; - -argDirective - : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); } - ; - -closeDirective - : close_directive { yy.parseDirective('}%%', 'close_directive', 'sequence'); } - ; - -%% + \ No newline at end of file diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js index 995c924784..5ef6f80fe1 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js @@ -11,34 +11,40 @@ describe('Sankey diagram', function () { diagram.parser.yy.clear(); }); - it('one simple flow', function () { - const str = ` - sankey - a -> 30 -> b - `; - + it('recognized its type', function() { + const str=`sankey`; + parser.parse(str); }); - it('multiple flows', function () { - const str = ` - sankey - a -> 30 -> b - c -> 30 -> d - c -> 40 -> e - `; + // it('one simple flow', function () { + // const str = ` + // sankey + // a -> 30 -> b + // `; - parser.parse(str); - }); + // parser.parse(str); + // }); - it('multiple flows', function () { - const str = ` - sankey - a -> 30 -> b - c -> 30 -> d - `; + // it('multiple flows', function () { + // const str = ` + // sankey + // a -> 30 -> b + // c -> 30 -> d + // c -> 40 -> e + // `; - parser.parse(str); - }); + // parser.parse(str); + // }); + + // it('multiple flows', function () { + // const str = ` + // sankey + // a -> 30 -> b + // c -> 30 -> d + // `; + + // parser.parse(str); + // }); }); }); From 567686e140a4a2d4f35d5b5edf3df52486be29e4 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 18 Jun 2023 01:32:45 +0300 Subject: [PATCH 027/263] Implementing new syntax --- .../diagrams/sankey/parser/desired_syntax.md | 6 +- .../src/diagrams/sankey/parser/sankey.jison | 59 ++++++++++-- .../src/diagrams/sankey/parser/sankey.spec.js | 90 ++++++++++++++++--- run | 10 ++- 4 files changed, 139 insertions(+), 26 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md b/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md index d0cbd4e8a1..1b5cb81d23 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md +++ b/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md @@ -100,9 +100,9 @@ a -> { 30 40 } -> b -> { - 20 -> d - 50 -> e -} + 20 -> d -> 11 + 50 -> e -> 11 +} -> f -> 30 ``` **Probably ambiguous!** diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison index d77b0b2416..e0b4252caf 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison @@ -2,13 +2,21 @@ %lex %options case-insensitive +%s group +// %x attributes %% +"{" { this.pushState('group'); return 'OPEN_GROUP'; } +"}" { this.popState('group'); return 'CLOSE_GROUP'; } "sankey" return 'SANKEY' -"->" return 'ARROW' -\w+ return 'NODE' -[\n]+ return 'NEWLINE'; -\s+ /* skip all whitespace */ +\d+ return 'VALUE' +"->" return 'ARROW' +\w+ return 'NODE' +"[" {/*this.pushState('attributes');*/ return 'OPEN_ATTRIBUTES'; } +"]" { /* this.popState(); */ return 'CLOSE_ATTRIBUTES'; } +(<>|[\n;])+ return 'EOS' // end of statement +\s+ // skip all whitespace +// [\n]+ return 'NEWLINE'; // TODO: check if jison will return 2 separate tokens (for nodes) while ignoring whitespace @@ -16,15 +24,50 @@ %start start -%% /* language grammar */ +%% // language grammar start - : SPACE start + : EOS SANKEY document | SANKEY document ; document - : node document + : line document + | // empty + ; + +line + // : node_with_attributes // one node with attributes + : flow EOS + | node_with_attributes EOS + | EOS + ; + + +node_with_attributes + : NODE + | NODE attributes_group + ; + +attributes_group + : OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES + ; + +attributes: + | // TODO + ; + +flow + : NODE ARROW value_or_values_group ARROW flow + | NODE + ; + +value_or_values_group + : OPEN_GROUP values CLOSE_GROUP + | VALUE + ; + +values + : values VALUE | /* empty */ ; - \ No newline at end of file diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js index 5ef6f80fe1..d96663f31b 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js @@ -1,6 +1,7 @@ import diagram from './sankey.jison'; import { parser } from './sankey.jison'; import db from '../sankeyDB.js'; +// import { fail } from 'assert'; describe('Sankey diagram', function () { // TODO - these examples should be put into ./parser/stateDiagram.spec.js @@ -11,39 +12,104 @@ describe('Sankey diagram', function () { diagram.parser.yy.clear(); }); - it('recognized its type', function() { + it('recognizes its type', () => { const str=`sankey`; parser.parse(str); }); - // it('one simple flow', function () { + it('recognizes one flow', () => { + const str = ` + sankey + a -> 30 -> b -> 20 -> c + `; + + parser.parse(str); + }); + + it('recognizes multiple flows', () => { + const str = ` + sankey + a -> 30 -> b -> 12 -> e + c -> 30 -> d -> 12 -> e + c -> 40 -> e -> 12 -> e + `; + + parser.parse(str); + }); + + it('recognizes grouped values', () => { + const str = ` + sankey + a -> {30} -> b + `; + + parser.parse(str); + }); + + it('recognizes a separate node with its attributes', () => { + const str = ` + sankey + c[] + `; + + parser.parse(str); + }); + + // it('recognizes intake group', () => { // const str = ` // sankey - // a -> 30 -> b + // a -> { + // 30 -> b + // 40 -> c + // } // `; - + // parser.parse(str); // }); - // it('multiple flows', function () { + // it('recognizes exhaust group', () => { // const str = ` // sankey - // a -> 30 -> b - // c -> 30 -> d - // c -> 40 -> e + // { + // b -> 30 + // c -> 40 + // } -> a // `; - + // parser.parse(str); // }); - // it('multiple flows', function () { + // it('what to do?', () => { // const str = ` // sankey - // a -> 30 -> b - // c -> 30 -> d + // { + // b -> 30 + // c -> 40 + // } -> { + // e + // d + // } // `; + + // parser.parse(str); + // }); + // it('complex', () => { + // const str = ` + // sankey + // { + // a -> 30 + // b -> 40 + // } -> c -> { + // 20 -> e -> 49 + // 20 -> d -> 23 + // } -> k -> 20 -> i -> { + // 10 -> f + // 11 -> j + // } + // `; + // parser.parse(str); // }); }); diff --git a/run b/run index 7dbdf918a5..9b02b07410 100755 --- a/run +++ b/run @@ -14,15 +14,19 @@ $RUN mermaid sh $args ;; i | install) -$RUN mermaid sh -c "npx pnpm install" +$RUN mermaid sh -c "npx pnpm install $args" ;; test) -$RUN mermaid sh -c "npx pnpm test" +$RUN mermaid sh -c "npx pnpm test $args" +;; + +vitest) +$RUN mermaid sh -c "npx pnpm vitest $args" ;; e2e) -$RUN mermaid sh -c "npx pnpm e2e" +$RUN mermaid sh -c "npx pnpm e2e $args" ;; lint) From d2226604e447a2a339abdbb400c403173775c2fb Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 18 Jun 2023 01:32:45 +0300 Subject: [PATCH 028/263] Recognizing attrubutes --- .../src/diagrams/sankey/parser/sankey.jison | 62 +++++++++---------- .../src/diagrams/sankey/parser/sankey.spec.js | 30 +++++---- 2 files changed, 46 insertions(+), 46 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison index e0b4252caf..cc262f6729 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison @@ -3,20 +3,29 @@ %options case-insensitive %s group -// %x attributes +%x attributes +%x attribute +%x value %% -"{" { this.pushState('group'); return 'OPEN_GROUP'; } -"}" { this.popState('group'); return 'CLOSE_GROUP'; } "sankey" return 'SANKEY' -\d+ return 'VALUE' +\d+ return 'AMOUNT' "->" return 'ARROW' \w+ return 'NODE' -"[" {/*this.pushState('attributes');*/ return 'OPEN_ATTRIBUTES'; } -"]" { /* this.popState(); */ return 'CLOSE_ATTRIBUTES'; } -(<>|[\n;])+ return 'EOS' // end of statement +(?:<>|[\n;])+ { return 'EOS'; } // end of statement is ; \n or end of file \s+ // skip all whitespace -// [\n]+ return 'NEWLINE'; +"{" { this.pushState('group'); return 'OPEN_GROUP'; } +"}" { this.popState('group'); return 'CLOSE_GROUP'; } +"[" { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; } +"]" { this.popState(); return 'CLOSE_ATTRIBUTES'; } +\w+ { return 'ATTRIBUTE'; } // string followed by = sign is "attrName" +(?=\=s*)[\s\w] {return 'VALUE';} +\= { this.pushState('attribute'); return 'EQUAL'; } +\s+ // skip all whitespace +[\w]+ {this.popState(); return 'VALUE';} +\s+ //skip +\" { this.pushState('value'); return 'OPEN_VALUE'; } +\" { this.popState(); return 'CLOSE_VALUE'; } // TODO: check if jison will return 2 separate tokens (for nodes) while ignoring whitespace @@ -33,41 +42,26 @@ start document : line document - | // empty + | ; line - // : node_with_attributes // one node with attributes : flow EOS | node_with_attributes EOS | EOS ; - -node_with_attributes - : NODE - | NODE attributes_group - ; +node_with_attributes: NODE OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES; -attributes_group - : OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES - ; +attributes: attribute attributes | ; +attribute: ATTRIBUTE EQUAL VALUE | ATTRIBUTE; -attributes: - | // TODO - ; +// flow +// : NODE ARROW value_or_values_group ARROW flow +// | NODE +// ; -flow - : NODE ARROW value_or_values_group ARROW flow - | NODE - ; +flow: n_chain_a; -value_or_values_group - : OPEN_GROUP values CLOSE_GROUP - | VALUE - ; - -values - : values VALUE - | /* empty */ - ; +n_chain_a: NODE ARROW a_chain_n | NODE; +a_chain_n: AMOUNT ARROW n_chain_a | AMOUNT; diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js index d96663f31b..8617c4bbcc 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js @@ -30,31 +30,37 @@ describe('Sankey diagram', function () { it('recognizes multiple flows', () => { const str = ` sankey - a -> 30 -> b -> 12 -> e - c -> 30 -> d -> 12 -> e - c -> 40 -> e -> 12 -> e + a -> 30 -> b -> 12 -> e; + c -> 30 -> d -> 12 -> e; + c -> 40 -> e -> 12 -> q; `; parser.parse(str); }); - it('recognizes grouped values', () => { + it('recognizes a separate node with its attributes', () => { const str = ` sankey - a -> {30} -> b + a[] + b[attr=1] + c[attr=2] + d[attrWithoutValue] + d[attr = 3] `; parser.parse(str); }); - it('recognizes a separate node with its attributes', () => { - const str = ` - sankey - c[] - `; + // it('recognizes grouped values', () => { + // const str = ` + // sankey + // a -> {30} -> b + // `; - parser.parse(str); - }); + // parser.parse(str); + // }); + + // it('recognizes intake group', () => { // const str = ` From b4b535f9973dd4e7073791a179df5f9d27421697 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 18 Jun 2023 01:32:45 +0300 Subject: [PATCH 029/263] Recognizing attributes --- .../src/diagrams/sankey/parser/sankey.jison | 46 +++++++++++-------- .../src/diagrams/sankey/parser/sankey.spec.js | 13 ++++-- 2 files changed, 34 insertions(+), 25 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison index cc262f6729..3adc6a406e 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison @@ -2,30 +2,36 @@ %lex %options case-insensitive +%options easy_keyword_rules + %s group +// when we are inside [] section we are defining attrubutes %x attributes -%x attribute -%x value +// after attr= we are expecting a value without quotes +%x value +// or if we use "" we are expecting a string containing value +%x string %% -"sankey" return 'SANKEY' -\d+ return 'AMOUNT' -"->" return 'ARROW' -\w+ return 'NODE' -(?:<>|[\n;])+ { return 'EOS'; } // end of statement is ; \n or end of file -\s+ // skip all whitespace -"{" { this.pushState('group'); return 'OPEN_GROUP'; } -"}" { this.popState('group'); return 'CLOSE_GROUP'; } -"[" { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; } -"]" { this.popState(); return 'CLOSE_ATTRIBUTES'; } -\w+ { return 'ATTRIBUTE'; } // string followed by = sign is "attrName" -(?=\=s*)[\s\w] {return 'VALUE';} -\= { this.pushState('attribute'); return 'EQUAL'; } -\s+ // skip all whitespace -[\w]+ {this.popState(); return 'VALUE';} -\s+ //skip -\" { this.pushState('value'); return 'OPEN_VALUE'; } -\" { this.popState(); return 'CLOSE_VALUE'; } +"sankey" { return 'SANKEY'; } +\d+ { return 'AMOUNT'; } +"->" { return 'ARROW'; } +\w+ { return 'NODE'; } +(?:<>|[\n;])+ { return 'EOS'; } // end of statement is ; \n or end of file +\s+ // skip all whitespace +"{" { this.pushState('group'); return 'OPEN_GROUP'; } +"}" { this.popState('group'); return 'CLOSE_GROUP'; } +"[" { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; } +"]" { this.popState(); return 'CLOSE_ATTRIBUTES'; } +\w+ { return 'ATTRIBUTE'; } +(?=\=s*)[\s\w] { return 'VALUE';} +\= { this.pushState('value'); return 'EQUAL'; } +\s+ // skip all whitespace +[\w]+ { this.popState(); return 'VALUE';} +\s+ //skip +\" { this.pushState('string'); return 'OPEN_STRING'; } +\" { this.popState(); return 'CLOSE_STRING'; } +[\w\s]+(?=\") { return 'STRING'; } // TODO: check if jison will return 2 separate tokens (for nodes) while ignoring whitespace diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js index 8617c4bbcc..4cd1befaeb 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js @@ -41,11 +41,14 @@ describe('Sankey diagram', function () { it('recognizes a separate node with its attributes', () => { const str = ` sankey - a[] - b[attr=1] - c[attr=2] - d[attrWithoutValue] - d[attr = 3] + node[] + node[attr=1] + node[attr=2] + a -> 30 -> b + node[attrWithoutValue] + node[attr = 3] + node[attr1 = 23413 attr2=1234] + node[x1dfqowie attr1 = 23413 attr2] `; parser.parse(str); From f71769e07ba119c165c9bc2c02ed201f65b243a3 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 18 Jun 2023 01:32:45 +0300 Subject: [PATCH 030/263] Attributes within strings --- .../src/diagrams/sankey/parser/sankey.jison | 17 ++++---- .../src/diagrams/sankey/parser/sankey.spec.js | 41 ++++++++++++------- 2 files changed, 36 insertions(+), 22 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison index 3adc6a406e..53c4277292 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison @@ -20,7 +20,7 @@ (?:<>|[\n;])+ { return 'EOS'; } // end of statement is ; \n or end of file \s+ // skip all whitespace "{" { this.pushState('group'); return 'OPEN_GROUP'; } -"}" { this.popState('group'); return 'CLOSE_GROUP'; } +"}" { this.popState(); return 'CLOSE_GROUP'; } "[" { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; } "]" { this.popState(); return 'CLOSE_ATTRIBUTES'; } \w+ { return 'ATTRIBUTE'; } @@ -30,8 +30,12 @@ [\w]+ { this.popState(); return 'VALUE';} \s+ //skip \" { this.pushState('string'); return 'OPEN_STRING'; } -\" { this.popState(); return 'CLOSE_STRING'; } -[\w\s]+(?=\") { return 'STRING'; } +(?!\\)\" { + if(this.topState()==='string') this.popState(); + if(this.topState()==='value') this.popState(); + return 'CLOSE_STRING'; +} +([^"\\]|\\\")+ { console.log(this.state); return 'STRING'; } // TODO: check if jison will return 2 separate tokens (for nodes) while ignoring whitespace @@ -60,12 +64,9 @@ line node_with_attributes: NODE OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES; attributes: attribute attributes | ; -attribute: ATTRIBUTE EQUAL VALUE | ATTRIBUTE; +attribute: ATTRIBUTE EQUAL value | ATTRIBUTE; -// flow -// : NODE ARROW value_or_values_group ARROW flow -// | NODE -// ; +value: VALUE | OPEN_STRING STRING CLOSE_STRING; flow: n_chain_a; diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js index 4cd1befaeb..576862fd8e 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js @@ -38,22 +38,35 @@ describe('Sankey diagram', function () { parser.parse(str); }); - it('recognizes a separate node with its attributes', () => { - const str = ` - sankey - node[] - node[attr=1] - node[attr=2] - a -> 30 -> b - node[attrWithoutValue] - node[attr = 3] - node[attr1 = 23413 attr2=1234] - node[x1dfqowie attr1 = 23413 attr2] - `; - - parser.parse(str); + describe('while attributes parsing', () => { + it('parses different quotless variations', () => { + const str = ` + sankey + node[] + node[attr=1] + a -> 30 -> b + node[attrWithoutValue] + node[attr = 3] + node[attr1 = 23413 attr2=1234] + node[x1dfqowie attr1 = 23413 attr2] + `; + + parser.parse(str); + }); + + it('parses strings as values', () => { + const str = ` + sankey + node[attr="hello, how are you?"] + node[attr="hello\\""] + `; + + parser.parse(str); + }); }); + + // it('recognizes grouped values', () => { // const str = ` // sankey From 5eae790740fe30599040aac0167629c832e4d4ad Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 18 Jun 2023 01:32:45 +0300 Subject: [PATCH 031/263] Sankey stream is ending on node only --- .../src/diagrams/sankey/parser/sankey.jison | 24 +++--- .../src/diagrams/sankey/parser/sankey.spec.js | 80 ++----------------- 2 files changed, 20 insertions(+), 84 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison index 53c4277292..e15dcf5d03 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison @@ -35,9 +35,7 @@ if(this.topState()==='value') this.popState(); return 'CLOSE_STRING'; } -([^"\\]|\\\")+ { console.log(this.state); return 'STRING'; } - -// TODO: check if jison will return 2 separate tokens (for nodes) while ignoring whitespace +([^"\\]|\\\")+ { return 'STRING'; } /lex @@ -55,20 +53,28 @@ document | ; + // : NODE exhaust intake exhaust_chain optional_attributes EOS line - : flow EOS - | node_with_attributes EOS + : stream optional_attributes EOS + | NODE optional_attributes EOS | EOS ; -node_with_attributes: NODE OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES; +optional_attributes: OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES | ; attributes: attribute attributes | ; attribute: ATTRIBUTE EQUAL value | ATTRIBUTE; value: VALUE | OPEN_STRING STRING CLOSE_STRING; -flow: n_chain_a; +stream: NODE ARROW AMOUNT ARROW tail; +tail: stream | NODE; + +// exhaust_chain: ARROW AMOUNT intake_chain | ; +// intake_chain: ARROW NODE exhaust_chain | ; + +// exhaust: ARROW AMOUNT; +// intake: ARROW NODE; -n_chain_a: NODE ARROW a_chain_n | NODE; -a_chain_n: AMOUNT ARROW n_chain_a | AMOUNT; +// node_chain_amount: NODE ARROW amount_node_chain | NODE; +// amount_node_chain: AMOUNT ARROW node_chain_amount | AMOUNT; diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js index 576862fd8e..83d87ac71e 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js @@ -30,9 +30,9 @@ describe('Sankey diagram', function () { it('recognizes multiple flows', () => { const str = ` sankey - a -> 30 -> b -> 12 -> e; - c -> 30 -> d -> 12 -> e; - c -> 40 -> e -> 12 -> q; + a -> 30 -> b -> 12 -> e + c -> 30 -> d -> 12 -> e + c -> 40 -> e -> 12 -> q `; parser.parse(str); @@ -58,81 +58,11 @@ describe('Sankey diagram', function () { const str = ` sankey node[attr="hello, how are you?"] - node[attr="hello\\""] + node[attr="hello\\"afaasd"] `; parser.parse(str); }); - }); - - - - // it('recognizes grouped values', () => { - // const str = ` - // sankey - // a -> {30} -> b - // `; - - // parser.parse(str); - // }); - - - - // it('recognizes intake group', () => { - // const str = ` - // sankey - // a -> { - // 30 -> b - // 40 -> c - // } - // `; - - // parser.parse(str); - // }); - - // it('recognizes exhaust group', () => { - // const str = ` - // sankey - // { - // b -> 30 - // c -> 40 - // } -> a - // `; - - // parser.parse(str); - // }); - - // it('what to do?', () => { - // const str = ` - // sankey - // { - // b -> 30 - // c -> 40 - // } -> { - // e - // d - // } - // `; - - // parser.parse(str); - // }); - - // it('complex', () => { - // const str = ` - // sankey - // { - // a -> 30 - // b -> 40 - // } -> c -> { - // 20 -> e -> 49 - // 20 -> d -> 23 - // } -> k -> 20 -> i -> { - // 10 -> f - // 11 -> j - // } - // `; - - // parser.parse(str); - // }); + }); }); }); From 40f7105ae4a77d4b6869e1e5d24e2ef164edf2ef Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 18 Jun 2023 01:32:45 +0300 Subject: [PATCH 032/263] Started renderer development --- demos/index.html | 3 + demos/sankey.html | 14 +-- .../mermaid/src/diagrams/sankey/energy.csv | 69 ++++++++++++ .../src/diagrams/sankey/parser/sankey.jison | 10 +- .../mermaid/src/diagrams/sankey/sankeyDB.js | 69 ------------ .../mermaid/src/diagrams/sankey/sankeyDB.ts | 106 ++++++++++++++++++ .../src/diagrams/sankey/sankeyRenderer.ts | 12 +- 7 files changed, 199 insertions(+), 84 deletions(-) create mode 100644 packages/mermaid/src/diagrams/sankey/energy.csv delete mode 100644 packages/mermaid/src/diagrams/sankey/sankeyDB.js create mode 100644 packages/mermaid/src/diagrams/sankey/sankeyDB.ts diff --git a/demos/index.html b/demos/index.html index 391042182c..24c4fbf3b0 100644 --- a/demos/index.html +++ b/demos/index.html @@ -75,6 +75,9 @@

Timeline

  • ZenUML

    • +
  • +

    Sankey

    +
    • diff --git a/demos/sankey.html b/demos/sankey.html index 57f3a8af80..fa06b37dd3 100644 --- a/demos/sankey.html +++ b/demos/sankey.html @@ -16,15 +16,11 @@

    Sankey diagram demos

    Simple flow

    -      stateDiagram-v2
-      direction LR
-      State1: A state with a note
-      note right of State1
-        Important information!
    You can write notes.
    And\nthey\ncan\nbe\nmulti-\nline.
-      end note
-      State1 --> State2
-      note left of State2 : Notes can be to the left of a state\n(like this one).
-      note right of State2 : Notes can be to the right of a state\n(like this one).
+      sankey
+      a--10->b
+      c--20->b
+      b--15->d
+      a-- 7->d
    diff --git a/docker-compose.yml b/docker-compose.yml index 21da2edd55..5cf97ef6d2 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -13,8 +13,10 @@ services: - ./:/mermaid - root_cache:/root/.cache - root_local:/root/.local + - root_local:/root/.npm ports: - 9000:9000 volumes: root_cache: root_local: + root_npm: diff --git a/package.json b/package.json index ac197712cb..6a291f0d67 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,12 @@ "coveralls": "^3.1.1", "cypress": "^12.10.0", "cypress-image-snapshot": "^4.0.1", +<<<<<<< HEAD "esbuild": "^0.18.0", +======= + "d3-sankey": "^0.12.3", + "esbuild": "^0.17.18", +>>>>>>> 84c278d0 (At last something is working) "eslint": "^8.39.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-cypress": "^2.13.2", diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 140c200fba..3f3716928e 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -32,6 +32,7 @@ export interface MermaidConfig { mindmap?: MindmapDiagramConfig; gitGraph?: GitGraphDiagramConfig; c4?: C4DiagramConfig; + sankey?: SankeyDiagramConfig; dompurifyConfig?: DOMPurify.Config; wrap?: boolean; fontSize?: number; @@ -411,6 +412,8 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { wrappingWidth?: number; } +export interface SankeyDiagramConfig extends BaseDiagramConfig {} + export interface FontConfig { fontSize?: string | number; fontFamily?: string; diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison index cab6302523..231c3fd501 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison @@ -40,6 +40,7 @@ /lex %start start +%left ARROW %% // language grammar @@ -66,10 +67,19 @@ attribute: ATTRIBUTE EQUAL value | ATTRIBUTE; value: VALUE | OPEN_STRING STRING CLOSE_STRING; -stream: node ARROW AMOUNT ARROW tail { yy.addNode($1); yy.addLink(); }; -tail: stream | node; +stream: node[source] ARROW amount ARROW tail[target] { + $$=$source; + yy.addLink($source, $target, $amount); +}; -node: NODE { yy.addNode($1) }; +amount: AMOUNT { $$=parseFloat($AMOUNT); }; + +tail + : stream { $$ = $stream } + | node { $$ = $node; } + ; + +node: NODE { $$ = yy.addNode($NODE); }; // : NODE exhaust intake exhaust_chain optional_attributes EOS // exhaust_chain: ARROW AMOUNT intake_chain | ; diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js index 47345d1b63..ee52efefcc 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js @@ -21,7 +21,7 @@ describe('Sankey diagram', function () { it('recognizes one flow', () => { const str = ` sankey - a -> 30 -> b -> 20 -> c + node_a -> 30 -> node_b -> 20 -> node_c `; parser.parse(str); @@ -30,9 +30,9 @@ describe('Sankey diagram', function () { it('recognizes multiple flows', () => { const str = ` sankey - a -> 30 -> b -> 12 -> e - c -> 30 -> d -> 12 -> e - c -> 40 -> e -> 12 -> q + node_a -> 30 -> node_b -> 12 -> node_e + node_c -> 30 -> node_d -> 12 -> node_e + node_c -> 40 -> node_e -> 12 -> node_q `; parser.parse(str); @@ -44,7 +44,7 @@ describe('Sankey diagram', function () { sankey node[] node[attr=1] - a -> 30 -> b + node_a -> 30 -> node_b node[attrWithoutValue] node[attr = 3] node[attr1 = 23413 attr2=1234] diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts index f43f3514a3..4f50fa4cc5 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts @@ -1,12 +1,12 @@ -import { log } from '../../logger.js'; -import mermaidAPI from '../../mermaidAPI.js'; +// import { log } from '../../logger.js'; +// import mermaidAPI from '../../mermaidAPI.js'; import * as configApi from '../../config.js'; import common from '../common/common.js'; import { - // setAccTitle, - // getAccTitle, - // getAccDescription, - // setAccDescription, + setAccTitle, + getAccTitle, + getAccDescription, + setAccDescription, setDiagramTitle, getDiagramTitle, clear as commonClear, @@ -20,46 +20,54 @@ import { // return text.trimStart().replace(/^\s*%%(?!{)[^\n]+\n?/gm, ''); // }; let links: Array = []; -let nodes: { [id: string]: Node } = {}; +let nodes: Array = []; +let nodesHash: Record = {}; -const clear = function () { +const clear = () => { links = []; - nodes = {}; + nodes = []; + nodesHash = {}; commonClear(); }; type Nullable = T | null; +interface ILink { + source?: Node; + target?: Node; + amount?: number; +} + class Link { - sourceNode: Nullable; - targetNode: Nullable; + source: Nullable; + target: Nullable; + amount: Nullable; constructor() { - this.sourceNode = null; - this.targetNode = null; + this.source = null; + this.target = null; + this.amount = 0; } } /** - * Adds a stream between two elements on the diagram + * Adds a link between two elements on the diagram * - * @param sourceNodeID - The id Node where the link starts - * @param targetNodeID - The id Node where the link ends + * @param source - Node where the link starts + * @param target - Node where the link ends + * @param amount - number, float or integer, describes the amount to be passed */ - -interface IAddLink { - sourceNodeID?: string; - targetNodeID?: string; - // amount?: number; -} - -const addLink = ({ sourceNodeID, targetNodeID }: IAddLink = {}): Link => { +// const addLink = ({ source, target, amount }: ILink = {}): Link => { +const addLink = (source?: Node, target?: Node, amount?: number): Link => { const link: Link = new Link(); - if (sourceNodeID !== undefined) { - link.sourceNode = addNode(sourceNodeID); + if (source !== undefined) { + link.source = source; + } + if (target !== undefined) { + link.target = target; } - if (targetNodeID !== undefined) { - link.targetNode = addNode(targetNodeID); + if (amount !== undefined) { + link.amount = amount; } links.push(link); @@ -68,11 +76,11 @@ const addLink = ({ sourceNodeID, targetNodeID }: IAddLink = {}): Link => { }; class Node { - id: string; + ID: string; title: string; - constructor(id: string) { - this.id = id; - this.title = id; + constructor(ID: string) { + this.ID = ID; + this.title = ID; } } @@ -81,25 +89,28 @@ class Node { * * @param id - The id Node */ -const addNode = (id: string): Node => { - id = common.sanitizeText(id, configApi.getConfig()); - if (nodes[id] === undefined) { - nodes[id] = new Node(id); +const addNode = (ID: string): Node => { + ID = common.sanitizeText(ID, configApi.getConfig()); + if (nodesHash[ID] === undefined) { + nodesHash[ID] = new Node(ID); } - const node = nodes[id]; + const node = nodesHash[ID]; + nodes.push(node); + // debugger; return node; }; export default { - // sankey interface + nodesHash, + nodes, + links, addLink, addNode, - // common DB interface // TODO: If this is a must this probably should be an interface - // getAccTitle, - // setAccTitle, - // getAccDescription, - // setAccDescription, + getAccTitle, + setAccTitle, + getAccDescription, + setAccDescription, getDiagramTitle, setDiagramTitle, clear, diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 916fd7ed0d..5d7fb2f64b 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -1,22 +1,202 @@ +// @ts-nocheck TODO: fix file import { Diagram } from '../../Diagram.js'; +import { log } from '../../logger.js'; +import * as configApi from '../../config.js'; +import { + select as d3select, + scaleOrdinal as d3scaleOrdinal, + schemeTableau10 as d3schemeTableau10, + // rgb as d3rgb, + map as d3map, +} from 'd3'; +import { + sankey as d3sankey, + sankeyLinkHorizontal +} from 'd3-sankey'; +import { configureSvgSize } from '../../setupGraphViewbox.js'; +import sankeyDB from './sankeyDB.js'; /** * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text. * - * @param _text - The text of the diagram + * @param text - The text of the diagram * @param id - The id of the diagram which will be used as a DOM element id¨ * @param _version - Mermaid version from package.json * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram */ -export const draw = function (text: string, id: string, _version: string, diagObj: Diagram) { - // debugger; - // diagObj.db.clear(); +export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void { + + // First of all parse sankey language + // Everything that is parsed will be stored in diagObj.DB + // That is why we need to clear DB first + // + if (typeof (diagObj?.db?.clear) !== 'undefined') { // why do we need to check for undefined? typescript complains + diagObj?.db?.clear(); + } + // Launch parsing diagObj.parser.parse(text); + log.debug('Parsed sankey diagram'); + + // Figure out what is happening there + // The main thing is svg object that is a wrapper from d3 for svg operations + // + const { securityLevel, sequence: conf } = configApi.getConfig(); + let sandboxElement; + if (securityLevel === 'sandbox') { + sandboxElement = select('#i' + id); + } + const root = + securityLevel === 'sandbox' + ? d3select(sandboxElement.nodes()[0].contentDocument.body) + : d3select('body'); + const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; + const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`); + + // Establish svg dimensions + // + const elem = doc.getElementById(id); + const width = elem.parentElement.offsetWidth; + + const height = 600; + configureSvgSize(svg, height, width, true); + + // Prepare data for construction + // This must be a mutable object with 2 properties: + // `nodes` and `links` + // + // let graph = { + // "nodes": [ + // { "id": "Alice" }, + // { "id": "Bob" }, + // { "id": "Carol" } + // ], + // "links": [ + // { "source": "Alice", "target": "Bob", "value": 23 }, + // { "source": "Bob", "target": "Carol", "value": 43 } + // ] + // }; + // + let graph = { + "nodes": [ + { "id": "Alice" }, + { "id": "Bob" }, + { "id": "Carol" } + ], + "links": [ + { "source": "Alice", "target": "Bob", "value": 23 }, + { "source": "Bob", "target": "Carol", "value": 43 } + ] + }; + + // Construct and configure a Sankey generator + // That will be a functino that calculates nodes and links dimentions + // + const sankey = d3sankey() + .nodeId((d) => d.id) // we use 'id' property to identify node + .nodeWidth(36) + .nodePadding(290) + .size([width, height]); + + // .nodeAlign(d3Sankey.sankeyLeft) // d3.sankeyLeft, etc. + // .nodeWidth(15) + // .nodePadding(10) + // .extent([[1, 5], [width - 1, height - 5]]); + // .nodeId(d => d['id']) + // + + // Compute the Sankey layout + // Namely calalculate nodes and links positions + // Our `graph` object will be mutated by this + // + sankey(graph); + + // debugger; + + // const node = svg.append("g") + // .selectAll("rect") + // .data(graph.nodes) + // .join("rect") + // .attr("x", d => d.x0) + // .attr("y", d => d.y0) + // .attr("height", d => d.y1 - d.y0) + // .attr("width", d => d.x1 - d.x0); + // // .attr("stroke", nodeStroke) + // // .attr("stroke-width", nodeStrokeWidth) + // // .attr("stroke-opacity", nodeStrokeOpacity) + // // .attr("stroke-linejoin", nodeStrokeLinejoin) + + var color = d3scaleOrdinal(d3schemeTableau10); + // Creates the rects that represent the nodes. + const rect = svg.append("g") + .attr("stroke", "#000") + .selectAll("rect") + .data(graph.nodes) + .join("rect") + .attr("x", d => d.x0) + .attr("y", d => d.y0) + .attr("height", d => d.y1 - d.y0) + .attr("width", d => d.x1 - d.x0) + .attr("fill", d => color(d.node)); + + + // // add in the links + // var link = svg.append("g") + // .selectAll(".link") + // .data(graph.links) + // .enter() + // .append("path") + // .attr("class", "link") + // .attr("d", sankeyLinkHorizontal()) + // .style("stroke-width", function (d) { return Math.max(1, d.dy); }) + // .sort(function (a, b) { return b.dy - a.dy; }); - // const elem = doc.getElementById(id); + // // add in the nodes + // var node = svg.append("g") + // .selectAll(".node") + // .data(graph.nodes) + // .enter().append("g") + // .attr("class", "node") + // .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; }) + // // .call(d3.drag() + // // .subject(function(d) { return d; }) + // // .on("start", function() { this.parentNode.appendChild(this); }) + // // .on("drag", dragmove)) + // ; + + // // add the rectangles for the nodes + // node + // .append("rect") + // .attr("height", function (d) { return d.dy; }) + // .attr("width", generator.nodeWidth()) + // .style("fill", function (d) { return d.color = color(d.name.replace(/ .*/, "")); }) + // .style("stroke", function (d) { return d3rgb(d.color).darker(2); }) + // // Add hover text + // .append("title") + // .text(function (d) { return d.name + "\n" + "There is " + d.value + " stuff in this node"; }); + + + // // add in the title for the nodes + // node + // .append("text") + // .attr("x", -6) + // .attr("y", function (d) { return d.dy / 2; }) + // .attr("dy", ".35em") + // .attr("text-anchor", "end") + // .attr("transform", null) + // .text(function (d) { return d.name; }) + // .filter(function (d) { return d.x < width / 2; }) + // .attr("x", 6 + generator.nodeWidth()) + // .attr("text-anchor", "start"); + + // console.log(); // debugger; - return 'TEST'; + // .layout(1); + + // const { nodes, links } = generator({ + // nodes: graph.nodes, + // links: graph.links, + // }); }; export default { diff --git a/run b/run index 9b02b07410..09f63cb82a 100755 --- a/run +++ b/run @@ -10,23 +10,19 @@ args=${@:2} case $command in sh) -$RUN mermaid sh $args +$RUN --service-ports mermaid sh $args ;; i | install) $RUN mermaid sh -c "npx pnpm install $args" ;; -test) -$RUN mermaid sh -c "npx pnpm test $args" +add) +$RUN mermaid sh -c "npx pnpm -w add $args" ;; -vitest) -$RUN mermaid sh -c "npx pnpm vitest $args" -;; - -e2e) -$RUN mermaid sh -c "npx pnpm e2e $args" +test | vitest | e2e ) +$RUN mermaid sh -c "npx pnpm $command $args" ;; lint) @@ -46,6 +42,7 @@ Run commonly used commands within docker containers \033[1m$name install\033[0m # Equvalent of pnpm install \033[1m$name dev\033[0m # Run dev server with examples, open http://localhost:9000 +$name add # Add package, 'run add d3-sankey' $name lint # Equvalent of pnpm -w run lint:fix $name test # Run unit tests $name vitest # Run watcher for unit tests From 81542142f569c87efbb29abb96024c1dccfd5997 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 18 Jun 2023 01:32:45 +0300 Subject: [PATCH 035/263] Fix errors --- packages/mermaid/src/config.type.ts | 2 +- .../src/diagrams/sankey/sankeyRenderer.ts | 55 ++++++++----------- pnpm-lock.yaml | 4 ++ 3 files changed, 28 insertions(+), 33 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 3f3716928e..f50a15d6b1 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -412,7 +412,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { wrappingWidth?: number; } -export interface SankeyDiagramConfig extends BaseDiagramConfig {} +export type SankeyDiagramConfig = BaseDiagramConfig; export interface FontConfig { fontSize?: string | number; diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 5d7fb2f64b..8731dd5cef 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -9,10 +9,7 @@ import { // rgb as d3rgb, map as d3map, } from 'd3'; -import { - sankey as d3sankey, - sankeyLinkHorizontal -} from 'd3-sankey'; +import { sankey as d3sankey, sankeyLinkHorizontal } from 'd3-sankey'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import sankeyDB from './sankeyDB.js'; @@ -25,12 +22,12 @@ import sankeyDB from './sankeyDB.js'; * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram */ export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void { - // First of all parse sankey language // Everything that is parsed will be stored in diagObj.DB // That is why we need to clear DB first // - if (typeof (diagObj?.db?.clear) !== 'undefined') { // why do we need to check for undefined? typescript complains + if (diagObj?.db?.clear !== undefined) { + // why do we need to check for undefined? typescript complains diagObj?.db?.clear(); } // Launch parsing @@ -75,21 +72,17 @@ export const draw = function (text: string, id: string, _version: string, diagOb // { "source": "Bob", "target": "Carol", "value": 43 } // ] // }; - // - let graph = { - "nodes": [ - { "id": "Alice" }, - { "id": "Bob" }, - { "id": "Carol" } + // + const graph = { + nodes: [{ id: 'Alice' }, { id: 'Bob' }, { id: 'Carol' }], + links: [ + { source: 'Alice', target: 'Bob', value: 23 }, + { source: 'Bob', target: 'Carol', value: 43 }, ], - "links": [ - { "source": "Alice", "target": "Bob", "value": 23 }, - { "source": "Bob", "target": "Carol", "value": 43 } - ] }; // Construct and configure a Sankey generator - // That will be a functino that calculates nodes and links dimentions + // That will be a function that calculates nodes and links dimensions // const sankey = d3sankey() .nodeId((d) => d.id) // we use 'id' property to identify node @@ -102,10 +95,10 @@ export const draw = function (text: string, id: string, _version: string, diagOb // .nodePadding(10) // .extent([[1, 5], [width - 1, height - 5]]); // .nodeId(d => d['id']) - // + // // Compute the Sankey layout - // Namely calalculate nodes and links positions + // Namely calculate nodes and links positions // Our `graph` object will be mutated by this // sankey(graph); @@ -125,19 +118,19 @@ export const draw = function (text: string, id: string, _version: string, diagOb // // .attr("stroke-opacity", nodeStrokeOpacity) // // .attr("stroke-linejoin", nodeStrokeLinejoin) - var color = d3scaleOrdinal(d3schemeTableau10); + const color = d3scaleOrdinal(d3schemeTableau10); // Creates the rects that represent the nodes. - const rect = svg.append("g") - .attr("stroke", "#000") - .selectAll("rect") + const rect = svg + .append('g') + .attr('stroke', '#000') + .selectAll('rect') .data(graph.nodes) - .join("rect") - .attr("x", d => d.x0) - .attr("y", d => d.y0) - .attr("height", d => d.y1 - d.y0) - .attr("width", d => d.x1 - d.x0) - .attr("fill", d => color(d.node)); - + .join('rect') + .attr('x', (d) => d.x0) + .attr('y', (d) => d.y0) + .attr('height', (d) => d.y1 - d.y0) + .attr('width', (d) => d.x1 - d.x0) + .attr('fill', (d) => color(d.node)); // // add in the links // var link = svg.append("g") @@ -163,7 +156,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb // // .on("drag", dragmove)) // ; - // // add the rectangles for the nodes // node // .append("rect") @@ -175,7 +167,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb // .append("title") // .text(function (d) { return d.name + "\n" + "There is " + d.value + " stuff in this node"; }); - // // add in the title for the nodes // node // .append("text") diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index da40c7d36f..f02a51f093 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15810,3 +15810,7 @@ packages: /zwitch@2.0.2: resolution: {integrity: sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==} dev: true + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false From c41fc672545b9936d3d3e2e5472103c361464cd8 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 18 Jun 2023 03:23:11 +0300 Subject: [PATCH 036/263] Added nodes and paths --- .../src/diagrams/sankey/sankeyRenderer.ts | 130 ++++++++++++++---- packages/mermaid/src/setupGraphViewbox.js | 1 + 2 files changed, 107 insertions(+), 24 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 8731dd5cef..6a184ef86e 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -9,7 +9,7 @@ import { // rgb as d3rgb, map as d3map, } from 'd3'; -import { sankey as d3sankey, sankeyLinkHorizontal } from 'd3-sankey'; +import { sankey as d3Sankey, sankeyLinkHorizontal as d3SankeyLinkHorizontal } from 'd3-sankey'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import sankeyDB from './sankeyDB.js'; @@ -35,7 +35,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb log.debug('Parsed sankey diagram'); // Figure out what is happening there - // The main thing is svg object that is a wrapper from d3 for svg operations + // The main thing is svg object that is a d3 wrapper for svg operations // const { securityLevel, sequence: conf } = configApi.getConfig(); let sandboxElement; @@ -49,13 +49,15 @@ export const draw = function (text: string, id: string, _version: string, diagOb const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`); - // Establish svg dimensions + // Establish svg dimensions and get width and height // const elem = doc.getElementById(id); const width = elem.parentElement.offsetWidth; + const height = 100; // TODO calculate height? - const height = 600; + // FIX: using max width prevents height from being set configureSvgSize(svg, height, width, true); + svg.attr('height', height); // that's why we need this line // Prepare data for construction // This must be a mutable object with 2 properties: @@ -84,7 +86,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb // Construct and configure a Sankey generator // That will be a function that calculates nodes and links dimensions // - const sankey = d3sankey() + const sankey = d3Sankey() .nodeId((d) => d.id) // we use 'id' property to identify node .nodeWidth(36) .nodePadding(290) @@ -100,10 +102,10 @@ export const draw = function (text: string, id: string, _version: string, diagOb // Compute the Sankey layout // Namely calculate nodes and links positions // Our `graph` object will be mutated by this + // and enriched with some properties // sankey(graph); - // debugger; // const node = svg.append("g") // .selectAll("rect") @@ -118,30 +120,110 @@ export const draw = function (text: string, id: string, _version: string, diagOb // // .attr("stroke-opacity", nodeStrokeOpacity) // // .attr("stroke-linejoin", nodeStrokeLinejoin) + // Get color scheme for the graph const color = d3scaleOrdinal(d3schemeTableau10); - // Creates the rects that represent the nodes. - const rect = svg + + // Creates the groups for nodes + svg .append('g') - .attr('stroke', '#000') - .selectAll('rect') + .attr('class', 'nodes') + .attr('stroke', '#000') + .selectAll('.node') .data(graph.nodes) - .join('rect') - .attr('x', (d) => d.x0) - .attr('y', (d) => d.y0) - .attr('height', (d) => d.y1 - d.y0) - .attr('width', (d) => d.x1 - d.x0) - .attr('fill', (d) => color(d.node)); - - // // add in the links - // var link = svg.append("g") + .join('g') + .attr('class', 'node') + .attr("transform", function (d) { return "translate(" + d.x0 + "," + d.y0 + ")"; }) + .attr('x', (d) => d.x0) + .attr('y', (d) => d.y0) + .append('rect') + .attr('height', (d) => {console.log(d); return (d.y1 - d.y0);}) + .attr('width', (d) => d.x1 - d.x0) + .attr('fill', (d) => color(d.id)); + + // Create text for nodes + svg + .append("g") + .attr('class', 'node-labels') + .attr("font-family", "sans-serif") + .attr("font-size", 12) + .selectAll('text') + .data(graph.nodes) + .join('text') + .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) + .attr("y", d => (d.y1 + d.y0) / 2) + .attr("dy", "0.35em") + .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") + .text(d => d.id) + + // Add links + // svg + // .append("g") // .selectAll(".link") // .data(graph.links) // .enter() - // .append("path") - // .attr("class", "link") - // .attr("d", sankeyLinkHorizontal()) - // .style("stroke-width", function (d) { return Math.max(1, d.dy); }) - // .sort(function (a, b) { return b.dy - a.dy; }); + // .append("path") + // .attr("class", "link") + // .attr("d", sankeyLinkHorizontal()) + // .style("stroke-width", function (d) { return Math.max(1, d.dy); }) + // .sort(function (a, b) { return b.dy - a.dy; }); + + // Creates the paths that represent the links. + const link_g = svg.append("g") + .attr('class', 'links') + .attr("fill", "none") + .attr("stroke-opacity", 0.5) + .selectAll(".link") + .data(graph.links) + .join("g") + .attr('class', 'link') + .style("mix-blend-mode", "multiply"); + + link_g.append("path") + .attr("d", d3SankeyLinkHorizontal()) + .attr("stroke", d => color(d.source.id)) + .attr("stroke-width", d => Math.max(1, d.width)); + + // linkColor === "source-target" ? (d) => d.uid + // : linkColor === "source" ? (d) => color(d.source.category) + // : linkColor === "target" ? (d) => color(d.target.category) + // : linkColor + + // svg.append("g") + // .attr("font-family", "sans-serif") + // .attr("font-size", 10) + // .selectAll("text") + // .data(nodes) + // .join("text") + // .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) + // .attr("y", d => (d.y1 + d.y0) / 2) + // .attr("dy", "0.35em") + // .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") + // .text(d => d.name); + + // Create links + // .attr("transform", null) + // .append("g") + // .attr("font-family", "sans-serif") + // .attr("font-size", 10) + // .selectAll("text") + // .data(nodes) + // .join("text") + // .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) + // .attr("y", d => (d.y1 + d.y0) / 2) + // .attr("dy", "0.35em") + // .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") + // .text(d => d.name); + // .attr("y", function (d) { return d.dy / 2; }) + // .attr("dy", ".35em") + // .attr("text-anchor", "end") + // .attr("transform", null) + // .text(function (d) { return d.name; }) + // .filter(function (d) { return d.x < width / 2; }) + // .attr("x", 6 + generator.nodeWidth()) + // .attr("text-anchor", "start"); + + // .selectAll('rect') + // // add in the nodes // var node = svg.append("g") diff --git a/packages/mermaid/src/setupGraphViewbox.js b/packages/mermaid/src/setupGraphViewbox.js index 0396d654f7..9294f80242 100644 --- a/packages/mermaid/src/setupGraphViewbox.js +++ b/packages/mermaid/src/setupGraphViewbox.js @@ -25,6 +25,7 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) { if (useMaxWidth) { attrs.set('width', '100%'); attrs.set('style', `max-width: ${width}px;`); + // TODO: when using max width it does not set height? Is it intended? } else { attrs.set('height', height); attrs.set('width', width); From f5add81e29114dc5dd2e88041da80ecef4db32b9 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 18 Jun 2023 03:36:54 +0300 Subject: [PATCH 037/263] Simple flow is done --- .../src/diagrams/sankey/sankeyRenderer.ts | 143 +++--------------- 1 file changed, 25 insertions(+), 118 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 6a184ef86e..484eeab1a3 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -7,9 +7,16 @@ import { scaleOrdinal as d3scaleOrdinal, schemeTableau10 as d3schemeTableau10, // rgb as d3rgb, - map as d3map, + // map as d3map, } from 'd3'; -import { sankey as d3Sankey, sankeyLinkHorizontal as d3SankeyLinkHorizontal } from 'd3-sankey'; + +import { + sankey as d3Sankey, + sankeyLinkHorizontal as d3SankeyLinkHorizontal, + sankeyLeft as d3SankeyLeft, + sankeyRight as d3SankeyRight, + sankeyJustify as d3SankeyJustify, +} from 'd3-sankey'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import sankeyDB from './sankeyDB.js'; @@ -53,7 +60,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb // const elem = doc.getElementById(id); const width = elem.parentElement.offsetWidth; - const height = 100; // TODO calculate height? + const height = 300; // TODO calculate height? // FIX: using max width prevents height from being set configureSvgSize(svg, height, width, true); @@ -76,10 +83,18 @@ export const draw = function (text: string, id: string, _version: string, diagOb // }; // const graph = { - nodes: [{ id: 'Alice' }, { id: 'Bob' }, { id: 'Carol' }], + nodes: [ + { id: 'Alice' }, + { id: 'Bob' }, + { id: 'Carol' }, + { id: 'Andrew' }, + { id: 'Peter' } + ], links: [ + { source: 'Alice', target: 'Andrew', value: 11 }, { source: 'Alice', target: 'Bob', value: 23 }, { source: 'Bob', target: 'Carol', value: 43 }, + { source: 'Peter', target: 'Carol', value: 15 }, ], }; @@ -88,11 +103,12 @@ export const draw = function (text: string, id: string, _version: string, diagOb // const sankey = d3Sankey() .nodeId((d) => d.id) // we use 'id' property to identify node - .nodeWidth(36) - .nodePadding(290) + .nodeWidth(10) + .nodePadding(10) + .nodeAlign(d3SankeyJustify) // d3.sankeyLeft, etc. .size([width, height]); - - // .nodeAlign(d3Sankey.sankeyLeft) // d3.sankeyLeft, etc. + + //["left", "sankeyLeft"], ["right", "sankeyRight"], ["center", "sankeyCenter"], ["justify", "sankeyJustify"] // .nodeWidth(15) // .nodePadding(10) // .extent([[1, 5], [width - 1, height - 5]]); @@ -106,20 +122,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb // sankey(graph); - - // const node = svg.append("g") - // .selectAll("rect") - // .data(graph.nodes) - // .join("rect") - // .attr("x", d => d.x0) - // .attr("y", d => d.y0) - // .attr("height", d => d.y1 - d.y0) - // .attr("width", d => d.x1 - d.x0); - // // .attr("stroke", nodeStroke) - // // .attr("stroke-width", nodeStrokeWidth) - // // .attr("stroke-opacity", nodeStrokeOpacity) - // // .attr("stroke-linejoin", nodeStrokeLinejoin) - // Get color scheme for the graph const color = d3scaleOrdinal(d3schemeTableau10); @@ -145,7 +147,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb .append("g") .attr('class', 'node-labels') .attr("font-family", "sans-serif") - .attr("font-size", 12) + .attr("font-size", 14) .selectAll('text') .data(graph.nodes) .join('text') @@ -155,18 +157,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.id) - // Add links - // svg - // .append("g") - // .selectAll(".link") - // .data(graph.links) - // .enter() - // .append("path") - // .attr("class", "link") - // .attr("d", sankeyLinkHorizontal()) - // .style("stroke-width", function (d) { return Math.max(1, d.dy); }) - // .sort(function (a, b) { return b.dy - a.dy; }); - // Creates the paths that represent the links. const link_g = svg.append("g") .attr('class', 'links') @@ -183,89 +173,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb .attr("stroke", d => color(d.source.id)) .attr("stroke-width", d => Math.max(1, d.width)); - // linkColor === "source-target" ? (d) => d.uid - // : linkColor === "source" ? (d) => color(d.source.category) - // : linkColor === "target" ? (d) => color(d.target.category) - // : linkColor - - // svg.append("g") - // .attr("font-family", "sans-serif") - // .attr("font-size", 10) - // .selectAll("text") - // .data(nodes) - // .join("text") - // .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) - // .attr("y", d => (d.y1 + d.y0) / 2) - // .attr("dy", "0.35em") - // .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") - // .text(d => d.name); - - // Create links - // .attr("transform", null) - // .append("g") - // .attr("font-family", "sans-serif") - // .attr("font-size", 10) - // .selectAll("text") - // .data(nodes) - // .join("text") - // .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) - // .attr("y", d => (d.y1 + d.y0) / 2) - // .attr("dy", "0.35em") - // .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") - // .text(d => d.name); - // .attr("y", function (d) { return d.dy / 2; }) - // .attr("dy", ".35em") - // .attr("text-anchor", "end") - // .attr("transform", null) - // .text(function (d) { return d.name; }) - // .filter(function (d) { return d.x < width / 2; }) - // .attr("x", 6 + generator.nodeWidth()) - // .attr("text-anchor", "start"); - - // .selectAll('rect') - - - // // add in the nodes - // var node = svg.append("g") - // .selectAll(".node") - // .data(graph.nodes) - // .enter().append("g") - // .attr("class", "node") - // .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; }) - // // .call(d3.drag() - // // .subject(function(d) { return d; }) - // // .on("start", function() { this.parentNode.appendChild(this); }) - // // .on("drag", dragmove)) - // ; - - // // add the rectangles for the nodes - // node - // .append("rect") - // .attr("height", function (d) { return d.dy; }) - // .attr("width", generator.nodeWidth()) - // .style("fill", function (d) { return d.color = color(d.name.replace(/ .*/, "")); }) - // .style("stroke", function (d) { return d3rgb(d.color).darker(2); }) - // // Add hover text - // .append("title") - // .text(function (d) { return d.name + "\n" + "There is " + d.value + " stuff in this node"; }); - - // // add in the title for the nodes - // node - // .append("text") - // .attr("x", -6) - // .attr("y", function (d) { return d.dy / 2; }) - // .attr("dy", ".35em") - // .attr("text-anchor", "end") - // .attr("transform", null) - // .text(function (d) { return d.name; }) - // .filter(function (d) { return d.x < width / 2; }) - // .attr("x", 6 + generator.nodeWidth()) - // .attr("text-anchor", "start"); - - // console.log(); - // debugger; - // .layout(1); - // const { nodes, links } = generator({ // nodes: graph.nodes, // links: graph.links, From d22131e2fb373065379de8ca9837b2e9c51f42e0 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 18 Jun 2023 04:33:20 +0300 Subject: [PATCH 038/263] It can read syntax and draw diagram --- .../mermaid/src/diagrams/sankey/sankeyDB.ts | 35 ++++++------ .../src/diagrams/sankey/sankeyRenderer.ts | 53 +++++++++++++------ 2 files changed, 57 insertions(+), 31 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts index 4f50fa4cc5..23ef95528c 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts @@ -23,7 +23,7 @@ let links: Array = []; let nodes: Array = []; let nodesHash: Record = {}; -const clear = () => { +const clear = function() { links = []; nodes = []; nodesHash = {}; @@ -32,20 +32,20 @@ const clear = () => { type Nullable = T | null; -interface ILink { - source?: Node; - target?: Node; - amount?: number; -} +// interface ILink { +// source?: Node; +// target?: Node; +// value?: number; +// } class Link { source: Nullable; target: Nullable; - amount: Nullable; + value: Nullable; constructor() { this.source = null; this.target = null; - this.amount = 0; + this.value = 0; } } @@ -54,20 +54,21 @@ class Link { * * @param source - Node where the link starts * @param target - Node where the link ends - * @param amount - number, float or integer, describes the amount to be passed + * @param value - number, float or integer, describes the amount to be passed */ // const addLink = ({ source, target, amount }: ILink = {}): Link => { -const addLink = (source?: Node, target?: Node, amount?: number): Link => { +const addLink = function(source?: Node, target?: Node, value?: number): Link { const link: Link = new Link(); + // TODO: make attribute setters if (source !== undefined) { link.source = source; } if (target !== undefined) { link.target = target; } - if (amount !== undefined) { - link.amount = amount; + if (value !== undefined) { + link.value = value; } links.push(link); @@ -89,7 +90,7 @@ class Node { * * @param id - The id Node */ -const addNode = (ID: string): Node => { +const addNode = function(ID: string): Node { ID = common.sanitizeText(ID, configApi.getConfig()); if (nodesHash[ID] === undefined) { nodesHash[ID] = new Node(ID); @@ -100,10 +101,14 @@ const addNode = (ID: string): Node => { return node; }; +const getNodes = () => nodes; +const getLinks = () => links; + export default { nodesHash, - nodes, - links, + getConfig: () => configApi.getConfig().sankey, + getNodes, + getLinks, addLink, addNode, // TODO: If this is a must this probably should be an interface diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 484eeab1a3..b0fac5c125 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -15,10 +15,13 @@ import { sankeyLinkHorizontal as d3SankeyLinkHorizontal, sankeyLeft as d3SankeyLeft, sankeyRight as d3SankeyRight, + sankeyCenter as d3SankeyCenter, sankeyJustify as d3SankeyJustify, } from 'd3-sankey'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import sankeyDB from './sankeyDB.js'; +import { db } from '../info/infoDb.js'; +import { debug } from 'console'; /** * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text. @@ -39,6 +42,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb } // Launch parsing diagObj.parser.parse(text); + debugger; log.debug('Parsed sankey diagram'); // Figure out what is happening there @@ -66,7 +70,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb configureSvgSize(svg, height, width, true); svg.attr('height', height); // that's why we need this line - // Prepare data for construction + // Prepare data for construction based on diagObj.db // This must be a mutable object with 2 properties: // `nodes` and `links` // @@ -82,21 +86,36 @@ export const draw = function (text: string, id: string, _version: string, diagOb // ] // }; // - const graph = { - nodes: [ - { id: 'Alice' }, - { id: 'Bob' }, - { id: 'Carol' }, - { id: 'Andrew' }, - { id: 'Peter' } - ], - links: [ - { source: 'Alice', target: 'Andrew', value: 11 }, - { source: 'Alice', target: 'Bob', value: 23 }, - { source: 'Bob', target: 'Carol', value: 43 }, - { source: 'Peter', target: 'Carol', value: 15 }, - ], - }; + let graph = { + nodes: [], + links: [] + } + + diagObj.db.getNodes().forEach(node => { + graph.nodes.push({id: node.ID}); + }); + + diagObj.db.getLinks().forEach(link => { + graph.links.push({source: link.source.ID, target: link.target.ID, value: link.value}); + }); + + + debugger; + // const graph = { + // nodes: [ + // { id: 'Alice' }, + // { id: 'Bob' }, + // { id: 'Carol' }, + // { id: 'Andrew' }, + // { id: 'Peter' } + // ], + // links: [ + // { source: 'Alice', target: 'Andrew', value: 11 }, + // { source: 'Alice', target: 'Bob', value: 23 }, + // { source: 'Bob', target: 'Carol', value: 43 }, + // { source: 'Peter', target: 'Carol', value: 15 }, + // ], + // }; // Construct and configure a Sankey generator // That will be a function that calculates nodes and links dimensions @@ -107,6 +126,8 @@ export const draw = function (text: string, id: string, _version: string, diagOb .nodePadding(10) .nodeAlign(d3SankeyJustify) // d3.sankeyLeft, etc. .size([width, height]); + // .extent([[5, 20], [width - 5, height - 20]]); alias for size + // paddings //["left", "sankeyLeft"], ["right", "sankeyRight"], ["center", "sankeyCenter"], ["justify", "sankeyJustify"] // .nodeWidth(15) From 19f858b73b9baf093e53fbd9bc1e3961deb89dad Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 18 Jun 2023 23:53:57 +0300 Subject: [PATCH 039/263] Fixed nodes duplicates --- demos/sankey.html | 10 ++++++---- packages/mermaid/src/diagrams/sankey/sankeyDB.ts | 10 ++++++---- packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts | 1 - 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/demos/sankey.html b/demos/sankey.html index b06ead15eb..ebacae6494 100644 --- a/demos/sankey.html +++ b/demos/sankey.html @@ -17,10 +17,12 @@

    Sankey diagram demos

    Simple flow

           sankey
-      node_a->10->node_b;
-      node_c->20->node_b;
-      node_b->15->node_d;
-      node_a-> 7->node_d;
+      a->28->b->10->c
+      a->11->b
+      k->18->b->35->d->13->e->43->dd11
+      d->5->e
+      d->10->c
+      k->25->e
    - - + + + + \ No newline at end of file diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 54b1290987..06a33980b9 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -42,7 +42,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb } // Launch parsing diagObj.parser.parse(text); - debugger; + // debugger; log.debug('Parsed sankey diagram'); // Figure out what is happening there @@ -86,20 +86,20 @@ export const draw = function (text: string, id: string, _version: string, diagOb // ] // }; // - let graph = { + const graph = { nodes: [], links: [] } diagObj.db.getNodes().forEach(node => { - graph.nodes.push({id: node.ID}); + graph.nodes.push({ id: node.ID }); }); diagObj.db.getLinks().forEach(link => { - graph.links.push({source: link.source.ID, target: link.target.ID, value: link.value}); + graph.links.push({ source: link.source.ID, target: link.target.ID, value: link.value }); }); - debugger; + // debugger; // const graph = { // nodes: [ // { id: 'Alice' }, @@ -125,10 +125,10 @@ export const draw = function (text: string, id: string, _version: string, diagOb .nodePadding(10) .nodeAlign(d3SankeyJustify) // d3.sankeyLeft, etc. .size([width, height]); - // .extent([[5, 20], [width - 5, height - 20]]); alias for size - // paddings - - //["left", "sankeyLeft"], ["right", "sankeyRight"], ["center", "sankeyCenter"], ["justify", "sankeyJustify"] + // .extent([[5, 20], [width - 5, height - 20]]); alias for size + // paddings + + //["left", "sankeyLeft"], ["right", "sankeyRight"], ["center", "sankeyCenter"], ["justify", "sankeyJustify"] // .nodeWidth(15) // .nodePadding(10) // .extent([[1, 5], [width - 1, height - 5]]); @@ -148,45 +148,45 @@ export const draw = function (text: string, id: string, _version: string, diagOb // Creates the groups for nodes svg .append('g') - .attr('class', 'nodes') - .attr('stroke', '#000') + .attr('class', 'nodes') + .attr('stroke', '#000') .selectAll('.node') .data(graph.nodes) .join('g') - .attr('class', 'node') - .attr("transform", function (d) { return "translate(" + d.x0 + "," + d.y0 + ")"; }) - .attr('x', (d) => d.x0) - .attr('y', (d) => d.y0) - .append('rect') - .attr('height', (d) => {console.log(d); return (d.y1 - d.y0);}) - .attr('width', (d) => d.x1 - d.x0) - .attr('fill', (d) => color(d.id)); + .attr('class', 'node') + .attr("transform", function (d) { return "translate(" + d.x0 + "," + d.y0 + ")"; }) + .attr('x', (d) => d.x0) + .attr('y', (d) => d.y0) + .append('rect') + .attr('height', (d) => { console.log(d); return (d.y1 - d.y0); }) + .attr('width', (d) => d.x1 - d.x0) + .attr('fill', (d) => color(d.id)); // Create text for nodes svg .append("g") - .attr('class', 'node-labels') - .attr("font-family", "sans-serif") - .attr("font-size", 14) + .attr('class', 'node-labels') + .attr("font-family", "sans-serif") + .attr("font-size", 14) .selectAll('text') .data(graph.nodes) .join('text') - .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) - .attr("y", d => (d.y1 + d.y0) / 2) - .attr("dy", "0.35em") - .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") - .text(d => d.id) + .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) + .attr("y", d => (d.y1 + d.y0) / 2) + .attr("dy", "0.35em") + .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") + .text(d => d.id) // Creates the paths that represent the links. const link_g = svg.append("g") - .attr('class', 'links') - .attr("fill", "none") - .attr("stroke-opacity", 0.5) + .attr('class', 'links') + .attr("fill", "none") + .attr("stroke-opacity", 0.5) .selectAll(".link") .data(graph.links) .join("g") - .attr('class', 'link') - .style("mix-blend-mode", "multiply"); + .attr('class', 'link') + .style("mix-blend-mode", "multiply"); link_g.append("path") .attr("d", d3SankeyLinkHorizontal()) From 726efdad5346c7969f683de0490f0050b0e2a9a0 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Mon, 19 Jun 2023 01:09:21 +0300 Subject: [PATCH 041/263] Fixed packaged --- package.json | 6 +----- pnpm-lock.yaml | 34 ++++++++++++++++++++++++++++++---- 2 files changed, 31 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 6a291f0d67..785f8056cb 100644 --- a/package.json +++ b/package.json @@ -85,12 +85,8 @@ "coveralls": "^3.1.1", "cypress": "^12.10.0", "cypress-image-snapshot": "^4.0.1", -<<<<<<< HEAD - "esbuild": "^0.18.0", -======= "d3-sankey": "^0.12.3", - "esbuild": "^0.17.18", ->>>>>>> 84c278d0 (At last something is working) + "esbuild": "^0.18.0", "eslint": "^8.39.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-cypress": "^2.13.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f02a51f093..365f1bc5cf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,5 @@ lockfileVersion: '6.0' -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - importers: .: @@ -86,6 +82,9 @@ importers: cypress-image-snapshot: specifier: ^4.0.1 version: 4.0.1(cypress@12.10.0)(jest@29.5.0) + d3-sankey: + specifier: ^0.12.3 + version: 0.12.3 esbuild: specifier: ^0.18.0 version: 0.18.0 @@ -7046,6 +7045,12 @@ packages: lodash: 4.17.21 dev: false + /d3-array@2.12.1: + resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==} + dependencies: + internmap: 1.0.1 + dev: true + /d3-array@3.2.0: resolution: {integrity: sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==} engines: {node: '>=12'} @@ -7163,6 +7168,10 @@ packages: d3-color: 3.1.0 dev: false + /d3-path@1.0.9: + resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==} + dev: true + /d3-path@3.0.1: resolution: {integrity: sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w==} engines: {node: '>=12'} @@ -7183,6 +7192,13 @@ packages: engines: {node: '>=12'} dev: false + /d3-sankey@0.12.3: + resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==} + dependencies: + d3-array: 2.12.1 + d3-shape: 1.3.7 + dev: true + /d3-scale-chromatic@3.0.0: resolution: {integrity: sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==} engines: {node: '>=12'} @@ -7207,6 +7223,12 @@ packages: engines: {node: '>=12'} dev: false + /d3-shape@1.3.7: + resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==} + dependencies: + d3-path: 1.0.9 + dev: true + /d3-shape@3.1.0: resolution: {integrity: sha512-tGDh1Muf8kWjEDT/LswZJ8WF85yDZLvVJpYU9Nq+8+yW1Z5enxrmXOhTArlkaElU+CTn0OTVNli+/i+HP45QEQ==} engines: {node: '>=12'} @@ -9442,6 +9464,10 @@ packages: side-channel: 1.0.4 dev: true + /internmap@1.0.1: + resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==} + dev: true + /internmap@2.0.3: resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==} engines: {node: '>=12'} From 6722ac754082d3ba77bbe7d9be23a6e0c70ce2d7 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Mon, 19 Jun 2023 03:45:24 +0300 Subject: [PATCH 042/263] Multiple improvements on syntax Syntax has been simplified Removed extra initial states Removed unused groups Nodes can be wrapped in double qotes Updated demo page --- demos/sankey.html | 95 +++++++++++++++++-- .../src/diagrams/sankey/parser/sankey.jison | 66 ++++++------- .../src/diagrams/sankey/parser/sankey.spec.js | 93 +++++++++++++++++- .../mermaid/src/diagrams/sankey/sankeyDB.ts | 4 +- .../src/diagrams/sankey/sankeyRenderer.ts | 12 +-- 5 files changed, 214 insertions(+), 56 deletions(-) diff --git a/demos/sankey.html b/demos/sankey.html index 2cf778206f..c35b907d29 100644 --- a/demos/sankey.html +++ b/demos/sankey.html @@ -16,16 +16,93 @@

    Sankey diagram demos

    -

    Simple flow

    +

    Simple example

    -      sankey
-      a->28->b->10->c
-      a->11->b
-      k->18->b->35->d->13->e->43->dd11
-      d->5->e
-      d->10->c
-      k->25->e
-
    + sankey + + node[title="hello, how are you?"] + node[title="hello, mister Sankey"] + + First -> 30 -> Second + First -> 10 -> Third + Second -> 20 -> Third + + + +

    Energy flow

    + 
    +    sankey
+
+    "Agricultural 'waste'"      ->      124.729  -> "Bio-conversion"
+    "Bio-conversion"            ->      0.597    -> "Liquid"
+    "Bio-conversion"            ->      26.862   -> "Losses"
+    "Bio-conversion"            ->      280.322  -> "Solid"
+    "Bio-conversion"            ->      81.144   -> "Gas"
+    "Biofuel imports"           ->      35       -> "Liquid"
+    "Biomass imports"           ->      35       -> "Solid"
+    "Coal imports"              ->      11.606   -> "Coal"
+    "Coal reserves"             ->      63.965   -> "Coal"
+    "Coal"                      ->      75.571   -> "Solid"
+    "District heating"          ->      10.639   -> "Industry"
+    "District heating"          ->      22.505   -> "Heating and cooling - commercial"
+    "District heating"          ->      46.184   -> "Heating and cooling - homes"
+    "Electricity grid"          ->      104.453  -> "Over generation / exports"
+    "Electricity grid"          ->      113.726  -> "Heating and cooling - homes"
+    "Electricity grid"          ->      27.14    -> "H2 conversion"
+    "Electricity grid"          ->      342.165  -> "Industry"
+    "Electricity grid"          ->      37.797   -> "Road transport"
+    "Electricity grid"          ->      4.412    -> "Agriculture"
+    "Electricity grid"          ->      40.858   -> "Heating and cooling - commercial"
+    "Electricity grid"          ->      56.691   -> "Losses"
+    "Electricity grid"          ->      7.863    -> "Rail transport"
+    "Electricity grid"          ->      90.008   -> "Lighting & appliances - commercial"
+    "Electricity grid"          ->      93.494   -> "Lighting & appliances - homes"
+    "Gas imports"               ->      40.719   -> "Ngas"
+    "Gas reserves"              ->      82.233   -> "Ngas"
+    "Gas"                       ->      0.129    -> "Heating and cooling - commercial"
+    "Gas"                       ->      1.401    -> "Losses"
+    "Gas"                       ->      151.891  -> "Thermal generation"
+    "Gas"                       ->      2.096    -> "Agriculture"
+    "Gas"                       ->      48.58    -> "Industry"
+    "Geothermal"                ->      7.013    -> "Electricity grid"
+    "H2 conversion"             ->      20.897   -> "H2"
+    "H2 conversion"             ->      6.242    -> "Losses"
+    "H2"                        ->      20.897   -> "Road transport"
+    "Hydro"                     ->      6.995    -> "Electricity grid"
+    "Liquid"                    ->      121.066  -> "Industry"
+    "Liquid"                    ->      128.69   -> "International shipping"
+    "Liquid"                    ->      135.835  -> "Road transport"
+    "Liquid"                    ->      14.458   -> "Domestic aviation"
+    "Liquid"                    ->      206.267  -> "International aviation"
+    "Liquid"                    ->      3.64     -> "Agriculture"
+    "Liquid"                    ->      33.218   -> "National navigation"
+    "Liquid"                    ->      4.413    -> "Rail transport"
+    "Marine algae"              ->      4.375    -> "Bio-conversion"
+    "Ngas"                      ->      122.952  -> "Gas"
+    "Nuclear"                   ->      839.978  -> "Thermal generation"
+    "Oil imports"               ->      504.287  -> "Oil"
+    "Oil reserves"              ->      107.703  -> "Oil"
+    "Oil"                       ->      611.99   -> "Liquid"
+    "Other waste"               ->      56.587   -> "Solid"
+    "Other waste"               ->      77.81    -> "Bio-conversion"
+    "Pumped heat"               ->      193.026  -> "Heating and cooling - homes"
+    "Pumped heat"               ->      70.672   -> "Heating and cooling - commercial"
+    "Solar PV"                  ->      59.901   -> "Electricity grid"
+    "Solar Thermal"             ->      19.263   -> "Heating and cooling - homes"
+    "Solar"                     ->      19.263   -> "Solar Thermal"
+    "Solar"                     ->      59.901   -> "Solar PV"
+    "Solid"                     ->      0.882    -> "Agriculture"
+    "Solid"                     ->      400.12   -> "Thermal generation"
+    "Solid"                     ->      46.477   -> "Industry"
+    "Thermal generation"        ->      525.531  -> "Electricity grid"
+    "Thermal generation"        ->      787.129  -> "Losses"
+    "Thermal generation"        ->      79.329   -> "District heating"
+    "Tidal"                     ->      9.452    -> "Electricity grid"
+    "UK land based bioenergy"   ->      182.01   -> "Bio-conversion"
+    "Wave"                      ->      19.013   -> "Electricity grid"
+    "Wind"                      ->      289.366  -> "Electricity grid"
+
    + - + - \ No newline at end of file + + + diff --git a/run b/run index 473c6aaff2..0f9c451d95 100755 --- a/run +++ b/run @@ -47,6 +47,7 @@ Run commonly used commands within docker containers \033[1m$name dev\033[0m # Run dev server with examples, open http://localhost:9000 $name add # Add package, 'run add d3-sankey' +$name prettier # Prettify a file 'run prettier ' $name lint # Equvalent of pnpm -w run lint:fix $name test # Run unit tests $name vitest # Run watcher for unit tests @@ -65,4 +66,4 @@ echo -n -e "$usage" $name help ;; -esac \ No newline at end of file +esac From 6077ba54054eed165052d73fe342b6ad3bf04e8c Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Tue, 20 Jun 2023 02:37:27 +0300 Subject: [PATCH 045/263] Updated syntax and fixed comments from review --- .../src/diagrams/sankey/parser/sankey.jison | 113 +++++++++++------- .../src/diagrams/sankey/parser/sankey.spec.js | 12 +- .../mermaid/src/diagrams/sankey/sankeyDB.ts | 86 +++++-------- .../src/diagrams/sankey/sankeyDiagram.ts | 2 +- .../src/diagrams/sankey/sankeyRenderer.ts | 43 ++----- 5 files changed, 115 insertions(+), 141 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison index 8f970b815c..c981267a01 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison @@ -1,39 +1,58 @@ /** mermaid */ %lex +TOKEN \w+ +NUM \d+(.\d+)? %options case-insensitive -%options easy_keyword_rules +%options easy_keword_rules + +%s link_value -// when we are inside [] section we are defining attrubutes %x attributes -// or if we use "" we are expecting a string containing value +%x attr_value %x string -%x value %% +//-------------------------------------------------------------- // skip all whitespace EXCEPT newlines, but not within a string -[^\S\r\n]+ {} - -// main -"sankey" { return 'SANKEY'; } -\d+(.\d+)? { return 'AMOUNT'; } -"->" { return 'ARROW'; } -\w+ { return 'NODE'; } -(?:<>|[\n;])+ { return 'EOS'; } // end of statement is semicolon ; new line \n or end of file +//-------------------------------------------------------------- + +[^\S\r\n]+ {} + +//-------------- +// basic tokens +//-------------- + +(<>|[\n;])+ { return 'EOS'; } // end of statement is semicolon ; new line \n or end of file +"sankey" { return 'SANKEY'; } +{TOKEN} { return 'NODE_ID'; } +{NUM} { return 'AMOUNT'; } +"->" { + if(this.topState()!=='link_value') this.pushState('link_value'); + else this.popState(); + return 'ARROW'; + } +//------------ // attributes -"[" { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; } -"]" { this.popState(); return 'CLOSE_ATTRIBUTES'; } -\w+ { return 'ATTRIBUTE'; } -\= { this.pushState('value'); return 'EQUAL'; } -\w+ { this.popState(); return 'VALUE'; } +//------------ + +"[" { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; } +"]" { this.popState(); return 'CLOSE_ATTRIBUTES'; } +{TOKEN} { return 'ATTRIBUTE'; } +\= { this.pushState('attr_value'); return 'EQUAL'; } +{TOKEN} { this.popState(); return 'VALUE'; } + +//------------ // strings -\" { this.pushState('string'); return 'OPEN_STRING'; } -(?!\\)\" { - if(this.topState()==='string') this.popState(); - if(this.topState()==='value') this.popState(); - return 'CLOSE_STRING'; - } -([^"\\]|\\\"|\\\\)+ { return 'STRING'; } +//------------ + +\" { this.pushState('string'); return 'OPEN_STRING'; } +(?!\\)\" { + if(this.topState()==='string') this.popState(); + if(this.topState()==='attr_value') this.popState(); + return 'CLOSE_STRING'; + } +([^"\\]|\\\"|\\\\)+ { return 'STRING'; } /lex @@ -43,20 +62,20 @@ %% // language grammar start - : EOS SANKEY document - | SANKEY document - ; + : EOS SANKEY document + | SANKEY document + ; document - : line document - | - ; + : line document + | + ; line - : stream optional_attributes EOS - | node optional_attributes EOS - | EOS - ; + : node optional_attributes EOS + | stream optional_attributes EOS + | EOS + ; optional_attributes: OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES | ; @@ -65,20 +84,22 @@ attribute: ATTRIBUTE EQUAL value | ATTRIBUTE; value: VALUE | OPEN_STRING STRING CLOSE_STRING; -stream: node[source] ARROW amount ARROW tail[target] { - $$=$source; - yy.addLink($source, $target, $amount); -}; - -amount: AMOUNT { $$=parseFloat($AMOUNT); }; +stream + : node\[source] ARROW amount ARROW tail\[target] { + $$=$source; + yy.addLink($source, $target, $amount); + } + ; tail - : stream { $$ = $stream } - | node { $$ = $node; } - ; + : stream { $$ = $stream } + | node { $$ = $node; } + ; + +amount: AMOUNT { $$=parseFloat($AMOUNT); }; node - : NODE { $$ = yy.addNode($NODE); } - | OPEN_STRING STRING[title] CLOSE_STRING { $$ = yy.addNode($title); /* TODO: add title and id separately?*/ } - ; + : NODE_ID { $$ = yy.findOrCreateNode($NODE_ID); } + | OPEN_STRING STRING\[node_label] CLOSE_STRING { $$ = yy.findOrCreateNode($node_label); } + ; diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js index d42fa7f74c..58fe31ab15 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js @@ -50,11 +50,20 @@ describe('Sankey diagram', function () { }); describe('while attributes parsing', () => { + it('recognized node and attribute ids starting with numbers', () => { + const str = ` + sankey + 1st -> 200 -> 2nd -> 180 -> 3rd; + `; + + parser.parse(str); + }); + it('parses different quotless variations', () => { const str = ` sankey node[] - + node[attr=1] node_a -> 30 -> node_b node[attrWithoutValue] @@ -149,6 +158,7 @@ describe('Sankey diagram', function () { "Wave" -> 19.013 -> "Electricity grid" "Wind" -> 289.366 -> "Electricity grid" `; + parser.parse(str); }); }); diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts index fd96ef1c20..d44f3e6e81 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts @@ -12,16 +12,13 @@ import { clear as commonClear, } from '../../commonDb.js'; -// export const parseDirective = function (statement, context, type) { -// mermaidAPI.parseDirective(this, statement, context, type); -// }; - -// export const cleanupComments = (text: string): string => { -// return text.trimStart().replace(/^\s*%%(?!{)[^\n]+\n?/gm, ''); -// }; -let links: Array = []; -let nodes: Array = []; -let nodesHash: Record = {}; +// Variables where graph data is stored +// Sankey diagram represented by nodes and links between those nodes +// We have to track nodes uniqueness (by ID), thats why we need hash also +// +let links: Array = []; +let nodes: Array = []; +let nodesHash: Record = {}; const clear = function () { links = []; @@ -30,71 +27,35 @@ const clear = function () { commonClear(); }; -type Nullable = T | null; - -// interface ILink { -// source?: Node; -// target?: Node; -// value?: number; -// } - -class Link { - source: Nullable; - target: Nullable; - value: Nullable; - constructor() { - this.source = null; - this.target = null; - this.value = 0; - } +class SankeyLink { + constructor(public source: SankeyNode, public target: SankeyNode, public value: number = 0) {} } /** - * Adds a link between two elements on the diagram - * * @param source - Node where the link starts * @param target - Node where the link ends * @param value - number, float or integer, describes the amount to be passed */ -// const addLink = ({ source, target, amount }: ILink = {}): Link => { -const addLink = function (source?: Node, target?: Node, value?: number): Link { - const link: Link = new Link(); - - // TODO: make attribute setters - if (source !== undefined) { - link.source = source; - } - if (target !== undefined) { - link.target = target; - } - if (value !== undefined) { - link.value = value; - } +const addLink = function (source: SankeyNode, target: SankeyNode, value: number): SankeyLink { + const link: SankeyLink = new SankeyLink(source, target, value); links.push(link); return link; }; -class Node { - ID: string; - title: string; - constructor(ID: string, title: string = ID) { - this.ID = ID; - this.title = title; - } +class SankeyNode { + constructor(public ID: string, public label: string = ID) {} } /** - * Finds or creates a new Node by ID - * - * @param id - The id Node + * @param ID - The id of the node */ -const addNode = function (ID: string): Node { +const findOrCreateNode = function (ID: string): SankeyNode { ID = common.sanitizeText(ID, configApi.getConfig()); - let node: Node; + let node: SankeyNode; if (nodesHash[ID] === undefined) { - node = new Node(ID); + node = new SankeyNode(ID); nodesHash[ID] = node; nodes.push(node); } else { @@ -103,16 +64,27 @@ const addNode = function (ID: string): Node { return node; }; +// TODO: this will be better using getters in typescript const getNodes = () => nodes; const getLinks = () => links; +const getGraph = () => ({ + nodes: nodes.map((node) => ({ id: node.ID, label: node.label })), + links: links.map((link) => ({ + source: link.source.ID, + target: link.target.ID, + value: link.value, + })), +}); + export default { nodesHash, getConfig: () => configApi.getConfig().sankey, getNodes, getLinks, + getGraph, addLink, - addNode, + findOrCreateNode, // TODO: If this is a must this probably should be an interface getAccTitle, setAccTitle, diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts index e7a46d8bcb..9c8fbaa2d7 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts @@ -1,5 +1,5 @@ import { DiagramDefinition } from '../../diagram-api/types.js'; -// @ts-ignore: TODO Fix ts errors +// @ts-ignore: jison doesn't export types import parser from './parser/sankey.jison'; import db from './sankeyDB.js'; import styles from './styles.js'; diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 37362803aa..c8a3edaa87 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -2,6 +2,7 @@ import { Diagram } from '../../Diagram.js'; // import { log } from '../../logger.js'; import * as configApi from '../../config.js'; + import { select as d3select, scaleOrdinal as d3scaleOrdinal, @@ -19,9 +20,7 @@ import { sankeyJustify as d3SankeyJustify, } from 'd3-sankey'; import { configureSvgSize } from '../../setupGraphViewbox.js'; -import sankeyDB from './sankeyDB.js'; -import { db } from '../info/infoDb.js'; -import { debug } from 'console'; +// import { debug } from 'console'; /** * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text. @@ -51,7 +50,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb const { securityLevel, sequence: conf } = configApi.getConfig(); let sandboxElement; if (securityLevel === 'sandbox') { - sandboxElement = select('#i' + id); + sandboxElement = d3select('#i' + id); } const root = securityLevel === 'sandbox' @@ -86,35 +85,8 @@ export const draw = function (text: string, id: string, _version: string, diagOb // ] // }; // - const graph = { - nodes: [], - links: [], - }; - - diagObj.db.getNodes().forEach((node) => { - graph.nodes.push({ id: node.ID, title: node.title }); - }); - diagObj.db.getLinks().forEach((link) => { - graph.links.push({ source: link.source.ID, target: link.target.ID, value: link.value }); - }); - - // debugger; - // const graph = { - // nodes: [ - // { id: 'Alice' }, - // { id: 'Bob' }, - // { id: 'Carol' }, - // { id: 'Andrew' }, - // { id: 'Peter' } - // ], - // links: [ - // { source: 'Alice', target: 'Andrew', value: 11 }, - // { source: 'Alice', target: 'Bob', value: 23 }, - // { source: 'Bob', target: 'Carol', value: 43 }, - // { source: 'Peter', target: 'Carol', value: 15 }, - // ], - // }; + const graph = diagObj.db.getGraph(); // Construct and configure a Sankey generator // That will be a function that calculates nodes and links dimensions @@ -145,11 +117,10 @@ export const draw = function (text: string, id: string, _version: string, diagOb // Get color scheme for the graph const color = d3scaleOrdinal(d3schemeTableau10); - // Creates the groups for nodes + // Create groups for nodes svg .append('g') .attr('class', 'nodes') - .attr('stroke', '#000') .selectAll('.node') .data(graph.nodes) .join('g') @@ -166,7 +137,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb .attr('width', (d) => d.x1 - d.x0) .attr('fill', (d) => color(d.id)); - // Create text for nodes + // Create labels for nodes svg .append('g') .attr('class', 'node-labels') @@ -179,7 +150,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb .attr('y', (d) => (d.y1 + d.y0) / 2) .attr('dy', '0.35em') .attr('text-anchor', (d) => (d.x0 < width / 2 ? 'start' : 'end')) - .text((d) => d.title); + .text((d) => d.label); // Creates the paths that represent the links. const link_g = svg From a2c055ba5d492231ebceefe5c32db90e8927fb26 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Wed, 21 Jun 2023 01:28:59 +0300 Subject: [PATCH 046/263] CSV syntax implementation --- demos/sankey.html | 150 ++++++++---------- .../diagrams/sankey/{ => parser}/energy.csv | 1 - .../diagrams/sankey/parser/sankey-arrow.jison | 105 ++++++++++++ .../{sankey.spec.js => sankey-arrow.spec.js} | 0 .../src/diagrams/sankey/parser/sankey.jison | 127 ++++++--------- .../src/diagrams/sankey/parser/sankey.spec.ts | 33 ++++ 6 files changed, 258 insertions(+), 158 deletions(-) rename packages/mermaid/src/diagrams/sankey/{ => parser}/energy.csv (97%) create mode 100644 packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison rename packages/mermaid/src/diagrams/sankey/parser/{sankey.spec.js => sankey-arrow.spec.js} (100%) create mode 100644 packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts diff --git a/demos/sankey.html b/demos/sankey.html index d6ae1d2ec0..d49bfc77e9 100644 --- a/demos/sankey.html +++ b/demos/sankey.html @@ -15,92 +15,78 @@

    Sankey diagram demos

    -

    Simple example

    - 
    -    sankey
-
-    node[title="hello, how are you?"]
-    node[title="hello, mister Sankey"]
-
-    First -> 30 -> Second
-    First -> 10 -> Third 
-    Second -> 20 -> Third
-
    - -

    Energy flow

         sankey
 
-    "Agricultural 'waste'"      ->      124.729  -> "Bio-conversion"
-    "Bio-conversion"            ->      0.597    -> "Liquid"
-    "Bio-conversion"            ->      26.862   -> "Losses"
-    "Bio-conversion"            ->      280.322  -> "Solid"
-    "Bio-conversion"            ->      81.144   -> "Gas"
-    "Biofuel imports"           ->      35       -> "Liquid"
-    "Biomass imports"           ->      35       -> "Solid"
-    "Coal imports"              ->      11.606   -> "Coal"
-    "Coal reserves"             ->      63.965   -> "Coal"
-    "Coal"                      ->      75.571   -> "Solid"
-    "District heating"          ->      10.639   -> "Industry"
-    "District heating"          ->      22.505   -> "Heating and cooling - commercial"
-    "District heating"          ->      46.184   -> "Heating and cooling - homes"
-    "Electricity grid"          ->      104.453  -> "Over generation / exports"
-    "Electricity grid"          ->      113.726  -> "Heating and cooling - homes"
-    "Electricity grid"          ->      27.14    -> "H2 conversion"
-    "Electricity grid"          ->      342.165  -> "Industry"
-    "Electricity grid"          ->      37.797   -> "Road transport"
-    "Electricity grid"          ->      4.412    -> "Agriculture"
-    "Electricity grid"          ->      40.858   -> "Heating and cooling - commercial"
-    "Electricity grid"          ->      56.691   -> "Losses"
-    "Electricity grid"          ->      7.863    -> "Rail transport"
-    "Electricity grid"          ->      90.008   -> "Lighting & appliances - commercial"
-    "Electricity grid"          ->      93.494   -> "Lighting & appliances - homes"
-    "Gas imports"               ->      40.719   -> "Ngas"
-    "Gas reserves"              ->      82.233   -> "Ngas"
-    "Gas"                       ->      0.129    -> "Heating and cooling - commercial"
-    "Gas"                       ->      1.401    -> "Losses"
-    "Gas"                       ->      151.891  -> "Thermal generation"
-    "Gas"                       ->      2.096    -> "Agriculture"
-    "Gas"                       ->      48.58    -> "Industry"
-    "Geothermal"                ->      7.013    -> "Electricity grid"
-    "H2 conversion"             ->      20.897   -> "H2"
-    "H2 conversion"             ->      6.242    -> "Losses"
-    "H2"                        ->      20.897   -> "Road transport"
-    "Hydro"                     ->      6.995    -> "Electricity grid"
-    "Liquid"                    ->      121.066  -> "Industry"
-    "Liquid"                    ->      128.69   -> "International shipping"
-    "Liquid"                    ->      135.835  -> "Road transport"
-    "Liquid"                    ->      14.458   -> "Domestic aviation"
-    "Liquid"                    ->      206.267  -> "International aviation"
-    "Liquid"                    ->      3.64     -> "Agriculture"
-    "Liquid"                    ->      33.218   -> "National navigation"
-    "Liquid"                    ->      4.413    -> "Rail transport"
-    "Marine algae"              ->      4.375    -> "Bio-conversion"
-    "Ngas"                      ->      122.952  -> "Gas"
-    "Nuclear"                   ->      839.978  -> "Thermal generation"
-    "Oil imports"               ->      504.287  -> "Oil"
-    "Oil reserves"              ->      107.703  -> "Oil"
-    "Oil"                       ->      611.99   -> "Liquid"
-    "Other waste"               ->      56.587   -> "Solid"
-    "Other waste"               ->      77.81    -> "Bio-conversion"
-    "Pumped heat"               ->      193.026  -> "Heating and cooling - homes"
-    "Pumped heat"               ->      70.672   -> "Heating and cooling - commercial"
-    "Solar PV"                  ->      59.901   -> "Electricity grid"
-    "Solar Thermal"             ->      19.263   -> "Heating and cooling - homes"
-    "Solar"                     ->      19.263   -> "Solar Thermal"
-    "Solar"                     ->      59.901   -> "Solar PV"
-    "Solid"                     ->      0.882    -> "Agriculture"
-    "Solid"                     ->      400.12   -> "Thermal generation"
-    "Solid"                     ->      46.477   -> "Industry"
-    "Thermal generation"        ->      525.531  -> "Electricity grid"
-    "Thermal generation"        ->      787.129  -> "Losses"
-    "Thermal generation"        ->      79.329   -> "District heating"
-    "Tidal"                     ->      9.452    -> "Electricity grid"
-    "UK land based bioenergy"   ->      182.01   -> "Bio-conversion"
-    "Wave"                      ->      19.013   -> "Electricity grid"
-    "Wind"                      ->      289.366  -> "Electricity grid"
+Agricultural 'waste',Bio-conversion,124.729
+Bio-conversion,Liquid,0.597
+Bio-conversion,Losses,26.862
+Bio-conversion,Solid,280.322
+Bio-conversion,Gas,81.144
+Biofuel imports,Liquid,35
+Biomass imports,Solid,35
+Coal imports,Coal,11.606
+Coal reserves,Coal,63.965
+Coal,Solid,75.571
+District heating,Industry,10.639
+District heating,Heating and cooling - commercial,22.505
+District heating,Heating and cooling - homes,46.184
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+Electricity grid,Industry,342.165
+Electricity grid,Road transport,37.797
+Electricity grid,Agriculture,4.412
+Electricity grid,Heating and cooling - commercial,40.858
+Electricity grid,Losses,56.691
+Electricity grid,Rail transport,7.863
+Electricity grid,Lighting & appliances - commercial,90.008
+Electricity grid,Lighting & appliances - homes,93.494
+Gas imports,Ngas,40.719
+Gas reserves,Ngas,82.233
+Gas,Heating and cooling - commercial,0.129
+Gas,Losses,1.401
+Gas,Thermal generation,151.891
+Gas,Agriculture,2.096
+Gas,Industry,48.58
+Geothermal,Electricity grid,7.013
+H2 conversion,H2,20.897
+H2 conversion,Losses,6.242
+H2,Road transport,20.897
+Hydro,Electricity grid,6.995
+Liquid,Industry,121.066
+Liquid,International shipping,128.69
+Liquid,Road transport,135.835
+Liquid,Domestic aviation,14.458
+Liquid,International aviation,206.267
+Liquid,Agriculture,3.64
+Liquid,National navigation,33.218
+Liquid,Rail transport,4.413
+Marine algae,Bio-conversion,4.375
+Ngas,Gas,122.952
+Nuclear,Thermal generation,839.978
+Oil imports,Oil,504.287
+Oil reserves,Oil,107.703
+Oil,Liquid,611.99
+Other waste,Solid,56.587
+Other waste,Bio-conversion,77.81
+Pumped heat,Heating and cooling - homes,193.026
+Pumped heat,Heating and cooling - commercial,70.672
+Solar PV,Electricity grid,59.901
+Solar Thermal,Heating and cooling - homes,19.263
+Solar,Solar Thermal,19.263
+Solar,Solar PV,59.901
+Solid,Agriculture,0.882
+Solid,Thermal generation,400.12
+Solid,Industry,46.477
+Thermal generation,Electricity grid,525.531
+Thermal generation,Losses,787.129
+Thermal generation,District heating,79.329
+Tidal,Electricity grid,9.452
+UK land based bioenergy,Bio-conversion,182.01
+Wave,Electricity grid,19.013
+Wind,Electricity grid,289.366
    diff --git a/packages/mermaid/src/diagrams/sankey/energy.csv b/packages/mermaid/src/diagrams/sankey/parser/energy.csv similarity index 97% rename from packages/mermaid/src/diagrams/sankey/energy.csv rename to packages/mermaid/src/diagrams/sankey/parser/energy.csv index e5691f66c9..36fd45d2ab 100644 --- a/packages/mermaid/src/diagrams/sankey/energy.csv +++ b/packages/mermaid/src/diagrams/sankey/parser/energy.csv @@ -1,4 +1,3 @@ -source,target,value Agricultural 'waste',Bio-conversion,124.729 Bio-conversion,Liquid,0.597 Bio-conversion,Losses,26.862 diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison new file mode 100644 index 0000000000..c981267a01 --- /dev/null +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison @@ -0,0 +1,105 @@ +/** mermaid */ +%lex +TOKEN \w+ +NUM \d+(.\d+)? + +%options case-insensitive +%options easy_keword_rules + +%s link_value + +%x attributes +%x attr_value +%x string + +%% +//-------------------------------------------------------------- +// skip all whitespace EXCEPT newlines, but not within a string +//-------------------------------------------------------------- + +[^\S\r\n]+ {} + +//-------------- +// basic tokens +//-------------- + +(<>|[\n;])+ { return 'EOS'; } // end of statement is semicolon ; new line \n or end of file +"sankey" { return 'SANKEY'; } +{TOKEN} { return 'NODE_ID'; } +{NUM} { return 'AMOUNT'; } +"->" { + if(this.topState()!=='link_value') this.pushState('link_value'); + else this.popState(); + return 'ARROW'; + } +//------------ +// attributes +//------------ + +"[" { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; } +"]" { this.popState(); return 'CLOSE_ATTRIBUTES'; } +{TOKEN} { return 'ATTRIBUTE'; } +\= { this.pushState('attr_value'); return 'EQUAL'; } +{TOKEN} { this.popState(); return 'VALUE'; } + +//------------ +// strings +//------------ + +\" { this.pushState('string'); return 'OPEN_STRING'; } +(?!\\)\" { + if(this.topState()==='string') this.popState(); + if(this.topState()==='attr_value') this.popState(); + return 'CLOSE_STRING'; + } +([^"\\]|\\\"|\\\\)+ { return 'STRING'; } + +/lex + +%start start +%left ARROW + +%% // language grammar + +start + : EOS SANKEY document + | SANKEY document + ; + +document + : line document + | + ; + +line + : node optional_attributes EOS + | stream optional_attributes EOS + | EOS + ; + +optional_attributes: OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES | ; + +attributes: attribute attributes | ; +attribute: ATTRIBUTE EQUAL value | ATTRIBUTE; + +value: VALUE | OPEN_STRING STRING CLOSE_STRING; + +stream + : node\[source] ARROW amount ARROW tail\[target] { + $$=$source; + yy.addLink($source, $target, $amount); + } + ; + +tail + : stream { $$ = $stream } + | node { $$ = $node; } + ; + +amount: AMOUNT { $$=parseFloat($AMOUNT); }; + +node + : NODE_ID { $$ = yy.findOrCreateNode($NODE_ID); } + | OPEN_STRING STRING\[node_label] CLOSE_STRING { $$ = yy.findOrCreateNode($node_label); } + ; + diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js similarity index 100% rename from packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js rename to packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison index c981267a01..5ad25e8113 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison @@ -1,105 +1,82 @@ /** mermaid */ + +//---------------------------------------------------- +// We support csv format as defined there +// CSV format // https://www.ietf.org/rfc/rfc4180.txt +//---------------------------------------------------- + %lex -TOKEN \w+ -NUM \d+(.\d+)? %options case-insensitive %options easy_keword_rules -%s link_value - -%x attributes -%x attr_value -%x string +// as per section 6.1 of RFC 2234 [2] +COMMA \u002C +CR \u000D +LF \u000A +CRLF \u000D\u000A +DQUOTE \u0022 +TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E] %% -//-------------------------------------------------------------- -// skip all whitespace EXCEPT newlines, but not within a string -//-------------------------------------------------------------- - -[^\S\r\n]+ {} - -//-------------- -// basic tokens -//-------------- - -(<>|[\n;])+ { return 'EOS'; } // end of statement is semicolon ; new line \n or end of file -"sankey" { return 'SANKEY'; } -{TOKEN} { return 'NODE_ID'; } -{NUM} { return 'AMOUNT'; } -"->" { - if(this.topState()!=='link_value') this.pushState('link_value'); - else this.popState(); - return 'ARROW'; - } -//------------ -// attributes -//------------ - -"[" { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; } -"]" { this.popState(); return 'CLOSE_ATTRIBUTES'; } -{TOKEN} { return 'ATTRIBUTE'; } -\= { this.pushState('attr_value'); return 'EQUAL'; } -{TOKEN} { this.popState(); return 'VALUE'; } - -//------------ -// strings -//------------ - -\" { this.pushState('string'); return 'OPEN_STRING'; } -(?!\\)\" { - if(this.topState()==='string') this.popState(); - if(this.topState()==='attr_value') this.popState(); - return 'CLOSE_STRING'; - } -([^"\\]|\\\"|\\\\)+ { return 'STRING'; } + +<> { return 'EOF' } + +"sankey" { return 'SANKEY' } +{COMMA} { return 'COMMA' } +{DQUOTE} { return 'DQUOTE' } +({CRLF}|{LF}) { return 'NEWLINE' } +{TEXTDATA}* { return 'NON_ESCAPED_TEXT' } +({TEXTDATA}|{COMMA}|{CR}|{LF}|{DQUOTE}{DQUOTE})* { return 'ESCAPED_TEXT' } /lex %start start -%left ARROW %% // language grammar start - : EOS SANKEY document - | SANKEY document + : SANKEY file opt_eof ; -document - : line document - | +file: csv opt_newline; + +csv + : record csv_tail ; -line - : node optional_attributes EOS - | stream optional_attributes EOS - | EOS +csv_tail + : NEWLINE csv + | // empty ; -optional_attributes: OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES | ; +opt_newline + : NEWLINE + | // empty + ; -attributes: attribute attributes | ; -attribute: ATTRIBUTE EQUAL value | ATTRIBUTE; +opt_eof + : EOF + | // empty + ; -value: VALUE | OPEN_STRING STRING CLOSE_STRING; +record + : field\[source] COMMA field\[target] COMMA field\[value] { + const source = yy.findOrCreateNode($source); + const target = yy.findOrCreateNode($target); + const value = parseFloat($value); + $$ = yy.addLink(source,target,value); + } // parse only 3 fields, this is not part of standard + | // allow empty record to handle empty lines, this is not part of csv standard either + ; -stream - : node\[source] ARROW amount ARROW tail\[target] { - $$=$source; - yy.addLink($source, $target, $amount); - } +field + : escaped { $$=$escaped; } + | non_escaped { $$=$non_escaped; } ; -tail - : stream { $$ = $stream } - | node { $$ = $node; } - ; +escaped: DQUOTE ESCAPED_TEXT DQUOTE { $$=$ESCAPED_TEXT; }; -amount: AMOUNT { $$=parseFloat($AMOUNT); }; +non_escaped: NON_ESCAPED_TEXT { $$=$NON_ESCAPED_TEXT; }; -node - : NODE_ID { $$ = yy.findOrCreateNode($NODE_ID); } - | OPEN_STRING STRING\[node_label] CLOSE_STRING { $$ = yy.findOrCreateNode($node_label); } - ; diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts new file mode 100644 index 0000000000..0c83df33ff --- /dev/null +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts @@ -0,0 +1,33 @@ +// @ts-ignore: jison doesn't export types +import diagram from './sankey.jison'; +// @ts-ignore: jison doesn't export types +import { parser } from './sankey.jison'; +import db from '../sankeyDB.js'; +// import { fail } from 'assert'; + + +describe('Sankey diagram', function () { + // TODO - these examples should be put into ./parser/stateDiagram.spec.js + describe('when parsing an info graph it', function () { + beforeEach(function () { + parser.yy = db; + diagram.parser.yy = db; + diagram.parser.yy.clear(); + }); + + it('parses csv', async () => { + + const fs = require('fs'); + const path = require('path').resolve(__dirname, "./energy.csv"); + await fs.readFile(path, 'utf8', (err: Error, data: string) => { + if (err) throw(err); + + const str = `sankey\\n${data}`; + + parser.parse(str); + }); + + }); + + }); +}); From 362648b74b53a951a5f40b7a70a036ec876a1398 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Wed, 21 Jun 2023 01:37:06 +0300 Subject: [PATCH 047/263] Trim trailing spaces --- demos/sankey.html | 137 +++++++++--------- .../src/diagrams/sankey/parser/energy.csv | 3 +- .../sankey/parser/sankey-arrow.spec.js | 4 +- .../src/diagrams/sankey/parser/sankey.jison | 6 +- 4 files changed, 76 insertions(+), 74 deletions(-) diff --git a/demos/sankey.html b/demos/sankey.html index d49bfc77e9..4fc0993bf4 100644 --- a/demos/sankey.html +++ b/demos/sankey.html @@ -19,74 +19,75 @@

    Energy flow

         sankey
 
-Agricultural 'waste',Bio-conversion,124.729
-Bio-conversion,Liquid,0.597
-Bio-conversion,Losses,26.862
-Bio-conversion,Solid,280.322
-Bio-conversion,Gas,81.144
-Biofuel imports,Liquid,35
-Biomass imports,Solid,35
-Coal imports,Coal,11.606
-Coal reserves,Coal,63.965
-Coal,Solid,75.571
-District heating,Industry,10.639
-District heating,Heating and cooling - commercial,22.505
-District heating,Heating and cooling - homes,46.184
-Electricity grid,Over generation / exports,104.453
-Electricity grid,Heating and cooling - homes,113.726
-Electricity grid,H2 conversion,27.14
-Electricity grid,Industry,342.165
-Electricity grid,Road transport,37.797
-Electricity grid,Agriculture,4.412
-Electricity grid,Heating and cooling - commercial,40.858
-Electricity grid,Losses,56.691
-Electricity grid,Rail transport,7.863
-Electricity grid,Lighting & appliances - commercial,90.008
-Electricity grid,Lighting & appliances - homes,93.494
-Gas imports,Ngas,40.719
-Gas reserves,Ngas,82.233
-Gas,Heating and cooling - commercial,0.129
-Gas,Losses,1.401
-Gas,Thermal generation,151.891
-Gas,Agriculture,2.096
-Gas,Industry,48.58
-Geothermal,Electricity grid,7.013
-H2 conversion,H2,20.897
-H2 conversion,Losses,6.242
-H2,Road transport,20.897
-Hydro,Electricity grid,6.995
-Liquid,Industry,121.066
-Liquid,International shipping,128.69
-Liquid,Road transport,135.835
-Liquid,Domestic aviation,14.458
-Liquid,International aviation,206.267
-Liquid,Agriculture,3.64
-Liquid,National navigation,33.218
-Liquid,Rail transport,4.413
-Marine algae,Bio-conversion,4.375
-Ngas,Gas,122.952
-Nuclear,Thermal generation,839.978
-Oil imports,Oil,504.287
-Oil reserves,Oil,107.703
-Oil,Liquid,611.99
-Other waste,Solid,56.587
-Other waste,Bio-conversion,77.81
-Pumped heat,Heating and cooling - homes,193.026
-Pumped heat,Heating and cooling - commercial,70.672
-Solar PV,Electricity grid,59.901
-Solar Thermal,Heating and cooling - homes,19.263
-Solar,Solar Thermal,19.263
-Solar,Solar PV,59.901
-Solid,Agriculture,0.882
-Solid,Thermal generation,400.12
-Solid,Industry,46.477
-Thermal generation,Electricity grid,525.531
-Thermal generation,Losses,787.129
-Thermal generation,District heating,79.329
-Tidal,Electricity grid,9.452
-UK land based bioenergy,Bio-conversion,182.01
-Wave,Electricity grid,19.013
-Wind,Electricity grid,289.366
+    Agricultural 'waste',Bio-conversion,124.729
+    Bio-conversion,Liquid,0.597
+    Bio-conversion,Losses,26.862
+    Bio-conversion,Solid,280.322
+    Bio-conversion,Gas,81.144
+    Biofuel imports,Liquid,35
+    Biomass imports,Solid,35
+    Coal imports,Coal,11.606
+    Coal reserves,Coal,63.965
+    Coal,Solid,75.571
+    District heating,Industry,10.639
+    District heating,Heating and cooling - commercial,22.505
+    District heating,Heating and cooling - homes,46.184
+    Electricity grid,Over generation / exports,104.453
+    Electricity grid,Heating and cooling - homes,113.726
+    Electricity grid,H2 conversion,27.14
+    Electricity grid,Industry,342.165
+    Electricity grid,Road transport,37.797
+    Electricity grid,Agriculture,4.412
+    Electricity grid,Heating and cooling - commercial,40.858
+    Electricity grid,Losses,56.691
+    Electricity grid,Rail transport,7.863
+    Electricity grid,Lighting & appliances - commercial,90.008
+    Electricity grid,Lighting & appliances - homes,93.494
+    Gas imports,Ngas,40.719
+    Gas reserves,Ngas,82.233
+    Gas,Heating and cooling - commercial,0.129
+    Gas,Losses,1.401
+    Gas,Thermal generation,151.891
+    Gas,Agriculture,2.096
+    Gas,Industry,48.58
+    Geothermal,Electricity grid,7.013
+    H2 conversion,H2,20.897
+    H2 conversion,Losses,6.242
+    H2,Road transport,20.897
+    Hydro,Electricity grid,6.995
+    Liquid,Industry,121.066
+    Liquid,International shipping,128.69
+    Liquid,Road transport,135.835
+    Liquid,Domestic aviation,14.458
+    Liquid,International aviation,206.267
+    Liquid,Agriculture,3.64
+    Liquid,National navigation,33.218
+    Liquid,Rail transport,4.413
+    Marine algae,Bio-conversion,4.375
+    Ngas,Gas,122.952
+    Nuclear,Thermal generation,839.978
+    Oil imports,Oil,504.287
+    Oil reserves,Oil,107.703
+    Oil,Liquid,611.99
+    Other waste,Solid,56.587
+    Other waste,Bio-conversion,77.81
+    Pumped heat,Heating and cooling - homes,193.026
+    Pumped heat,Heating and cooling - commercial,70.672
+    Solar PV,Electricity grid,59.901
+    Solar Thermal,Heating and cooling - homes,19.263
+    Solar,Solar Thermal,19.263
+    Solar,Solar PV,59.901
+    Solid,Agriculture,0.882
+    Solid,Thermal generation,400.12
+    Solid,Industry,46.477
+    Thermal generation,Electricity grid,525.531
+    Thermal generation,Losses,787.129
+    Thermal generation,District heating,79.329
+    Tidal,Electricity grid,9.452
+    UK land based bioenergy,Bio-conversion,182.01
+    Wave,Electricity grid,19.013
+    Wind,Electricity grid,289.366
+
    diff --git a/packages/mermaid/src/diagrams/sankey/parser/energy.csv b/packages/mermaid/src/diagrams/sankey/parser/energy.csv index 36fd45d2ab..ebddaca0c8 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/energy.csv +++ b/packages/mermaid/src/diagrams/sankey/parser/energy.csv @@ -64,5 +64,6 @@ Thermal generation,Losses,787.129 Thermal generation,District heating,79.329 Tidal,Electricity grid,9.452 UK land based bioenergy,Bio-conversion,182.01 + Wave,Electricity grid,19.013 -Wind,Electricity grid,289.366 \ No newline at end of file +Wind,Electricity grid,289.366 diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js index 58fe31ab15..19f1ff3572 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js @@ -1,5 +1,5 @@ -import diagram from './sankey.jison'; -import { parser } from './sankey.jison'; +import diagram from './sankey-arrow.jison'; +import { parser } from './sankey-arrow.jison'; import db from '../sankeyDB.js'; // import { fail } from 'assert'; diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison index 5ad25e8113..c0294917c4 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison @@ -62,9 +62,9 @@ opt_eof record : field\[source] COMMA field\[target] COMMA field\[value] { - const source = yy.findOrCreateNode($source); - const target = yy.findOrCreateNode($target); - const value = parseFloat($value); + const source = yy.findOrCreateNode($source.trim()); + const target = yy.findOrCreateNode($target.trim()); + const value = parseFloat($value.trim()); $$ = yy.addLink(source,target,value); } // parse only 3 fields, this is not part of standard | // allow empty record to handle empty lines, this is not part of csv standard either From 6c6efb24f406009a6c7fdd0fbd4476f1f3b279a1 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Wed, 21 Jun 2023 01:48:48 +0300 Subject: [PATCH 048/263] Fix graph width --- .../src/diagrams/sankey/parser/sankey.jison | 4 ++-- .../src/diagrams/sankey/parser/sankey.spec.ts | 12 ++++-------- .../mermaid/src/diagrams/sankey/sankeyRenderer.ts | 15 ++++++--------- 3 files changed, 12 insertions(+), 19 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison index c0294917c4..7f5d76554a 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison @@ -66,8 +66,8 @@ record const target = yy.findOrCreateNode($target.trim()); const value = parseFloat($value.trim()); $$ = yy.addLink(source,target,value); - } // parse only 3 fields, this is not part of standard - | // allow empty record to handle empty lines, this is not part of csv standard either + } // parse only 3 fields, this is not part of CSV standard + | // allow empty record to handle empty lines, this is not part of CSV standard either ; field diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts index 0c83df33ff..d25a1cdb67 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts @@ -5,7 +5,6 @@ import { parser } from './sankey.jison'; import db from '../sankeyDB.js'; // import { fail } from 'assert'; - describe('Sankey diagram', function () { // TODO - these examples should be put into ./parser/stateDiagram.spec.js describe('when parsing an info graph it', function () { @@ -14,20 +13,17 @@ describe('Sankey diagram', function () { diagram.parser.yy = db; diagram.parser.yy.clear(); }); - + it('parses csv', async () => { - const fs = require('fs'); - const path = require('path').resolve(__dirname, "./energy.csv"); + const path = require('path').resolve(__dirname, './energy.csv'); await fs.readFile(path, 'utf8', (err: Error, data: string) => { - if (err) throw(err); - + if (err) throw err; + const str = `sankey\\n${data}`; parser.parse(str); }); - }); - }); }); diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index c8a3edaa87..63abb2a6c7 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -88,17 +88,19 @@ export const draw = function (text: string, id: string, _version: string, diagOb const graph = diagObj.db.getGraph(); + const nodeWidth = 10; // Construct and configure a Sankey generator // That will be a function that calculates nodes and links dimensions // const sankey = d3Sankey() .nodeId((d) => d.id) // we use 'id' property to identify node - .nodeWidth(10) + .nodeWidth(nodeWidth) .nodePadding(10) .nodeAlign(d3SankeyJustify) // d3.sankeyLeft, etc. - .size([width, height]); - // .extent([[5, 20], [width - 5, height - 20]]); alias for size - // paddings + .extent([ + [0, 0], + [width - nodeWidth, height], + ]); //["left", "sankeyLeft"], ["right", "sankeyRight"], ["center", "sankeyCenter"], ["justify", "sankeyJustify"] // .nodeWidth(15) @@ -169,11 +171,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb .attr('d', d3SankeyLinkHorizontal()) .attr('stroke', (d) => color(d.source.id)) .attr('stroke-width', (d) => Math.max(1, d.width)); - - // const { nodes, links } = generator({ - // nodes: graph.nodes, - // links: graph.links, - // }); }; export default { From 24d9f59d6997ca192ba50e62ad277d0bf29a2e49 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Wed, 21 Jun 2023 02:52:21 +0300 Subject: [PATCH 049/263] Fix specs --- .../mermaid/src/diagrams/sankey/parser/sankey.spec.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts index d25a1cdb67..31f02a4a0b 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts @@ -15,10 +15,12 @@ describe('Sankey diagram', function () { }); it('parses csv', async () => { - const fs = require('fs'); - const path = require('path').resolve(__dirname, './energy.csv'); + const fs = await import('fs'); + const path = await require('path').resolve(__dirname, './energy.csv'); await fs.readFile(path, 'utf8', (err: Error, data: string) => { - if (err) throw err; + if (err) { + throw err; + } const str = `sankey\\n${data}`; From 7bc5c1930ee75ede54141caf5728f615bd4b6021 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Wed, 21 Jun 2023 02:58:25 +0300 Subject: [PATCH 050/263] Fix specs --- packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts index 31f02a4a0b..60d70013da 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts @@ -16,8 +16,9 @@ describe('Sankey diagram', function () { it('parses csv', async () => { const fs = await import('fs'); - const path = await require('path').resolve(__dirname, './energy.csv'); - await fs.readFile(path, 'utf8', (err: Error, data: string) => { + const path = await import('path'); + const csv = path.resolve(__dirname, './energy.csv'); + fs.readFile(csv, 'utf8', (err: NodeJS.ErrnoException | null, data: string) => { if (err) { throw err; } From 272615e580382b724117faae502841ad27c723bb Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Wed, 21 Jun 2023 03:54:55 +0300 Subject: [PATCH 051/263] Fixed tests and added node alignment --- cypress/integration/rendering/sankey.spec.js | 2 +- demos/sankey.html | 2 +- .../src/diagrams/sankey/parser/energy.csv | 3 +-- .../src/diagrams/sankey/parser/sankey.jison | 19 ++++++++++--------- .../mermaid/src/diagrams/sankey/sankeyDB.ts | 11 +++++++++++ .../src/diagrams/sankey/sankeyRenderer.ts | 16 ++++++++-------- 6 files changed, 32 insertions(+), 21 deletions(-) diff --git a/cypress/integration/rendering/sankey.spec.js b/cypress/integration/rendering/sankey.spec.js index 5b9bcf870b..3ed2427241 100644 --- a/cypress/integration/rendering/sankey.spec.js +++ b/cypress/integration/rendering/sankey.spec.js @@ -5,7 +5,7 @@ describe('Sankey Diagram', () => { imgSnapshotTest( ` sankey - a -> 30 -> b + a,b,10 `, {} ); diff --git a/demos/sankey.html b/demos/sankey.html index 4fc0993bf4..3afc833714 100644 --- a/demos/sankey.html +++ b/demos/sankey.html @@ -18,7 +18,7 @@

    Sankey diagram demos

    Energy flow

         sankey
-
+    
     Agricultural 'waste',Bio-conversion,124.729
     Bio-conversion,Liquid,0.597
     Bio-conversion,Losses,26.862
diff --git a/packages/mermaid/src/diagrams/sankey/parser/energy.csv b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
index ebddaca0c8..36fd45d2ab 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/energy.csv
+++ b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
@@ -64,6 +64,5 @@ Thermal generation,Losses,787.129
 Thermal generation,District heating,79.329
 Tidal,Electricity grid,9.452
 UK land based bioenergy,Bio-conversion,182.01
-
 Wave,Electricity grid,19.013
-Wind,Electricity grid,289.366
+Wind,Electricity grid,289.366
\ No newline at end of file
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index 7f5d76554a..649d2dbd8a 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -1,9 +1,12 @@
 /** mermaid */
 
-//----------------------------------------------------
-// We support csv format as defined there
-// CSV format // https://www.ietf.org/rfc/rfc4180.txt
-//----------------------------------------------------
+//---------------------------------------------------------
+// We support csv format as defined here:
+// https://www.ietf.org/rfc/rfc4180.txt
+// There are some minor changes for compliance with jison
+// We also parse only 3 columns: source,target,value
+// And allow blank lines for visual purposes
+//---------------------------------------------------------
 
 %lex
 
@@ -23,9 +26,9 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
 <> { return 'EOF' }
 
 "sankey" { return 'SANKEY' }
+({CRLF}|{LF})+ { return 'NEWLINE' } // let newline to be multiple lines
 {COMMA} { return 'COMMA' }
 {DQUOTE} { return 'DQUOTE' }
-({CRLF}|{LF}) { return 'NEWLINE' }
 {TEXTDATA}* { return 'NON_ESCAPED_TEXT' }
 ({TEXTDATA}|{COMMA}|{CR}|{LF}|{DQUOTE}{DQUOTE})* { return 'ESCAPED_TEXT' }
 
@@ -36,11 +39,9 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
 %% // language grammar
 
 start
-  : SANKEY file opt_eof
+  : SANKEY csv opt_eof
   ;
 
-file: csv opt_newline;
-
 csv
   : record csv_tail 
   ;
@@ -67,7 +68,7 @@ record
       const value = parseFloat($value.trim());
       $$ = yy.addLink(source,target,value);
     } // parse only 3 fields, this is not part of CSV standard
-  | // allow empty record to handle empty lines, this is not part of CSV standard either
+  | {} // allow empty record to handle empty lines, this is not part of CSV standard either
   ;
 
 field
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index d44f3e6e81..f3faf9c7af 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -19,11 +19,20 @@ import {
 let links: Array = [];
 let nodes: Array = [];
 let nodesHash: Record = {};
+let nodeAlign: string = 'justify';
+
+const setNodeAlign = function (alignment: string): void {
+  const nodeAlignments: string[] = ['left', 'right', 'center', 'justify'];
+  if (nodeAlignments.includes(alignment)) nodeAlign = alignment;
+};
+
+const getNodeAlign = () => nodeAlign;
 
 const clear = function () {
   links = [];
   nodes = [];
   nodesHash = {};
+  nodeAlign = 'justify';
   commonClear();
 };
 
@@ -85,6 +94,8 @@ export default {
   getGraph,
   addLink,
   findOrCreateNode,
+  setNodeAlign,
+  getNodeAlign,
   // TODO: If this is a must this probably should be an interface
   getAccTitle,
   setAccTitle,
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 63abb2a6c7..4956b6cf24 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -87,6 +87,13 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //
 
   const graph = diagObj.db.getGraph();
+  const nodeAligns = {
+    left: d3SankeyLeft,
+    right: d3SankeyRight,
+    center: d3SankeyCenter,
+    justify: d3SankeyJustify,
+  };
+  const nodeAlign = nodeAligns[diagObj.db.getNodeAlign()];
 
   const nodeWidth = 10;
   // Construct and configure a Sankey generator
@@ -96,19 +103,12 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .nodeId((d) => d.id) // we use 'id' property to identify node
     .nodeWidth(nodeWidth)
     .nodePadding(10)
-    .nodeAlign(d3SankeyJustify) // d3.sankeyLeft, etc.
+    .nodeAlign(nodeAlign) // d3.sankeyLeft, etc.
     .extent([
       [0, 0],
       [width - nodeWidth, height],
     ]);
 
-  //["left", "sankeyLeft"], ["right", "sankeyRight"], ["center", "sankeyCenter"], ["justify", "sankeyJustify"]
-  // .nodeWidth(15)
-  //   .nodePadding(10)
-  //   .extent([[1, 5], [width - 1, height - 5]]);
-  // .nodeId(d => d['id'])
-  //
-
   // Compute the Sankey layout
   // Namely calculate nodes and links positions
   // Our `graph` object will be mutated by this

From be9cd480aa0a9815a899a5b158850e6a8292b6fa Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov 
Date: Thu, 22 Jun 2023 15:56:56 +0300
Subject: [PATCH 052/263] Sankey syntax has beed reduced

---
 cypress/integration/rendering/sankey.spec.js  |  1 +
 .../src/diagrams/sankey/parser/energy.csv     | 12 ++++++--
 .../src/diagrams/sankey/parser/sankey.jison   | 30 ++++---------------
 .../src/diagrams/sankey/parser/sankey.spec.ts | 18 ++++++-----
 .../src/diagrams/sankey/sankeyDiagram.ts      | 12 ++++++++
 5 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/cypress/integration/rendering/sankey.spec.js b/cypress/integration/rendering/sankey.spec.js
index 3ed2427241..435ef81842 100644
--- a/cypress/integration/rendering/sankey.spec.js
+++ b/cypress/integration/rendering/sankey.spec.js
@@ -5,6 +5,7 @@ describe('Sankey Diagram', () => {
     imgSnapshotTest(
       `
       sankey
+      
       a,b,10
       `,
       {}
diff --git a/packages/mermaid/src/diagrams/sankey/parser/energy.csv b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
index 36fd45d2ab..7f4dbc1537 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/energy.csv
+++ b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
@@ -1,5 +1,7 @@
-Agricultural 'waste',Bio-conversion,124.729
+%% there are leading and trailing spaces, do not remove
+    Agricultural 'waste',Bio-conversion,124.729   
 Bio-conversion,Liquid,0.597
+%% line with comment
 Bio-conversion,Losses,26.862
 Bio-conversion,Solid,280.322
 Bio-conversion,Gas,81.144
@@ -50,6 +52,9 @@ Oil reserves,Oil,107.703
 Oil,Liquid,611.99
 Other waste,Solid,56.587
 Other waste,Bio-conversion,77.81
+%% blank lines in the middle
+
+
 Pumped heat,Heating and cooling - homes,193.026
 Pumped heat,Heating and cooling - commercial,70.672
 Solar PV,Electricity grid,59.901
@@ -65,4 +70,7 @@ Thermal generation,District heating,79.329
 Tidal,Electricity grid,9.452
 UK land based bioenergy,Bio-conversion,182.01
 Wave,Electricity grid,19.013
-Wind,Electricity grid,289.366
\ No newline at end of file
+Wind,Electricity grid,289.366
+
+%% lines at the end, do not remove
+
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index 649d2dbd8a..b9d5854ed9 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -23,10 +23,10 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
 
 %%
 
-<> { return 'EOF' }
+<> { return 'EOF' } // match end of file
 
 "sankey" { return 'SANKEY' }
-({CRLF}|{LF})+ { return 'NEWLINE' } // let newline to be multiple lines
+({CRLF}|{LF}) { return 'NEWLINE' }
 {COMMA} { return 'COMMA' }
 {DQUOTE} { return 'DQUOTE' }
 {TEXTDATA}* { return 'NON_ESCAPED_TEXT' }
@@ -38,28 +38,11 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
 
 %% // language grammar
 
-start
-  : SANKEY csv opt_eof
-  ;
-
-csv
-  : record csv_tail 
-  ;
-
-csv_tail
-  : NEWLINE csv
-  | // empty
-  ;
-
-opt_newline
-  : NEWLINE
-  | // empty
-  ;
+start: SANKEY NEWLINE csv opt_eof;
 
-opt_eof
-  : EOF
-  | // empty
-  ;
+csv: record csv_tail;
+csv_tail: NEWLINE csv | ;
+opt_eof: EOF | ;
 
 record
   : field\[source] COMMA field\[target] COMMA field\[value] {
@@ -68,7 +51,6 @@ record
       const value = parseFloat($value.trim());
       $$ = yy.addLink(source,target,value);
     } // parse only 3 fields, this is not part of CSV standard
-  | {} // allow empty record to handle empty lines, this is not part of CSV standard either
   ;
 
 field
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
index 60d70013da..873e99cb14 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
@@ -3,7 +3,8 @@ import diagram from './sankey.jison';
 // @ts-ignore: jison doesn't export types
 import { parser } from './sankey.jison';
 import db from '../sankeyDB.js';
-// import { fail } from 'assert';
+import { cleanupComments } from '../../../diagram-api/comments.js';
+import { prepareTextForParsing } from '../sankeyDiagram.js';
 
 describe('Sankey diagram', function () {
   // TODO - these examples should be put into ./parser/stateDiagram.spec.js
@@ -18,15 +19,16 @@ describe('Sankey diagram', function () {
       const fs = await import('fs');
       const path = await import('path');
       const csv = path.resolve(__dirname, './energy.csv');
-      fs.readFile(csv, 'utf8', (err: NodeJS.ErrnoException | null, data: string) => {
-        if (err) {
-          throw err;
-        }
+      const data = fs.readFileSync(csv, 'utf8');
 
-        const str = `sankey\\n${data}`;
+      // Add \n\n + space to emulate possible possible imperfections
+      const graphDefinition = prepareTextForParsing(cleanupComments('sankey\n\n ' + data));
+      // const textToParse = graphDefinition
+      //   .replaceAll(/^[^\S\r\n]+|[^\S\r\n]+$/g, '')
+      //   .replaceAll(/([\n\r])+/g, "\n")
+      //   .trim();
 
-        parser.parse(str);
-      });
+      parser.parse(graphDefinition);
     });
   });
 });
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
index 9c8fbaa2d7..7ec305db71 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
@@ -5,6 +5,18 @@ import db from './sankeyDB.js';
 import styles from './styles.js';
 import renderer from './sankeyRenderer.js';
 
+export const prepareTextForParsing = (text: string): string => {
+  const textToParse = text
+    .replaceAll(/^[^\S\r\n]+|[^\S\r\n]+$/g, '') // remove all trailing spaces for each row
+    .replaceAll(/([\n\r])+/g, '\n') // remove empty lines duplicated
+    .trim();
+
+  return textToParse;
+};
+
+const originalParse = parser.parse.bind(parser);
+parser.parse = (text: string) => originalParse(prepareTextForParsing(text));
+
 export const diagram: DiagramDefinition = {
   parser,
   db,

From 9a29066426d27b6a751203b0f2b4fcb469aff5d8 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov 
Date: Thu, 22 Jun 2023 16:53:44 +0300
Subject: [PATCH 053/263] Ensure that sankey keyword does not intefere with csv

---
 demos/sankey.html                             | 145 +++++++++---------
 .../src/diagrams/sankey/parser/energy.csv     |  45 ++++--
 .../src/diagrams/sankey/parser/sankey.jison   |  20 ++-
 3 files changed, 118 insertions(+), 92 deletions(-)

diff --git a/demos/sankey.html b/demos/sankey.html
index 3afc833714..a7d4d55378 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -17,79 +17,78 @@
     
    Sankey diagram demos
    
     
    Energy flow
    
     
    -    sankey
-    
-    Agricultural 'waste',Bio-conversion,124.729
-    Bio-conversion,Liquid,0.597
-    Bio-conversion,Losses,26.862
-    Bio-conversion,Solid,280.322
-    Bio-conversion,Gas,81.144
-    Biofuel imports,Liquid,35
-    Biomass imports,Solid,35
-    Coal imports,Coal,11.606
-    Coal reserves,Coal,63.965
-    Coal,Solid,75.571
-    District heating,Industry,10.639
-    District heating,Heating and cooling - commercial,22.505
-    District heating,Heating and cooling - homes,46.184
-    Electricity grid,Over generation / exports,104.453
-    Electricity grid,Heating and cooling - homes,113.726
-    Electricity grid,H2 conversion,27.14
-    Electricity grid,Industry,342.165
-    Electricity grid,Road transport,37.797
-    Electricity grid,Agriculture,4.412
-    Electricity grid,Heating and cooling - commercial,40.858
-    Electricity grid,Losses,56.691
-    Electricity grid,Rail transport,7.863
-    Electricity grid,Lighting & appliances - commercial,90.008
-    Electricity grid,Lighting & appliances - homes,93.494
-    Gas imports,Ngas,40.719
-    Gas reserves,Ngas,82.233
-    Gas,Heating and cooling - commercial,0.129
-    Gas,Losses,1.401
-    Gas,Thermal generation,151.891
-    Gas,Agriculture,2.096
-    Gas,Industry,48.58
-    Geothermal,Electricity grid,7.013
-    H2 conversion,H2,20.897
-    H2 conversion,Losses,6.242
-    H2,Road transport,20.897
-    Hydro,Electricity grid,6.995
-    Liquid,Industry,121.066
-    Liquid,International shipping,128.69
-    Liquid,Road transport,135.835
-    Liquid,Domestic aviation,14.458
-    Liquid,International aviation,206.267
-    Liquid,Agriculture,3.64
-    Liquid,National navigation,33.218
-    Liquid,Rail transport,4.413
-    Marine algae,Bio-conversion,4.375
-    Ngas,Gas,122.952
-    Nuclear,Thermal generation,839.978
-    Oil imports,Oil,504.287
-    Oil reserves,Oil,107.703
-    Oil,Liquid,611.99
-    Other waste,Solid,56.587
-    Other waste,Bio-conversion,77.81
-    Pumped heat,Heating and cooling - homes,193.026
-    Pumped heat,Heating and cooling - commercial,70.672
-    Solar PV,Electricity grid,59.901
-    Solar Thermal,Heating and cooling - homes,19.263
-    Solar,Solar Thermal,19.263
-    Solar,Solar PV,59.901
-    Solid,Agriculture,0.882
-    Solid,Thermal generation,400.12
-    Solid,Industry,46.477
-    Thermal generation,Electricity grid,525.531
-    Thermal generation,Losses,787.129
-    Thermal generation,District heating,79.329
-    Tidal,Electricity grid,9.452
-    UK land based bioenergy,Bio-conversion,182.01
-    Wave,Electricity grid,19.013
-    Wind,Electricity grid,289.366
-    
-  
    
+      sankey
+      
+      Agricultural 'waste',Bio-conversion,124.729
+      Bio-conversion,Liquid,0.597
+      %% line with comment
+      Bio-conversion,Losses,26.862
+      Bio-conversion,Solid,280.322
+      Bio-conversion,Gas,81.144
+      Biofuel imports,Liquid,35
+      Biomass imports,Solid,35
+      Coal imports,Coal,11.606
+      Coal reserves,Coal,63.965
+      Coal,Solid,75.571
+      District heating,Industry,10.639
+      District heating,Heating and cooling - commercial,22.505
+      District heating,Heating and cooling - homes,46.184
+      Electricity grid,Over generation / exports,104.453
+      Electricity grid,Heating and cooling - homes,113.726
+      Electricity grid,H2 conversion,27.14
+      Electricity grid,Industry,342.165
+      Electricity grid,Road transport,37.797
+      Electricity grid,Agriculture,4.412
+      Electricity grid,Heating and cooling - commercial,40.858
+      Electricity grid,Losses,56.691
+      Electricity grid,Rail transport,7.863
+      Electricity grid,Lighting & appliances - commercial,90.008
+      Electricity grid,Lighting & appliances - homes,93.494
+      Gas imports,Ngas,40.719
+      Gas reserves,Ngas,82.233
+      Gas,Heating and cooling - commercial,0.129
+      Gas,Losses,1.401
+      Gas,Thermal generation,151.891
+      Gas,Agriculture,2.096
+      Gas,Industry,48.58
+      Geothermal,Electricity grid,7.013
+      H2 conversion,H2,20.897
+      H2 conversion,Losses,6.242
+      H2,Road transport,20.897
+      Hydro,Electricity grid,6.995
+      Liquid,Industry,121.066
+      Liquid,International shipping,128.69
+      Liquid,Road transport,135.835
+      Liquid,Domestic aviation,14.458
+      Liquid,International aviation,206.267
+      Liquid,Agriculture,3.64
+      Liquid,National navigation,33.218
+      Liquid,Rail transport,4.413
+      Marine algae,Bio-conversion,4.375
+      Ngas,Gas,122.952
+      Nuclear,Thermal generation,839.978
+      Oil imports,Oil,504.287
+      Oil reserves,Oil,107.703
+      Oil,Liquid,611.99
+      Other waste,Solid,56.587
+      Other waste,Bio-conversion,77.81
+      Pumped heat,Heating and cooling - homes,193.026
+      Pumped heat,Heating and cooling - commercial,70.672
+      Solar PV,Electricity grid,59.901
+      Solar Thermal,Heating and cooling - homes,19.263
+      Solar,Solar Thermal,19.263
+      Solar,Solar PV,59.901
+      Solid,Agriculture,0.882
+      Solid,Thermal generation,400.12
+      Solid,Industry,46.477
+      Thermal generation,Electricity grid,525.531
+      Thermal generation,Losses,787.129
+      Thermal generation,District heating,79.329
+      Tidal,Electricity grid,9.452
+      UK land based bioenergy,Bio-conversion,182.01
+      Wave,Electricity grid,19.013
+      Wind,Electricity grid,289.366
+
    diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index f50a15d6b1..7e0b67eb54 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -412,7 +412,17 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { wrappingWidth?: number; } -export type SankeyDiagramConfig = BaseDiagramConfig; +export enum SankeyLinkColor { + source = 'source', + target = 'target', + gradient = 'gradient', +} + +export interface SankeyDiagramConfig extends BaseDiagramConfig { + width?: number; + height?: number; + linkColor?: SankeyLinkColor | string; +} export interface FontConfig { fontSize?: string | number; diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index c9407828f2..4ece250109 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -2270,6 +2270,11 @@ const config: Partial = { padding: 10, maxNodeWidth: 200, }, + sankey: { + width: 800, + height: 400, + linkColor: 'gradient', + }, fontSize: 16, }; diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts index 04515cda4c..098f3938c4 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts @@ -20,7 +20,7 @@ let nodesMap: Record = {}; let nodeAlign = 'justify'; const setNodeAlign = (alignment: string): void => { - const nodeAlignments: Set= new Set(['left', 'right', 'center', 'justify']); + const nodeAlignments: Set = new Set(['left', 'right', 'center', 'justify']); if (nodeAlignments.has(alignment)) { nodeAlign = alignment; } diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 1a8eb5c7e6..dd31e775e5 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -20,9 +20,10 @@ import { } from 'd3-sankey'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import { Uid } from './sankeyUtils.js'; +import { SankeyLinkColor } from '../../config.type.js'; /** - * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text. + * Draws Sankey diagram. * * @param text - The text of the diagram * @param id - The id of the diagram which will be used as a DOM element id¨ @@ -30,10 +31,14 @@ import { Uid } from './sankeyUtils.js'; * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram */ export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void { - // TODO: Figure out what is happening there + // Get Sankey config + const { securityLevel, sankey: conf } = configApi.getConfig(); + + // TODO: + // This code repeats for every diagram + // Figure out what is happening there, probably it should be separated // The main thing is svg object that is a d3 wrapper for svg operations // - const { securityLevel, sequence: conf } = configApi.getConfig(); let sandboxElement: any; if (securityLevel === 'sandbox') { sandboxElement = d3select('#i' + id); @@ -43,18 +48,17 @@ export const draw = function (text: string, id: string, _version: string, diagOb if (securityLevel === 'sandbox' && sandboxElement) { root = d3select(sandboxElement.nodes()[0].contentDocument.body); } - const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`); // Establish svg dimensions and get width and height // - const elem = doc.getElementById(id); - const width = elem.parentElement.offsetWidth; - const height = 600; + const width = conf?.width || 800; + const height = conf?.height || 400; + const useMaxWidth = conf?.useMaxWidth || false; - // FIX: using max width prevents height from being set - configureSvgSize(svg, height, width, false); - // svg.attr('height', height); // that's why we need this line + // FIX: using max width prevents height from being set, is it intended? + // to add height directly one can use `svg.attr('height', height)` + configureSvgSize(svg, height, width, useMaxWidth); // Prepare data for construction based on diagObj.db // This must be a mutable object with `nodes` and `links` properties: @@ -142,27 +146,46 @@ export const draw = function (text: string, id: string, _version: string, diagOb .attr('class', 'link') .style('mix-blend-mode', 'multiply'); - const gradient = link - .append('linearGradient') - .attr('id', (d) => (d.uid = Uid.next('linearGradient-')).id) - .attr('gradientUnits', 'userSpaceOnUse') - .attr('x1', (d) => d.source.x1) - .attr('x2', (d) => d.target.x0); - - gradient - .append('stop') - .attr('offset', '0%') - .attr('stop-color', (d) => colorScheme(d.source.id)); + const linkColor = conf?.linkColor || SankeyLinkColor.gradient; + + if (linkColor === SankeyLinkColor.gradient) { + const gradient = link + .append('linearGradient') + .attr('id', (d) => (d.uid = Uid.next('linearGradient-')).id) + .attr('gradientUnits', 'userSpaceOnUse') + .attr('x1', (d) => d.source.x1) + .attr('x2', (d) => d.target.x0); + + gradient + .append('stop') + .attr('offset', '0%') + .attr('stop-color', (d) => colorScheme(d.source.id)); + + gradient + .append('stop') + .attr('offset', '100%') + .attr('stop-color', (d) => colorScheme(d.target.id)); + } - gradient - .append('stop') - .attr('offset', '100%') - .attr('stop-color', (d) => colorScheme(d.target.id)); + let coloring: any; + switch (linkColor) { + case SankeyLinkColor.gradient: + coloring = (d) => d.uid; + break; + case SankeyLinkColor.source: + coloring = (d) => d.source.id; + break; + case SankeyLinkColor.target: + coloring = (d) => d.target.id; + break; + default: + coloring = linkColor; + } link .append('path') .attr('d', d3SankeyLinkHorizontal()) - .attr('stroke', (d: any) => d.uid) + .attr('stroke', coloring) .attr('stroke-width', (d: any) => Math.max(1, d.width)); }; diff --git a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts index d88e528c54..08e4c547f5 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts @@ -24,4 +24,4 @@ export class Uid { toString(): string { return 'url(' + this.href + ')'; } -} \ No newline at end of file +} From db2a556f626beb630629f9ddc39e604590eb2610 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 25 Jun 2023 00:23:42 +0300 Subject: [PATCH 065/263] Cleanup --- cypress/integration/rendering/sankey.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/integration/rendering/sankey.spec.js b/cypress/integration/rendering/sankey.spec.js index 0a065e46c1..7a3ffa5db4 100644 --- a/cypress/integration/rendering/sankey.spec.js +++ b/cypress/integration/rendering/sankey.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.js'; describe('Sankey Diagram', () => { it('should render a simple example', () => { From 1d6074dbfa6e7f0c0c0ca59987d55846d062965f Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 25 Jun 2023 00:42:06 +0300 Subject: [PATCH 066/263] Sankey: Use [] instead of Array --- packages/mermaid/src/diagrams/sankey/sankeyDB.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts index 098f3938c4..807c07cd1d 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts @@ -14,8 +14,8 @@ import { // Sankey diagram represented by nodes and links between those nodes // We have to track nodes uniqueness (by ID), thats why we need a mapping also // -let links: Array = []; -let nodes: Array = []; +let links: SankeyLink[] = []; +let nodes: SankeyNode[] = []; let nodesMap: Record = {}; let nodeAlign = 'justify'; From 6a893a758b9784c6e493c0697c04ad33f339e721 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 25 Jun 2023 01:07:11 +0300 Subject: [PATCH 067/263] Styles are optional --- packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts | 2 -- packages/mermaid/src/diagrams/sankey/styles.js | 5 ----- packages/mermaid/src/styles.spec.ts | 2 -- 3 files changed, 9 deletions(-) delete mode 100644 packages/mermaid/src/diagrams/sankey/styles.js diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts index 4fce38f976..d5b62122e3 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts @@ -2,7 +2,6 @@ import { DiagramDefinition } from '../../diagram-api/types.js'; // @ts-ignore: jison doesn't export types import parser from './parser/sankey.jison'; import db from './sankeyDB.js'; -import styles from './styles.js'; import renderer from './sankeyRenderer.js'; import { prepareTextForParsing } from './sankeyUtils.js'; @@ -13,5 +12,4 @@ export const diagram: DiagramDefinition = { parser, db, renderer, - styles, }; diff --git a/packages/mermaid/src/diagrams/sankey/styles.js b/packages/mermaid/src/diagrams/sankey/styles.js deleted file mode 100644 index 54881fe6fa..0000000000 --- a/packages/mermaid/src/diagrams/sankey/styles.js +++ /dev/null @@ -1,5 +0,0 @@ -const getStyles = (options) => - ` -`; - -export default getStyles; diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts index d1edf41116..51951f190a 100644 --- a/packages/mermaid/src/styles.spec.ts +++ b/packages/mermaid/src/styles.spec.ts @@ -29,7 +29,6 @@ import state from './diagrams/state/styles.js'; import journey from './diagrams/user-journey/styles.js'; import timeline from './diagrams/timeline/styles.js'; import mindmap from './diagrams/mindmap/styles.js'; -import sankey from './diagrams/sankey/styles.js'; import themes from './themes/index.js'; async function checkValidStylisCSSStyleSheet(stylisString: string) { @@ -99,7 +98,6 @@ describe('styles', () => { sequence, state, timeline, - sankey, })) { test(`should return a valid style for diagram ${diagramId} and theme ${themeId}`, async () => { const { default: getStyles, addStylesForDiagram } = await import('./styles.js'); From 2a22bae1f93b3595ba45452ba2d817576bef9a4b Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 25 Jun 2023 01:18:38 +0300 Subject: [PATCH 068/263] Update docs --- .../interfaces/mermaidAPI.ParseOptions.md | 2 +- .../interfaces/mermaidAPI.RenderResult.md | 4 ++-- docs/config/setup/modules/config.md | 22 +++++++++---------- docs/config/setup/modules/defaultConfig.md | 4 ++-- docs/config/setup/modules/mermaidAPI.md | 22 +++++++++---------- run | 10 +++++---- 6 files changed, 33 insertions(+), 31 deletions(-) diff --git a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md index 8ab2598855..0875af71d3 100644 --- a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md +++ b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md @@ -16,4 +16,4 @@ #### Defined in -[mermaidAPI.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L77) +mermaidAPI.ts:77 diff --git a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md index 527b46d092..ce4c7d52d5 100644 --- a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md +++ b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md @@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present. #### Defined in -[mermaidAPI.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L97) +mermaidAPI.ts:97 --- @@ -51,4 +51,4 @@ The svg code for the rendered graph. #### Defined in -[mermaidAPI.ts:87](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L87) +mermaidAPI.ts:87 diff --git a/docs/config/setup/modules/config.md b/docs/config/setup/modules/config.md index 8381dc8c73..c69958ea75 100644 --- a/docs/config/setup/modules/config.md +++ b/docs/config/setup/modules/config.md @@ -14,7 +14,7 @@ #### Defined in -[config.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L7) +config.ts:7 ## Functions @@ -36,7 +36,7 @@ Pushes in a directive to the configuration #### Defined in -[config.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L191) +config.ts:191 --- @@ -60,7 +60,7 @@ The currentConfig #### Defined in -[config.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L137) +config.ts:137 --- @@ -84,7 +84,7 @@ The siteConfig #### Defined in -[config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96) +config.ts:96 --- @@ -118,7 +118,7 @@ The siteConfig #### Defined in -[config.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L223) +config.ts:223 --- @@ -147,7 +147,7 @@ options in-place #### Defined in -[config.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L152) +config.ts:152 --- @@ -167,7 +167,7 @@ options in-place #### Defined in -[config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75) +config.ts:75 --- @@ -199,7 +199,7 @@ The currentConfig merged with the sanitized conf #### Defined in -[config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113) +config.ts:113 --- @@ -232,7 +232,7 @@ The new siteConfig #### Defined in -[config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61) +config.ts:61 --- @@ -253,7 +253,7 @@ The new siteConfig #### Defined in -[config.ts:14](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L14) +config.ts:14 --- @@ -273,4 +273,4 @@ The new siteConfig #### Defined in -[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79) +config.ts:79 diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index d95ec4e922..649e03db85 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -[defaultConfig.ts:2293](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2293) +defaultConfig.ts:2298 --- @@ -53,4 +53,4 @@ A description of each option follows below. #### Defined in -[defaultConfig.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L33) +defaultConfig.ts:33 diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index 591b6841a0..aa30437138 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi) #### Defined in -[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81) +mermaidAPI.ts:81 ## Variables @@ -96,7 +96,7 @@ mermaid.initialize(config); #### Defined in -[mermaidAPI.ts:663](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L663) +mermaidAPI.ts:663 ## Functions @@ -127,7 +127,7 @@ Return the last node appended #### Defined in -[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308) +mermaidAPI.ts:308 --- @@ -153,7 +153,7 @@ the cleaned up svgCode #### Defined in -[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256) +mermaidAPI.ts:256 --- @@ -179,7 +179,7 @@ the string with all the user styles #### Defined in -[mermaidAPI.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L185) +mermaidAPI.ts:185 --- @@ -202,7 +202,7 @@ the string with all the user styles #### Defined in -[mermaidAPI.ts:233](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L233) +mermaidAPI.ts:233 --- @@ -229,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important; #### Defined in -[mermaidAPI.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L169) +mermaidAPI.ts:169 --- @@ -249,7 +249,7 @@ with an enclosing block that has each of the cssClasses followed by !important; #### Defined in -[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155) +mermaidAPI.ts:155 --- @@ -269,7 +269,7 @@ with an enclosing block that has each of the cssClasses followed by !important; #### Defined in -[mermaidAPI.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L126) +mermaidAPI.ts:126 --- @@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code #### Defined in -[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287) +mermaidAPI.ts:287 --- @@ -320,4 +320,4 @@ Remove any existing elements from the given document #### Defined in -[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358) +mermaidAPI.ts:358 diff --git a/run b/run index 6a9b0e5ce6..6aee10dc22 100755 --- a/run +++ b/run @@ -1,16 +1,14 @@ #!/bin/bash RUN="docker-compose run --rm" -# UP="docker-compose up" name=$(basename $0) command=$1 args=${@:2} - case $command in sh) -$RUN mermaid sh $args +$RUN mermaid sh -c "npx $args" ;; i | install) @@ -35,7 +33,10 @@ $RUN mermaid sh -c "npx pnpm -w run lint:fix $args" dev) $RUN --service-ports mermaid sh -c "npx pnpm run dev" -# $UP --rm mermaid sh -c "npx pnpm run dev" +;; + +docs:dev) +$RUN --service-ports mermaid sh -c "npx pnpm --filter mermaid run docs:dev" ;; help) @@ -45,6 +46,7 @@ Run commonly used commands within docker containers \033[1m$name install\033[0m # Equvalent of pnpm install \033[1m$name dev\033[0m # Run dev server with examples, open http://localhost:9000 +\033[1m$name docs:dev\033[0m # For docs contributions, open http://localhost:3333 $name add # Add package, 'run add d3-sankey' $name prettier # Prettify a file 'run prettier ' From 95ab598ea4451d0c01386d1bc1f9023c9133d54e Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 25 Jun 2023 01:31:53 +0300 Subject: [PATCH 069/263] Fix docs --- .../interfaces/mermaidAPI.ParseOptions.md | 2 +- .../interfaces/mermaidAPI.RenderResult.md | 4 ++-- docs/config/setup/modules/config.md | 22 +++++++++---------- docs/config/setup/modules/defaultConfig.md | 4 ++-- docs/config/setup/modules/mermaidAPI.md | 22 +++++++++---------- 5 files changed, 27 insertions(+), 27 deletions(-) diff --git a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md index 0875af71d3..8ab2598855 100644 --- a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md +++ b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md @@ -16,4 +16,4 @@ #### Defined in -mermaidAPI.ts:77 +[mermaidAPI.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L77) diff --git a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md index ce4c7d52d5..527b46d092 100644 --- a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md +++ b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md @@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present. #### Defined in -mermaidAPI.ts:97 +[mermaidAPI.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L97) --- @@ -51,4 +51,4 @@ The svg code for the rendered graph. #### Defined in -mermaidAPI.ts:87 +[mermaidAPI.ts:87](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L87) diff --git a/docs/config/setup/modules/config.md b/docs/config/setup/modules/config.md index c69958ea75..8381dc8c73 100644 --- a/docs/config/setup/modules/config.md +++ b/docs/config/setup/modules/config.md @@ -14,7 +14,7 @@ #### Defined in -config.ts:7 +[config.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L7) ## Functions @@ -36,7 +36,7 @@ Pushes in a directive to the configuration #### Defined in -config.ts:191 +[config.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L191) --- @@ -60,7 +60,7 @@ The currentConfig #### Defined in -config.ts:137 +[config.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L137) --- @@ -84,7 +84,7 @@ The siteConfig #### Defined in -config.ts:96 +[config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96) --- @@ -118,7 +118,7 @@ config.ts:96 #### Defined in -config.ts:223 +[config.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L223) --- @@ -147,7 +147,7 @@ options in-place #### Defined in -config.ts:152 +[config.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L152) --- @@ -167,7 +167,7 @@ config.ts:152 #### Defined in -config.ts:75 +[config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75) --- @@ -199,7 +199,7 @@ The currentConfig merged with the sanitized conf #### Defined in -config.ts:113 +[config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113) --- @@ -232,7 +232,7 @@ The new siteConfig #### Defined in -config.ts:61 +[config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61) --- @@ -253,7 +253,7 @@ config.ts:61 #### Defined in -config.ts:14 +[config.ts:14](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L14) --- @@ -273,4 +273,4 @@ config.ts:14 #### Defined in -config.ts:79 +[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79) diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index 649e03db85..d95ec4e922 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -defaultConfig.ts:2298 +[defaultConfig.ts:2293](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2293) --- @@ -53,4 +53,4 @@ A description of each option follows below. #### Defined in -defaultConfig.ts:33 +[defaultConfig.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L33) diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index aa30437138..591b6841a0 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi) #### Defined in -mermaidAPI.ts:81 +[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81) ## Variables @@ -96,7 +96,7 @@ mermaid.initialize(config); #### Defined in -mermaidAPI.ts:663 +[mermaidAPI.ts:663](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L663) ## Functions @@ -127,7 +127,7 @@ Return the last node appended #### Defined in -mermaidAPI.ts:308 +[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308) --- @@ -153,7 +153,7 @@ the cleaned up svgCode #### Defined in -mermaidAPI.ts:256 +[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256) --- @@ -179,7 +179,7 @@ the string with all the user styles #### Defined in -mermaidAPI.ts:185 +[mermaidAPI.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L185) --- @@ -202,7 +202,7 @@ mermaidAPI.ts:185 #### Defined in -mermaidAPI.ts:233 +[mermaidAPI.ts:233](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L233) --- @@ -229,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important; #### Defined in -mermaidAPI.ts:169 +[mermaidAPI.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L169) --- @@ -249,7 +249,7 @@ mermaidAPI.ts:169 #### Defined in -mermaidAPI.ts:155 +[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155) --- @@ -269,7 +269,7 @@ mermaidAPI.ts:155 #### Defined in -mermaidAPI.ts:126 +[mermaidAPI.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L126) --- @@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code #### Defined in -mermaidAPI.ts:287 +[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287) --- @@ -320,4 +320,4 @@ Remove any existing elements from the given document #### Defined in -mermaidAPI.ts:358 +[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358) From c5b89d127d03bb50995e87abe3294e4358a7348c Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 25 Jun 2023 01:38:31 +0300 Subject: [PATCH 070/263] Update docs --- docs/config/setup/modules/defaultConfig.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index d95ec4e922..d74c9b2b1e 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -[defaultConfig.ts:2293](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2293) +[defaultConfig.ts:2298](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2298) --- From a38733346f01c443e46a2b81def9cf567aa325f8 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 25 Jun 2023 21:56:14 +0300 Subject: [PATCH 071/263] Removed unnecessary configs and extra code --- cypress/integration/rendering/sankey.spec.js | 1 - demos/sankey.html | 3 --- packages/mermaid/src/diagrams/sankey/sankeyDetector.ts | 2 +- 3 files changed, 1 insertion(+), 5 deletions(-) diff --git a/cypress/integration/rendering/sankey.spec.js b/cypress/integration/rendering/sankey.spec.js index 7a3ffa5db4..eb25edf0fa 100644 --- a/cypress/integration/rendering/sankey.spec.js +++ b/cypress/integration/rendering/sankey.spec.js @@ -10,6 +10,5 @@ describe('Sankey Diagram', () => { `, {} ); - cy.get('svg'); }); }); diff --git a/demos/sankey.html b/demos/sankey.html index 3dc7a2332e..72ca84e44f 100644 --- a/demos/sankey.html +++ b/demos/sankey.html @@ -95,9 +95,6 @@

    Energy flow

    theme: 'default', logLevel: 3, securityLevel: 'loose', - flowchart: { curve: 'basis' }, - gantt: { axisFormat: '%m/%d/%Y' }, - sequence: { actorMargin: 50 }, sankey: { title: 'Hey, this is Sankey-Beta', width: 1200, diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts b/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts index 1045d7021e..73c4d14289 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts @@ -3,7 +3,7 @@ import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-a const id = 'sankey'; const detector: DiagramDetector = (txt) => { - return txt.match(/^\s*sankey-beta/) !== null; + return /^\s*sankey-beta/.test(txt); }; const loader = async () => { From b0825ebb35ed001ae86a996e7f622901fa3e850e Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Mon, 26 Jun 2023 18:37:41 +0300 Subject: [PATCH 072/263] Import at the top --- .../mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js | 1 - packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js index a6efe62c12..1fae77c150 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js @@ -1,7 +1,6 @@ import diagram from './sankey-arrow.jison'; import { parser } from './sankey-arrow.jison'; import db from '../sankeyDB.js'; -// import { fail } from 'assert'; describe('sankey-beta diagram', function () { // TODO - these examples should be put into ./parser/stateDiagram.spec.js diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts index 1df607b632..eef8ae3c6b 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts @@ -5,6 +5,8 @@ import { parser } from './sankey.jison'; import db from '../sankeyDB.js'; import { cleanupComments } from '../../../diagram-api/comments.js'; import { prepareTextForParsing } from '../sankeyUtils.js'; +import * as fs from 'fs'; +import * as path from 'path'; describe('Sankey diagram', function () { describe('when parsing an info graph it', function () { @@ -15,8 +17,6 @@ describe('Sankey diagram', function () { }); it('parses csv', async () => { - const fs = await import('fs'); - const path = await import('path'); const csv = path.resolve(__dirname, './energy.csv'); const data = fs.readFileSync(csv, 'utf8'); const graphDefinition = prepareTextForParsing(cleanupComments('sankey-beta\n\n ' + data)); From 605e8d4a922b8c2620b6abe47a8d13154e8a7839 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Tue, 27 Jun 2023 14:11:06 +0300 Subject: [PATCH 073/263] Sankey refactoring --- packages/mermaid/src/config.type.ts | 8 +++ packages/mermaid/src/defaultConfig.ts | 5 +- .../mermaid/src/diagrams/sankey/sankeyDB.ts | 27 +++------- .../src/diagrams/sankey/sankeyRenderer.ts | 22 ++++---- run | 52 ++++++++----------- 5 files changed, 50 insertions(+), 64 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 7e0b67eb54..4d40b33c85 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -418,10 +418,18 @@ export enum SankeyLinkColor { gradient = 'gradient', } +export enum SankeyNodeAlignment { + left = 'left', + right = 'right', + center = 'center', + justify = 'justify', +} + export interface SankeyDiagramConfig extends BaseDiagramConfig { width?: number; height?: number; linkColor?: SankeyLinkColor | string; + nodeAlignment?: SankeyNodeAlignment; } export interface FontConfig { diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 4ece250109..39dcd07212 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -1,5 +1,5 @@ import theme from './themes/index.js'; -import { MermaidConfig } from './config.type.js'; +import { MermaidConfig, SankeyLinkColor, SankeyNodeAlignment } from './config.type.js'; /** * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click * here](8.6.0_docs.md)].** @@ -2273,7 +2273,8 @@ const config: Partial = { sankey: { width: 800, height: 400, - linkColor: 'gradient', + linkColor: SankeyLinkColor.gradient, + nodeAlignment: SankeyNodeAlignment.justify, }, fontSize: 16, }; diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts index 807c07cd1d..eda4438711 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts @@ -17,22 +17,11 @@ import { let links: SankeyLink[] = []; let nodes: SankeyNode[] = []; let nodesMap: Record = {}; -let nodeAlign = 'justify'; - -const setNodeAlign = (alignment: string): void => { - const nodeAlignments: Set = new Set(['left', 'right', 'center', 'justify']); - if (nodeAlignments.has(alignment)) { - nodeAlign = alignment; - } -}; - -const getNodeAlign = (): string => nodeAlign; const clear = (): void => { links = []; nodes = []; nodesMap = {}; - nodeAlign = 'justify'; commonClear(); }; @@ -58,15 +47,13 @@ class SankeyNode { */ const findOrCreateNode = (ID: string): SankeyNode => { ID = common.sanitizeText(ID, configApi.getConfig()); - let node: SankeyNode; - if (nodesMap[ID] === undefined) { - node = new SankeyNode(ID); - nodesMap[ID] = node; - nodes.push(node); - } else { - node = nodesMap[ID]; + if (nodesMap[ID]) { + return nodesMap[ID]; } - return node; + + nodesMap[ID] = new SankeyNode(ID); + nodes.push(nodesMap[ID]); + return nodesMap[ID]; }; const getNodes = () => nodes; @@ -89,8 +76,6 @@ export default { getGraph, addLink, findOrCreateNode, - setNodeAlign, - getNodeAlign, getAccTitle, setAccTitle, getAccDescription, diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index dd31e775e5..a480b4b3e1 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -1,12 +1,9 @@ -// @ts-nocheck TODO: fix file import { Diagram } from '../../Diagram.js'; import * as configApi from '../../config.js'; import { select as d3select, - // @ts-ignore TODO: make proper import scaleOrdinal as d3scaleOrdinal, - // @ts-ignore TODO: make proper import schemeTableau10 as d3schemeTableau10, } from 'd3'; @@ -20,7 +17,7 @@ import { } from 'd3-sankey'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import { Uid } from './sankeyUtils.js'; -import { SankeyLinkColor } from '../../config.type.js'; +import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js'; /** * Draws Sankey diagram. @@ -69,13 +66,14 @@ export const draw = function (text: string, id: string, _version: string, diagOb // } // const graph = diagObj.db.getGraph(); - const nodeAligns = { - left: d3SankeyLeft, - right: d3SankeyRight, - center: d3SankeyCenter, - justify: d3SankeyJustify, - }; - const nodeAlign = nodeAligns[diagObj.db.getNodeAlign()]; + + const alignmentsMap: Record, n: number) => number> = new Map([ + [SankeyNodeAlignment.left, d3SankeyLeft], + [SankeyNodeAlignment.right, d3SankeyRight], + [SankeyNodeAlignment.center, d3SankeyCenter], + [SankeyNodeAlignment.justify, d3SankeyJustify], + ]); + const nodeAlignment = alignmentsMap[conf?.nodeAlignment]; // Construct and configure a Sankey generator // That will be a function that calculates nodes and links dimensions @@ -85,7 +83,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb .nodeId((d: any) => d.id) // we use 'id' property to identify node .nodeWidth(nodeWidth) .nodePadding(10) - .nodeAlign(nodeAlign) + .nodeAlign(nodeAlignment) .extent([ [0, 0], [width, height], diff --git a/run b/run index 6aee10dc22..b5e589e6e2 100755 --- a/run +++ b/run @@ -11,24 +11,8 @@ sh) $RUN mermaid sh -c "npx $args" ;; -i | install) -$RUN mermaid sh -c "npx pnpm install $args" -;; - -add) -$RUN mermaid sh -c "npx pnpm -w add $args" -;; - -test | vitest | e2e ) -$RUN mermaid sh -c "npx pnpm $command $args" -;; - -prettier) -$RUN mermaid sh -c "npx pnpm prettier --write $args" -;; - -lint) -$RUN mermaid sh -c "npx pnpm -w run lint:fix $args" +pnpm) +$RUN mermaid sh -c "npx $command $args" ;; dev) @@ -42,22 +26,32 @@ $RUN --service-ports mermaid sh -c "npx pnpm --filter mermaid run docs:dev" help) usage=$( cat <' -$name lint # Equvalent of pnpm -w run lint:fix -$name test # Run unit tests -$name vitest # Run watcher for unit tests -$name e2e # Run integration tests +Commands: -$name sh # Open sh inside docker container for development +$name pnpm # Run any 'pnpm' command +$name dev # Run dev server with examples, open http://localhost:9000 +$name docs:dev # For docs contributions, open http://localhost:3333 + +$name sh # Open 'sh' inside docker container for development $name help # Show this help + +Examples of frequiently used commands: + +$name pnpm add # Add package, 'run add d3-sankey' +$name pnpm prettier # Prettify a file 'run prettier ' +$name pnpm test # Run unit tests +$name pnpm vitest # Run watcher for unit tests +$name pnpm e2e # Run integration tests +$name pnpm -w run lint:fix EOF ) From 616c5e6914c063af5d6c1db5696cc031ab44568c Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Tue, 27 Jun 2023 14:43:35 +0300 Subject: [PATCH 074/263] Move UID to separate file, refine run sh --- .../src/diagrams/sankey/sankeyRenderer.ts | 12 +++++---- .../src/diagrams/sankey/sankeyUtils.ts | 19 ------------- packages/mermaid/src/rendering-util/uid.ts | 18 +++++++++++++ run | 27 ++++++++++--------- 4 files changed, 39 insertions(+), 37 deletions(-) create mode 100644 packages/mermaid/src/rendering-util/uid.ts diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index a480b4b3e1..6a4c5fdcfd 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -16,7 +16,7 @@ import { sankeyJustify as d3SankeyJustify, } from 'd3-sankey'; import { configureSvgSize } from '../../setupGraphViewbox.js'; -import { Uid } from './sankeyUtils.js'; +import { Uid } from '../../rendering-util/uid.js'; import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js'; /** @@ -30,7 +30,7 @@ import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js'; export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void { // Get Sankey config const { securityLevel, sankey: conf } = configApi.getConfig(); - + // TODO: // This code repeats for every diagram // Figure out what is happening there, probably it should be separated @@ -66,14 +66,16 @@ export const draw = function (text: string, id: string, _version: string, diagOb // } // const graph = diagObj.db.getGraph(); - - const alignmentsMap: Record, n: number) => number> = new Map([ + const alignmentsMap: Map< + SankeyNodeAlignment, + (node: SankeyNode<{}, {}>, n: number) => number + > = new Map([ [SankeyNodeAlignment.left, d3SankeyLeft], [SankeyNodeAlignment.right, d3SankeyRight], [SankeyNodeAlignment.center, d3SankeyCenter], [SankeyNodeAlignment.justify, d3SankeyJustify], ]); - const nodeAlignment = alignmentsMap[conf?.nodeAlignment]; + const nodeAlignment = alignmentsMap.get(conf?.nodeAlignment || SankeyNodeAlignment.justify); // Construct and configure a Sankey generator // That will be a function that calculates nodes and links dimensions diff --git a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts index 08e4c547f5..45ecf21dda 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts @@ -6,22 +6,3 @@ export const prepareTextForParsing = (text: string): string => { return textToParse; }; - -export class Uid { - private static count = 0; - id: string; - href: string; - - public static next(name: string): Uid { - return new Uid(name + ++Uid.count); - } - - constructor(id: string) { - this.id = id; - this.href = `#${id}`; - } - - toString(): string { - return 'url(' + this.href + ')'; - } -} diff --git a/packages/mermaid/src/rendering-util/uid.ts b/packages/mermaid/src/rendering-util/uid.ts new file mode 100644 index 0000000000..9f581faa76 --- /dev/null +++ b/packages/mermaid/src/rendering-util/uid.ts @@ -0,0 +1,18 @@ +export class Uid { + private static count = 0; + id: string; + href: string; + + public static next(name: string): Uid { + return new Uid(name + ++Uid.count); + } + + constructor(id: string) { + this.id = id; + this.href = `#${id}`; + } + + toString(): string { + return 'url(' + this.href + ')'; + } +} diff --git a/run b/run index b5e589e6e2..18a544312f 100755 --- a/run +++ b/run @@ -30,27 +30,28 @@ Run commands within docker containers. Development quick start guide: -\033[1m$name pnpm install\033[0m # Install packages -\033[1m$name dev\033[0m # Run dev server with examples, open http://localhost:9000 -\033[1m$name docs:dev\033[0m # For docs contributions, open http://localhost:3333 +\033[1m$name pnpm install\033[0m # Install packages +\033[1m$name dev\033[0m # Run dev server with examples, open http://localhost:9000 +\033[1m$name docs:dev\033[0m # For docs contributions, open http://localhost:3333 Commands: -$name pnpm # Run any 'pnpm' command -$name dev # Run dev server with examples, open http://localhost:9000 -$name docs:dev # For docs contributions, open http://localhost:3333 +$name pnpm # Run any 'pnpm' command +$name dev # Run dev server with examples, open http://localhost:9000 +$name docs:dev # For docs contributions, open http://localhost:3333 -$name sh # Open 'sh' inside docker container for development +$name sh # Open 'sh' inside docker container for development -$name help # Show this help +$name help # Show this help Examples of frequiently used commands: -$name pnpm add # Add package, 'run add d3-sankey' -$name pnpm prettier # Prettify a file 'run prettier ' -$name pnpm test # Run unit tests -$name pnpm vitest # Run watcher for unit tests -$name pnpm e2e # Run integration tests +$name pnpm add # Add package, 'run add d3-sankey' +$name pnpm prettier --write # Prettify a file 'run prettier ' + # git diff --name-only develop | xargs run pnpm prettier --write +$name pnpm test # Run unit tests +$name pnpm vitest # Run watcher for unit tests +$name pnpm e2e # Run integration tests $name pnpm -w run lint:fix EOF ) From 32c85243172fd4162ae3ba1b0c036ac51e50eecf Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Tue, 27 Jun 2023 15:15:34 +0300 Subject: [PATCH 075/263] Put d3-sankey under mermaid package --- package.json | 1 - packages/mermaid/package.json | 3 + .../mermaid/src/diagrams/sankey/sankeyDB.ts | 3 - .../src/diagrams/sankey/sankeyRenderer.ts | 1 + pnpm-lock.yaml | 179 ++++++++++++++++-- 5 files changed, 169 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index f1ab3d4ecb..b1a5b5c4b0 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,6 @@ "coveralls": "^3.1.1", "cypress": "^12.10.0", "cypress-image-snapshot": "^4.0.1", - "d3-sankey": "^0.12.3", "esbuild": "^0.18.0", "eslint": "^8.39.0", "eslint-config-prettier": "^8.8.0", diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index d0c67ee58a..97d658deb8 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -53,10 +53,13 @@ }, "dependencies": { "@braintree/sanitize-url": "^6.0.2", + "@types/d3-scale": "^4.0.3", + "@types/d3-scale-chromatic": "^3.0.0", "cytoscape": "^3.23.0", "cytoscape-cose-bilkent": "^4.1.0", "cytoscape-fcose": "^2.1.0", "d3": "^7.4.0", + "d3-sankey": "^0.12.3", "dagre-d3-es": "7.0.10", "dayjs": "^1.11.7", "dompurify": "3.0.3", diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts index eda4438711..913fcb4105 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts @@ -42,9 +42,6 @@ class SankeyNode { constructor(public ID: string) {} } -/** - * @param ID - The id of the node - */ const findOrCreateNode = (ID: string): SankeyNode => { ID = common.sanitizeText(ID, configApi.getConfig()); if (nodesMap[ID]) { diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 6a4c5fdcfd..83d61dec78 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -1,3 +1,4 @@ +// @ts-nocheck import { Diagram } from '../../Diagram.js'; import * as configApi from '../../config.js'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 219cecd96f..4d91dd5de1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -88,9 +88,6 @@ importers: cypress-image-snapshot: specifier: ^4.0.1 version: 4.0.1(cypress@12.10.0)(jest@29.5.0) - d3-sankey: - specifier: ^0.12.3 - version: 0.12.3 esbuild: specifier: ^0.18.0 version: 0.18.0 @@ -199,6 +196,12 @@ importers: '@braintree/sanitize-url': specifier: ^6.0.2 version: 6.0.2 + '@types/d3-scale': + specifier: ^4.0.3 + version: 4.0.3 + '@types/d3-scale-chromatic': + specifier: ^3.0.0 + version: 3.0.0 cytoscape: specifier: ^3.23.0 version: 3.23.0 @@ -211,6 +214,9 @@ importers: d3: specifier: ^7.4.0 version: 7.8.2 + d3-sankey: + specifier: ^0.12.3 + version: 0.12.3 dagre-d3-es: specifier: 7.0.10 version: 7.0.10 @@ -456,6 +462,58 @@ importers: specifier: ^6.5.4 version: 6.5.4 + packages/mermaid/src/vitepress: + dependencies: + '@vueuse/core': + specifier: ^10.1.0 + version: 10.1.0(vue@3.2.47) + jiti: + specifier: ^1.18.2 + version: 1.18.2 + vue: + specifier: ^3.2.47 + version: 3.2.47 + devDependencies: + '@iconify-json/carbon': + specifier: ^1.1.16 + version: 1.1.16 + '@unocss/reset': + specifier: ^0.53.0 + version: 0.53.0 + '@vite-pwa/vitepress': + specifier: ^0.2.0 + version: 0.2.0(vite-plugin-pwa@0.16.0) + '@vitejs/plugin-vue': + specifier: ^4.2.1 + version: 4.2.1(vite@4.3.9)(vue@3.2.47) + fast-glob: + specifier: ^3.2.12 + version: 3.2.12 + https-localhost: + specifier: ^4.7.1 + version: 4.7.1 + pathe: + specifier: ^1.1.0 + version: 1.1.0 + unocss: + specifier: ^0.53.0 + version: 0.53.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.9) + unplugin-vue-components: + specifier: ^0.25.0 + version: 0.25.0(rollup@2.79.1)(vue@3.2.47) + vite: + specifier: ^4.3.3 + version: 4.3.9(@types/node@18.16.0) + vite-plugin-pwa: + specifier: ^0.16.0 + version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@6.5.4) + vitepress: + specifier: 1.0.0-beta.2 + version: 1.0.0-beta.2(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0) + workbox-window: + specifier: ^6.5.4 + version: 6.5.4 + tests/webpack: dependencies: '@mermaid-js/mermaid-example-diagram': @@ -4017,13 +4075,11 @@ packages: /@types/d3-scale-chromatic@3.0.0: resolution: {integrity: sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==} - dev: true - /@types/d3-scale@4.0.2: - resolution: {integrity: sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==} + /@types/d3-scale@4.0.3: + resolution: {integrity: sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==} dependencies: '@types/d3-time': 3.0.0 - dev: true /@types/d3-selection@3.0.5: resolution: {integrity: sha512-xCB0z3Hi8eFIqyja3vW8iV01+OHGYR2di/+e+AiOcXIOrY82lcvWW8Ke1DYE/EUVMsBl4Db9RppSBS3X1U6J0w==} @@ -4047,7 +4103,6 @@ packages: /@types/d3-time@3.0.0: resolution: {integrity: sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==} - dev: true /@types/d3-timer@3.0.0: resolution: {integrity: sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==} @@ -4090,7 +4145,7 @@ packages: '@types/d3-polygon': 3.0.0 '@types/d3-quadtree': 3.0.2 '@types/d3-random': 3.0.1 - '@types/d3-scale': 4.0.2 + '@types/d3-scale': 4.0.3 '@types/d3-scale-chromatic': 3.0.0 '@types/d3-selection': 3.0.5 '@types/d3-shape': 3.1.0 @@ -4681,6 +4736,17 @@ packages: - vite dev: true + /@unocss/astro@0.53.0(rollup@2.79.1)(vite@4.3.9): + resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==} + dependencies: + '@unocss/core': 0.53.0 + '@unocss/reset': 0.53.0 + '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9) + transitivePeerDependencies: + - rollup + - vite + dev: true + /@unocss/cli@0.53.0(rollup@2.79.1): resolution: {integrity: sha512-9WNBHy8m8tMqwcp7mUhebRUBvHQfbx01CMe5cAFLmUYtJULM+8IjJxqERkaAZyyoOXf1TNO2v1dFAmCwhMRCLQ==} engines: {node: '>=14'} @@ -4859,6 +4925,26 @@ packages: - rollup dev: true + /@unocss/vite@0.53.0(rollup@2.79.1)(vite@4.3.9): + resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==} + peerDependencies: + vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 + dependencies: + '@ampproject/remapping': 2.2.1 + '@rollup/pluginutils': 5.0.2(rollup@2.79.1) + '@unocss/config': 0.53.0 + '@unocss/core': 0.53.0 + '@unocss/inspector': 0.53.0 + '@unocss/scope': 0.53.0 + '@unocss/transformer-directives': 0.53.0 + chokidar: 3.5.3 + fast-glob: 3.2.12 + magic-string: 0.30.0 + vite: 4.3.9(@types/node@18.16.0) + transitivePeerDependencies: + - rollup + dev: true + /@vite-pwa/vitepress@0.2.0(vite-plugin-pwa@0.16.0): resolution: {integrity: sha512-dVQVaP6NB9woCFe4UASUqRp7uwBQJOVXlJlqK4krqXcbb3NuXIXIWOnU7HLpJnHqZj5U/81gKtLN6gs5gJBwiQ==} peerDependencies: @@ -4878,6 +4964,17 @@ packages: vue: 3.2.47 dev: true + /@vitejs/plugin-vue@4.2.1(vite@4.3.9)(vue@3.2.47): + resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + vite: ^4.0.0 + vue: ^3.2.25 + dependencies: + vite: 4.3.9(@types/node@18.16.0) + vue: 3.2.47 + dev: true + /@vitejs/plugin-vue@4.2.3(vite@4.3.8)(vue@3.3.4): resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==} engines: {node: ^14.18.0 || >=16.0.0} @@ -7166,7 +7263,7 @@ packages: resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==} dependencies: internmap: 1.0.1 - dev: true + dev: false /d3-array@3.2.0: resolution: {integrity: sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==} @@ -7287,7 +7384,7 @@ packages: /d3-path@1.0.9: resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==} - dev: true + dev: false /d3-path@3.0.1: resolution: {integrity: sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w==} @@ -7314,7 +7411,7 @@ packages: dependencies: d3-array: 2.12.1 d3-shape: 1.3.7 - dev: true + dev: false /d3-scale-chromatic@3.0.0: resolution: {integrity: sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==} @@ -7344,7 +7441,7 @@ packages: resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==} dependencies: d3-path: 1.0.9 - dev: true + dev: false /d3-shape@3.1.0: resolution: {integrity: sha512-tGDh1Muf8kWjEDT/LswZJ8WF85yDZLvVJpYU9Nq+8+yW1Z5enxrmXOhTArlkaElU+CTn0OTVNli+/i+HP45QEQ==} @@ -9583,7 +9680,7 @@ packages: /internmap@1.0.1: resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==} - dev: true + dev: false /internmap@2.0.3: resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==} @@ -14618,6 +14715,42 @@ packages: - vite dev: true + /unocss@0.53.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.9): + resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==} + engines: {node: '>=14'} + peerDependencies: + '@unocss/webpack': 0.53.0 + peerDependenciesMeta: + '@unocss/webpack': + optional: true + dependencies: + '@unocss/astro': 0.53.0(rollup@2.79.1)(vite@4.3.9) + '@unocss/cli': 0.53.0(rollup@2.79.1) + '@unocss/core': 0.53.0 + '@unocss/extractor-arbitrary-variants': 0.53.0 + '@unocss/postcss': 0.53.0(postcss@8.4.23) + '@unocss/preset-attributify': 0.53.0 + '@unocss/preset-icons': 0.53.0 + '@unocss/preset-mini': 0.53.0 + '@unocss/preset-tagify': 0.53.0 + '@unocss/preset-typography': 0.53.0 + '@unocss/preset-uno': 0.53.0 + '@unocss/preset-web-fonts': 0.53.0 + '@unocss/preset-wind': 0.53.0 + '@unocss/reset': 0.53.0 + '@unocss/transformer-attributify-jsx': 0.53.0 + '@unocss/transformer-attributify-jsx-babel': 0.53.0 + '@unocss/transformer-compile-class': 0.53.0 + '@unocss/transformer-directives': 0.53.0 + '@unocss/transformer-variant-group': 0.53.0 + '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9) + transitivePeerDependencies: + - postcss + - rollup + - supports-color + - vite + dev: true + /unpipe@1.0.0: resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==} engines: {node: '>= 0.8'} @@ -14842,6 +14975,24 @@ packages: - supports-color dev: true + /vite-plugin-pwa@0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@6.5.4): + resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==} + engines: {node: '>=16.0.0'} + peerDependencies: + vite: ^3.1.0 || ^4.0.0 + workbox-build: ^7.0.0 + workbox-window: ^7.0.0 + dependencies: + debug: 4.3.4(supports-color@8.1.1) + fast-glob: 3.2.12 + pretty-bytes: 6.1.0 + vite: 4.3.9(@types/node@18.16.0) + workbox-build: 7.0.0 + workbox-window: 6.5.4 + transitivePeerDependencies: + - supports-color + dev: true + /vite@4.3.3(@types/node@18.16.0): resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==} engines: {node: ^14.18.0 || >=16.0.0} From 830319e3db6df0cb86ac7dd3e3b80d3328792602 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Tue, 27 Jun 2023 15:21:36 +0300 Subject: [PATCH 076/263] Removed unnecessary TODO --- packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js index 1fae77c150..2172801dcc 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js @@ -3,7 +3,6 @@ import { parser } from './sankey-arrow.jison'; import db from '../sankeyDB.js'; describe('sankey-beta diagram', function () { - // TODO - these examples should be put into ./parser/stateDiagram.spec.js describe('when parsing an info graph it', function () { beforeEach(function () { parser.yy = db; From bbba64328879ed31bc3fa294ebaca508df03eee4 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Tue, 27 Jun 2023 15:30:22 +0300 Subject: [PATCH 077/263] Rmoved unnecessary imports in tests --- .../sankey/parser/sankey-arrow.spec.js | 25 +++++++++---------- .../src/diagrams/sankey/parser/sankey.spec.ts | 11 +++----- 2 files changed, 16 insertions(+), 20 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js index 2172801dcc..a180b9a28d 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js @@ -1,19 +1,18 @@ -import diagram from './sankey-arrow.jison'; -import { parser } from './sankey-arrow.jison'; +// @ts-ignore: jison doesn't export types +import sankey from './sankey-arrow.jison'; import db from '../sankeyDB.js'; describe('sankey-beta diagram', function () { describe('when parsing an info graph it', function () { beforeEach(function () { - parser.yy = db; - diagram.parser.yy = db; - diagram.parser.yy.clear(); + sankey.parser.yy = db; + sankey.parser.yy.clear(); }); it('recognizes its type', () => { const str = `sankey-beta`; - parser.parse(str); + sankey.parser.parse(str); }); it('recognizes one flow', () => { @@ -22,7 +21,7 @@ describe('sankey-beta diagram', function () { node_a -> 30 -> node_b -> 20 -> node_c `; - parser.parse(str); + sankey.parser.parse(str); }); it('recognizes multiple flows', () => { @@ -33,7 +32,7 @@ describe('sankey-beta diagram', function () { node_c -> 40 -> node_e -> 12 -> node_q `; - parser.parse(str); + sankey.parser.parse(str); }); it('parses node as a string', () => { @@ -44,7 +43,7 @@ describe('sankey-beta diagram', function () { "node c" -> 40 -> "node e" -> 12 -> "node q" `; - parser.parse(str); + sankey.parser.parse(str); }); describe('while attributes parsing', () => { @@ -54,7 +53,7 @@ describe('sankey-beta diagram', function () { 1st -> 200 -> 2nd -> 180 -> 3rd; `; - parser.parse(str); + sankey.parser.parse(str); }); it('parses different quotless variations', () => { @@ -70,7 +69,7 @@ describe('sankey-beta diagram', function () { node[x1dfqowie attr1 = 23413 attr2] `; - parser.parse(str); + sankey.parser.parse(str); }); it('parses strings as values', () => { @@ -80,7 +79,7 @@ describe('sankey-beta diagram', function () { node[title="hello, mister \\"sankey-beta\\", backslash for you \\\\"] `; - parser.parse(str); + sankey.parser.parse(str); }); it('parses real example', () => { @@ -95,7 +94,7 @@ describe('sankey-beta diagram', function () { "Biofuel imports" -> 35 -> "Liquid" `; - parser.parse(str); + sankey.parser.parse(str); }); }); }); diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts index eef8ae3c6b..4517ca01fc 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts @@ -1,7 +1,5 @@ // @ts-ignore: jison doesn't export types -import diagram from './sankey.jison'; -// @ts-ignore: jison doesn't export types -import { parser } from './sankey.jison'; +import sankey from './sankey.jison'; import db from '../sankeyDB.js'; import { cleanupComments } from '../../../diagram-api/comments.js'; import { prepareTextForParsing } from '../sankeyUtils.js'; @@ -11,9 +9,8 @@ import * as path from 'path'; describe('Sankey diagram', function () { describe('when parsing an info graph it', function () { beforeEach(function () { - parser.yy = db; - diagram.parser.yy = db; - diagram.parser.yy.clear(); + sankey.parser.yy = db; + sankey.parser.yy.clear(); }); it('parses csv', async () => { @@ -21,7 +18,7 @@ describe('Sankey diagram', function () { const data = fs.readFileSync(csv, 'utf8'); const graphDefinition = prepareTextForParsing(cleanupComments('sankey-beta\n\n ' + data)); - parser.parse(graphDefinition); + sankey.parser.parse(graphDefinition); }); }); }); From d4d7ce5a4b7c352fa2c45a65aad5f99a914d83de Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Tue, 27 Jun 2023 16:12:41 +0300 Subject: [PATCH 078/263] Fixed majority of ts errors for sankey --- .../src/diagrams/sankey/sankeyRenderer.ts | 43 +++++++++++-------- 1 file changed, 25 insertions(+), 18 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 83d61dec78..525c23e1ff 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -1,4 +1,3 @@ -// @ts-nocheck import { Diagram } from '../../Diagram.js'; import * as configApi from '../../config.js'; @@ -15,6 +14,7 @@ import { sankeyRight as d3SankeyRight, sankeyCenter as d3SankeyCenter, sankeyJustify as d3SankeyJustify, + SankeyNode as d3SankeyNode, } from 'd3-sankey'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import { Uid } from '../../rendering-util/uid.js'; @@ -41,11 +41,11 @@ export const draw = function (text: string, id: string, _version: string, diagOb if (securityLevel === 'sandbox') { sandboxElement = d3select('#i' + id); } - let root = d3select('body'); - - if (securityLevel === 'sandbox' && sandboxElement) { - root = d3select(sandboxElement.nodes()[0].contentDocument.body); - } + const root = + securityLevel === 'sandbox' + ? d3select(sandboxElement.nodes()[0].contentDocument.body) + : d3select('body'); + // @ts-ignore TODO root.select is not callable const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`); // Establish svg dimensions and get width and height @@ -53,9 +53,12 @@ export const draw = function (text: string, id: string, _version: string, diagOb const width = conf?.width || 800; const height = conf?.height || 400; const useMaxWidth = conf?.useMaxWidth || false; + const nodeAlignment = conf?.nodeAlignment || SankeyNodeAlignment.justify; // FIX: using max width prevents height from being set, is it intended? // to add height directly one can use `svg.attr('height', height)` + // + // @ts-ignore TODO: svg type vs selection mismatch configureSvgSize(svg, height, width, useMaxWidth); // Prepare data for construction based on diagObj.db @@ -66,17 +69,21 @@ export const draw = function (text: string, id: string, _version: string, diagOb // "links": [ { "source": "Alice", "target": "Bob", "value": 23 }, { "source": "Bob", "target": "Carol", "value": 43 } ] // } // + // @ts-ignore TODO: db should be coerced to sankey DB type const graph = diagObj.db.getGraph(); + + // Map config options to alignment functions const alignmentsMap: Map< SankeyNodeAlignment, - (node: SankeyNode<{}, {}>, n: number) => number + (node: d3SankeyNode<{}, {}>, n: number) => number > = new Map([ [SankeyNodeAlignment.left, d3SankeyLeft], [SankeyNodeAlignment.right, d3SankeyRight], [SankeyNodeAlignment.center, d3SankeyCenter], [SankeyNodeAlignment.justify, d3SankeyJustify], - ]); - const nodeAlignment = alignmentsMap.get(conf?.nodeAlignment || SankeyNodeAlignment.justify); + ]) + // We need fallback because typescript thinks that `get` can result in undefined + const nodeAlign = alignmentsMap.get(nodeAlignment) || d3SankeyJustify; // Construct and configure a Sankey generator // That will be a function that calculates nodes and links dimensions @@ -86,7 +93,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb .nodeId((d: any) => d.id) // we use 'id' property to identify node .nodeWidth(nodeWidth) .nodePadding(10) - .nodeAlign(nodeAlignment) + .nodeAlign(nodeAlign) .extent([ [0, 0], [width, height], @@ -152,32 +159,32 @@ export const draw = function (text: string, id: string, _version: string, diagOb if (linkColor === SankeyLinkColor.gradient) { const gradient = link .append('linearGradient') - .attr('id', (d) => (d.uid = Uid.next('linearGradient-')).id) + .attr('id', (d: any) => (d.uid = Uid.next('linearGradient-')).id) .attr('gradientUnits', 'userSpaceOnUse') - .attr('x1', (d) => d.source.x1) - .attr('x2', (d) => d.target.x0); + .attr('x1', (d: any) => d.source.x1) + .attr('x2', (d: any) => d.target.x0); gradient .append('stop') .attr('offset', '0%') - .attr('stop-color', (d) => colorScheme(d.source.id)); + .attr('stop-color', (d: any) => colorScheme(d.source.id)); gradient .append('stop') .attr('offset', '100%') - .attr('stop-color', (d) => colorScheme(d.target.id)); + .attr('stop-color', (d: any) => colorScheme(d.target.id)); } let coloring: any; switch (linkColor) { case SankeyLinkColor.gradient: - coloring = (d) => d.uid; + coloring = (d: any) => d.uid; break; case SankeyLinkColor.source: - coloring = (d) => d.source.id; + coloring = (d: any) => d.source.id; break; case SankeyLinkColor.target: - coloring = (d) => d.target.id; + coloring = (d: any) => d.target.id; break; default: coloring = linkColor; From 0bbf0555d3ac7fe3dee453945dcd8fb2dbd63a18 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Tue, 27 Jun 2023 16:17:55 +0300 Subject: [PATCH 079/263] Fix linters --- packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 525c23e1ff..ee78f95bdb 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -75,7 +75,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb // Map config options to alignment functions const alignmentsMap: Map< SankeyNodeAlignment, - (node: d3SankeyNode<{}, {}>, n: number) => number + (node: d3SankeyNode, n: number) => number > = new Map([ [SankeyNodeAlignment.left, d3SankeyLeft], [SankeyNodeAlignment.right, d3SankeyRight], From f0231ad9b1c51697655f32ef391ff2c3355e1c5f Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Tue, 27 Jun 2023 16:22:12 +0300 Subject: [PATCH 080/263] Lint --- packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index ee78f95bdb..e80fe657d9 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -31,7 +31,7 @@ import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js'; export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void { // Get Sankey config const { securityLevel, sankey: conf } = configApi.getConfig(); - + // TODO: // This code repeats for every diagram // Figure out what is happening there, probably it should be separated @@ -81,7 +81,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb [SankeyNodeAlignment.right, d3SankeyRight], [SankeyNodeAlignment.center, d3SankeyCenter], [SankeyNodeAlignment.justify, d3SankeyJustify], - ]) + ]); // We need fallback because typescript thinks that `get` can result in undefined const nodeAlign = alignmentsMap.get(nodeAlignment) || d3SankeyJustify; From 149cc44c39f1e7c06382dd27adc498654c92b1a0 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Tue, 27 Jun 2023 16:46:20 +0300 Subject: [PATCH 081/263] Empty From 301073a60d602687aa96d2943030bff4ee14db58 Mon Sep 17 00:00:00 2001 From: nirname Date: Tue, 27 Jun 2023 13:51:44 +0000 Subject: [PATCH 082/263] Update docs --- docs/config/setup/modules/defaultConfig.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index d74c9b2b1e..8cc503ae6c 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -[defaultConfig.ts:2298](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2298) +[defaultConfig.ts:2299](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2299) --- From 8b111760b15b699ff4e024aa3f85d7a120f2e5f9 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Tue, 27 Jun 2023 17:50:51 +0300 Subject: [PATCH 083/263] Updates after review --- packages/mermaid/src/defaultConfig.ts | 1 + .../mermaid/src/diagrams/sankey/sankeyDB.ts | 5 +- .../src/diagrams/sankey/sankeyRenderer.ts | 26 ++++----- pnpm-lock.yaml | 54 +++++++++++++++++++ 4 files changed, 70 insertions(+), 16 deletions(-) diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 39dcd07212..6e24b63913 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -2275,6 +2275,7 @@ const config: Partial = { height: 400, linkColor: SankeyLinkColor.gradient, nodeAlignment: SankeyNodeAlignment.justify, + useMaxWidth: false, }, fontSize: 16, }; diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts index 913fcb4105..1b6864af90 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts @@ -10,12 +10,11 @@ import { clear as commonClear, } from '../../commonDb.js'; -// Variables where graph data is stored // Sankey diagram represented by nodes and links between those nodes -// We have to track nodes uniqueness (by ID), thats why we need a mapping also -// let links: SankeyLink[] = []; +// Array of nodes guarantees their order let nodes: SankeyNode[] = []; +// We also have to track nodes uniqueness (by ID) let nodesMap: Record = {}; const clear = (): void => { diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index e80fe657d9..cb3092f555 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -31,6 +31,7 @@ import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js'; export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void { // Get Sankey config const { securityLevel, sankey: conf } = configApi.getConfig(); + const defaultSankeyConfig = configApi!.defaultConfig!.sankey!; // TODO: // This code repeats for every diagram @@ -50,10 +51,10 @@ export const draw = function (text: string, id: string, _version: string, diagOb // Establish svg dimensions and get width and height // - const width = conf?.width || 800; - const height = conf?.height || 400; - const useMaxWidth = conf?.useMaxWidth || false; - const nodeAlignment = conf?.nodeAlignment || SankeyNodeAlignment.justify; + const width = conf?.width || defaultSankeyConfig.width!; + const height = conf?.height || defaultSankeyConfig.width!; + const useMaxWidth = conf?.useMaxWidth || defaultSankeyConfig.useMaxWidth!; + const nodeAlignment = conf?.nodeAlignment || defaultSankeyConfig.nodeAlignment!; // FIX: using max width prevents height from being set, is it intended? // to add height directly one can use `svg.attr('height', height)` @@ -73,17 +74,16 @@ export const draw = function (text: string, id: string, _version: string, diagOb const graph = diagObj.db.getGraph(); // Map config options to alignment functions - const alignmentsMap: Map< + const alignmentsMap: Record< SankeyNodeAlignment, (node: d3SankeyNode, n: number) => number - > = new Map([ - [SankeyNodeAlignment.left, d3SankeyLeft], - [SankeyNodeAlignment.right, d3SankeyRight], - [SankeyNodeAlignment.center, d3SankeyCenter], - [SankeyNodeAlignment.justify, d3SankeyJustify], - ]); - // We need fallback because typescript thinks that `get` can result in undefined - const nodeAlign = alignmentsMap.get(nodeAlignment) || d3SankeyJustify; + > = { + [SankeyNodeAlignment.left]: d3SankeyLeft, + [SankeyNodeAlignment.right]: d3SankeyRight, + [SankeyNodeAlignment.center]: d3SankeyCenter, + [SankeyNodeAlignment.justify]: d3SankeyJustify, + }; + const nodeAlign = alignmentsMap[nodeAlignment]; // Construct and configure a Sankey generator // That will be a function that calculates nodes and links dimensions diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d13daf1b2d..052e5eec9e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15143,6 +15143,49 @@ packages: - terser dev: true + /vitepress@1.0.0-beta.2(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0): + resolution: {integrity: sha512-DBXYjtYbm3W1IPPJ2TiCaK/XK+o/2XmL2+jslOGKm+txcbmG0kbeB+vadC5tCUZA9NdA+9Ywj3M4548c7t/SDg==} + hasBin: true + dependencies: + '@docsearch/css': 3.5.1 + '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0) + '@vitejs/plugin-vue': 4.2.3(vite@4.3.9)(vue@3.3.4) + '@vue/devtools-api': 6.5.0 + '@vueuse/core': 10.1.2(vue@3.3.4) + '@vueuse/integrations': 10.1.2(focus-trap@7.4.3)(vue@3.3.4) + body-scroll-lock: 4.0.0-beta.0 + focus-trap: 7.4.3 + mark.js: 8.11.1 + minisearch: 6.1.0 + shiki: 0.14.2 + vite: 4.3.9(@types/node@18.16.0) + vue: 3.3.4 + transitivePeerDependencies: + - '@algolia/client-search' + - '@types/node' + - '@types/react' + - '@vue/composition-api' + - async-validator + - axios + - change-case + - drauu + - fuse.js + - idb-keyval + - jwt-decode + - less + - nprogress + - qrcode + - react + - react-dom + - sass + - search-insights + - sortablejs + - stylus + - sugarss + - terser + - universal-cookie + dev: true + /vitepress@1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0): resolution: {integrity: sha512-GR5Pvr/o343NN1M4Na1shhDYZRrQbjmLq7WE0lla0H8iDPAsHE8agTHLWfu3FWx+3q2KA29sv16+0O9RQKGjlA==} hasBin: true @@ -15808,6 +15851,10 @@ packages: workbox-core: 7.0.0 dev: true + /workbox-core@6.5.4: + resolution: {integrity: sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q==} + dev: true + /workbox-core@7.0.0: resolution: {integrity: sha512-81JkAAZtfVP8darBpfRTovHg8DGAVrKFgHpOArZbdFd78VqHr5Iw65f2guwjE2NlCFbPFDoez3D3/6ZvhI/rwQ==} dev: true @@ -15882,6 +15929,13 @@ packages: resolution: {integrity: sha512-SWfEouQfjRiZ7GNABzHUKUyj8pCoe+RwjfOIajcx6J5mtgKkN+t8UToHnpaJL5UVVOf5YhJh+OHhbVNIHe+LVA==} dev: true + /workbox-window@6.5.4: + resolution: {integrity: sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==} + dependencies: + '@types/trusted-types': 2.0.2 + workbox-core: 6.5.4 + dev: true + /workbox-window@7.0.0: resolution: {integrity: sha512-j7P/bsAWE/a7sxqTzXo3P2ALb1reTfZdvVp6OJ/uLr/C2kZAMvjeWGm8V4htQhor7DOvYg0sSbFN2+flT5U0qA==} dependencies: From 19bea109830c1e4986a02cfcccecf21c2e3d1f4d Mon Sep 17 00:00:00 2001 From: nirname Date: Tue, 27 Jun 2023 14:54:57 +0000 Subject: [PATCH 084/263] Update docs --- docs/config/setup/modules/defaultConfig.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index 8cc503ae6c..793dfffaee 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -[defaultConfig.ts:2299](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2299) +[defaultConfig.ts:2300](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2300) --- From 228bafa909bec100ebec9b94fe42765a6c738e3a Mon Sep 17 00:00:00 2001 From: Yokozuna59 Date: Tue, 27 Jun 2023 18:07:35 +0300 Subject: [PATCH 085/263] refactor accessibility - remove @ts-ignore comments - rename vitest test and describe title - remove unnecessary types, e.i, `null` and `number` - clean `addSVGa11yTitleDescription` and `setA11yDiagramInfo` functions --- packages/mermaid/src/accessibility.spec.ts | 146 ++++++++++----------- packages/mermaid/src/accessibility.ts | 49 ++++--- packages/mermaid/src/tests/MockedD3.ts | 11 +- 3 files changed, 94 insertions(+), 112 deletions(-) diff --git a/packages/mermaid/src/accessibility.spec.ts b/packages/mermaid/src/accessibility.spec.ts index 7a3ab7f105..7745e02ef8 100644 --- a/packages/mermaid/src/accessibility.spec.ts +++ b/packages/mermaid/src/accessibility.spec.ts @@ -1,27 +1,24 @@ import { MockedD3 } from './tests/MockedD3.js'; import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js'; -import { D3Element } from './mermaidAPI.js'; +import type { D3Element } from './mermaidAPI.js'; describe('accessibility', () => { - const fauxSvgNode = new MockedD3(); + const fauxSvgNode: MockedD3 = new MockedD3(); describe('setA11yDiagramInfo', () => { - it('sets the svg element role to "graphics-document document"', () => { - // @ts-ignore Required to easily handle the d3 select types + it('should set svg element role to "graphics-document document"', () => { 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 + it('should set aria-roledescription to the diagram type', () => { const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); setA11yDiagramInfo(fauxSvgNode, 'flowchart'); expect(svgAttrSpy).toHaveBeenCalledWith('aria-roledescription', 'flowchart'); }); - it('does not set the aria-roledescription if the diagram type is empty', () => { - // @ts-ignore Required to easily handle the d3 select types + it('should not set aria-roledescription if the diagram type is empty', () => { const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); setA11yDiagramInfo(fauxSvgNode, ''); expect(svgAttrSpy).toHaveBeenCalledTimes(1); @@ -32,8 +29,8 @@ describe('accessibility', () => { describe('addSVGa11yTitleDescription', () => { const givenId = 'theBaseId'; - describe('with the given svg d3 object:', () => { - it('does nothing if there is no insert defined', () => { + describe('with svg d3 object', () => { + it('should do nothing if there is no insert defined', () => { const noInsertSvg = { attr: vi.fn(), }; @@ -42,26 +39,25 @@ describe('accessibility', () => { expect(noInsertAttrSpy).not.toHaveBeenCalled(); }); - // ---------------- - // Convenience functions to DRY up the spec + // convenience functions to DRY up the spec - function expectAriaLabelledByIsTitleId( + function expectAriaLabelledByItTitleId( svgD3Node: D3Element, - title: string | null | undefined, - desc: string | null | undefined, + title: string | undefined, + desc: string | undefined, givenId: string - ) { + ): void { const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node); addSVGa11yTitleDescription(svgD3Node, title, desc, givenId); expect(svgAttrSpy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`); } - function expectAriaDescribedByIsDescId( + function expectAriaDescribedByItDescId( svgD3Node: D3Element, - title: string | null | undefined, - desc: string | null | undefined, + title: string | undefined, + desc: string | undefined, givenId: string - ) { + ): void { const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node); addSVGa11yTitleDescription(svgD3Node, title, desc, givenId); expect(svgAttrSpy).toHaveBeenCalledWith('aria-describedby', `chart-desc-${givenId}`); @@ -69,154 +65,148 @@ describe('accessibility', () => { function a11yTitleTagInserted( svgD3Node: D3Element, - title: string | null | undefined, - desc: string | null | undefined, + title: string | undefined, + desc: string | undefined, givenId: string, callNumber: number - ) { + ): void { a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'title', title); } function a11yDescTagInserted( svgD3Node: D3Element, - title: string | null | undefined, - desc: string | null | undefined, + title: string | undefined, + desc: string | undefined, givenId: string, callNumber: number - ) { + ): void { a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'desc', desc); } function a11yTagInserted( - svgD3Node: D3Element, - title: string | null | undefined, - desc: string | null | undefined, + _svgD3Node: D3Element, + title: string | undefined, + desc: string | undefined, givenId: string, callNumber: number, expectedPrefix: string, - expectedText: string | null | undefined - ) { - const fauxInsertedD3 = new MockedD3(); - const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxInsertedD3); - // @ts-ignore Required to easily handle the d3 select types + expectedText: string | undefined + ): void { + const fauxInsertedD3: MockedD3 = new MockedD3(); + const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxInsertedD3); const titleAttrSpy = vi.spyOn(fauxInsertedD3, 'attr').mockReturnValue(fauxInsertedD3); const titleTextSpy = vi.spyOn(fauxInsertedD3, 'text'); addSVGa11yTitleDescription(fauxSvgNode, title, desc, givenId); - expect(svgInsertSpy).toHaveBeenCalledWith(expectedPrefix, ':first-child'); + expect(svginsertpy).toHaveBeenCalledWith(expectedPrefix, ':first-child'); expect(titleAttrSpy).toHaveBeenCalledWith('id', `chart-${expectedPrefix}-${givenId}`); expect(titleTextSpy).toHaveBeenNthCalledWith(callNumber, expectedText); } - // ---------------- - describe('given an a11y title', () => { + describe('with a11y title', () => { const a11yTitle = 'a11y title'; - describe('given an a11y description', () => { + describe('with a11y description', () => { const a11yDesc = 'a11y description'; - it('sets aria-labelledby to the title id inserted as a child', () => { - expectAriaLabelledByIsTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId); + it('shold set aria-labelledby to the title id inserted as a child', () => { + expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId); }); - it('sets aria-describedby to the description id inserted as a child', () => { - expectAriaDescribedByIsDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId); + it('should set aria-describedby to the description id inserted as a child', () => { + expectAriaDescribedByItDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId); }); - it('inserts a title tag as the first child with the text set to the accTitle given', () => { + it('should insert title tag as the first child with the text set to the accTitle given', () => { a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 2); }); - it('inserts a desc tag as the 2nd child with the text set to accDescription given', () => { + it('should insert desc tag as the 2nd child with the text set to accDescription given', () => { a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1); }); }); - describe(`no a11y description`, () => { + describe(`without a11y description`, () => { const a11yDesc = undefined; - it('sets aria-labelledby to the title id inserted as a child', () => { - expectAriaLabelledByIsTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId); + it('should set aria-labelledby to the title id inserted as a child', () => { + expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId); }); - it('no aria-describedby is set', () => { - // @ts-ignore Required to easily handle the d3 select types + it('should not set aria-describedby', () => { const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything()); }); - it('inserts a title tag as the first child with the text set to the accTitle given', () => { + it('should insert title tag as the first child with the text set to the accTitle given', () => { a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1); }); - it('no description tag is inserted', () => { - const fauxTitle = new MockedD3(); - const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle); + it('should not insert description tag', () => { + const fauxTitle: MockedD3 = new MockedD3(); + const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle); addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); - expect(svgInsertSpy).not.toHaveBeenCalledWith('desc', ':first-child'); + expect(svginsertpy).not.toHaveBeenCalledWith('desc', ':first-child'); }); }); }); - describe('no a11y title', () => { + describe('without a11y title', () => { const a11yTitle = undefined; - describe('given an a11y description', () => { + describe('with a11y description', () => { const a11yDesc = 'a11y description'; - it('no aria-labelledby is set', () => { - // @ts-ignore Required to easily handle the d3 select types + it('should not set aria-labelledby', () => { const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything()); }); - it('no title tag inserted', () => { - const fauxTitle = new MockedD3(); - const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle); + it('should not insert title tag', () => { + const fauxTitle: MockedD3 = new MockedD3(); + const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle); addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); - expect(svgInsertSpy).not.toHaveBeenCalledWith('title', ':first-child'); + expect(svginsertpy).not.toHaveBeenCalledWith('title', ':first-child'); }); - it('sets aria-describedby to the description id inserted as a child', () => { - expectAriaDescribedByIsDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId); + it('should set aria-describedby to the description id inserted as a child', () => { + expectAriaDescribedByItDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId); }); - it('inserts a desc tag as the 2nd child with the text set to accDescription given', () => { + it('should insert desc tag as the 2nd child with the text set to accDescription given', () => { a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1); }); }); - describe('no a11y description', () => { + describe('without a11y description', () => { const a11yDesc = undefined; - it('no aria-labelledby is set', () => { - // @ts-ignore Required to easily handle the d3 select types + it('should not set aria-labelledby', () => { const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything()); }); - it('no aria-describedby is set', () => { - // @ts-ignore Required to easily handle the d3 select types + it('should not set aria-describedby', () => { const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything()); }); - it('no title tag inserted', () => { - const fauxTitle = new MockedD3(); - const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle); + it('should not insert title tag', () => { + const fauxTitle: MockedD3 = new MockedD3(); + const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle); addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); - expect(svgInsertSpy).not.toHaveBeenCalledWith('title', ':first-child'); + expect(svginsertpy).not.toHaveBeenCalledWith('title', ':first-child'); }); - it('no description tag inserted', () => { - const fauxDesc = new MockedD3(); - const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxDesc); + it('should not insert description tag', () => { + const fauxDesc: MockedD3 = new MockedD3(); + const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxDesc); addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); - expect(svgInsertSpy).not.toHaveBeenCalledWith('desc', ':first-child'); + expect(svginsertpy).not.toHaveBeenCalledWith('desc', ':first-child'); }); }); }); diff --git a/packages/mermaid/src/accessibility.ts b/packages/mermaid/src/accessibility.ts index eba3ba9a75..69e22b3011 100644 --- a/packages/mermaid/src/accessibility.ts +++ b/packages/mermaid/src/accessibility.ts @@ -1,13 +1,11 @@ /** - * Accessibility (a11y) functions, types, helpers + * 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.js'; - -import isEmpty from 'lodash-es/isEmpty.js'; +import type { D3Element } from './mermaidAPI.js'; /** * SVG element role: @@ -21,50 +19,47 @@ import isEmpty from 'lodash-es/isEmpty.js'; const SVG_ROLE = 'graphics-document document'; /** - * Add role and aria-roledescription to the svg element + * 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) { +export function setA11yDiagramInfo(svg: D3Element, diagramType: string) { svg.attr('role', SVG_ROLE); - if (!isEmpty(diagramType)) { + if (diagramType !== '') { svg.attr('aria-roledescription', diagramType); } } + /** * Add an accessible title and/or description element to a chart. * The title is usually not displayed and the description is never displayed. * - * The following charts display their title as a visual and accessibility element: gantt + * The following charts display their title as a visual and accessibility element: gantt. * * @param svg - d3 node to insert the a11y title and desc info - * @param a11yTitle - a11y title. null and undefined are meaningful: means to skip it - * @param a11yDesc - a11y description. null and undefined are meaningful: means to skip it + * @param a11yTitle - a11y title. undefined or empty strings mean to skip them + * @param a11yDesc - a11y description. undefined or empty strings mean to skip them * @param baseId - id used to construct the a11y title and description id */ export function addSVGa11yTitleDescription( svg: D3Element, - a11yTitle: string | null | undefined, - a11yDesc: string | null | undefined, + a11yTitle: string | undefined, + a11yDesc: string | undefined, baseId: string -) { +): void { if (svg.insert === undefined) { return; } - if (a11yTitle || a11yDesc) { - if (a11yDesc) { - const descId = 'chart-desc-' + baseId; - svg.attr('aria-describedby', descId); - svg.insert('desc', ':first-child').attr('id', descId).text(a11yDesc); - } - if (a11yTitle) { - const titleId = 'chart-title-' + baseId; - svg.attr('aria-labelledby', titleId); - svg.insert('title', ':first-child').attr('id', titleId).text(a11yTitle); - } - } else { - return; + if (a11yDesc) { + const descId = `chart-desc-${baseId}`; + svg.attr('aria-describedby', descId); + svg.insert('desc', ':first-child').attr('id', descId).text(a11yDesc); + } + if (a11yTitle) { + const titleId = `chart-title-${baseId}`; + svg.attr('aria-labelledby', titleId); + svg.insert('title', ':first-child').attr('id', titleId).text(a11yTitle); } } diff --git a/packages/mermaid/src/tests/MockedD3.ts b/packages/mermaid/src/tests/MockedD3.ts index 6d8d721e0f..c5e080ba3d 100644 --- a/packages/mermaid/src/tests/MockedD3.ts +++ b/packages/mermaid/src/tests/MockedD3.ts @@ -1,5 +1,3 @@ -import type {} from '@vitest/spy/dist/index.js'; - /** * This is a mocked/stubbed version of the d3 Selection type. Each of the main functions are all * mocked (via vi.fn()) so you can track if they have been called, etc. @@ -7,9 +5,8 @@ import type {} from '@vitest/spy/dist/index.js'; * Note that node() returns a HTML Element with tag 'svg'. It is an empty element (no innerHTML, no children, etc). * This potentially allows testing of mermaidAPI render(). */ - export class MockedD3 { - public attribs = new Map(); + public attribs = new Map(); public id: string | undefined = ''; _children: MockedD3[] = []; @@ -72,9 +69,9 @@ export class MockedD3 { return newMock; }; - attr(attrName: string): null | undefined | string | number; - // attr(attrName: string, attrValue: string): MockedD3; - attr(attrName: string, attrValue?: string): null | undefined | string | number | MockedD3 { + attr(attrName: string): undefined | string; + attr(attrName: string, attrValue: string): MockedD3; + attr(attrName: string, attrValue?: string): undefined | string | MockedD3 { if (arguments.length === 1) { return this.attribs.get(attrName); } else { From 226960ef46949fc935f34d30b36a78a124d557ab Mon Sep 17 00:00:00 2001 From: Yokozuna59 Date: Tue, 27 Jun 2023 20:07:50 +0300 Subject: [PATCH 086/263] refactor mermaidAPI accessibilities --- packages/mermaid/src/mermaidAPI.spec.ts | 54 +------------------------ packages/mermaid/src/mermaidAPI.ts | 26 +++++++----- 2 files changed, 16 insertions(+), 64 deletions(-) diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts index 11c16827b9..0f4e614998 100644 --- a/packages/mermaid/src/mermaidAPI.spec.ts +++ b/packages/mermaid/src/mermaidAPI.spec.ts @@ -733,59 +733,7 @@ describe('mermaidAPI', () => { const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n`; const expectedDiagramType = testedDiagram.expectedType; - it('aria-roledscription is set to the diagram type, addSVGa11yTitleDescription is called', async () => { - const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo'); - const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription'); - await mermaidAPI.render(id, diagramText); - expect(a11yDiagramInfo_spy).toHaveBeenCalledWith( - expect.anything(), - expectedDiagramType - ); - expect(a11yTitleDesc_spy).toHaveBeenCalled(); - }); - }); - }); - }); - }); - - describe('render', () => { - // Be sure to add async before each test (anonymous) method - - // These are more like integration tests right now because nothing is mocked. - // But it is faster that a cypress test and there's no real reason to actually evaluate an image pixel by pixel. - - // render(id, text, cb?, svgContainingElement?) - - // Test all diagram types. Note that old flowchart 'graph' type will invoke the flowRenderer-v2. (See the flowchart v2 detector.) - // We have to have both the specific textDiagramType and the expected type name because the expected type may be slightly different than was is put in the diagram text (ex: in -v2 diagrams) - const diagramTypesAndExpectations = [ - { textDiagramType: 'C4Context', expectedType: 'c4' }, - { textDiagramType: 'classDiagram', expectedType: 'classDiagram' }, - { textDiagramType: 'classDiagram-v2', expectedType: 'classDiagram' }, - { textDiagramType: 'erDiagram', expectedType: 'er' }, - { textDiagramType: 'graph', expectedType: 'flowchart-v2' }, - { textDiagramType: 'flowchart', expectedType: 'flowchart-v2' }, - { textDiagramType: 'gitGraph', expectedType: 'gitGraph' }, - { textDiagramType: 'gantt', expectedType: 'gantt' }, - { textDiagramType: 'journey', expectedType: 'journey' }, - { textDiagramType: 'pie', expectedType: 'pie' }, - { textDiagramType: 'requirementDiagram', expectedType: 'requirement' }, - { textDiagramType: 'sequenceDiagram', expectedType: 'sequence' }, - { textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' }, - ]; - - describe('accessibility', () => { - const id = 'mermaid-fauxId'; - const a11yTitle = 'a11y title'; - const a11yDescr = 'a11y description'; - - diagramTypesAndExpectations.forEach((testedDiagram) => { - describe(`${testedDiagram.textDiagramType}`, () => { - const diagramType = testedDiagram.textDiagramType; - const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n`; - const expectedDiagramType = testedDiagram.expectedType; - - it('aria-roledscription is set to the diagram type, addSVGa11yTitleDescription is called', async () => { + it('should set aria-roledscription to the diagram type AND should call addSVGa11yTitleDescription', async () => { const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo'); const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription'); await mermaidAPI.render(id, diagramText); diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 753e4944ab..4d8d952906 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -478,7 +478,7 @@ const render = async function ( // Get the temporary div element containing the svg const element = root.select(enclosingDivID_selector).node(); - const graphType = diag.type; + const diagramType = diag.type; // ------------------------------------------------------------------------------- // Create and insert the styles (user styles, theme styles, config styles) @@ -486,11 +486,11 @@ const render = async function ( // Insert an element into svg. This is where we put the styles const svg = element.firstChild; const firstChild = svg.firstChild; - const diagramClassDefs = CLASSDEF_DIAGRAMS.includes(graphType) + const diagramClassDefs = CLASSDEF_DIAGRAMS.includes(diagramType) ? diag.renderer.getClasses(text, diag) : {}; - const rules = createUserStyles(config, graphType, diagramClassDefs, idSelector); + const rules = createUserStyles(config, diagramType, diagramClassDefs, idSelector); const style1 = document.createElement('style'); style1.innerHTML = rules; @@ -507,9 +507,9 @@ const render = async function ( // This is the d3 node for the svg element const svgNode = root.select(`${enclosingDivID_selector} svg`); - const a11yTitle = diag.db.getAccTitle?.(); - const a11yDescr = diag.db.getAccDescription?.(); - addA11yInfo(graphType, svgNode, a11yTitle, a11yDescr); + const a11yTitle: string | undefined = diag.db.getAccTitle?.(); + const a11yDescr: string | undefined = diag.db.getAccDescription?.(); + addA11yInfo(diagramType, svgNode, a11yTitle, a11yDescr); // ------------------------------------------------------------------------------- // Clean up SVG code @@ -586,14 +586,18 @@ function initialize(options: MermaidConfig = {}) { /** * Add accessibility (a11y) information to the diagram. * + * @param diagramType - diagram type + * @param svgNode - d3 node to insert the a11y title and desc info + * @param a11yTitle - a11y title + * @param a11yDescr - a11y description */ function addA11yInfo( - graphType: string, + diagramType: string, svgNode: D3Element, - a11yTitle: string | undefined, - a11yDescr: string | undefined -) { - setA11yDiagramInfo(svgNode, graphType); + a11yTitle?: string, + a11yDescr?: string +): void { + setA11yDiagramInfo(svgNode, diagramType); addSVGa11yTitleDescription(svgNode, a11yTitle, a11yDescr, svgNode.attr('id')); } From 6cbd24f704011a48db95f14f77ab6e5b38c33279 Mon Sep 17 00:00:00 2001 From: Yokozuna59 Date: Tue, 27 Jun 2023 20:50:42 +0300 Subject: [PATCH 087/263] convert file from js into ts --- cypress/helpers/{util.js => util.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename cypress/helpers/{util.js => util.ts} (100%) diff --git a/cypress/helpers/util.js b/cypress/helpers/util.ts similarity index 100% rename from cypress/helpers/util.js rename to cypress/helpers/util.ts From a2cf41c9c04c2da7c1ebcbc402dfc6d92f65aa4f Mon Sep 17 00:00:00 2001 From: Yokozuna59 Date: Tue, 27 Jun 2023 20:53:01 +0300 Subject: [PATCH 088/263] convert cypress/helpers/util.js into ts - add types for parameter and returned value and variables - change the deperated `unescape` into `decodeURIComponent` - create `CypressConfig` and `CypressMermaidConfig` and `CodeObject` types - add default value for some parameter --- cypress/helpers/util.ts | 83 +++++++++++++++++++++++++++++------------ 1 file changed, 60 insertions(+), 23 deletions(-) diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts index 4d13b35901..f83cb7dba5 100644 --- a/cypress/helpers/util.ts +++ b/cypress/helpers/util.ts @@ -1,18 +1,36 @@ -const utf8ToB64 = (str) => { - return window.btoa(unescape(encodeURIComponent(str))); +import type { MermaidConfig } from '../../packages/mermaid/src/config.type.js'; + +type CypressConfig = { + listUrl?: boolean; + listId?: string; + name?: string; }; +type CypressMermaidConfig = MermaidConfig & CypressConfig; + +interface CodeObject { + code: string; + mermaid: CypressMermaidConfig; +} -const batchId = 'mermaid-batch' + new Date().getTime(); +const utf8ToB64 = (str: string): string => { + return window.btoa(decodeURIComponent(encodeURIComponent(str))); +}; -export const mermaidUrl = (graphStr, options, api) => { - const obj = { +const batchId: string = 'mermaid-batch' + new Date().getTime(); + +export const mermaidUrl = ( + graphStr: string, + options: CypressMermaidConfig, + api: boolean +): string => { + const codeObject: CodeObject = { code: graphStr, mermaid: options, }; - const objStr = JSON.stringify(obj); - let url = 'http://localhost:9000/e2e.html?graph=' + utf8ToB64(objStr); + const objStr: string = JSON.stringify(codeObject); + let url: string = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`; if (api) { - url = 'http://localhost:9000/xss.html?graph=' + graphStr; + url = `http://localhost:9000/xss.html?graph=${graphStr}`; } if (options.listUrl) { @@ -22,9 +40,14 @@ export const mermaidUrl = (graphStr, options, api) => { return url; }; -export const imgSnapshotTest = (graphStr, _options = {}, api = false, validation = undefined) => { - cy.log(_options); - const options = Object.assign(_options); +export const imgSnapshotTest = ( + graphStr: string, + _options: CypressMermaidConfig = {}, + api: boolean = false, + validation?: any +): void => { + cy.log(JSON.stringify(_options)); + const options: CypressMermaidConfig = Object.assign(_options); if (!options.fontFamily) { options.fontFamily = 'courier'; } @@ -44,28 +67,42 @@ export const imgSnapshotTest = (graphStr, _options = {}, api = false, validation options.sequence.actorFontFamily = 'courier'; } if (!options.fontSize) { - options.fontSize = '16px'; + options.fontSize = 16; } - const url = mermaidUrl(graphStr, options, api); + + const url: string = mermaidUrl(graphStr, options, api); openURLAndVerifyRendering(url, options, validation); }; -export const urlSnapshotTest = (url, _options, api = false, validation) => { - const options = Object.assign(_options); +export const urlSnapshotTest = ( + url: string, + _options: CypressMermaidConfig, + _api: boolean = false, + validation?: any +): void => { + const options: CypressMermaidConfig = Object.assign(_options); openURLAndVerifyRendering(url, options, validation); }; -export const renderGraph = (graphStr, options, api) => { - const url = mermaidUrl(graphStr, options, api); +export const renderGraph = ( + graphStr: string, + options: CypressMermaidConfig = {}, + api: boolean = false +): void => { + const url: string = mermaidUrl(graphStr, options, api); openURLAndVerifyRendering(url, options); }; -export const openURLAndVerifyRendering = (url, options, validation = undefined) => { - const useAppli = Cypress.env('useAppli'); - const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); +export const openURLAndVerifyRendering = ( + url: string, + options: CypressMermaidConfig, + validation?: any +): void => { + const useAppli: boolean = Cypress.env('useAppli'); + const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); if (useAppli) { - cy.log('Opening eyes ' + Cypress.spec.name + ' --- ' + name); + cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`); cy.eyesOpen({ appName: 'Mermaid', testName: name, @@ -83,9 +120,9 @@ export const openURLAndVerifyRendering = (url, options, validation = undefined) } if (useAppli) { - cy.log('Check eyes' + Cypress.spec.name); + cy.log(`Check eyes ${Cypress.spec.name}`); cy.eyesCheckWindow('Click!'); - cy.log('Closing eyes' + Cypress.spec.name); + cy.log(`Closing eyes ${Cypress.spec.name}`); cy.eyesClose(); } else { cy.matchImageSnapshot(name); From 48fc60f8666b597a2b2e134257c45e40df8a7c69 Mon Sep 17 00:00:00 2001 From: Yokozuna59 Date: Tue, 27 Jun 2023 20:58:39 +0300 Subject: [PATCH 089/263] fix wrong config paramater in some cypress spec - flowchart - mindmap --- .../rendering/flowchart-elk.spec.js | 22 ++++++++--------- .../rendering/flowchart-v2.spec.js | 24 +++++++++---------- cypress/integration/rendering/mindmap.spec.ts | 3 +-- 3 files changed, 24 insertions(+), 25 deletions(-) diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js index 4f90646a28..10e95af5cd 100644 --- a/cypress/integration/rendering/flowchart-elk.spec.js +++ b/cypress/integration/rendering/flowchart-elk.spec.js @@ -681,7 +681,7 @@ title: Simple flowchart flowchart-elk TD A --> B `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('elk: should include classes on the edges', () => { @@ -710,7 +710,7 @@ flowchart-elk LR style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 classDef someclass fill:#f96 `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('With formatting in a node', () => { @@ -726,7 +726,7 @@ flowchart-elk LR b --> d(The dog in the hog) c --> d `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('New line in node and formatted edge label', () => { @@ -736,7 +736,7 @@ flowchart-elk LR b("\`The dog in **the** hog.(1) NL\`") --"\`1o **bold**\`"--> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Wrapping long text with a new line', () => { @@ -749,7 +749,7 @@ Word! Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Sub graphs and markdown strings', () => { @@ -766,7 +766,7 @@ subgraph "\`**Two**\`" end `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); }); @@ -782,7 +782,7 @@ flowchart-elk LR style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 classDef someclass fill:#f96 `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('With formatting in a node', () => { @@ -798,7 +798,7 @@ flowchart-elk LR b --> d(The dog in the hog) c --> d `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('New line in node and formatted edge label', () => { @@ -808,7 +808,7 @@ flowchart-elk LR b("\`The dog in **the** hog.(1) NL\`") --"\`1o **bold**\`"--> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Wrapping long text with a new line', () => { @@ -821,7 +821,7 @@ Word! Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Sub graphs and markdown strings', () => { @@ -838,7 +838,7 @@ subgraph "\`**Two**\`" end `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); }); diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 305c55b214..091482f357 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -671,7 +671,7 @@ title: Simple flowchart flowchart TD A --> B `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('3192: It should be possieble to render flowcharts with invisible edges', () => { @@ -682,7 +682,7 @@ title: Simple flowchart with invisible edges flowchart TD A ~~~ B `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('4023: Should render html labels with images and-or text correctly', () => { @@ -707,7 +707,7 @@ flowchart LR style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 classDef someclass fill:#f96 `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('With formatting in a node', () => { @@ -723,7 +723,7 @@ flowchart LR b --> d(The dog in the hog) c --> d `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('New line in node and formatted edge label', () => { @@ -733,7 +733,7 @@ flowchart LR b("\`The dog in **the** hog.(1) NL\`") --"\`1o **bold**\`"--> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Wrapping long text with a new line', () => { @@ -746,7 +746,7 @@ Word! Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Sub graphs and markdown strings', () => { @@ -763,7 +763,7 @@ subgraph "\`**Two**\`" end `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); }); @@ -779,7 +779,7 @@ flowchart LR style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 classDef someclass fill:#f96 `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('With formatting in a node', () => { @@ -795,7 +795,7 @@ flowchart LR b --> d(The dog in the hog) c --> d `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('New line in node and formatted edge label', () => { @@ -805,7 +805,7 @@ flowchart LR b("\`The dog in **the** hog.(1) NL\`") --"\`1o **bold**\`"--> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Wrapping long text with a new line', () => { @@ -818,7 +818,7 @@ Word! Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Sub graphs and markdown strings', () => { @@ -835,7 +835,7 @@ subgraph "\`**Two**\`" end `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); }); diff --git a/cypress/integration/rendering/mindmap.spec.ts b/cypress/integration/rendering/mindmap.spec.ts index e390beaee5..90d5d9edde 100644 --- a/cypress/integration/rendering/mindmap.spec.ts +++ b/cypress/integration/rendering/mindmap.spec.ts @@ -242,8 +242,7 @@ mindmap a second line 😎\`] id2[\`The dog in **the** hog... a *very long text* about it Word!\`] -`, - { titleTopMargin: 0 } +` ); }); }); From 2b0f078c994409883359121322515e906adb40ee Mon Sep 17 00:00:00 2001 From: Yokozuna59 Date: Tue, 27 Jun 2023 21:05:44 +0300 Subject: [PATCH 090/263] resolve lint issues for `no-inferrable-types` --- cypress/helpers/util.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts index f83cb7dba5..e2c330f61a 100644 --- a/cypress/helpers/util.ts +++ b/cypress/helpers/util.ts @@ -28,7 +28,7 @@ export const mermaidUrl = ( mermaid: options, }; const objStr: string = JSON.stringify(codeObject); - let url: string = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`; + let url = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`; if (api) { url = `http://localhost:9000/xss.html?graph=${graphStr}`; } @@ -43,7 +43,7 @@ export const mermaidUrl = ( export const imgSnapshotTest = ( graphStr: string, _options: CypressMermaidConfig = {}, - api: boolean = false, + api = false, validation?: any ): void => { cy.log(JSON.stringify(_options)); @@ -77,7 +77,7 @@ export const imgSnapshotTest = ( export const urlSnapshotTest = ( url: string, _options: CypressMermaidConfig, - _api: boolean = false, + _api = false, validation?: any ): void => { const options: CypressMermaidConfig = Object.assign(_options); @@ -87,7 +87,7 @@ export const urlSnapshotTest = ( export const renderGraph = ( graphStr: string, options: CypressMermaidConfig = {}, - api: boolean = false + api = false ): void => { const url: string = mermaidUrl(graphStr, options, api); openURLAndVerifyRendering(url, options); From b11c38ea007fc9094eb0671ec603617fec41172d Mon Sep 17 00:00:00 2001 From: Yokozuna59 Date: Tue, 27 Jun 2023 20:16:47 +0300 Subject: [PATCH 091/263] run docs:build to fix linting issue --- docs/config/setup/modules/mermaidAPI.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index 591b6841a0..72f18cace9 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -96,7 +96,7 @@ mermaid.initialize(config); #### Defined in -[mermaidAPI.ts:663](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L663) +[mermaidAPI.ts:667](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L667) ## Functions From a712e618886d2a46668f21c6afe189e40bcc596b Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Thu, 29 Jun 2023 14:06:08 +0300 Subject: [PATCH 092/263] Loading avatars in parallel & started sankey documentation --- docker-compose.yml | 1 + .../docs/.vitepress/scripts/fetch-avatars.ts | 11 +- packages/mermaid/src/docs/package.json | 2 +- packages/mermaid/src/docs/syntax/sankey.md | 184 ++++++++++++++++++ 4 files changed, 193 insertions(+), 5 deletions(-) create mode 100644 packages/mermaid/src/docs/syntax/sankey.md diff --git a/docker-compose.yml b/docker-compose.yml index 43fa5485f2..49fe0f3e88 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -15,6 +15,7 @@ services: - root_npm:/root/.npm ports: - 9000:9000 + - 3333:3333 volumes: root_cache: root_local: diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts index bbea31bc1e..47f371fee5 100644 --- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts +++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts @@ -18,7 +18,7 @@ async function download(url: string, fileName: URL) { const image = await fetch(url); await writeFile(fileName, Buffer.from(await image.arrayBuffer())); } catch (error) { - console.error(error); + console.error('failed to load', url, error); } } @@ -26,10 +26,13 @@ async function fetchAvatars() { await mkdir(fileURLToPath(new URL(getAvatarPath('none'))).replace('none.png', ''), { recursive: true, }); + contributors = JSON.parse(await readFile(pathContributors, { encoding: 'utf-8' })); - for (const name of contributors) { - await download(`https://github.com/${name}.png?size=100`, getAvatarPath(name)); - } + let avatars = contributors.map((name) => { + download(`https://github.com/${name}.png?size=100`, getAvatarPath(name)); + }); + + await Promise.all(avatars); } fetchAvatars(); diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index f24f9f4bc4..34be89bd28 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -3,7 +3,7 @@ "private": true, "type": "module", "scripts": { - "dev": "vitepress --port 3333 --open", + "dev": "pnpm prefetch && vitepress --port 3333 --host", "build": "pnpm prefetch && vitepress build", "build-no-prefetch": "vitepress build", "serve": "vitepress serve", diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md new file mode 100644 index 0000000000..a6aa8e5a99 --- /dev/null +++ b/packages/mermaid/src/docs/syntax/sankey.md @@ -0,0 +1,184 @@ +# Sankey diagrams + +> A sankey diagram is a visualization used to depict a flow from one set of values to another. +> This is an experimental diagram. Its syntax are very close to plain CSV, but highly likely +> to be extended in the nearest future. + +The things being connected are called nodes and the connections are called links. + +## Example + +Code: + +```mermaid-example +sankey-beta + +Agricultural 'waste',Bio-conversion,124.729 +Bio-conversion,Liquid,0.597 +Bio-conversion,Losses,26.862 +Bio-conversion,Solid,280.322 +Bio-conversion,Gas,81.144 +Biofuel imports,Liquid,35 +Biomass imports,Solid,35 +Coal imports,Coal,11.606 +Coal reserves,Coal,63.965 +Coal,Solid,75.571 +District heating,Industry,10.639 +District heating,Heating and cooling - commercial,22.505 +District heating,Heating and cooling - homes,46.184 +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +Electricity grid,Industry,342.165 +Electricity grid,Road transport,37.797 +Electricity grid,Agriculture,4.412 +Electricity grid,Heating and cooling - commercial,40.858 +Electricity grid,Losses,56.691 +Electricity grid,Rail transport,7.863 +Electricity grid,Lighting & appliances - commercial,90.008 +Electricity grid,Lighting & appliances - homes,93.494 +Gas imports,Ngas,40.719 +Gas reserves,Ngas,82.233 +Gas,Heating and cooling - commercial,0.129 +Gas,Losses,1.401 +Gas,Thermal generation,151.891 +Gas,Agriculture,2.096 +Gas,Industry,48.58 +Geothermal,Electricity grid,7.013 +H2 conversion,H2,20.897 +H2 conversion,Losses,6.242 +H2,Road transport,20.897 +Hydro,Electricity grid,6.995 +Liquid,Industry,121.066 +Liquid,International shipping,128.69 +Liquid,Road transport,135.835 +Liquid,Domestic aviation,14.458 +Liquid,International aviation,206.267 +Liquid,Agriculture,3.64 +Liquid,National navigation,33.218 +Liquid,Rail transport,4.413 +Marine algae,Bio-conversion,4.375 +Ngas,Gas,122.952 +Nuclear,Thermal generation,839.978 +Oil imports,Oil,504.287 +Oil reserves,Oil,107.703 +Oil,Liquid,611.99 +Other waste,Solid,56.587 +Other waste,Bio-conversion,77.81 +Pumped heat,Heating and cooling - homes,193.026 +Pumped heat,Heating and cooling - commercial,70.672 +Solar PV,Electricity grid,59.901 +Solar Thermal,Heating and cooling - homes,19.263 +Solar,Solar Thermal,19.263 +Solar,Solar PV,59.901 +Solid,Agriculture,0.882 +Solid,Thermal generation,400.12 +Solid,Industry,46.477 +Thermal generation,Electricity grid,525.531 +Thermal generation,Losses,787.129 +Thermal generation,District heating,79.329 +Tidal,Electricity grid,9.452 +UK land based bioenergy,Bio-conversion,182.01 +Wave,Electricity grid,19.013 +Wind,Electricity grid,289.366 +``` + +```mermaid +sankey-beta + +Agricultural 'waste',Bio-conversion,124.729 +Bio-conversion,Liquid,0.597 +Bio-conversion,Losses,26.862 +Bio-conversion,Solid,280.322 +Bio-conversion,Gas,81.144 +Biofuel imports,Liquid,35 +Biomass imports,Solid,35 +Coal imports,Coal,11.606 +Coal reserves,Coal,63.965 +Coal,Solid,75.571 +District heating,Industry,10.639 +District heating,Heating and cooling - commercial,22.505 +District heating,Heating and cooling - homes,46.184 +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +Electricity grid,Industry,342.165 +Electricity grid,Road transport,37.797 +Electricity grid,Agriculture,4.412 +Electricity grid,Heating and cooling - commercial,40.858 +Electricity grid,Losses,56.691 +Electricity grid,Rail transport,7.863 +Electricity grid,Lighting & appliances - commercial,90.008 +Electricity grid,Lighting & appliances - homes,93.494 +Gas imports,Ngas,40.719 +Gas reserves,Ngas,82.233 +Gas,Heating and cooling - commercial,0.129 +Gas,Losses,1.401 +Gas,Thermal generation,151.891 +Gas,Agriculture,2.096 +Gas,Industry,48.58 +Geothermal,Electricity grid,7.013 +H2 conversion,H2,20.897 +H2 conversion,Losses,6.242 +H2,Road transport,20.897 +Hydro,Electricity grid,6.995 +Liquid,Industry,121.066 +Liquid,International shipping,128.69 +Liquid,Road transport,135.835 +Liquid,Domestic aviation,14.458 +Liquid,International aviation,206.267 +Liquid,Agriculture,3.64 +Liquid,National navigation,33.218 +Liquid,Rail transport,4.413 +Marine algae,Bio-conversion,4.375 +Ngas,Gas,122.952 +Nuclear,Thermal generation,839.978 +Oil imports,Oil,504.287 +Oil reserves,Oil,107.703 +Oil,Liquid,611.99 +Other waste,Solid,56.587 +Other waste,Bio-conversion,77.81 +Pumped heat,Heating and cooling - homes,193.026 +Pumped heat,Heating and cooling - commercial,70.672 +Solar PV,Electricity grid,59.901 +Solar Thermal,Heating and cooling - homes,19.263 +Solar,Solar Thermal,19.263 +Solar,Solar PV,59.901 +Solid,Agriculture,0.882 +Solid,Thermal generation,400.12 +Solid,Industry,46.477 +Thermal generation,Electricity grid,525.531 +Thermal generation,Losses,787.129 +Thermal generation,District heating,79.329 +Tidal,Electricity grid,9.452 +UK land based bioenergy,Bio-conversion,182.01 +Wave,Electricity grid,19.013 +Wind,Electricity grid,289.366 +``` + +## Syntax + +The idea behind it is that a user types `sankey-beta` first, then pastes raw CSV below and get the result. + +It is implemented according CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle differences: + +- CSV must contain 3 columns only +- It is allowed to have empty lines without comma separators for visual purposes + +```mermaid-example +sankey-beta + +Agricultural 'waste',Bio-conversion,124.729 + +%% +Bio-conversion,Liquid,0.597 +Bio-conversion,Losses,26.862 +Bio-conversion,Solid,280.322 +Bio-conversion,Gas,81.144 +``` + +If you need your title to have a comma, wrap it in double quotes + + +"Hello, Mister Anderson" + From 408c32781e458b26cbeb482ae49f55e609eccd12 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Thu, 29 Jun 2023 15:24:09 +0300 Subject: [PATCH 093/263] Contributors fetching failure must not hinder docs development --- .../.vitepress/scripts/fetch-contributors.ts | 36 +++++----- pnpm-lock.yaml | 68 ++----------------- run | 2 +- 3 files changed, 27 insertions(+), 79 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts index fd5409d0f6..a29ef33249 100644 --- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts +++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts @@ -10,23 +10,25 @@ interface Contributor { async function fetchContributors() { const collaborators: string[] = []; - let page = 1; - let data: Contributor[] = []; - do { - const response = await fetch( - `https://api.github.com/repos/mermaid-js/mermaid/contributors?per_page=100&page=${page}`, - { - method: 'GET', - headers: { - 'content-type': 'application/json', - }, - } - ); - data = await response.json(); - collaborators.push(...data.map((i) => i.login)); - console.log(`Fetched page ${page}`); - page++; - } while (data.length === 100); + try { + let page = 1; + let data: Contributor[] = []; + do { + const response = await fetch( + `https://api.github.com/repos/mermaid-js/mermaid/contributors?per_page=100&page=${page}`, + { + method: 'GET', + headers: { + 'content-type': 'application/json', + }, + } + ); + data = await response.json(); + collaborators.push(...data.map((i) => i.login)); + console.log(`Fetched page ${page}`); + page++; + } while (data.length === 100); + } catch (e) { /* contributors fetching failure must not hinder docs development */ } return collaborators.filter((name) => !name.includes('[bot]')); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 052e5eec9e..200e6115a8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -506,13 +506,13 @@ importers: version: 4.3.9(@types/node@18.16.0) vite-plugin-pwa: specifier: ^0.16.0 - version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@6.5.4) + version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0) vitepress: - specifier: 1.0.0-beta.2 - version: 1.0.0-beta.2(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0) + specifier: 1.0.0-beta.3 + version: 1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0) workbox-window: - specifier: ^6.5.4 - version: 6.5.4 + specifier: ^7.0.0 + version: 7.0.0 tests/webpack: dependencies: @@ -14980,7 +14980,7 @@ packages: - supports-color dev: true - /vite-plugin-pwa@0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@6.5.4): + /vite-plugin-pwa@0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0): resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==} engines: {node: '>=16.0.0'} peerDependencies: @@ -14993,7 +14993,7 @@ packages: pretty-bytes: 6.1.0 vite: 4.3.9(@types/node@18.16.0) workbox-build: 7.0.0 - workbox-window: 6.5.4 + workbox-window: 7.0.0 transitivePeerDependencies: - supports-color dev: true @@ -15143,49 +15143,6 @@ packages: - terser dev: true - /vitepress@1.0.0-beta.2(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0): - resolution: {integrity: sha512-DBXYjtYbm3W1IPPJ2TiCaK/XK+o/2XmL2+jslOGKm+txcbmG0kbeB+vadC5tCUZA9NdA+9Ywj3M4548c7t/SDg==} - hasBin: true - dependencies: - '@docsearch/css': 3.5.1 - '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0) - '@vitejs/plugin-vue': 4.2.3(vite@4.3.9)(vue@3.3.4) - '@vue/devtools-api': 6.5.0 - '@vueuse/core': 10.1.2(vue@3.3.4) - '@vueuse/integrations': 10.1.2(focus-trap@7.4.3)(vue@3.3.4) - body-scroll-lock: 4.0.0-beta.0 - focus-trap: 7.4.3 - mark.js: 8.11.1 - minisearch: 6.1.0 - shiki: 0.14.2 - vite: 4.3.9(@types/node@18.16.0) - vue: 3.3.4 - transitivePeerDependencies: - - '@algolia/client-search' - - '@types/node' - - '@types/react' - - '@vue/composition-api' - - async-validator - - axios - - change-case - - drauu - - fuse.js - - idb-keyval - - jwt-decode - - less - - nprogress - - qrcode - - react - - react-dom - - sass - - search-insights - - sortablejs - - stylus - - sugarss - - terser - - universal-cookie - dev: true - /vitepress@1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0): resolution: {integrity: sha512-GR5Pvr/o343NN1M4Na1shhDYZRrQbjmLq7WE0lla0H8iDPAsHE8agTHLWfu3FWx+3q2KA29sv16+0O9RQKGjlA==} hasBin: true @@ -15851,10 +15808,6 @@ packages: workbox-core: 7.0.0 dev: true - /workbox-core@6.5.4: - resolution: {integrity: sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q==} - dev: true - /workbox-core@7.0.0: resolution: {integrity: sha512-81JkAAZtfVP8darBpfRTovHg8DGAVrKFgHpOArZbdFd78VqHr5Iw65f2guwjE2NlCFbPFDoez3D3/6ZvhI/rwQ==} dev: true @@ -15929,13 +15882,6 @@ packages: resolution: {integrity: sha512-SWfEouQfjRiZ7GNABzHUKUyj8pCoe+RwjfOIajcx6J5mtgKkN+t8UToHnpaJL5UVVOf5YhJh+OHhbVNIHe+LVA==} dev: true - /workbox-window@6.5.4: - resolution: {integrity: sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==} - dependencies: - '@types/trusted-types': 2.0.2 - workbox-core: 6.5.4 - dev: true - /workbox-window@7.0.0: resolution: {integrity: sha512-j7P/bsAWE/a7sxqTzXo3P2ALb1reTfZdvVp6OJ/uLr/C2kZAMvjeWGm8V4htQhor7DOvYg0sSbFN2+flT5U0qA==} dependencies: diff --git a/run b/run index 18a544312f..ecc6bb02bf 100755 --- a/run +++ b/run @@ -20,7 +20,7 @@ $RUN --service-ports mermaid sh -c "npx pnpm run dev" ;; docs:dev) -$RUN --service-ports mermaid sh -c "npx pnpm --filter mermaid run docs:dev" +$RUN --service-ports mermaid sh -c "cd packages/mermaid/src/docs && npx pnpm prefetch && npx vitepress --port 3333 --host" ;; help) From 8e3f8b1a57b5fb4ab277ff235961a9ef768871ca Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Thu, 29 Jun 2023 15:39:50 +0300 Subject: [PATCH 094/263] Fixes after review --- .../mermaid/src/diagrams/sankey/sankeyDB.ts | 9 ++++---- .../src/diagrams/sankey/sankeyRenderer.ts | 22 ++++++++++--------- .../mermaid/src/docs/.vitepress/config.ts | 1 + 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts index 1b6864af90..1921e1b859 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts @@ -43,12 +43,11 @@ class SankeyNode { const findOrCreateNode = (ID: string): SankeyNode => { ID = common.sanitizeText(ID, configApi.getConfig()); - if (nodesMap[ID]) { - return nodesMap[ID]; - } - nodesMap[ID] = new SankeyNode(ID); - nodes.push(nodesMap[ID]); + if (!nodesMap[ID]) { + nodesMap[ID] = new SankeyNode(ID); + nodes.push(nodesMap[ID]); + } return nodesMap[ID]; }; diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index cb3092f555..780144be09 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -20,6 +20,17 @@ import { configureSvgSize } from '../../setupGraphViewbox.js'; import { Uid } from '../../rendering-util/uid.js'; import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js'; +// Map config options to alignment functions +const alignmentsMap: Record< + SankeyNodeAlignment, + (node: d3SankeyNode, n: number) => number +> = { + [SankeyNodeAlignment.left]: d3SankeyLeft, + [SankeyNodeAlignment.right]: d3SankeyRight, + [SankeyNodeAlignment.center]: d3SankeyCenter, + [SankeyNodeAlignment.justify]: d3SankeyJustify, +}; + /** * Draws Sankey diagram. * @@ -73,16 +84,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb // @ts-ignore TODO: db should be coerced to sankey DB type const graph = diagObj.db.getGraph(); - // Map config options to alignment functions - const alignmentsMap: Record< - SankeyNodeAlignment, - (node: d3SankeyNode, n: number) => number - > = { - [SankeyNodeAlignment.left]: d3SankeyLeft, - [SankeyNodeAlignment.right]: d3SankeyRight, - [SankeyNodeAlignment.center]: d3SankeyCenter, - [SankeyNodeAlignment.justify]: d3SankeyJustify, - }; + // Get alignment function const nodeAlign = alignmentsMap[nodeAlignment]; // Construct and configure a Sankey generator diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 8fceb810be..2b2914ca3d 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -138,6 +138,7 @@ function sidebarSyntax() { { text: 'Mindmaps πŸ”₯', link: '/syntax/mindmap' }, { text: 'Timeline πŸ”₯', link: '/syntax/timeline' }, { text: 'Zenuml πŸ”₯', link: '/syntax/zenuml' }, + { text: 'Sankey πŸ”₯', link: '/syntax/sankey' }, { text: 'Other Examples', link: '/syntax/examples' }, ], }, From 95a436595ee6e18900cedd980ccde80d4b47de92 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Thu, 29 Jun 2023 16:44:33 +0300 Subject: [PATCH 095/263] Let it be as it was in dev branch --- packages/mermaid/src/docs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index 34be89bd28..f24f9f4bc4 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -3,7 +3,7 @@ "private": true, "type": "module", "scripts": { - "dev": "pnpm prefetch && vitepress --port 3333 --host", + "dev": "vitepress --port 3333 --open", "build": "pnpm prefetch && vitepress build", "build-no-prefetch": "vitepress build", "serve": "vitepress serve", From e24dce10a293571f57618677ec90956e8a2e2731 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Thu, 29 Jun 2023 19:51:46 +0300 Subject: [PATCH 096/263] Added sankey documentation --- packages/mermaid/src/docs/syntax/sankey.md | 103 ++++++++++++++++++--- run | 4 +- 2 files changed, 93 insertions(+), 14 deletions(-) diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md index a6aa8e5a99..66c8a742f7 100644 --- a/packages/mermaid/src/docs/syntax/sankey.md +++ b/packages/mermaid/src/docs/syntax/sankey.md @@ -1,16 +1,18 @@ # Sankey diagrams > A sankey diagram is a visualization used to depict a flow from one set of values to another. -> This is an experimental diagram. Its syntax are very close to plain CSV, but highly likely -> to be extended in the nearest future. + +::: warning +This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future. +::: The things being connected are called nodes and the connections are called links. ## Example -Code: +This example taken from [observable](https://observablehq.com/@d3/sankey/2?collection=@d3/d3-sankey). It may be rendered a little bit differently, though, in terms of size and colors. -```mermaid-example +```mermaid sankey-beta Agricultural 'waste',Bio-conversion,124.729 @@ -83,7 +85,9 @@ Wave,Electricity grid,19.013 Wind,Electricity grid,289.366 ``` -```mermaid +::: details + +```mermaid-example sankey-beta Agricultural 'waste',Bio-conversion,124.729 @@ -155,30 +159,103 @@ UK land based bioenergy,Bio-conversion,182.01 Wave,Electricity grid,19.013 Wind,Electricity grid,289.366 ``` +::: + ## Syntax -The idea behind it is that a user types `sankey-beta` first, then pastes raw CSV below and get the result. +The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result. + +It is implements standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**: + +- CSV must contain **3 columns only** +- It is **allowed** to have **empty lines** without comma separators for visual purposes -It is implemented according CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle differences: +### Empty lines -- CSV must contain 3 columns only -- It is allowed to have empty lines without comma separators for visual purposes +CSV does not support empty lines (without comma delimeters) by default. But you can add them if needed. ```mermaid-example sankey-beta -Agricultural 'waste',Bio-conversion,124.729 +Bio-conversion,Liquid,0.597 +Bio-conversion,Losses,26.862 + +Bio-conversion,Solid,280.322 +Bio-conversion,Gas,81.144 +``` + +```mermaid +sankey-beta -%% Bio-conversion,Liquid,0.597 Bio-conversion,Losses,26.862 + Bio-conversion,Solid,280.322 Bio-conversion,Gas,81.144 ``` -If you need your title to have a comma, wrap it in double quotes +### Commas + +If you need to have a comma, wrap it in double quotes: + +```mermaid-example +sankey-beta + +Pumped heat,"Heating and cooling, homes",193.026 +Pumped heat,"Heating and cooling, commercial",70.672 +``` + +```mermaid +sankey-beta + +Pumped heat,"Heating and cooling, homes",193.026 +Pumped heat,"Heating and cooling, commercial",70.672 +``` + +### Double quotes +If you need to have double quote, put a pair of them: + +```mermaid-example +sankey-beta + +Pumped heat,"Heating and cooling ""homes""",193.026 +Pumped heat,"Heating and cooling, ""commercial""",70.672 +``` + +```mermaid +sankey-beta + +Pumped heat,"Heating and cooling ""homes""",193.026 +Pumped heat,"Heating and cooling, ""commercial""",70.672 +``` + +### Coloring and Π€lignment + +You can change graph layout by setting `nodeAlignment` to: + +* `justify` +* `center` +* `left` +* `right` +And adjust coloring of the links by setting `linkColor` to one of those: -"Hello, Mister Anderson" +* `source` +* `target` +* `gradient` +* hex code of color, like `#a1a1a1` +```html + +``` \ No newline at end of file diff --git a/run b/run index ecc6bb02bf..88af164188 100755 --- a/run +++ b/run @@ -24,6 +24,8 @@ $RUN --service-ports mermaid sh -c "cd packages/mermaid/src/docs && npx pnpm pre ;; help) + +# Alignment of help message must be as it is, it will be nice looking when printed usage=$( cat <' - # git diff --name-only develop | xargs run pnpm prettier --write + # git diff --name-only develop | xargs run pnpm prettier --write $name pnpm test # Run unit tests $name pnpm vitest # Run watcher for unit tests $name pnpm e2e # Run integration tests From 9177350a390e2cc06910580e42a0afd1fbe15887 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Thu, 29 Jun 2023 20:16:25 +0300 Subject: [PATCH 097/263] Fixed double quotes, docs, demo and added more examples to run script --- demos/sankey.html | 50 +++++++++++++++---- .../src/diagrams/sankey/parser/energy.csv | 2 +- .../src/diagrams/sankey/parser/sankey.jison | 4 +- packages/mermaid/src/docs/syntax/sankey.md | 2 +- run | 17 ++++--- 5 files changed, 56 insertions(+), 19 deletions(-) diff --git a/demos/sankey.html b/demos/sankey.html index 72ca84e44f..22e34cad38 100644 --- a/demos/sankey.html +++ b/demos/sankey.html @@ -18,20 +18,48 @@

    Sankey diagram demos

    Energy flow

           sankey-beta
-      
-      Agricultural 'waste',Bio-conversion,124.729
+
+      %% There are leading and trailing spaces, do not crop
+          Agricultural 'waste',Bio-conversion,124.729   
+      %% line with a comment
+
+      %% Normal line
       Bio-conversion,Liquid,0.597
+
+      %% Line with unquoted sankey keyword
+      sankey,target,10
+
+      %% Quoted sankey keyword
+      "sankey",target,10
+
+      %% Another normal line
       Bio-conversion,Losses,26.862
-      Bio-conversion,Solid,280.322
+
+      %% Line with integer amount
+      Bio-conversion,Solid,280
+
+      %% Some blank lines in the middle of CSV
+
+
+      %% Another normal line
       Bio-conversion,Gas,81.144
-      Biofuel imports,Liquid,35
-      Biomass imports,Solid,35
+
+      %% Quoted line
+      "Biofuel imports",Liquid,35
+
+      %% Quoted line with escaped quotes inside
+      """Biomass imports""",Solid,35
+
+      %% Lines containing commas inside
+      %% Quoted and unquoted values should be equal in terms of graph
+      "District heating","Heating and cooling, commercial",22.505
+      District heating,"Heating and cooling, homes",46.184
+
+      %% A bunch of lines, normal CSV
       Coal imports,Coal,11.606
       Coal reserves,Coal,63.965
       Coal,Solid,75.571
       District heating,Industry,10.639
-      District heating,Heating and cooling - commercial,22.505
-      District heating,Heating and cooling - homes,46.184
       Electricity grid,Over generation / exports,104.453
       Electricity grid,Heating and cooling - homes,113.726
       Electricity grid,H2 conversion,27.14
@@ -85,8 +113,12 @@ 
    Energy flow
    
       Thermal generation,District heating,79.329
       Tidal,Electricity grid,9.452
       UK land based bioenergy,Bio-conversion,182.01
-      Wave,Electricity grid,19.013
-      Wind,Electricity grid,289.366
+      """Wave""",Electricity grid,19.013
+      """Wind""",Electricity grid,289.366
+
+      %% lines at the end, do not remove
+
+
    -``` \ No newline at end of file + +``` From 36df7260cc73e53e28d06768dfd8e2c2bebf8d39 Mon Sep 17 00:00:00 2001 From: nirname Date: Thu, 29 Jun 2023 17:32:39 +0000 Subject: [PATCH 100/263] Update docs --- docs/syntax/sankey.md | 464 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 464 insertions(+) create mode 100644 docs/syntax/sankey.md diff --git a/docs/syntax/sankey.md b/docs/syntax/sankey.md new file mode 100644 index 0000000000..2eaf9b8cce --- /dev/null +++ b/docs/syntax/sankey.md @@ -0,0 +1,464 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/sankey.md](../../packages/mermaid/src/docs/syntax/sankey.md). + +# Sankey diagrams + +> A sankey diagram is a visualization used to depict a flow from one set of values to another. + +::: warning +This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future. +::: + +The things being connected are called nodes and the connections are called links. + +## Example + +This example taken from [observable](https://observablehq.com/@d3/sankey/2?collection=@d3/d3-sankey). It may be rendered a little bit differently, though, in terms of size and colors. + +```mermaid-example +sankey-beta + +Agricultural 'waste',Bio-conversion,124.729 +Bio-conversion,Liquid,0.597 +Bio-conversion,Losses,26.862 +Bio-conversion,Solid,280.322 +Bio-conversion,Gas,81.144 +Biofuel imports,Liquid,35 +Biomass imports,Solid,35 +Coal imports,Coal,11.606 +Coal reserves,Coal,63.965 +Coal,Solid,75.571 +District heating,Industry,10.639 +District heating,Heating and cooling - commercial,22.505 +District heating,Heating and cooling - homes,46.184 +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +Electricity grid,Industry,342.165 +Electricity grid,Road transport,37.797 +Electricity grid,Agriculture,4.412 +Electricity grid,Heating and cooling - commercial,40.858 +Electricity grid,Losses,56.691 +Electricity grid,Rail transport,7.863 +Electricity grid,Lighting & appliances - commercial,90.008 +Electricity grid,Lighting & appliances - homes,93.494 +Gas imports,Ngas,40.719 +Gas reserves,Ngas,82.233 +Gas,Heating and cooling - commercial,0.129 +Gas,Losses,1.401 +Gas,Thermal generation,151.891 +Gas,Agriculture,2.096 +Gas,Industry,48.58 +Geothermal,Electricity grid,7.013 +H2 conversion,H2,20.897 +H2 conversion,Losses,6.242 +H2,Road transport,20.897 +Hydro,Electricity grid,6.995 +Liquid,Industry,121.066 +Liquid,International shipping,128.69 +Liquid,Road transport,135.835 +Liquid,Domestic aviation,14.458 +Liquid,International aviation,206.267 +Liquid,Agriculture,3.64 +Liquid,National navigation,33.218 +Liquid,Rail transport,4.413 +Marine algae,Bio-conversion,4.375 +Ngas,Gas,122.952 +Nuclear,Thermal generation,839.978 +Oil imports,Oil,504.287 +Oil reserves,Oil,107.703 +Oil,Liquid,611.99 +Other waste,Solid,56.587 +Other waste,Bio-conversion,77.81 +Pumped heat,Heating and cooling - homes,193.026 +Pumped heat,Heating and cooling - commercial,70.672 +Solar PV,Electricity grid,59.901 +Solar Thermal,Heating and cooling - homes,19.263 +Solar,Solar Thermal,19.263 +Solar,Solar PV,59.901 +Solid,Agriculture,0.882 +Solid,Thermal generation,400.12 +Solid,Industry,46.477 +Thermal generation,Electricity grid,525.531 +Thermal generation,Losses,787.129 +Thermal generation,District heating,79.329 +Tidal,Electricity grid,9.452 +UK land based bioenergy,Bio-conversion,182.01 +Wave,Electricity grid,19.013 +Wind,Electricity grid,289.366 +``` + +```mermaid +sankey-beta + +Agricultural 'waste',Bio-conversion,124.729 +Bio-conversion,Liquid,0.597 +Bio-conversion,Losses,26.862 +Bio-conversion,Solid,280.322 +Bio-conversion,Gas,81.144 +Biofuel imports,Liquid,35 +Biomass imports,Solid,35 +Coal imports,Coal,11.606 +Coal reserves,Coal,63.965 +Coal,Solid,75.571 +District heating,Industry,10.639 +District heating,Heating and cooling - commercial,22.505 +District heating,Heating and cooling - homes,46.184 +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +Electricity grid,Industry,342.165 +Electricity grid,Road transport,37.797 +Electricity grid,Agriculture,4.412 +Electricity grid,Heating and cooling - commercial,40.858 +Electricity grid,Losses,56.691 +Electricity grid,Rail transport,7.863 +Electricity grid,Lighting & appliances - commercial,90.008 +Electricity grid,Lighting & appliances - homes,93.494 +Gas imports,Ngas,40.719 +Gas reserves,Ngas,82.233 +Gas,Heating and cooling - commercial,0.129 +Gas,Losses,1.401 +Gas,Thermal generation,151.891 +Gas,Agriculture,2.096 +Gas,Industry,48.58 +Geothermal,Electricity grid,7.013 +H2 conversion,H2,20.897 +H2 conversion,Losses,6.242 +H2,Road transport,20.897 +Hydro,Electricity grid,6.995 +Liquid,Industry,121.066 +Liquid,International shipping,128.69 +Liquid,Road transport,135.835 +Liquid,Domestic aviation,14.458 +Liquid,International aviation,206.267 +Liquid,Agriculture,3.64 +Liquid,National navigation,33.218 +Liquid,Rail transport,4.413 +Marine algae,Bio-conversion,4.375 +Ngas,Gas,122.952 +Nuclear,Thermal generation,839.978 +Oil imports,Oil,504.287 +Oil reserves,Oil,107.703 +Oil,Liquid,611.99 +Other waste,Solid,56.587 +Other waste,Bio-conversion,77.81 +Pumped heat,Heating and cooling - homes,193.026 +Pumped heat,Heating and cooling - commercial,70.672 +Solar PV,Electricity grid,59.901 +Solar Thermal,Heating and cooling - homes,19.263 +Solar,Solar Thermal,19.263 +Solar,Solar PV,59.901 +Solid,Agriculture,0.882 +Solid,Thermal generation,400.12 +Solid,Industry,46.477 +Thermal generation,Electricity grid,525.531 +Thermal generation,Losses,787.129 +Thermal generation,District heating,79.329 +Tidal,Electricity grid,9.452 +UK land based bioenergy,Bio-conversion,182.01 +Wave,Electricity grid,19.013 +Wind,Electricity grid,289.366 +``` + +::: details + +```mermaid-example +sankey-beta + +Agricultural 'waste',Bio-conversion,124.729 +Bio-conversion,Liquid,0.597 +Bio-conversion,Losses,26.862 +Bio-conversion,Solid,280.322 +Bio-conversion,Gas,81.144 +Biofuel imports,Liquid,35 +Biomass imports,Solid,35 +Coal imports,Coal,11.606 +Coal reserves,Coal,63.965 +Coal,Solid,75.571 +District heating,Industry,10.639 +District heating,Heating and cooling - commercial,22.505 +District heating,Heating and cooling - homes,46.184 +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +Electricity grid,Industry,342.165 +Electricity grid,Road transport,37.797 +Electricity grid,Agriculture,4.412 +Electricity grid,Heating and cooling - commercial,40.858 +Electricity grid,Losses,56.691 +Electricity grid,Rail transport,7.863 +Electricity grid,Lighting & appliances - commercial,90.008 +Electricity grid,Lighting & appliances - homes,93.494 +Gas imports,Ngas,40.719 +Gas reserves,Ngas,82.233 +Gas,Heating and cooling - commercial,0.129 +Gas,Losses,1.401 +Gas,Thermal generation,151.891 +Gas,Agriculture,2.096 +Gas,Industry,48.58 +Geothermal,Electricity grid,7.013 +H2 conversion,H2,20.897 +H2 conversion,Losses,6.242 +H2,Road transport,20.897 +Hydro,Electricity grid,6.995 +Liquid,Industry,121.066 +Liquid,International shipping,128.69 +Liquid,Road transport,135.835 +Liquid,Domestic aviation,14.458 +Liquid,International aviation,206.267 +Liquid,Agriculture,3.64 +Liquid,National navigation,33.218 +Liquid,Rail transport,4.413 +Marine algae,Bio-conversion,4.375 +Ngas,Gas,122.952 +Nuclear,Thermal generation,839.978 +Oil imports,Oil,504.287 +Oil reserves,Oil,107.703 +Oil,Liquid,611.99 +Other waste,Solid,56.587 +Other waste,Bio-conversion,77.81 +Pumped heat,Heating and cooling - homes,193.026 +Pumped heat,Heating and cooling - commercial,70.672 +Solar PV,Electricity grid,59.901 +Solar Thermal,Heating and cooling - homes,19.263 +Solar,Solar Thermal,19.263 +Solar,Solar PV,59.901 +Solid,Agriculture,0.882 +Solid,Thermal generation,400.12 +Solid,Industry,46.477 +Thermal generation,Electricity grid,525.531 +Thermal generation,Losses,787.129 +Thermal generation,District heating,79.329 +Tidal,Electricity grid,9.452 +UK land based bioenergy,Bio-conversion,182.01 +Wave,Electricity grid,19.013 +Wind,Electricity grid,289.366 +``` + +```mermaid +sankey-beta + +Agricultural 'waste',Bio-conversion,124.729 +Bio-conversion,Liquid,0.597 +Bio-conversion,Losses,26.862 +Bio-conversion,Solid,280.322 +Bio-conversion,Gas,81.144 +Biofuel imports,Liquid,35 +Biomass imports,Solid,35 +Coal imports,Coal,11.606 +Coal reserves,Coal,63.965 +Coal,Solid,75.571 +District heating,Industry,10.639 +District heating,Heating and cooling - commercial,22.505 +District heating,Heating and cooling - homes,46.184 +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +Electricity grid,Industry,342.165 +Electricity grid,Road transport,37.797 +Electricity grid,Agriculture,4.412 +Electricity grid,Heating and cooling - commercial,40.858 +Electricity grid,Losses,56.691 +Electricity grid,Rail transport,7.863 +Electricity grid,Lighting & appliances - commercial,90.008 +Electricity grid,Lighting & appliances - homes,93.494 +Gas imports,Ngas,40.719 +Gas reserves,Ngas,82.233 +Gas,Heating and cooling - commercial,0.129 +Gas,Losses,1.401 +Gas,Thermal generation,151.891 +Gas,Agriculture,2.096 +Gas,Industry,48.58 +Geothermal,Electricity grid,7.013 +H2 conversion,H2,20.897 +H2 conversion,Losses,6.242 +H2,Road transport,20.897 +Hydro,Electricity grid,6.995 +Liquid,Industry,121.066 +Liquid,International shipping,128.69 +Liquid,Road transport,135.835 +Liquid,Domestic aviation,14.458 +Liquid,International aviation,206.267 +Liquid,Agriculture,3.64 +Liquid,National navigation,33.218 +Liquid,Rail transport,4.413 +Marine algae,Bio-conversion,4.375 +Ngas,Gas,122.952 +Nuclear,Thermal generation,839.978 +Oil imports,Oil,504.287 +Oil reserves,Oil,107.703 +Oil,Liquid,611.99 +Other waste,Solid,56.587 +Other waste,Bio-conversion,77.81 +Pumped heat,Heating and cooling - homes,193.026 +Pumped heat,Heating and cooling - commercial,70.672 +Solar PV,Electricity grid,59.901 +Solar Thermal,Heating and cooling - homes,19.263 +Solar,Solar Thermal,19.263 +Solar,Solar PV,59.901 +Solid,Agriculture,0.882 +Solid,Thermal generation,400.12 +Solid,Industry,46.477 +Thermal generation,Electricity grid,525.531 +Thermal generation,Losses,787.129 +Thermal generation,District heating,79.329 +Tidal,Electricity grid,9.452 +UK land based bioenergy,Bio-conversion,182.01 +Wave,Electricity grid,19.013 +Wind,Electricity grid,289.366 +``` + +::: + +## Syntax + +The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result. + +It is implements standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**: + +- CSV must contain **3 columns only** +- It is **allowed** to have **empty lines** without comma separators for visual purposes + +### Empty lines + +CSV does not support empty lines (without comma delimeters) by default. But you can add them if needed. + +```mermaid-example +sankey-beta + +Bio-conversion,Liquid,0.597 +Bio-conversion,Losses,26.862 + +Bio-conversion,Solid,280.322 +Bio-conversion,Gas,81.144 +``` + +```mermaid +sankey-beta + +Bio-conversion,Liquid,0.597 +Bio-conversion,Losses,26.862 + +Bio-conversion,Solid,280.322 +Bio-conversion,Gas,81.144 +``` + +```mermaid-example +sankey-beta + +Bio-conversion,Liquid,0.597 +Bio-conversion,Losses,26.862 + +Bio-conversion,Solid,280.322 +Bio-conversion,Gas,81.144 +``` + +```mermaid +sankey-beta + +Bio-conversion,Liquid,0.597 +Bio-conversion,Losses,26.862 + +Bio-conversion,Solid,280.322 +Bio-conversion,Gas,81.144 +``` + +### Commas + +If you need to have a comma, wrap it in double quotes: + +```mermaid-example +sankey-beta + +Pumped heat,"Heating and cooling, homes",193.026 +Pumped heat,"Heating and cooling, commercial",70.672 +``` + +```mermaid +sankey-beta + +Pumped heat,"Heating and cooling, homes",193.026 +Pumped heat,"Heating and cooling, commercial",70.672 +``` + +```mermaid-example +sankey-beta + +Pumped heat,"Heating and cooling, homes",193.026 +Pumped heat,"Heating and cooling, commercial",70.672 +``` + +```mermaid +sankey-beta + +Pumped heat,"Heating and cooling, homes",193.026 +Pumped heat,"Heating and cooling, commercial",70.672 +``` + +### Double quotes + +If you need to have double quote, put a pair of them: + +```mermaid-example +sankey-beta + +Pumped heat,"Heating and cooling ""homes""",193.026 +Pumped heat,"Heating and cooling, ""commercial""",70.672 +``` + +```mermaid +sankey-beta + +Pumped heat,"Heating and cooling ""homes""",193.026 +Pumped heat,"Heating and cooling, ""commercial""",70.672 +``` + +```mermaid-example +sankey-beta + +Pumped heat,"Heating and cooling ""homes""",193.026 +Pumped heat,"Heating and cooling, ""commercial""",70.672 +``` + +```mermaid +sankey-beta + +Pumped heat,"Heating and cooling ""homes""",193.026 +Pumped heat,"Heating and cooling, ""commercial""",70.672 +``` + +## Configuration + +### Coloring and Alignment + +You can change graph layout by setting `nodeAlignment` to: + +- `justify` +- `center` +- `left` +- `right` + +And adjust coloring of the links by setting `linkColor` to one of those: + +- `source` +- `target` +- `gradient` +- hex code of color, like `#a1a1a1` + +```html + +``` From 163a4b819b3402f17babffa2c73e3eadb1ba5ef8 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Thu, 29 Jun 2023 21:00:41 +0300 Subject: [PATCH 101/263] Trigger build in GA From 0cab66c9d81ea2f48485a2c4bf2c187c06a01fbf Mon Sep 17 00:00:00 2001 From: Lishid Date: Thu, 29 Jun 2023 15:33:35 -0400 Subject: [PATCH 102/263] Fix flowchart tooltip typing Tooltip is an object that gets reset to an array. It is then looked up for properties without guard, causing array functions like "length" and "constructor" to run into undefined behvaior. --- packages/mermaid/src/diagrams/flowchart/flowDb.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index ceb933e858..81a9afb946 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -342,7 +342,8 @@ export const setLink = function (ids, linkStr, target) { setClass(ids, 'clickable'); }; export const getTooltip = function (id) { - return tooltips[id]; + if (tooltips.hasOwnProperty(id)) return tooltips[id]; + return undefined; }; /** @@ -443,7 +444,7 @@ export const clear = function (ver = 'gen-1') { subGraphs = []; subGraphLookup = {}; subCount = 0; - tooltips = []; + tooltips = {}; firstGraphFlag = true; version = ver; commonClear(); From 04d79b16c3ebd647d0247f55cfc921ee5feb0b45 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 1 Jul 2023 00:30:27 +0530 Subject: [PATCH 103/263] Fix docs --- docs/syntax/stateDiagram.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/syntax/stateDiagram.md b/docs/syntax/stateDiagram.md index 807d6149a9..4c28c82b30 100644 --- a/docs/syntax/stateDiagram.md +++ b/docs/syntax/stateDiagram.md @@ -487,7 +487,7 @@ where - the second _property_ is `color` and its _value_ is `white` - the third _property_ is `font-weight` and its _value_ is `bold` - the fourth _property_ is `stroke-width` and its _value_ is `2px` -- the fifth _property_ is `stroke` and its _value_ is `yello` +- the fifth _property_ is `stroke` and its _value_ is `yellow` ### Apply classDef styles to states From b90c8402cb617380c773df0d270a919dda0b6ee8 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 1 Jul 2023 00:38:10 +0530 Subject: [PATCH 104/263] Set default branch in codecov --- codecov.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/codecov.yaml b/codecov.yaml index 91ae0771bb..d33925afc4 100644 --- a/codecov.yaml +++ b/codecov.yaml @@ -1,3 +1,6 @@ +codecov: + branch: develop + comment: layout: 'reach, diff, flags, files' behavior: default From ae4d81cdfdff748408bfd04d1eb382f8698d402a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 1 Jul 2023 00:39:01 +0530 Subject: [PATCH 105/263] move codecov --- codecov.yaml => .github/codecov.yaml | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename codecov.yaml => .github/codecov.yaml (100%) diff --git a/codecov.yaml b/.github/codecov.yaml similarity index 100% rename from codecov.yaml rename to .github/codecov.yaml From a62719826a3a125e005be5e2749906275c84cb64 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sat, 1 Jul 2023 16:17:25 +0300 Subject: [PATCH 106/263] Docker+Cypress, better run, removed unused syntax Added cypress container (from their official image), may be reconsidered later to choose our own The only minor problem is node JS version mistmatch package.json 18.16.0 docker-compose mermaid 18.16.1 docker-compose cypress 18.16.0 Host option in cypress docker container must be removed in favor of possible configuration option. http://localhost:9000 are currently hard-coded, that is bad Updated ./run script with better documentation and added some styles too it as well Started sankey.spec.js as an example --- cypress/integration/rendering/sankey.spec.js | 12 ++ docker-compose.yml | 15 +++ .../diagrams/sankey/parser/sankey-arrow.jison | 105 ------------------ .../sankey/parser/sankey-arrow.spec.js | 101 ----------------- run | 59 ++++++---- 5 files changed, 65 insertions(+), 227 deletions(-) delete mode 100644 packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison delete mode 100644 packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js diff --git a/cypress/integration/rendering/sankey.spec.js b/cypress/integration/rendering/sankey.spec.js index eb25edf0fa..f411f68191 100644 --- a/cypress/integration/rendering/sankey.spec.js +++ b/cypress/integration/rendering/sankey.spec.js @@ -11,4 +11,16 @@ describe('Sankey Diagram', () => { {} ); }); + + describe('Changes link color', function () { + beforeAll(() => { + let conf = { + sankey: { + linkColor: 'source', + } + }; + + mermaidAPI.initialize(conf); + }); + }); }); diff --git a/docker-compose.yml b/docker-compose.yml index 49fe0f3e88..8a60d829bc 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -16,6 +16,21 @@ services: ports: - 9000:9000 - 3333:3333 + cypress: + image: cypress/base:18.16.0 + stdin_open: true + tty: true + working_dir: /mermaid + mem_limit: '2G' + environment: + - NODE_OPTIONS=--max_old_space_size=2048 + volumes: + - ./:/mermaid + - root_cache:/root/.cache + - root_local:/root/.local + - root_npm:/root/.npm + network_mode: host + volumes: root_cache: root_local: diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison deleted file mode 100644 index 181953d959..0000000000 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison +++ /dev/null @@ -1,105 +0,0 @@ -/** mermaid */ -%lex -TOKEN \w+ -NUM \d+(.\d+)? - -%options case-insensitive -%options easy_keword_rules - -%s link_value - -%x attributes -%x attr_value -%x string - -%% -//-------------------------------------------------------------- -// skip all whitespace EXCEPT newlines, but not within a string -//-------------------------------------------------------------- - -[^\S\r\n]+ {} - -//-------------- -// basic tokens -//-------------- - -(<>|[\n;])+ { return 'EOS'; } // end of statement is semicolon ; new line \n or end of file -"sankey-beta" { return 'SANKEY'; } -{TOKEN} { return 'NODE_ID'; } -{NUM} { return 'AMOUNT'; } -"->" { - if(this.topState()!=='link_value') this.pushState('link_value'); - else this.popState(); - return 'ARROW'; - } -//------------ -// attributes -//------------ - -"[" { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; } -"]" { this.popState(); return 'CLOSE_ATTRIBUTES'; } -{TOKEN} { return 'ATTRIBUTE'; } -\= { this.pushState('attr_value'); return 'EQUAL'; } -{TOKEN} { this.popState(); return 'VALUE'; } - -//------------ -// strings -//------------ - -\" { this.pushState('string'); return 'OPEN_STRING'; } -(?!\\)\" { - if(this.topState()==='string') this.popState(); - if(this.topState()==='attr_value') this.popState(); - return 'CLOSE_STRING'; - } -([^"\\]|\\\"|\\\\)+ { return 'STRING'; } - -/lex - -%start start -%left ARROW - -%% // language grammar - -start - : EOS SANKEY document - | SANKEY document - ; - -document - : line document - | - ; - -line - : node optional_attributes EOS - | stream optional_attributes EOS - | EOS - ; - -optional_attributes: OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES | ; - -attributes: attribute attributes | ; -attribute: ATTRIBUTE EQUAL value | ATTRIBUTE; - -value: VALUE | OPEN_STRING STRING CLOSE_STRING; - -stream - : node\[source] ARROW amount ARROW tail\[target] { - $$=$source; - yy.addLink($source, $target, $amount); - } - ; - -tail - : stream { $$ = $stream } - | node { $$ = $node; } - ; - -amount: AMOUNT { $$=parseFloat($AMOUNT); }; - -node - : NODE_ID { $$ = yy.findOrCreateNode($NODE_ID); } - | OPEN_STRING STRING\[node_label] CLOSE_STRING { $$ = yy.findOrCreateNode($node_label); } - ; - diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js deleted file mode 100644 index a180b9a28d..0000000000 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js +++ /dev/null @@ -1,101 +0,0 @@ -// @ts-ignore: jison doesn't export types -import sankey from './sankey-arrow.jison'; -import db from '../sankeyDB.js'; - -describe('sankey-beta diagram', function () { - describe('when parsing an info graph it', function () { - beforeEach(function () { - sankey.parser.yy = db; - sankey.parser.yy.clear(); - }); - - it('recognizes its type', () => { - const str = `sankey-beta`; - - sankey.parser.parse(str); - }); - - it('recognizes one flow', () => { - const str = ` - sankey-beta - node_a -> 30 -> node_b -> 20 -> node_c - `; - - sankey.parser.parse(str); - }); - - it('recognizes multiple flows', () => { - const str = ` - sankey-beta - node_a -> 30 -> node_b -> 12 -> node_e - node_c -> 30 -> node_d -> 12 -> node_e - node_c -> 40 -> node_e -> 12 -> node_q - `; - - sankey.parser.parse(str); - }); - - it('parses node as a string', () => { - const str = ` - sankey-beta - "node a" -> 30 -> "node b" -> 12 -> "node e" - "node c" -> 30 -> "node d" -> 12 -> "node e" - "node c" -> 40 -> "node e" -> 12 -> "node q" - `; - - sankey.parser.parse(str); - }); - - describe('while attributes parsing', () => { - it('recognized node and attribute ids starting with numbers', () => { - const str = ` - sankey-beta - 1st -> 200 -> 2nd -> 180 -> 3rd; - `; - - sankey.parser.parse(str); - }); - - it('parses different quotless variations', () => { - const str = ` - sankey-beta - node[] - - node[attr=1] - node_a -> 30 -> node_b - node[attrWithoutValue] - node[attr = 3] - node[attr1 = 23413 attr2=1234] - node[x1dfqowie attr1 = 23413 attr2] - `; - - sankey.parser.parse(str); - }); - - it('parses strings as values', () => { - const str = ` - sankey-beta - node[title="hello, how are you?"] - node[title="hello, mister \\"sankey-beta\\", backslash for you \\\\"] - `; - - sankey.parser.parse(str); - }); - - it('parses real example', () => { - const str = ` - sankey-beta - - "Agricultural 'waste'" -> 124.729 -> "Bio-conversion" - "Bio-conversion" -> 0.597 -> "Liquid" - "Bio-conversion" -> 26.862 -> "Losses" - "Bio-conversion" -> 280.322 -> "Solid" - "Bio-conversion" -> 81.144 -> "Gas" - "Biofuel imports" -> 35 -> "Liquid" - `; - - sankey.parser.parse(str); - }); - }); - }); -}); diff --git a/run b/run index 3509be7a76..55a0a849ea 100755 --- a/run +++ b/run @@ -1,6 +1,13 @@ #!/bin/bash RUN="docker-compose run --rm" +ansi() { echo -e "\e[${1}m${*:2}\e[0m"; } +bold() { ansi 1 "$@"; } +# italic() { ansi 3 "$@"; } +underline() { ansi 4 "$@"; } +# strikethrough() { ansi 9 "$@"; } +# red() { ansi 31 "$@"; } + name=$(basename $0) command=$1 args=${@:2} @@ -12,7 +19,7 @@ $RUN mermaid sh -c "npx $args" ;; pnpm) -$RUN mermaid sh -c "npx $command $args" +$RUN mermaid sh -c "npx pnpm $args" ;; dev) @@ -23,43 +30,53 @@ docs:dev) $RUN --service-ports mermaid sh -c "cd packages/mermaid/src/docs && npx pnpm prefetch && npx vitepress --port 3333 --host" ;; +cypress) +$RUN cypress npm run cypress $args +;; + help) # Alignment of help message must be as it is, it will be nice looking when printed usage=$( cat <', e.g.: - # 'git diff --name-only develop | xargs run pnpm prettier --write' -$name pnpm test # Run unit tests -$name pnpm vitest # Run watcher for unit tests -$name pnpm e2e # Run integration tests +$(bold ./$name pnpm add --filter mermaid) $(underline package) + Add package to mermaid + +$(bold git diff --name-only develop \| xargs ./$name pnpm prettier --write) + Prettify everything you added so far + +$(bold ./$name cypress run -- --spec cypress/integration/rendering/)$(underline test.ts) + Run specific test in cypress\n + EOF ) From 4570f824f7e6fb37d35ee0667f9c14d7ce870914 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Sat, 1 Jul 2023 15:45:48 -0300 Subject: [PATCH 107/263] Fix relative link to theme variables list --- docs/config/theming.md | 6 +++--- packages/mermaid/src/docs/config/theming.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/config/theming.md b/docs/config/theming.md index 580afb4887..63271a39b7 100644 --- a/docs/config/theming.md +++ b/docs/config/theming.md @@ -73,9 +73,9 @@ To make a custom theme, modify `themeVariables` via `init`. You will need to use the [base](#available-themes) theme as it is the only modifiable theme. -| Parameter | Description | Type | Properties | -| -------------- | ------------------------------------ | ------ | --------------------------------------------------------------------------------------------------- | -| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables-reference-table)) | +| Parameter | Description | Type | Properties | +| -------------- | ------------------------------------ | ------ | ----------------------------------------------------------------------------------- | +| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) | Example of modifying `themeVariables` using the `init` directive: diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md index 0e4571d15f..0e08532837 100644 --- a/packages/mermaid/src/docs/config/theming.md +++ b/packages/mermaid/src/docs/config/theming.md @@ -55,9 +55,9 @@ To make a custom theme, modify `themeVariables` via `init`. You will need to use the [base](#available-themes) theme as it is the only modifiable theme. -| Parameter | Description | Type | Properties | -| -------------- | ------------------------------------ | ------ | --------------------------------------------------------------------------------------------------- | -| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables-reference-table)) | +| Parameter | Description | Type | Properties | +| -------------- | ------------------------------------ | ------ | ----------------------------------------------------------------------------------- | +| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) | Example of modifying `themeVariables` using the `init` directive: From 084b765e9f89abe7171768f9649f0485861fbeee Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 2 Jul 2023 01:10:06 +0300 Subject: [PATCH 108/263] Added tests for colors and fully setup cypress in Docker --- cypress/integration/rendering/sankey.spec.js | 26 ------ cypress/integration/rendering/sankey.spec.ts | 85 +++++++++++++++++++ demos/sankey.html | 48 ++--------- docker-compose.yml | 9 +- .../src/diagrams/sankey/sankeyRenderer.ts | 5 +- run | 9 +- 6 files changed, 106 insertions(+), 76 deletions(-) delete mode 100644 cypress/integration/rendering/sankey.spec.js create mode 100644 cypress/integration/rendering/sankey.spec.ts diff --git a/cypress/integration/rendering/sankey.spec.js b/cypress/integration/rendering/sankey.spec.js deleted file mode 100644 index f411f68191..0000000000 --- a/cypress/integration/rendering/sankey.spec.js +++ /dev/null @@ -1,26 +0,0 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; - -describe('Sankey Diagram', () => { - it('should render a simple example', () => { - imgSnapshotTest( - ` - sankey-beta - - a,b,10 - `, - {} - ); - }); - - describe('Changes link color', function () { - beforeAll(() => { - let conf = { - sankey: { - linkColor: 'source', - } - }; - - mermaidAPI.initialize(conf); - }); - }); -}); diff --git a/cypress/integration/rendering/sankey.spec.ts b/cypress/integration/rendering/sankey.spec.ts new file mode 100644 index 0000000000..de10338e81 --- /dev/null +++ b/cypress/integration/rendering/sankey.spec.ts @@ -0,0 +1,85 @@ +import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; + +describe('Sankey Diagram', () => { + it('should render a simple example', () => { + imgSnapshotTest( + ` + sankey-beta + + sourceNode,targetNode,10 + `, + {} + ); + }); + + describe('when given a linkColor', function () { + it('links should be the same color as source node', () => { + renderGraph( + ` + sankey-beta + + sourceNode,targetNode,10 + `, + { + sankey: { linkColor: 'source' }, + } + ); + + cy.get('.link path').then((link) => { + cy.get('.node[id="node-1"] rect').should(node => + expect(link.attr('stroke')).to.equal(node.attr('fill')) + ); + }); + }); + + it('should change link color to hex code', () => { + renderGraph( + ` + sankey-beta + a,b,10 + `, + { + sankey: { linkColor: '#636465' }, + } + ); + + cy.get('.link path').should((link) => { + expect(link.attr('stroke')).to.equal('#636465'); + }); + }); + + it('links should be the same color as target node', () => { + renderGraph( + ` + sankey-beta + sourceNode,targetNode,10 + `, + { + sankey: { linkColor: 'target' }, + } + ); + + cy.get('.link path').then((link) => { + cy.get('.node[id="node-2"] rect').should(node => + expect(link.attr('stroke')).to.equal(node.attr('fill')) + ); + }); + }); + + it('links must be gradient', () => { + renderGraph( + ` + sankey-beta + sourceNode,targetNode,10 + `, + { + sankey: { linkColor: 'gradient' }, + } + ); + + cy.get('.link path').should((link) => { + expect(link.attr('stroke')).to.equal('url(#linearGradient-3)'); + }); + }); + }); +}); diff --git a/demos/sankey.html b/demos/sankey.html index 22e34cad38..c8cdc1e7e7 100644 --- a/demos/sankey.html +++ b/demos/sankey.html @@ -19,47 +19,19 @@

    Energy flow

           sankey-beta
 
-      %% There are leading and trailing spaces, do not crop
-          Agricultural 'waste',Bio-conversion,124.729   
-      %% line with a comment
-
-      %% Normal line
+      Agricultural 'waste',Bio-conversion,124.729
       Bio-conversion,Liquid,0.597
-
-      %% Line with unquoted sankey keyword
-      sankey,target,10
-
-      %% Quoted sankey keyword
-      "sankey",target,10
-
-      %% Another normal line
       Bio-conversion,Losses,26.862
-
-      %% Line with integer amount
-      Bio-conversion,Solid,280
-
-      %% Some blank lines in the middle of CSV
-
-
-      %% Another normal line
+      Bio-conversion,Solid,280.322
       Bio-conversion,Gas,81.144
-
-      %% Quoted line
-      "Biofuel imports",Liquid,35
-
-      %% Quoted line with escaped quotes inside
-      """Biomass imports""",Solid,35
-
-      %% Lines containing commas inside
-      %% Quoted and unquoted values should be equal in terms of graph
-      "District heating","Heating and cooling, commercial",22.505
-      District heating,"Heating and cooling, homes",46.184
-
-      %% A bunch of lines, normal CSV
+      Biofuel imports,Liquid,35
+      Biomass imports,Solid,35
       Coal imports,Coal,11.606
       Coal reserves,Coal,63.965
       Coal,Solid,75.571
       District heating,Industry,10.639
+      District heating,Heating and cooling - commercial,22.505
+      District heating,Heating and cooling - homes,46.184
       Electricity grid,Over generation / exports,104.453
       Electricity grid,Heating and cooling - homes,113.726
       Electricity grid,H2 conversion,27.14
@@ -113,12 +85,8 @@ 
    Energy flow
    
       Thermal generation,District heating,79.329
       Tidal,Electricity grid,9.452
       UK land based bioenergy,Bio-conversion,182.01
-      """Wave""",Electricity grid,19.013
-      """Wind""",Electricity grid,289.366
-
-      %% lines at the end, do not remove
-
-
+      Wave,Electricity grid,19.013
+      Wind,Electricity grid,289.366
    From abb7bb23d623f1717b220b75fdd27d5d6d5e8d32 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Sun, 2 Jul 2023 02:34:22 +0300 Subject: [PATCH 110/263] More detailed sankey docs --- cypress/integration/rendering/sankey.spec.ts | 2 +- packages/mermaid/src/docs/syntax/sankey.md | 76 +++++++++++++------- 2 files changed, 53 insertions(+), 25 deletions(-) diff --git a/cypress/integration/rendering/sankey.spec.ts b/cypress/integration/rendering/sankey.spec.ts index ded23a045a..e334b898be 100644 --- a/cypress/integration/rendering/sankey.spec.ts +++ b/cypress/integration/rendering/sankey.spec.ts @@ -128,7 +128,7 @@ describe('Sankey Diagram', () => { expect(node.attr('x')).to.equal('400'); }); }); - + it('should center nodes', function () { renderGraph(this.graph, { sankey: { nodeAlignment: 'center', width: 410, useMaxWidth: false }, diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md index 97806d7251..32f3663b98 100644 --- a/packages/mermaid/src/docs/syntax/sankey.md +++ b/packages/mermaid/src/docs/syntax/sankey.md @@ -166,32 +166,54 @@ Wind,Electricity grid,289.366 The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result. -It is implements standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**: +It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**: - CSV must contain **3 columns only** - It is **allowed** to have **empty lines** without comma separators for visual purposes -### Empty lines +### Basic -CSV does not support empty lines (without comma delimeters) by default. But you can add them if needed. +It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly: + +```mermaid-example +sankey-beta + +%% source,target,value +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +``` + +```mermaid +sankey-beta + +%% source,target,value +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +``` + +### Empty Lines + +CSV does not support empty lines without comma delimeters by default. But you can add them if needed: ```mermaid-example sankey-beta -Bio-conversion,Liquid,0.597 Bio-conversion,Losses,26.862 Bio-conversion,Solid,280.322 + Bio-conversion,Gas,81.144 ``` ```mermaid sankey-beta -Bio-conversion,Liquid,0.597 Bio-conversion,Losses,26.862 Bio-conversion,Solid,280.322 + Bio-conversion,Gas,81.144 ``` @@ -213,41 +235,27 @@ Pumped heat,"Heating and cooling, homes",193.026 Pumped heat,"Heating and cooling, commercial",70.672 ``` -### Double quotes +### Double Quotes -If you need to have double quote, put a pair of them: +If you need to have double quote, put a pair of them inside quoted string: ```mermaid-example sankey-beta -Pumped heat,"Heating and cooling ""homes""",193.026 +Pumped heat,"Heating and cooling, ""homes""",193.026 Pumped heat,"Heating and cooling, ""commercial""",70.672 ``` ```mermaid sankey-beta -Pumped heat,"Heating and cooling ""homes""",193.026 +Pumped heat,"Heating and cooling, ""homes""",193.026 Pumped heat,"Heating and cooling, ""commercial""",70.672 ``` ## Configuration -### Coloring and Alignment - -You can change graph layout by setting `nodeAlignment` to: - -- `justify` -- `center` -- `left` -- `right` - -And adjust coloring of the links by setting `linkColor` to one of those: - -- `source` -- `target` -- `gradient` -- hex code of color, like `#a1a1a1` +You can customize link colors, node alignments and diagram dimensions. ```html ``` + +### Links Coloring + +You can adjust links' color by setting `linkColor` to one of those: + +- `source` - link will be of a source node color +- `target` - link will be of a target node color +- `gradient` - link color will be smoothly transient between source and target node colors +- hex code of color, like `#a1a1a1` + +### Node Alignment + +Graph layout can be changed by setting `nodeAlignment` to: + +- `justify` +- `center` +- `left` +- `right` From c327ea9f2194832760a00bdd1a0e72a64435cc8b Mon Sep 17 00:00:00 2001 From: nirname Date: Sat, 1 Jul 2023 23:38:02 +0000 Subject: [PATCH 111/263] Update docs --- docs/syntax/sankey.md | 102 ++++++++++++++++++++++++++++++------------ 1 file changed, 74 insertions(+), 28 deletions(-) diff --git a/docs/syntax/sankey.md b/docs/syntax/sankey.md index 2eaf9b8cce..bfbfc3621e 100644 --- a/docs/syntax/sankey.md +++ b/docs/syntax/sankey.md @@ -318,52 +318,92 @@ Wind,Electricity grid,289.366 The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result. -It is implements standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**: +It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**: - CSV must contain **3 columns only** - It is **allowed** to have **empty lines** without comma separators for visual purposes -### Empty lines +### Basic -CSV does not support empty lines (without comma delimeters) by default. But you can add them if needed. +It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly: + +```mermaid-example +sankey-beta + +%% source,target,value +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +``` + +```mermaid +sankey-beta + +%% source,target,value +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +``` + +```mermaid-example +sankey-beta + +%% source,target,value +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +``` + +```mermaid +sankey-beta + +%% source,target,value +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +``` + +### Empty Lines + +CSV does not support empty lines without comma delimeters by default. But you can add them if needed: ```mermaid-example sankey-beta -Bio-conversion,Liquid,0.597 Bio-conversion,Losses,26.862 Bio-conversion,Solid,280.322 + Bio-conversion,Gas,81.144 ``` ```mermaid sankey-beta -Bio-conversion,Liquid,0.597 Bio-conversion,Losses,26.862 Bio-conversion,Solid,280.322 + Bio-conversion,Gas,81.144 ``` ```mermaid-example sankey-beta -Bio-conversion,Liquid,0.597 Bio-conversion,Losses,26.862 Bio-conversion,Solid,280.322 + Bio-conversion,Gas,81.144 ``` ```mermaid sankey-beta -Bio-conversion,Liquid,0.597 Bio-conversion,Losses,26.862 Bio-conversion,Solid,280.322 + Bio-conversion,Gas,81.144 ``` @@ -399,55 +439,41 @@ Pumped heat,"Heating and cooling, homes",193.026 Pumped heat,"Heating and cooling, commercial",70.672 ``` -### Double quotes +### Double Quotes -If you need to have double quote, put a pair of them: +If you need to have double quote, put a pair of them inside quoted string: ```mermaid-example sankey-beta -Pumped heat,"Heating and cooling ""homes""",193.026 +Pumped heat,"Heating and cooling, ""homes""",193.026 Pumped heat,"Heating and cooling, ""commercial""",70.672 ``` ```mermaid sankey-beta -Pumped heat,"Heating and cooling ""homes""",193.026 +Pumped heat,"Heating and cooling, ""homes""",193.026 Pumped heat,"Heating and cooling, ""commercial""",70.672 ``` ```mermaid-example sankey-beta -Pumped heat,"Heating and cooling ""homes""",193.026 +Pumped heat,"Heating and cooling, ""homes""",193.026 Pumped heat,"Heating and cooling, ""commercial""",70.672 ``` ```mermaid sankey-beta -Pumped heat,"Heating and cooling ""homes""",193.026 +Pumped heat,"Heating and cooling, ""homes""",193.026 Pumped heat,"Heating and cooling, ""commercial""",70.672 ``` ## Configuration -### Coloring and Alignment - -You can change graph layout by setting `nodeAlignment` to: - -- `justify` -- `center` -- `left` -- `right` - -And adjust coloring of the links by setting `linkColor` to one of those: - -- `source` -- `target` -- `gradient` -- hex code of color, like `#a1a1a1` +You can customize link colors, node alignments and diagram dimensions. ```html ``` + +### Links Coloring + +You can adjust links' color by setting `linkColor` to one of those: + +- `source` - link will be of a source node color +- `target` - link will be of a target node color +- `gradient` - link color will be smoothly transient between source and target node colors +- hex code of color, like `#a1a1a1` + +### Node Alignment + +Graph layout can be changed by setting `nodeAlignment` to: + +- `justify` +- `center` +- `left` +- `right` From 4a95589b5aaa370793f7462856f5d4fe973c8814 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 2 Jul 2023 10:03:31 +0530 Subject: [PATCH 112/263] Add `merge_group` to CI triggers --- .github/workflows/build-docs.yml | 1 + .github/workflows/build.yml | 1 + .github/workflows/checks.yml | 3 ++- .github/workflows/e2e.yml | 5 ++++- .github/workflows/lint.yml | 3 ++- .github/workflows/test.yml | 2 +- 6 files changed, 11 insertions(+), 4 deletions(-) diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml index f3e440fce6..b9e542cf84 100644 --- a/.github/workflows/build-docs.yml +++ b/.github/workflows/build-docs.yml @@ -2,6 +2,7 @@ name: Build Vitepress docs on: pull_request: + merge_group: permissions: contents: read diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 2a70b5901d..49be6364a4 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -2,6 +2,7 @@ name: Build on: push: {} + merge_group: pull_request: types: - opened diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml index 396ff4e6ed..df761325c8 100644 --- a/.github/workflows/checks.yml +++ b/.github/workflows/checks.yml @@ -1,5 +1,6 @@ on: - push: {} + push: + merge_group: pull_request: types: - opened diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index 64637c5fbe..c27425beb6 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -1,6 +1,9 @@ name: E2E -on: [push, pull_request] +on: + push: + pull_request: + merge_group: permissions: contents: read diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index d4bf4afe81..53b7f484d7 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -1,7 +1,8 @@ name: Lint on: - push: {} + push: + merge_group: pull_request: types: - opened diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 6bae6b71f8..2d8c961657 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -1,6 +1,6 @@ name: Unit Tests -on: [push, pull_request] +on: [push, pull_request, merge_group] permissions: contents: read From 78377daf2f383c268a390f186935c28b7bc155fa Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 2 Jul 2023 10:14:35 +0530 Subject: [PATCH 113/263] Rename workflow jobs --- .github/workflows/build-docs.yml | 3 +-- .github/workflows/build.yml | 2 +- .github/workflows/check-readme-in-sync.yml | 2 +- .github/workflows/checks.yml | 4 ++-- .github/workflows/e2e-applitools.yml | 2 +- .github/workflows/e2e.yml | 2 +- .github/workflows/publish-docs.yml | 6 +++--- .github/workflows/release-preview-publish.yml | 2 +- .github/workflows/test.yml | 8 +------- .github/workflows/update-browserlist.yml | 2 +- 10 files changed, 13 insertions(+), 20 deletions(-) diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml index b9e542cf84..b25ff89cc7 100644 --- a/.github/workflows/build-docs.yml +++ b/.github/workflows/build-docs.yml @@ -8,8 +8,7 @@ permissions: contents: read jobs: - # Build job - build: + build-docs: runs-on: ubuntu-latest steps: - name: Checkout diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 49be6364a4..eeb557ebb9 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -13,7 +13,7 @@ permissions: contents: read jobs: - build: + build-mermaid: runs-on: ubuntu-latest strategy: matrix: diff --git a/.github/workflows/check-readme-in-sync.yml b/.github/workflows/check-readme-in-sync.yml index 13912e5b9f..5a8ca319b2 100644 --- a/.github/workflows/check-readme-in-sync.yml +++ b/.github/workflows/check-readme-in-sync.yml @@ -14,7 +14,7 @@ permissions: contents: read jobs: - check: + check-readme: runs-on: ubuntu-latest steps: - name: Checkout repository diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml index df761325c8..9f9f316c40 100644 --- a/.github/workflows/checks.yml +++ b/.github/workflows/checks.yml @@ -7,10 +7,10 @@ on: - synchronize - ready_for_review -name: Static analysis +name: Static analysis on Test files jobs: - test: + check-tests: runs-on: ubuntu-latest name: check tests if: github.repository_owner == 'mermaid-js' diff --git a/.github/workflows/e2e-applitools.yml b/.github/workflows/e2e-applitools.yml index 92f2f80b1c..5b19431421 100644 --- a/.github/workflows/e2e-applitools.yml +++ b/.github/workflows/e2e-applitools.yml @@ -19,7 +19,7 @@ env: USE_APPLI: ${{ secrets.APPLITOOLS_API_KEY && 'true' || '' }} jobs: - test: + e2e-applitools: runs-on: ubuntu-latest strategy: matrix: diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index c27425beb6..9bcb1898c0 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -9,7 +9,7 @@ permissions: contents: read jobs: - build: + e2e: runs-on: ubuntu-latest strategy: fail-fast: false diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml index b556c1b1d7..f63e587502 100644 --- a/.github/workflows/publish-docs.yml +++ b/.github/workflows/publish-docs.yml @@ -19,7 +19,7 @@ concurrency: jobs: # Build job - build: + build-docs: runs-on: ubuntu-latest steps: - name: Checkout @@ -48,11 +48,11 @@ jobs: path: packages/mermaid/src/vitepress/.vitepress/dist # Deployment job - deploy: + deploy-docs: environment: name: github-pages runs-on: ubuntu-latest - needs: build + needs: build-docs steps: - name: Deploy to GitHub Pages id: deployment diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml index 5f4936ab68..221e3836ee 100644 --- a/.github/workflows/release-preview-publish.yml +++ b/.github/workflows/release-preview-publish.yml @@ -6,7 +6,7 @@ on: - 'release/**' jobs: - publish: + publish-preview: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 2d8c961657..e25502ee43 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -6,7 +6,7 @@ permissions: contents: read jobs: - build: + unit-test: runs-on: ubuntu-latest strategy: matrix: @@ -49,9 +49,3 @@ jobs: name: mermaid-codecov fail_ci_if_error: true verbose: true - # Coveralls is throwing 500. Disabled for now. - # - name: Upload Coverage to Coveralls - # uses: coverallsapp/github-action@v2 - # with: - # github-token: ${{ secrets.GITHUB_TOKEN }} - # flag-name: unit diff --git a/.github/workflows/update-browserlist.yml b/.github/workflows/update-browserlist.yml index 4155ec988e..813a400b36 100644 --- a/.github/workflows/update-browserlist.yml +++ b/.github/workflows/update-browserlist.yml @@ -5,7 +5,7 @@ on: workflow_dispatch: jobs: - build: + update-browser-list: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 From b55a9328f490ffa865858e8ce73607ec68f30710 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sun, 2 Jul 2023 05:07:56 +0000 Subject: [PATCH 114/263] Update all patch dependencies --- packages/mermaid/package.json | 2 +- pnpm-lock.yaml | 160 ++-------------------------------- 2 files changed, 9 insertions(+), 153 deletions(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 4ee118cef5..62efec3802 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -62,7 +62,7 @@ "d3-sankey": "^0.12.3", "dagre-d3-es": "7.0.10", "dayjs": "^1.11.7", - "dompurify": "3.0.3", + "dompurify": "3.0.4", "elkjs": "^0.8.2", "khroma": "^2.0.0", "lodash-es": "^4.17.21", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3967ce135d..9d28e9e506 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,9 @@ lockfileVersion: '6.0' +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + importers: .: @@ -218,8 +222,8 @@ importers: specifier: ^1.11.7 version: 1.11.7 dompurify: - specifier: 3.0.3 - version: 3.0.3 + specifier: 3.0.4 + version: 3.0.4 elkjs: specifier: ^0.8.2 version: 0.8.2 @@ -459,58 +463,6 @@ importers: specifier: ^7.0.0 version: 7.0.0 - packages/mermaid/src/vitepress: - dependencies: - '@vueuse/core': - specifier: ^10.1.0 - version: 10.1.0(vue@3.2.47) - jiti: - specifier: ^1.18.2 - version: 1.18.2 - vue: - specifier: ^3.2.47 - version: 3.2.47 - devDependencies: - '@iconify-json/carbon': - specifier: ^1.1.16 - version: 1.1.16 - '@unocss/reset': - specifier: ^0.53.0 - version: 0.53.0 - '@vite-pwa/vitepress': - specifier: ^0.2.0 - version: 0.2.0(vite-plugin-pwa@0.16.0) - '@vitejs/plugin-vue': - specifier: ^4.2.1 - version: 4.2.1(vite@4.3.9)(vue@3.2.47) - fast-glob: - specifier: ^3.2.12 - version: 3.2.12 - https-localhost: - specifier: ^4.7.1 - version: 4.7.1 - pathe: - specifier: ^1.1.0 - version: 1.1.0 - unocss: - specifier: ^0.53.0 - version: 0.53.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.9) - unplugin-vue-components: - specifier: ^0.25.0 - version: 0.25.0(rollup@2.79.1)(vue@3.2.47) - vite: - specifier: ^4.3.3 - version: 4.3.9(@types/node@18.16.0) - vite-plugin-pwa: - specifier: ^0.16.0 - version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0) - vitepress: - specifier: 1.0.0-beta.3 - version: 1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0) - workbox-window: - specifier: ^7.0.0 - version: 7.0.0 - tests/webpack: dependencies: '@mermaid-js/mermaid-example-diagram': @@ -4733,17 +4685,6 @@ packages: - vite dev: true - /@unocss/astro@0.53.0(rollup@2.79.1)(vite@4.3.9): - resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==} - dependencies: - '@unocss/core': 0.53.0 - '@unocss/reset': 0.53.0 - '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9) - transitivePeerDependencies: - - rollup - - vite - dev: true - /@unocss/cli@0.53.0(rollup@2.79.1): resolution: {integrity: sha512-9WNBHy8m8tMqwcp7mUhebRUBvHQfbx01CMe5cAFLmUYtJULM+8IjJxqERkaAZyyoOXf1TNO2v1dFAmCwhMRCLQ==} engines: {node: '>=14'} @@ -4922,26 +4863,6 @@ packages: - rollup dev: true - /@unocss/vite@0.53.0(rollup@2.79.1)(vite@4.3.9): - resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==} - peerDependencies: - vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 - dependencies: - '@ampproject/remapping': 2.2.1 - '@rollup/pluginutils': 5.0.2(rollup@2.79.1) - '@unocss/config': 0.53.0 - '@unocss/core': 0.53.0 - '@unocss/inspector': 0.53.0 - '@unocss/scope': 0.53.0 - '@unocss/transformer-directives': 0.53.0 - chokidar: 3.5.3 - fast-glob: 3.2.12 - magic-string: 0.30.0 - vite: 4.3.9(@types/node@18.16.0) - transitivePeerDependencies: - - rollup - dev: true - /@vite-pwa/vitepress@0.2.0(vite-plugin-pwa@0.16.0): resolution: {integrity: sha512-dVQVaP6NB9woCFe4UASUqRp7uwBQJOVXlJlqK4krqXcbb3NuXIXIWOnU7HLpJnHqZj5U/81gKtLN6gs5gJBwiQ==} peerDependencies: @@ -4961,17 +4882,6 @@ packages: vue: 3.2.47 dev: true - /@vitejs/plugin-vue@4.2.1(vite@4.3.9)(vue@3.2.47): - resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==} - engines: {node: ^14.18.0 || >=16.0.0} - peerDependencies: - vite: ^4.0.0 - vue: ^3.2.25 - dependencies: - vite: 4.3.9(@types/node@18.16.0) - vue: 3.2.47 - dev: true - /@vitejs/plugin-vue@4.2.3(vite@4.3.8)(vue@3.3.4): resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==} engines: {node: ^14.18.0 || >=16.0.0} @@ -7847,8 +7757,8 @@ packages: domelementtype: 2.3.0 dev: true - /dompurify@3.0.3: - resolution: {integrity: sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ==} + /dompurify@3.0.4: + resolution: {integrity: sha512-ae0mA+Qiqp6C29pqZX3fQgK+F91+F7wobM/v8DRzDqJdZJELXiFUx4PP4pK/mzUS0xkiSEx3Ncd9gr69jg3YsQ==} dev: false /domutils@3.0.1: @@ -14722,42 +14632,6 @@ packages: - vite dev: true - /unocss@0.53.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.9): - resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==} - engines: {node: '>=14'} - peerDependencies: - '@unocss/webpack': 0.53.0 - peerDependenciesMeta: - '@unocss/webpack': - optional: true - dependencies: - '@unocss/astro': 0.53.0(rollup@2.79.1)(vite@4.3.9) - '@unocss/cli': 0.53.0(rollup@2.79.1) - '@unocss/core': 0.53.0 - '@unocss/extractor-arbitrary-variants': 0.53.0 - '@unocss/postcss': 0.53.0(postcss@8.4.23) - '@unocss/preset-attributify': 0.53.0 - '@unocss/preset-icons': 0.53.0 - '@unocss/preset-mini': 0.53.0 - '@unocss/preset-tagify': 0.53.0 - '@unocss/preset-typography': 0.53.0 - '@unocss/preset-uno': 0.53.0 - '@unocss/preset-web-fonts': 0.53.0 - '@unocss/preset-wind': 0.53.0 - '@unocss/reset': 0.53.0 - '@unocss/transformer-attributify-jsx': 0.53.0 - '@unocss/transformer-attributify-jsx-babel': 0.53.0 - '@unocss/transformer-compile-class': 0.53.0 - '@unocss/transformer-directives': 0.53.0 - '@unocss/transformer-variant-group': 0.53.0 - '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9) - transitivePeerDependencies: - - postcss - - rollup - - supports-color - - vite - dev: true - /unpipe@1.0.0: resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==} engines: {node: '>= 0.8'} @@ -14982,24 +14856,6 @@ packages: - supports-color dev: true - /vite-plugin-pwa@0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0): - resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==} - engines: {node: '>=16.0.0'} - peerDependencies: - vite: ^3.1.0 || ^4.0.0 - workbox-build: ^7.0.0 - workbox-window: ^7.0.0 - dependencies: - debug: 4.3.4(supports-color@8.1.1) - fast-glob: 3.2.12 - pretty-bytes: 6.1.0 - vite: 4.3.9(@types/node@18.16.0) - workbox-build: 7.0.0 - workbox-window: 7.0.0 - transitivePeerDependencies: - - supports-color - dev: true - /vite@4.3.3(@types/node@18.16.0): resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==} engines: {node: ^14.18.0 || >=16.0.0} From 29c866b09a3333e149e6845a9a45d0834847eeb9 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 2 Jul 2023 13:22:00 +0530 Subject: [PATCH 115/263] Don't fail CI on codecov error --- .github/codecov.yaml | 2 +- .github/workflows/e2e.yml | 2 +- .github/workflows/test.yml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/codecov.yaml b/.github/codecov.yaml index d33925afc4..3db0811ad1 100644 --- a/.github/codecov.yaml +++ b/.github/codecov.yaml @@ -12,4 +12,4 @@ coverage: status: project: default: - threshold: 1% + threshold: 2% diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index 9bcb1898c0..c204d5872b 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -52,7 +52,7 @@ jobs: files: coverage/cypress/lcov.info flags: e2e name: mermaid-codecov - fail_ci_if_error: true + fail_ci_if_error: false verbose: true - name: Upload Artifacts uses: actions/upload-artifact@v3 diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index e25502ee43..47b726bd1b 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -47,5 +47,5 @@ jobs: files: ./coverage/vitest/lcov.info flags: unit name: mermaid-codecov - fail_ci_if_error: true + fail_ci_if_error: false verbose: true From 592e9c959be891c136cff37c67462580bd8eda59 Mon Sep 17 00:00:00 2001 From: Dmitry Kisler Date: Sun, 2 Jul 2023 17:10:06 +0200 Subject: [PATCH 116/263] 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 | 58 ++++---- 2 files changed, 164 insertions(+), 29 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 0000000000..76dca3bc2a --- /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 03b851458a..1dfa69ef1f 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';} - -"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();} +"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';} + +<> 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 b989ff536216521f7d2e46dc719b2e9d48ccb154 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sun, 2 Jul 2023 23:44:19 +0100 Subject: [PATCH 117/263] fix: change sankey config types to be unions Replace the TypeScript `enum {a = "a", b = "b"}` types with TypeScript's literal types (e.g. `"a" | "b"`). This is because TypeScript enums are [_not_ a type-level addition to JavaScript][1], and even the official TypeScript docs say to be careful when using. [1]: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#enums --- packages/mermaid/src/config.type.ts | 14 ++----------- packages/mermaid/src/defaultConfig.ts | 6 +++--- .../src/diagrams/sankey/sankeyRenderer.ts | 20 +++++++++---------- 3 files changed, 15 insertions(+), 25 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 4d40b33c85..138eee44f3 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -412,18 +412,8 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { wrappingWidth?: number; } -export enum SankeyLinkColor { - source = 'source', - target = 'target', - gradient = 'gradient', -} - -export enum SankeyNodeAlignment { - left = 'left', - right = 'right', - center = 'center', - justify = 'justify', -} +export type SankeyLinkColor = 'source' | 'target' | 'gradient'; +export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify'; export interface SankeyDiagramConfig extends BaseDiagramConfig { width?: number; diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 6e24b63913..488493030f 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -1,5 +1,5 @@ import theme from './themes/index.js'; -import { MermaidConfig, SankeyLinkColor, SankeyNodeAlignment } from './config.type.js'; +import { type MermaidConfig } from './config.type.js'; /** * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click * here](8.6.0_docs.md)].** @@ -2273,8 +2273,8 @@ const config: Partial = { sankey: { width: 800, height: 400, - linkColor: SankeyLinkColor.gradient, - nodeAlignment: SankeyNodeAlignment.justify, + linkColor: 'gradient', + nodeAlignment: 'justify', useMaxWidth: false, }, fontSize: 16, diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index e6e18f1138..a9ee698e90 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -18,17 +18,17 @@ import { } from 'd3-sankey'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import { Uid } from '../../rendering-util/uid.js'; -import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js'; +import type { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js'; // Map config options to alignment functions const alignmentsMap: Record< SankeyNodeAlignment, (node: d3SankeyNode, n: number) => number > = { - [SankeyNodeAlignment.left]: d3SankeyLeft, - [SankeyNodeAlignment.right]: d3SankeyRight, - [SankeyNodeAlignment.center]: d3SankeyCenter, - [SankeyNodeAlignment.justify]: d3SankeyJustify, + left: d3SankeyLeft, + right: d3SankeyRight, + center: d3SankeyCenter, + justify: d3SankeyJustify, }; /** @@ -157,9 +157,9 @@ export const draw = function (text: string, id: string, _version: string, diagOb .attr('class', 'link') .style('mix-blend-mode', 'multiply'); - const linkColor = conf?.linkColor || SankeyLinkColor.gradient; + const linkColor = conf?.linkColor || 'gradient'; - if (linkColor === SankeyLinkColor.gradient) { + if (linkColor === 'gradient') { const gradient = link .append('linearGradient') .attr('id', (d: any) => (d.uid = Uid.next('linearGradient-')).id) @@ -180,13 +180,13 @@ export const draw = function (text: string, id: string, _version: string, diagOb let coloring: any; switch (linkColor) { - case SankeyLinkColor.gradient: + case 'gradient': coloring = (d: any) => d.uid; break; - case SankeyLinkColor.source: + case 'source': coloring = (d: any) => colorScheme(d.source.id); break; - case SankeyLinkColor.target: + case 'target': coloring = (d: any) => colorScheme(d.target.id); break; default: From fbf79ffcc01314c0883bfc77cd5dc19b43ac968d Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sun, 2 Jul 2023 23:56:42 +0100 Subject: [PATCH 118/263] refactor: replace TypeScript enum with JS obj [`const` assertions where added in TypeScript 3.4][1] and can be used to create enum-like objects in plain JavaScript, that act like TypeScript enums, but has none of the downsides of TypeScript enums. [1]: https://devblogs.microsoft.com/typescript/announcing-typescript-3-4/#const-assertions --- packages/mermaid/src/config.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts index 838716e2fb..e006638275 100644 --- a/packages/mermaid/src/config.ts +++ b/packages/mermaid/src/config.ts @@ -226,9 +226,11 @@ export const reset = (config = siteConfig): void => { updateCurrentConfig(config, directives); }; -enum ConfigWarning { - 'LAZY_LOAD_DEPRECATED' = 'The configuration options lazyLoadedDiagrams and loadExternalDiagramsAtStartup are deprecated. Please use registerExternalDiagrams instead.', -} +const ConfigWarning = { + LAZY_LOAD_DEPRECATED: + 'The configuration options lazyLoadedDiagrams and loadExternalDiagramsAtStartup are deprecated. Please use registerExternalDiagrams instead.', +} as const; + type ConfigWarningStrings = keyof typeof ConfigWarning; const issuedWarnings: { [key in ConfigWarningStrings]?: boolean } = {}; const issueWarning = (warning: ConfigWarningStrings) => { From 79688a1dc10139c7d751c270645dd368f85f3d38 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Mon, 3 Jul 2023 00:04:16 +0100 Subject: [PATCH 119/263] build: forbid using TypeScript enums using eslint [TypeScript enums][1] are an unusual TypeScript feature, because it's one of the only features that is "not a type-level extension of JavaScript". This means TypeScript generates custom code for enums, which can cause a bunch of issues, especially as this custom code can be built differently depending on which bundler you use, and because of this, many people discourage the use of enums: - [The Dangers of TypeScript Enums][2] - [Tidy TypeScript: Prefer union types over enums][3] - [TypeScript: Handbook - Enums # Objects vs Enums][4] I've added an ESLint rule that forbids TypeScript enums, as in most cases, it's better to use string literals instead, e.g. like `type a = "a" | "b" | "c";`. [1]: https://www.typescriptlang.org/docs/handbook/enums.html#string-enums [2]: https://dev.to/azure/the-dangers-of-typescript-enums-55pd [3]: https://fettblog.eu/tidy-typescript-avoid-enums/ [4]: https://www.typescriptlang.org/docs/handbook/enums.html#objects-vs-enums --- .eslintrc.cjs | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index e6f99a8bf9..342d15d9ff 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -123,6 +123,14 @@ module.exports = { files: ['*.{ts,tsx}'], plugins: ['tsdoc'], rules: { + 'no-restricted-syntax': [ + 'error', + { + selector: 'TSEnumDeclaration', + message: + 'Prefer using TypeScript union types over TypeScript enum, since TypeScript enums have a bunch of issues, see https://dev.to/dvddpl/whats-the-problem-with-typescript-enums-2okj', + }, + ], 'tsdoc/syntax': 'error', }, }, From d6731a07db9c52e20a0441ff401f4cd50ebde2ed Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 3 Jul 2023 05:18:01 +0000 Subject: [PATCH 120/263] Update all patch dependencies --- packages/mermaid/src/docs/package.json | 2 +- pnpm-lock.yaml | 394 ++++++++++++++++++++++--- 2 files changed, 351 insertions(+), 45 deletions(-) diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index f24f9f4bc4..6e1934022b 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -30,7 +30,7 @@ "unplugin-vue-components": "^0.25.0", "vite": "^4.3.3", "vite-plugin-pwa": "^0.16.0", - "vitepress": "1.0.0-beta.3", + "vitepress": "1.0.0-beta.5", "workbox-window": "^7.0.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9d28e9e506..832703bae9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -446,7 +446,7 @@ importers: version: 1.1.0 unocss: specifier: ^0.53.0 - version: 0.53.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.3) + version: 0.53.0(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.3) unplugin-vue-components: specifier: ^0.25.0 version: 0.25.0(rollup@2.79.1)(vue@3.2.47) @@ -457,8 +457,8 @@ importers: specifier: ^0.16.0 version: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0) vitepress: - specifier: 1.0.0-beta.3 - version: 1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0) + specifier: 1.0.0-beta.5 + version: 1.0.0-beta.5(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0) workbox-window: specifier: ^7.0.0 version: 7.0.0 @@ -2863,6 +2863,15 @@ packages: dev: true optional: true + /@esbuild/android-arm64@0.18.11: + resolution: {integrity: sha512-snieiq75Z1z5LJX9cduSAjUr7vEI1OdlzFPMw0HH5YI7qQHDd3qs+WZoMrWYDsfRJSq36lIA6mfZBkvL46KoIw==} + engines: {node: '>=12'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/android-arm@0.17.18: resolution: {integrity: sha512-EmwL+vUBZJ7mhFCs5lA4ZimpUH3WMAoqvOIYhVQwdIgSpHC8ImHdsRyhHAVxpDYUSm0lWvd63z0XH1IlImS2Qw==} engines: {node: '>=12'} @@ -2881,6 +2890,15 @@ packages: dev: true optional: true + /@esbuild/android-arm@0.18.11: + resolution: {integrity: sha512-q4qlUf5ucwbUJZXF5tEQ8LF7y0Nk4P58hOsGk3ucY0oCwgQqAnqXVbUuahCddVHfrxmpyewRpiTHwVHIETYu7Q==} + engines: {node: '>=12'} + cpu: [arm] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/android-x64@0.17.18: resolution: {integrity: sha512-x+0efYNBF3NPW2Xc5bFOSFW7tTXdAcpfEg2nXmxegm4mJuVeS+i109m/7HMiOQ6M12aVGGFlqJX3RhNdYM2lWg==} engines: {node: '>=12'} @@ -2899,6 +2917,15 @@ packages: dev: true optional: true + /@esbuild/android-x64@0.18.11: + resolution: {integrity: sha512-iPuoxQEV34+hTF6FT7om+Qwziv1U519lEOvekXO9zaMMlT9+XneAhKL32DW3H7okrCOBQ44BMihE8dclbZtTuw==} + engines: {node: '>=12'} + cpu: [x64] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/darwin-arm64@0.17.18: resolution: {integrity: sha512-6tY+djEAdF48M1ONWnQb1C+6LiXrKjmqjzPNPWXhu/GzOHTHX2nh8Mo2ZAmBFg0kIodHhciEgUBtcYCAIjGbjQ==} engines: {node: '>=12'} @@ -2917,6 +2944,15 @@ packages: dev: true optional: true + /@esbuild/darwin-arm64@0.18.11: + resolution: {integrity: sha512-Gm0QkI3k402OpfMKyQEEMG0RuW2LQsSmI6OeO4El2ojJMoF5NLYb3qMIjvbG/lbMeLOGiW6ooU8xqc+S0fgz2w==} + engines: {node: '>=12'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + /@esbuild/darwin-x64@0.17.18: resolution: {integrity: sha512-Qq84ykvLvya3dO49wVC9FFCNUfSrQJLbxhoQk/TE1r6MjHo3sFF2tlJCwMjhkBVq3/ahUisj7+EpRSz0/+8+9A==} engines: {node: '>=12'} @@ -2935,6 +2971,15 @@ packages: dev: true optional: true + /@esbuild/darwin-x64@0.18.11: + resolution: {integrity: sha512-N15Vzy0YNHu6cfyDOjiyfJlRJCB/ngKOAvoBf1qybG3eOq0SL2Lutzz9N7DYUbb7Q23XtHPn6lMDF6uWbGv9Fw==} + engines: {node: '>=12'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + /@esbuild/freebsd-arm64@0.17.18: resolution: {integrity: sha512-fw/ZfxfAzuHfaQeMDhbzxp9mc+mHn1Y94VDHFHjGvt2Uxl10mT4CDavHm+/L9KG441t1QdABqkVYwakMUeyLRA==} engines: {node: '>=12'} @@ -2953,6 +2998,15 @@ packages: dev: true optional: true + /@esbuild/freebsd-arm64@0.18.11: + resolution: {integrity: sha512-atEyuq6a3omEY5qAh5jIORWk8MzFnCpSTUruBgeyN9jZq1K/QI9uke0ATi3MHu4L8c59CnIi4+1jDKMuqmR71A==} + engines: {node: '>=12'} + cpu: [arm64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/freebsd-x64@0.17.18: resolution: {integrity: sha512-FQFbRtTaEi8ZBi/A6kxOC0V0E9B/97vPdYjY9NdawyLd4Qk5VD5g2pbWN2VR1c0xhzcJm74HWpObPszWC+qTew==} engines: {node: '>=12'} @@ -2971,6 +3025,15 @@ packages: dev: true optional: true + /@esbuild/freebsd-x64@0.18.11: + resolution: {integrity: sha512-XtuPrEfBj/YYYnAAB7KcorzzpGTvOr/dTtXPGesRfmflqhA4LMF0Gh/n5+a9JBzPuJ+CGk17CA++Hmr1F/gI0Q==} + engines: {node: '>=12'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-arm64@0.17.18: resolution: {integrity: sha512-R7pZvQZFOY2sxUG8P6A21eq6q+eBv7JPQYIybHVf1XkQYC+lT7nDBdC7wWKTrbvMXKRaGudp/dzZCwL/863mZQ==} engines: {node: '>=12'} @@ -2989,6 +3052,15 @@ packages: dev: true optional: true + /@esbuild/linux-arm64@0.18.11: + resolution: {integrity: sha512-c6Vh2WS9VFKxKZ2TvJdA7gdy0n6eSy+yunBvv4aqNCEhSWVor1TU43wNRp2YLO9Vng2G+W94aRz+ILDSwAiYog==} + engines: {node: '>=12'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-arm@0.17.18: resolution: {integrity: sha512-jW+UCM40LzHcouIaqv3e/oRs0JM76JfhHjCavPxMUti7VAPh8CaGSlS7cmyrdpzSk7A+8f0hiedHqr/LMnfijg==} engines: {node: '>=12'} @@ -3007,6 +3079,15 @@ packages: dev: true optional: true + /@esbuild/linux-arm@0.18.11: + resolution: {integrity: sha512-Idipz+Taso/toi2ETugShXjQ3S59b6m62KmLHkJlSq/cBejixmIydqrtM2XTvNCywFl3VC7SreSf6NV0i6sRyg==} + engines: {node: '>=12'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-ia32@0.17.18: resolution: {integrity: sha512-ygIMc3I7wxgXIxk6j3V00VlABIjq260i967Cp9BNAk5pOOpIXmd1RFQJQX9Io7KRsthDrQYrtcx7QCof4o3ZoQ==} engines: {node: '>=12'} @@ -3025,6 +3106,15 @@ packages: dev: true optional: true + /@esbuild/linux-ia32@0.18.11: + resolution: {integrity: sha512-S3hkIF6KUqRh9n1Q0dSyYcWmcVa9Cg+mSoZEfFuzoYXXsk6196qndrM+ZiHNwpZKi3XOXpShZZ+9dfN5ykqjjw==} + engines: {node: '>=12'} + cpu: [ia32] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-loong64@0.17.18: resolution: {integrity: sha512-bvPG+MyFs5ZlwYclCG1D744oHk1Pv7j8psF5TfYx7otCVmcJsEXgFEhQkbhNW8otDHL1a2KDINW20cfCgnzgMQ==} engines: {node: '>=12'} @@ -3043,6 +3133,15 @@ packages: dev: true optional: true + /@esbuild/linux-loong64@0.18.11: + resolution: {integrity: sha512-MRESANOoObQINBA+RMZW+Z0TJWpibtE7cPFnahzyQHDCA9X9LOmGh68MVimZlM9J8n5Ia8lU773te6O3ILW8kw==} + engines: {node: '>=12'} + cpu: [loong64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-mips64el@0.17.18: resolution: {integrity: sha512-oVqckATOAGuiUOa6wr8TXaVPSa+6IwVJrGidmNZS1cZVx0HqkTMkqFGD2HIx9H1RvOwFeWYdaYbdY6B89KUMxA==} engines: {node: '>=12'} @@ -3061,6 +3160,15 @@ packages: dev: true optional: true + /@esbuild/linux-mips64el@0.18.11: + resolution: {integrity: sha512-qVyPIZrXNMOLYegtD1u8EBccCrBVshxMrn5MkuFc3mEVsw7CCQHaqZ4jm9hbn4gWY95XFnb7i4SsT3eflxZsUg==} + engines: {node: '>=12'} + cpu: [mips64el] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-ppc64@0.17.18: resolution: {integrity: sha512-3dLlQO+b/LnQNxgH4l9rqa2/IwRJVN9u/bK63FhOPB4xqiRqlQAU0qDU3JJuf0BmaH0yytTBdoSBHrb2jqc5qQ==} engines: {node: '>=12'} @@ -3079,6 +3187,15 @@ packages: dev: true optional: true + /@esbuild/linux-ppc64@0.18.11: + resolution: {integrity: sha512-T3yd8vJXfPirZaUOoA9D2ZjxZX4Gr3QuC3GztBJA6PklLotc/7sXTOuuRkhE9W/5JvJP/K9b99ayPNAD+R+4qQ==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-riscv64@0.17.18: resolution: {integrity: sha512-/x7leOyDPjZV3TcsdfrSI107zItVnsX1q2nho7hbbQoKnmoeUWjs+08rKKt4AUXju7+3aRZSsKrJtaRmsdL1xA==} engines: {node: '>=12'} @@ -3097,6 +3214,15 @@ packages: dev: true optional: true + /@esbuild/linux-riscv64@0.18.11: + resolution: {integrity: sha512-evUoRPWiwuFk++snjH9e2cAjF5VVSTj+Dnf+rkO/Q20tRqv+644279TZlPK8nUGunjPAtQRCj1jQkDAvL6rm2w==} + engines: {node: '>=12'} + cpu: [riscv64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-s390x@0.17.18: resolution: {integrity: sha512-cX0I8Q9xQkL/6F5zWdYmVf5JSQt+ZfZD2bJudZrWD+4mnUvoZ3TDDXtDX2mUaq6upMFv9FlfIh4Gfun0tbGzuw==} engines: {node: '>=12'} @@ -3115,6 +3241,15 @@ packages: dev: true optional: true + /@esbuild/linux-s390x@0.18.11: + resolution: {integrity: sha512-/SlRJ15XR6i93gRWquRxYCfhTeC5PdqEapKoLbX63PLCmAkXZHY2uQm2l9bN0oPHBsOw2IswRZctMYS0MijFcg==} + engines: {node: '>=12'} + cpu: [s390x] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-x64@0.17.18: resolution: {integrity: sha512-66RmRsPlYy4jFl0vG80GcNRdirx4nVWAzJmXkevgphP1qf4dsLQCpSKGM3DUQCojwU1hnepI63gNZdrr02wHUA==} engines: {node: '>=12'} @@ -3133,6 +3268,15 @@ packages: dev: true optional: true + /@esbuild/linux-x64@0.18.11: + resolution: {integrity: sha512-xcncej+wF16WEmIwPtCHi0qmx1FweBqgsRtEL1mSHLFR6/mb3GEZfLQnx+pUDfRDEM4DQF8dpXIW7eDOZl1IbA==} + engines: {node: '>=12'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/netbsd-x64@0.17.18: resolution: {integrity: sha512-95IRY7mI2yrkLlTLb1gpDxdC5WLC5mZDi+kA9dmM5XAGxCME0F8i4bYH4jZreaJ6lIZ0B8hTrweqG1fUyW7jbg==} engines: {node: '>=12'} @@ -3151,6 +3295,15 @@ packages: dev: true optional: true + /@esbuild/netbsd-x64@0.18.11: + resolution: {integrity: sha512-aSjMHj/F7BuS1CptSXNg6S3M4F3bLp5wfFPIJM+Km2NfIVfFKhdmfHF9frhiCLIGVzDziggqWll0B+9AUbud/Q==} + engines: {node: '>=12'} + cpu: [x64] + os: [netbsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/openbsd-x64@0.17.18: resolution: {integrity: sha512-WevVOgcng+8hSZ4Q3BKL3n1xTv5H6Nb53cBrtzzEjDbbnOmucEVcZeGCsCOi9bAOcDYEeBZbD2SJNBxlfP3qiA==} engines: {node: '>=12'} @@ -3169,6 +3322,15 @@ packages: dev: true optional: true + /@esbuild/openbsd-x64@0.18.11: + resolution: {integrity: sha512-tNBq+6XIBZtht0xJGv7IBB5XaSyvYPCm1PxJ33zLQONdZoLVM0bgGqUrXnJyiEguD9LU4AHiu+GCXy/Hm9LsdQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [openbsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/sunos-x64@0.17.18: resolution: {integrity: sha512-Rzf4QfQagnwhQXVBS3BYUlxmEbcV7MY+BH5vfDZekU5eYpcffHSyjU8T0xucKVuOcdCsMo+Ur5wmgQJH2GfNrg==} engines: {node: '>=12'} @@ -3187,6 +3349,15 @@ packages: dev: true optional: true + /@esbuild/sunos-x64@0.18.11: + resolution: {integrity: sha512-kxfbDOrH4dHuAAOhr7D7EqaYf+W45LsAOOhAet99EyuxxQmjbk8M9N4ezHcEiCYPaiW8Dj3K26Z2V17Gt6p3ng==} + engines: {node: '>=12'} + cpu: [x64] + os: [sunos] + requiresBuild: true + dev: true + optional: true + /@esbuild/win32-arm64@0.17.18: resolution: {integrity: sha512-Kb3Ko/KKaWhjeAm2YoT/cNZaHaD1Yk/pa3FTsmqo9uFh1D1Rfco7BBLIPdDOozrObj2sahslFuAQGvWbgWldAg==} engines: {node: '>=12'} @@ -3205,6 +3376,15 @@ packages: dev: true optional: true + /@esbuild/win32-arm64@0.18.11: + resolution: {integrity: sha512-Sh0dDRyk1Xi348idbal7lZyfSkjhJsdFeuC13zqdipsvMetlGiFQNdO+Yfp6f6B4FbyQm7qsk16yaZk25LChzg==} + engines: {node: '>=12'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@esbuild/win32-ia32@0.17.18: resolution: {integrity: sha512-0/xUMIdkVHwkvxfbd5+lfG7mHOf2FRrxNbPiKWg9C4fFrB8H0guClmaM3BFiRUYrznVoyxTIyC/Ou2B7QQSwmw==} engines: {node: '>=12'} @@ -3223,6 +3403,15 @@ packages: dev: true optional: true + /@esbuild/win32-ia32@0.18.11: + resolution: {integrity: sha512-o9JUIKF1j0rqJTFbIoF4bXj6rvrTZYOrfRcGyL0Vm5uJ/j5CkBD/51tpdxe9lXEDouhRgdr/BYzUrDOvrWwJpg==} + engines: {node: '>=12'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@esbuild/win32-x64@0.17.18: resolution: {integrity: sha512-qU25Ma1I3NqTSHJUOKi9sAH1/Mzuvlke0ioMJRthLXKm7JiSKVwFghlGbDLOO2sARECGhja4xYfRAZNPAkooYg==} engines: {node: '>=12'} @@ -3241,6 +3430,15 @@ packages: dev: true optional: true + /@esbuild/win32-x64@0.18.11: + resolution: {integrity: sha512-rQI4cjLHd2hGsM1LqgDI7oOCYbQ6IBOVsX9ejuRMSze0GqXUG2ekwiKkiBU1pRGSeCqFFHxTrcEydB2Hyoz9CA==} + engines: {node: '>=12'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@eslint-community/eslint-utils@4.4.0(eslint@8.39.0): resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -4732,7 +4930,7 @@ packages: sirv: 2.0.3 dev: true - /@unocss/postcss@0.53.0(postcss@8.4.23): + /@unocss/postcss@0.53.0(postcss@8.4.24): resolution: {integrity: sha512-q+5aDvkwP1eEhDmdz32WrwsGEEcJdQLy3apiU/df+CaL71HATvUfMZJVZbXZlFqoed703c+cGLHOhRHMPDk/dw==} engines: {node: '>=14'} peerDependencies: @@ -4743,7 +4941,7 @@ packages: css-tree: 2.3.1 fast-glob: 3.2.12 magic-string: 0.30.0 - postcss: 8.4.23 + postcss: 8.4.24 dev: true /@unocss/preset-attributify@0.53.0: @@ -4893,14 +5091,14 @@ packages: vue: 3.3.4 dev: true - /@vitejs/plugin-vue@4.2.3(vite@4.3.9)(vue@3.3.4): + /@vitejs/plugin-vue@4.2.3(vite@4.4.0-beta.3)(vue@3.3.4): resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: vite: ^4.0.0 vue: ^3.2.25 dependencies: - vite: 4.3.9(@types/node@18.16.0) + vite: 4.4.0-beta.3(@types/node@18.16.0) vue: 3.3.4 dev: true @@ -5029,7 +5227,7 @@ packages: '@vue/shared': 3.2.47 estree-walker: 2.0.2 magic-string: 0.25.9 - postcss: 8.4.23 + postcss: 8.4.24 source-map: 0.6.1 /@vue/compiler-sfc@3.3.4: @@ -5043,7 +5241,7 @@ packages: '@vue/shared': 3.3.4 estree-walker: 2.0.2 magic-string: 0.30.0 - postcss: 8.4.23 + postcss: 8.4.24 source-map-js: 1.0.2 /@vue/compiler-ssr@3.2.47: @@ -5157,14 +5355,26 @@ packages: '@types/web-bluetooth': 0.0.17 '@vueuse/metadata': 10.1.2 '@vueuse/shared': 10.1.2(vue@3.3.4) - vue-demi: 0.14.0(vue@3.3.4) + vue-demi: 0.14.5(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue dev: true - /@vueuse/integrations@10.1.2(focus-trap@7.4.3)(vue@3.3.4): - resolution: {integrity: sha512-wUpG3Wv6LiWerOwCzOAM0iGhNQ4vfFUTkhj/xQy7TLXduh2M3D8N08aS0KqlxsejY6R8NLxydDIM+68QfHZZ8Q==} + /@vueuse/core@10.2.1(vue@3.3.4): + resolution: {integrity: sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==} + dependencies: + '@types/web-bluetooth': 0.0.17 + '@vueuse/metadata': 10.2.1 + '@vueuse/shared': 10.2.1(vue@3.3.4) + vue-demi: 0.14.5(vue@3.3.4) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: true + + /@vueuse/integrations@10.2.1(focus-trap@7.4.3)(vue@3.3.4): + resolution: {integrity: sha512-FDP5lni+z9FjHE9H3xuvwSjoRV9U8jmDvJpmHPCBjUgPGYRynwb60eHWXCFJXLUtb4gSIHy0e+iaEbrKdalCkQ==} peerDependencies: async-validator: '*' axios: '*' @@ -5204,10 +5414,10 @@ packages: universal-cookie: optional: true dependencies: - '@vueuse/core': 10.1.2(vue@3.3.4) - '@vueuse/shared': 10.1.2(vue@3.3.4) + '@vueuse/core': 10.2.1(vue@3.3.4) + '@vueuse/shared': 10.2.1(vue@3.3.4) focus-trap: 7.4.3 - vue-demi: 0.14.0(vue@3.3.4) + vue-demi: 0.14.5(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -5221,6 +5431,10 @@ packages: resolution: {integrity: sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ==} dev: true + /@vueuse/metadata@10.2.1: + resolution: {integrity: sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==} + dev: true + /@vueuse/shared@10.1.0(vue@3.2.47): resolution: {integrity: sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==} dependencies: @@ -5233,7 +5447,16 @@ packages: /@vueuse/shared@10.1.2(vue@3.3.4): resolution: {integrity: sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==} dependencies: - vue-demi: 0.14.0(vue@3.3.4) + vue-demi: 0.14.5(vue@3.3.4) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: true + + /@vueuse/shared@10.2.1(vue@3.3.4): + resolution: {integrity: sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==} + dependencies: + vue-demi: 0.14.5(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -8012,6 +8235,36 @@ packages: '@esbuild/win32-x64': 0.18.0 dev: true + /esbuild@0.18.11: + resolution: {integrity: sha512-i8u6mQF0JKJUlGR3OdFLKldJQMMs8OqM9Cc3UCi9XXziJ9WERM5bfkHaEAy0YAvPRMgqSW55W7xYn84XtEFTtA==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + optionalDependencies: + '@esbuild/android-arm': 0.18.11 + '@esbuild/android-arm64': 0.18.11 + '@esbuild/android-x64': 0.18.11 + '@esbuild/darwin-arm64': 0.18.11 + '@esbuild/darwin-x64': 0.18.11 + '@esbuild/freebsd-arm64': 0.18.11 + '@esbuild/freebsd-x64': 0.18.11 + '@esbuild/linux-arm': 0.18.11 + '@esbuild/linux-arm64': 0.18.11 + '@esbuild/linux-ia32': 0.18.11 + '@esbuild/linux-loong64': 0.18.11 + '@esbuild/linux-mips64el': 0.18.11 + '@esbuild/linux-ppc64': 0.18.11 + '@esbuild/linux-riscv64': 0.18.11 + '@esbuild/linux-s390x': 0.18.11 + '@esbuild/linux-x64': 0.18.11 + '@esbuild/netbsd-x64': 0.18.11 + '@esbuild/openbsd-x64': 0.18.11 + '@esbuild/sunos-x64': 0.18.11 + '@esbuild/win32-arm64': 0.18.11 + '@esbuild/win32-ia32': 0.18.11 + '@esbuild/win32-x64': 0.18.11 + dev: true + /escalade@3.1.1: resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} engines: {node: '>=6'} @@ -12440,29 +12693,29 @@ packages: hasBin: true dev: true - /postcss-import@15.1.0(postcss@8.4.23): + /postcss-import@15.1.0(postcss@8.4.24): resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} peerDependencies: postcss: ^8.0.0 dependencies: - postcss: 8.4.23 + postcss: 8.4.24 postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.2 dev: false - /postcss-js@4.0.1(postcss@8.4.23): + /postcss-js@4.0.1(postcss@8.4.24): resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} peerDependencies: postcss: ^8.4.21 dependencies: camelcase-css: 2.0.1 - postcss: 8.4.23 + postcss: 8.4.24 dev: false - /postcss-load-config@4.0.1(postcss@8.4.23)(ts-node@10.9.1): + /postcss-load-config@4.0.1(postcss@8.4.24)(ts-node@10.9.1): resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==} engines: {node: '>= 14'} peerDependencies: @@ -12475,18 +12728,18 @@ packages: optional: true dependencies: lilconfig: 2.1.0 - postcss: 8.4.23 + postcss: 8.4.24 ts-node: 10.9.1(@types/node@18.16.0)(typescript@5.1.3) yaml: 2.2.2 dev: false - /postcss-nested@6.0.1(postcss@8.4.23): + /postcss-nested@6.0.1(postcss@8.4.24): resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} engines: {node: '>=12.0'} peerDependencies: postcss: ^8.2.14 dependencies: - postcss: 8.4.23 + postcss: 8.4.24 postcss-selector-parser: 6.0.13 dev: false @@ -12510,6 +12763,14 @@ packages: picocolors: 1.0.0 source-map-js: 1.0.2 + /postcss@8.4.24: + resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.6 + picocolors: 1.0.0 + source-map-js: 1.0.2 + /preact@10.11.0: resolution: {integrity: sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==} dev: true @@ -13156,6 +13417,14 @@ packages: fsevents: 2.3.2 dev: true + /rollup@3.26.0: + resolution: {integrity: sha512-YzJH0eunH2hr3knvF3i6IkLO/jTjAEwU4HoMUbQl4//Tnl3ou0e7P5SjxdDr8HQJdeUJShlbEHXrrnEHy1l7Yg==} + engines: {node: '>=14.18.0', npm: '>=8.0.0'} + hasBin: true + optionalDependencies: + fsevents: 2.3.2 + dev: true + /rrweb-cssom@0.6.0: resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==} dev: true @@ -13436,8 +13705,8 @@ packages: vscode-textmate: 8.0.0 dev: true - /shiki@0.14.2: - resolution: {integrity: sha512-ltSZlSLOuSY0M0Y75KA+ieRaZ0Trf5Wl3gutE7jzLuIcWxLp5i/uEnLoQWNvgKXQ5OMpGkJnVMRLAuzjc0LJ2A==} + /shiki@0.14.3: + resolution: {integrity: sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==} dependencies: ansi-sequence-parser: 1.1.0 jsonc-parser: 3.2.0 @@ -13986,11 +14255,11 @@ packages: normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.0.0 - postcss: 8.4.23 - postcss-import: 15.1.0(postcss@8.4.23) - postcss-js: 4.0.1(postcss@8.4.23) - postcss-load-config: 4.0.1(postcss@8.4.23)(ts-node@10.9.1) - postcss-nested: 6.0.1(postcss@8.4.23) + postcss: 8.4.24 + postcss-import: 15.1.0(postcss@8.4.24) + postcss-js: 4.0.1(postcss@8.4.24) + postcss-load-config: 4.0.1(postcss@8.4.24)(ts-node@10.9.1) + postcss-nested: 6.0.1(postcss@8.4.24) postcss-selector-parser: 6.0.13 postcss-value-parser: 4.2.0 resolve: 1.22.2 @@ -14596,7 +14865,7 @@ packages: engines: {node: '>= 10.0.0'} dev: true - /unocss@0.53.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.3): + /unocss@0.53.0(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.3): resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==} engines: {node: '>=14'} peerDependencies: @@ -14609,7 +14878,7 @@ packages: '@unocss/cli': 0.53.0(rollup@2.79.1) '@unocss/core': 0.53.0 '@unocss/extractor-arbitrary-variants': 0.53.0 - '@unocss/postcss': 0.53.0(postcss@8.4.23) + '@unocss/postcss': 0.53.0(postcss@8.4.24) '@unocss/preset-attributify': 0.53.0 '@unocss/preset-icons': 0.53.0 '@unocss/preset-mini': 0.53.0 @@ -14916,8 +15185,8 @@ packages: dependencies: '@types/node': 18.16.0 esbuild: 0.17.18 - postcss: 8.4.23 - rollup: 3.21.0 + postcss: 8.4.24 + rollup: 3.26.0 optionalDependencies: fsevents: 2.3.2 dev: true @@ -14955,6 +15224,42 @@ packages: fsevents: 2.3.2 dev: true + /vite@4.4.0-beta.3(@types/node@18.16.0): + resolution: {integrity: sha512-IC/thYTvArOFRJ4qvvudnu4KKZOVc+gduS3I9OfC5SbP/Rf4kkP7z6Of2QpKeOSVqwIK24khW6VOUmVD/0yzSQ==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + '@types/node': 18.16.0 + esbuild: 0.18.11 + postcss: 8.4.24 + rollup: 3.26.0 + optionalDependencies: + fsevents: 2.3.2 + dev: true + /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.4): resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==} engines: {node: ^14.13.1 || ^16.7.0 || >=18} @@ -15001,22 +15306,22 @@ packages: - terser dev: true - /vitepress@1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0): - resolution: {integrity: sha512-GR5Pvr/o343NN1M4Na1shhDYZRrQbjmLq7WE0lla0H8iDPAsHE8agTHLWfu3FWx+3q2KA29sv16+0O9RQKGjlA==} + /vitepress@1.0.0-beta.5(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0): + resolution: {integrity: sha512-/RjqqRsSEKkzF6HhK5e5Ij+bZ7ETb9jNCRRgIMm10gJ+ZLC3D1OqkE465lEqCeJUgt2HZ6jmWjDqIBfrJSpv7w==} hasBin: true dependencies: '@docsearch/css': 3.5.1 '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0) - '@vitejs/plugin-vue': 4.2.3(vite@4.3.9)(vue@3.3.4) + '@vitejs/plugin-vue': 4.2.3(vite@4.4.0-beta.3)(vue@3.3.4) '@vue/devtools-api': 6.5.0 - '@vueuse/core': 10.1.2(vue@3.3.4) - '@vueuse/integrations': 10.1.2(focus-trap@7.4.3)(vue@3.3.4) + '@vueuse/core': 10.2.1(vue@3.3.4) + '@vueuse/integrations': 10.2.1(focus-trap@7.4.3)(vue@3.3.4) body-scroll-lock: 4.0.0-beta.0 focus-trap: 7.4.3 mark.js: 8.11.1 minisearch: 6.1.0 - shiki: 0.14.2 - vite: 4.3.9(@types/node@18.16.0) + shiki: 0.14.3 + vite: 4.4.0-beta.3(@types/node@18.16.0) vue: 3.3.4 transitivePeerDependencies: - '@algolia/client-search' @@ -15031,6 +15336,7 @@ packages: - idb-keyval - jwt-decode - less + - lightningcss - nprogress - qrcode - react @@ -15168,8 +15474,8 @@ packages: vue: 3.2.47 dev: false - /vue-demi@0.14.0(vue@3.3.4): - resolution: {integrity: sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==} + /vue-demi@0.14.5(vue@3.3.4): + resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==} engines: {node: '>=12'} hasBin: true requiresBuild: true From 8e15e534eab6d917c1f4f3769de3eafb994b77fe Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 3 Jul 2023 19:19:11 +0530 Subject: [PATCH 121/263] Add codecov token --- .github/workflows/test.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 47b726bd1b..ba77d83bc5 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -49,3 +49,4 @@ jobs: name: mermaid-codecov fail_ci_if_error: false verbose: true + token: 6845cc80-77ee-4e17-85a1-026cd95e0766 From 288f51216d06f8e834a11d5d0c9ee679b0aedb16 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 3 Jul 2023 21:01:04 +0530 Subject: [PATCH 122/263] Add codecov token --- .github/workflows/e2e.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index c204d5872b..63e20e5759 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -54,6 +54,7 @@ jobs: name: mermaid-codecov fail_ci_if_error: false verbose: true + token: 6845cc80-77ee-4e17-85a1-026cd95e0766 - name: Upload Artifacts uses: actions/upload-artifact@v3 if: ${{ failure() && steps.cypress.conclusion == 'failure' }} From d5021cab1d31281548ba9f6f701c297c8ee848e7 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Mon, 3 Jul 2023 18:57:26 +0300 Subject: [PATCH 123/263] Remove double parsing --- packages/mermaid/src/diagrams/class/classRenderer.js | 2 -- packages/mermaid/src/diagrams/er/erRenderer.js | 7 ------- packages/mermaid/src/diagrams/flowchart/flowRenderer.js | 7 ------- packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 2 -- packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js | 7 ------- packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js | 6 ------ packages/mermaid/src/diagrams/pie/pieRenderer.js | 3 --- .../src/diagrams/requirement/requirementRenderer.js | 2 -- packages/mermaid/src/diagrams/state/stateRenderer.js | 2 -- packages/mermaid/src/diagrams/timeline/timelineRenderer.ts | 6 ------ .../mermaid/src/diagrams/user-journey/journeyRenderer.ts | 2 -- 11 files changed, 46 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/classRenderer.js b/packages/mermaid/src/diagrams/class/classRenderer.js index 3774f7b8ca..58def16c2a 100644 --- a/packages/mermaid/src/diagrams/class/classRenderer.js +++ b/packages/mermaid/src/diagrams/class/classRenderer.js @@ -141,8 +141,6 @@ const insertMarkers = function (elem) { export const draw = function (text, id, _version, diagObj) { const conf = getConfig().class; idCache = {}; - // diagObj.db.clear(); - // diagObj.parser.parse(text); log.info('Rendering diagram ' + text); diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js index 93e22732a1..63fb056339 100644 --- a/packages/mermaid/src/diagrams/er/erRenderer.js +++ b/packages/mermaid/src/diagrams/er/erRenderer.js @@ -568,13 +568,6 @@ export const draw = function (text, id, _version, diagObj) { : select('body'); // const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; - // Parse the text to populate erDb - // try { - // parser.parse(text); - // } catch (err) { - // log.debug('Parsing failed'); - // } - // Get a reference to the svg node that contains the text const svg = root.select(`[id='${id}']`); diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js index f69fe93ebc..4382aa9a44 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js @@ -306,13 +306,6 @@ export const draw = function (text, id, _version, diagObj) { : select('body'); const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; - // Parse the graph definition - try { - diagObj.parser.parse(text); - } catch (err) { - log.debug('Parsing failed'); - } - // Fetch the default direction, use TD if none was found let dir = diagObj.db.getDirection(); if (dir === undefined) { diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index ff16fef7c7..215a4df29d 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -59,8 +59,6 @@ let w; export const draw = function (text, id, version, diagObj) { const conf = getConfig().gantt; - // diagObj.db.clear(); - // parser.parse(text); const securityLevel = getConfig().securityLevel; // Handle root and Document for when rendering in sandbox mode let sandboxElement; diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js index b8cff72ec2..a3b05ad79f 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js @@ -1,7 +1,6 @@ import { curveBasis, line, select } from 'd3'; import db from './gitGraphAst.js'; -import gitGraphParser from './parser/gitGraph.js'; import { logger } from '../../logger.js'; import { interpolateToCurve } from '../../utils.js'; @@ -328,13 +327,7 @@ function renderLines(svg, commit, direction, branchColor = 0) { export const draw = function (txt, id, ver) { try { - const parser = gitGraphParser.parser; - parser.yy = db; - parser.yy.clear(); - logger.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver); - // Parse the graph definition - parser.parse(txt + '\n'); config = Object.assign(config, apiConfig, db.getOptions()); logger.debug('effective options', config); diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js index 01d675d839..7e741657b9 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js @@ -167,14 +167,8 @@ function positionNodes(cy) { export const draw = async (text, id, version, diagObj) => { const conf = getConfig(); - // console.log('Config: ', conf); conf.htmlLabels = false; - // This is done only for throwing the error if the text is not valid. - diagObj.db.clear(); - // Parse the graph definition - diagObj.parser.parse(text); - log.debug('Rendering mindmap diagram\n' + text, diagObj.parser); const securityLevel = getConfig().securityLevel; diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js index 1ee34e192a..d4242c087a 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.js +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js @@ -33,9 +33,6 @@ export const draw = (txt, id, _version, diagObj) => { const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; // Parse the Pie Chart definition - diagObj.db.clear(); - diagObj.parser.parse(txt); - log.debug('Parsed info diagram'); const elem = doc.getElementById(id); width = elem.parentElement.offsetWidth; diff --git a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js index b88f5c2033..49b7828651 100644 --- a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js +++ b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js @@ -306,8 +306,6 @@ const elementString = (str) => { export const draw = (text, id, _version, diagObj) => { conf = getConfig().requirement; - diagObj.db.clear(); - diagObj.parser.parse(text); const securityLevel = conf.securityLevel; // Handle root and Document for when rendering in sandbox mode diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js index 74913a748a..689d7a0e52 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer.js +++ b/packages/mermaid/src/diagrams/state/stateRenderer.js @@ -57,8 +57,6 @@ export const draw = function (text, id, _version, diagObj) { : select('body'); const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; - // diagObj.db.clear(); - // parser.parse(text); log.debug('Rendering diagram ' + text); // Fetch the default direction, use TD if none was found diff --git a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts index 17460bac2d..d44174fe49 100644 --- a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts +++ b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts @@ -30,12 +30,6 @@ export const draw = function (text: string, id: string, version: string, diagObj // @ts-expect-error - wrong config? const LEFT_MARGIN = conf.leftMargin ?? 50; - //2. Clear the diagram db before parsing - diagObj.db.clear?.(); - - //3. Parse the diagram text - diagObj.parser.parse(text + '\n'); - log.debug('timeline', diagObj.db); const securityLevel = conf.securityLevel; diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts index 9ea880f691..28c83f19d7 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts +++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts @@ -49,8 +49,6 @@ const conf = getConfig().journey; const LEFT_MARGIN = conf.leftMargin; export const draw = function (text, id, version, diagObj) { const conf = getConfig().journey; - diagObj.db.clear(); - diagObj.parser.parse(text + '\n'); const securityLevel = getConfig().securityLevel; // Handle root and Document for when rendering in sandbox mode From 5a94256e4f90978ad5dc58c0e8af70478cee9e6a Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Mon, 3 Jul 2023 15:11:02 -0300 Subject: [PATCH 124/263] Allow entity diagram attribute names to start with asterisk --- .../mermaid/src/diagrams/er/parser/erDiagram.jison | 2 +- .../mermaid/src/diagrams/er/parser/erDiagram.spec.js | 10 ++++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison index 0c6820b495..0a2549268d 100644 --- a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison +++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison @@ -30,7 +30,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili \s+ /* skip whitespace in block */ \b((?:PK)|(?:FK)|(?:UK))\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/diagrams/er/parser/erDiagram.spec.js b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js index 6fdc9eaa73..4ab09b2f87 100644 --- a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js +++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js @@ -154,6 +154,16 @@ 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 () { + const entity = 'BOOK'; + const attribute = 'string *title'; + + erDiagram.parser.parse(`erDiagram\n${entity}{${attribute}}`); + const entities = erDb.getEntities(); + expect(Object.keys(entities).length).toBe(1); + expect(entities[entity].attributes.length).toBe(1); + }); + it('should not allow leading numbers, dashes or brackets', function () { const entity = 'BOOK'; const nonLeadingChars = '0-[]()'; From 12fe6ff26ec4fbb6518611a4a200373a73c01369 Mon Sep 17 00:00:00 2001 From: Lishid Date: Mon, 3 Jul 2023 18:56:00 -0700 Subject: [PATCH 125/263] Fix lint. --- packages/mermaid/src/diagrams/flowchart/flowDb.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index 81a9afb946..ea8fa71d2b 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -342,7 +342,9 @@ export const setLink = function (ids, linkStr, target) { setClass(ids, 'clickable'); }; export const getTooltip = function (id) { - if (tooltips.hasOwnProperty(id)) return tooltips[id]; + if (tooltips.hasOwnProperty(id)) { + return tooltips[id]; + } return undefined; }; From 8449a446078ddb5586d0b399f307980448aaf342 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Wed, 5 Jul 2023 01:15:22 +0300 Subject: [PATCH 126/263] Sankey: Remove duplicated examples --- packages/mermaid/src/docs/syntax/sankey.md | 110 --------------------- 1 file changed, 110 deletions(-) diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md index 32f3663b98..914c7024ba 100644 --- a/packages/mermaid/src/docs/syntax/sankey.md +++ b/packages/mermaid/src/docs/syntax/sankey.md @@ -12,81 +12,6 @@ The things being connected are called nodes and the connections are called links This example taken from [observable](https://observablehq.com/@d3/sankey/2?collection=@d3/d3-sankey). It may be rendered a little bit differently, though, in terms of size and colors. -```mermaid -sankey-beta - -Agricultural 'waste',Bio-conversion,124.729 -Bio-conversion,Liquid,0.597 -Bio-conversion,Losses,26.862 -Bio-conversion,Solid,280.322 -Bio-conversion,Gas,81.144 -Biofuel imports,Liquid,35 -Biomass imports,Solid,35 -Coal imports,Coal,11.606 -Coal reserves,Coal,63.965 -Coal,Solid,75.571 -District heating,Industry,10.639 -District heating,Heating and cooling - commercial,22.505 -District heating,Heating and cooling - homes,46.184 -Electricity grid,Over generation / exports,104.453 -Electricity grid,Heating and cooling - homes,113.726 -Electricity grid,H2 conversion,27.14 -Electricity grid,Industry,342.165 -Electricity grid,Road transport,37.797 -Electricity grid,Agriculture,4.412 -Electricity grid,Heating and cooling - commercial,40.858 -Electricity grid,Losses,56.691 -Electricity grid,Rail transport,7.863 -Electricity grid,Lighting & appliances - commercial,90.008 -Electricity grid,Lighting & appliances - homes,93.494 -Gas imports,Ngas,40.719 -Gas reserves,Ngas,82.233 -Gas,Heating and cooling - commercial,0.129 -Gas,Losses,1.401 -Gas,Thermal generation,151.891 -Gas,Agriculture,2.096 -Gas,Industry,48.58 -Geothermal,Electricity grid,7.013 -H2 conversion,H2,20.897 -H2 conversion,Losses,6.242 -H2,Road transport,20.897 -Hydro,Electricity grid,6.995 -Liquid,Industry,121.066 -Liquid,International shipping,128.69 -Liquid,Road transport,135.835 -Liquid,Domestic aviation,14.458 -Liquid,International aviation,206.267 -Liquid,Agriculture,3.64 -Liquid,National navigation,33.218 -Liquid,Rail transport,4.413 -Marine algae,Bio-conversion,4.375 -Ngas,Gas,122.952 -Nuclear,Thermal generation,839.978 -Oil imports,Oil,504.287 -Oil reserves,Oil,107.703 -Oil,Liquid,611.99 -Other waste,Solid,56.587 -Other waste,Bio-conversion,77.81 -Pumped heat,Heating and cooling - homes,193.026 -Pumped heat,Heating and cooling - commercial,70.672 -Solar PV,Electricity grid,59.901 -Solar Thermal,Heating and cooling - homes,19.263 -Solar,Solar Thermal,19.263 -Solar,Solar PV,59.901 -Solid,Agriculture,0.882 -Solid,Thermal generation,400.12 -Solid,Industry,46.477 -Thermal generation,Electricity grid,525.531 -Thermal generation,Losses,787.129 -Thermal generation,District heating,79.329 -Tidal,Electricity grid,9.452 -UK land based bioenergy,Bio-conversion,182.01 -Wave,Electricity grid,19.013 -Wind,Electricity grid,289.366 -``` - -::: details - ```mermaid-example sankey-beta @@ -160,8 +85,6 @@ Wave,Electricity grid,19.013 Wind,Electricity grid,289.366 ``` -::: - ## Syntax The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result. @@ -184,15 +107,6 @@ Electricity grid,Heating and cooling - homes,113.726 Electricity grid,H2 conversion,27.14 ``` -```mermaid -sankey-beta - -%% source,target,value -Electricity grid,Over generation / exports,104.453 -Electricity grid,Heating and cooling - homes,113.726 -Electricity grid,H2 conversion,27.14 -``` - ### Empty Lines CSV does not support empty lines without comma delimeters by default. But you can add them if needed: @@ -207,16 +121,6 @@ Bio-conversion,Solid,280.322 Bio-conversion,Gas,81.144 ``` -```mermaid -sankey-beta - -Bio-conversion,Losses,26.862 - -Bio-conversion,Solid,280.322 - -Bio-conversion,Gas,81.144 -``` - ### Commas If you need to have a comma, wrap it in double quotes: @@ -228,13 +132,6 @@ Pumped heat,"Heating and cooling, homes",193.026 Pumped heat,"Heating and cooling, commercial",70.672 ``` -```mermaid -sankey-beta - -Pumped heat,"Heating and cooling, homes",193.026 -Pumped heat,"Heating and cooling, commercial",70.672 -``` - ### Double Quotes If you need to have double quote, put a pair of them inside quoted string: @@ -246,13 +143,6 @@ Pumped heat,"Heating and cooling, ""homes""",193.026 Pumped heat,"Heating and cooling, ""commercial""",70.672 ``` -```mermaid -sankey-beta - -Pumped heat,"Heating and cooling, ""homes""",193.026 -Pumped heat,"Heating and cooling, ""commercial""",70.672 -``` - ## Configuration You can customize link colors, node alignments and diagram dimensions. From 6f03e22cc410fb2f9103dc161087a9ac75712244 Mon Sep 17 00:00:00 2001 From: nirname Date: Tue, 4 Jul 2023 22:18:57 +0000 Subject: [PATCH 127/263] Update docs --- docs/syntax/sankey.md | 216 ------------------------------------------ 1 file changed, 216 deletions(-) diff --git a/docs/syntax/sankey.md b/docs/syntax/sankey.md index bfbfc3621e..156e82f5ae 100644 --- a/docs/syntax/sankey.md +++ b/docs/syntax/sankey.md @@ -164,156 +164,6 @@ Wave,Electricity grid,19.013 Wind,Electricity grid,289.366 ``` -::: details - -```mermaid-example -sankey-beta - -Agricultural 'waste',Bio-conversion,124.729 -Bio-conversion,Liquid,0.597 -Bio-conversion,Losses,26.862 -Bio-conversion,Solid,280.322 -Bio-conversion,Gas,81.144 -Biofuel imports,Liquid,35 -Biomass imports,Solid,35 -Coal imports,Coal,11.606 -Coal reserves,Coal,63.965 -Coal,Solid,75.571 -District heating,Industry,10.639 -District heating,Heating and cooling - commercial,22.505 -District heating,Heating and cooling - homes,46.184 -Electricity grid,Over generation / exports,104.453 -Electricity grid,Heating and cooling - homes,113.726 -Electricity grid,H2 conversion,27.14 -Electricity grid,Industry,342.165 -Electricity grid,Road transport,37.797 -Electricity grid,Agriculture,4.412 -Electricity grid,Heating and cooling - commercial,40.858 -Electricity grid,Losses,56.691 -Electricity grid,Rail transport,7.863 -Electricity grid,Lighting & appliances - commercial,90.008 -Electricity grid,Lighting & appliances - homes,93.494 -Gas imports,Ngas,40.719 -Gas reserves,Ngas,82.233 -Gas,Heating and cooling - commercial,0.129 -Gas,Losses,1.401 -Gas,Thermal generation,151.891 -Gas,Agriculture,2.096 -Gas,Industry,48.58 -Geothermal,Electricity grid,7.013 -H2 conversion,H2,20.897 -H2 conversion,Losses,6.242 -H2,Road transport,20.897 -Hydro,Electricity grid,6.995 -Liquid,Industry,121.066 -Liquid,International shipping,128.69 -Liquid,Road transport,135.835 -Liquid,Domestic aviation,14.458 -Liquid,International aviation,206.267 -Liquid,Agriculture,3.64 -Liquid,National navigation,33.218 -Liquid,Rail transport,4.413 -Marine algae,Bio-conversion,4.375 -Ngas,Gas,122.952 -Nuclear,Thermal generation,839.978 -Oil imports,Oil,504.287 -Oil reserves,Oil,107.703 -Oil,Liquid,611.99 -Other waste,Solid,56.587 -Other waste,Bio-conversion,77.81 -Pumped heat,Heating and cooling - homes,193.026 -Pumped heat,Heating and cooling - commercial,70.672 -Solar PV,Electricity grid,59.901 -Solar Thermal,Heating and cooling - homes,19.263 -Solar,Solar Thermal,19.263 -Solar,Solar PV,59.901 -Solid,Agriculture,0.882 -Solid,Thermal generation,400.12 -Solid,Industry,46.477 -Thermal generation,Electricity grid,525.531 -Thermal generation,Losses,787.129 -Thermal generation,District heating,79.329 -Tidal,Electricity grid,9.452 -UK land based bioenergy,Bio-conversion,182.01 -Wave,Electricity grid,19.013 -Wind,Electricity grid,289.366 -``` - -```mermaid -sankey-beta - -Agricultural 'waste',Bio-conversion,124.729 -Bio-conversion,Liquid,0.597 -Bio-conversion,Losses,26.862 -Bio-conversion,Solid,280.322 -Bio-conversion,Gas,81.144 -Biofuel imports,Liquid,35 -Biomass imports,Solid,35 -Coal imports,Coal,11.606 -Coal reserves,Coal,63.965 -Coal,Solid,75.571 -District heating,Industry,10.639 -District heating,Heating and cooling - commercial,22.505 -District heating,Heating and cooling - homes,46.184 -Electricity grid,Over generation / exports,104.453 -Electricity grid,Heating and cooling - homes,113.726 -Electricity grid,H2 conversion,27.14 -Electricity grid,Industry,342.165 -Electricity grid,Road transport,37.797 -Electricity grid,Agriculture,4.412 -Electricity grid,Heating and cooling - commercial,40.858 -Electricity grid,Losses,56.691 -Electricity grid,Rail transport,7.863 -Electricity grid,Lighting & appliances - commercial,90.008 -Electricity grid,Lighting & appliances - homes,93.494 -Gas imports,Ngas,40.719 -Gas reserves,Ngas,82.233 -Gas,Heating and cooling - commercial,0.129 -Gas,Losses,1.401 -Gas,Thermal generation,151.891 -Gas,Agriculture,2.096 -Gas,Industry,48.58 -Geothermal,Electricity grid,7.013 -H2 conversion,H2,20.897 -H2 conversion,Losses,6.242 -H2,Road transport,20.897 -Hydro,Electricity grid,6.995 -Liquid,Industry,121.066 -Liquid,International shipping,128.69 -Liquid,Road transport,135.835 -Liquid,Domestic aviation,14.458 -Liquid,International aviation,206.267 -Liquid,Agriculture,3.64 -Liquid,National navigation,33.218 -Liquid,Rail transport,4.413 -Marine algae,Bio-conversion,4.375 -Ngas,Gas,122.952 -Nuclear,Thermal generation,839.978 -Oil imports,Oil,504.287 -Oil reserves,Oil,107.703 -Oil,Liquid,611.99 -Other waste,Solid,56.587 -Other waste,Bio-conversion,77.81 -Pumped heat,Heating and cooling - homes,193.026 -Pumped heat,Heating and cooling - commercial,70.672 -Solar PV,Electricity grid,59.901 -Solar Thermal,Heating and cooling - homes,19.263 -Solar,Solar Thermal,19.263 -Solar,Solar PV,59.901 -Solid,Agriculture,0.882 -Solid,Thermal generation,400.12 -Solid,Industry,46.477 -Thermal generation,Electricity grid,525.531 -Thermal generation,Losses,787.129 -Thermal generation,District heating,79.329 -Tidal,Electricity grid,9.452 -UK land based bioenergy,Bio-conversion,182.01 -Wave,Electricity grid,19.013 -Wind,Electricity grid,289.366 -``` - -::: - ## Syntax The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result. @@ -345,24 +195,6 @@ Electricity grid,Heating and cooling - homes,113.726 Electricity grid,H2 conversion,27.14 ``` -```mermaid-example -sankey-beta - -%% source,target,value -Electricity grid,Over generation / exports,104.453 -Electricity grid,Heating and cooling - homes,113.726 -Electricity grid,H2 conversion,27.14 -``` - -```mermaid -sankey-beta - -%% source,target,value -Electricity grid,Over generation / exports,104.453 -Electricity grid,Heating and cooling - homes,113.726 -Electricity grid,H2 conversion,27.14 -``` - ### Empty Lines CSV does not support empty lines without comma delimeters by default. But you can add them if needed: @@ -387,26 +219,6 @@ Bio-conversion,Solid,280.322 Bio-conversion,Gas,81.144 ``` -```mermaid-example -sankey-beta - -Bio-conversion,Losses,26.862 - -Bio-conversion,Solid,280.322 - -Bio-conversion,Gas,81.144 -``` - -```mermaid -sankey-beta - -Bio-conversion,Losses,26.862 - -Bio-conversion,Solid,280.322 - -Bio-conversion,Gas,81.144 -``` - ### Commas If you need to have a comma, wrap it in double quotes: @@ -425,20 +237,6 @@ Pumped heat,"Heating and cooling, homes",193.026 Pumped heat,"Heating and cooling, commercial",70.672 ``` -```mermaid-example -sankey-beta - -Pumped heat,"Heating and cooling, homes",193.026 -Pumped heat,"Heating and cooling, commercial",70.672 -``` - -```mermaid -sankey-beta - -Pumped heat,"Heating and cooling, homes",193.026 -Pumped heat,"Heating and cooling, commercial",70.672 -``` - ### Double Quotes If you need to have double quote, put a pair of them inside quoted string: @@ -457,20 +255,6 @@ Pumped heat,"Heating and cooling, ""homes""",193.026 Pumped heat,"Heating and cooling, ""commercial""",70.672 ``` -```mermaid-example -sankey-beta - -Pumped heat,"Heating and cooling, ""homes""",193.026 -Pumped heat,"Heating and cooling, ""commercial""",70.672 -``` - -```mermaid -sankey-beta - -Pumped heat,"Heating and cooling, ""homes""",193.026 -Pumped heat,"Heating and cooling, ""commercial""",70.672 -``` - ## Configuration You can customize link colors, node alignments and diagram dimensions. From 9f5f0a6e665ffcf79ac3777a89edb152a7af30e6 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Wed, 5 Jul 2023 01:49:58 +0300 Subject: [PATCH 128/263] Reduce sankey width --- packages/mermaid/src/defaultConfig.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 488493030f..cc2b79a804 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -2271,7 +2271,7 @@ const config: Partial = { maxNodeWidth: 200, }, sankey: { - width: 800, + width: 600, height: 400, linkColor: 'gradient', nodeAlignment: 'justify', From 49747b314db4d269a5dec055d22a0967a1a5a626 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Tue, 4 Jul 2023 20:44:22 -0300 Subject: [PATCH 129/263] Modify wildcard state of tokens in lexer --- .../diagrams/class/parser/classDiagram.jison | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison index 7788fcc0c0..a8b880c8e1 100644 --- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison +++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison @@ -72,14 +72,14 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili [\n] /* nothing */ [^{}\n]* { return "MEMBER";} -<*>"cssClass" return 'CSSCLASS'; -<*>"callback" return 'CALLBACK'; -<*>"link" return 'LINK'; -<*>"click" return 'CLICK'; -<*>"note for" return 'NOTE_FOR'; -<*>"note" return 'NOTE'; -<*>"<<" return 'ANNOTATION_START'; -<*>">>" return 'ANNOTATION_END'; +"cssClass" return 'CSSCLASS'; +"callback" return 'CALLBACK'; +"link" return 'LINK'; +"click" return 'CLICK'; +"note for" return 'NOTE_FOR'; +"note" return 'NOTE'; +"<<" return 'ANNOTATION_START'; +">>" return 'ANNOTATION_END'; /* ---interactivity command--- @@ -87,7 +87,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili line was introduced with 'click'. 'href ""' attaches the specified link to the node that was specified by 'click'. */ -<*>"href"[\s]+["] this.begin("href"); +"href"[\s]+["] this.begin("href"); ["] this.popState(); [^"]* return 'HREF'; @@ -99,7 +99,7 @@ the line was introduced with 'click'. arguments to the node that was specified by 'click'. Function arguments are optional: 'call ()' simply executes 'callback_name' without any arguments. */ -<*>"call"[\s]+ this.begin("callback_name"); +"call"[\s]+ this.begin("callback_name"); \([\s]*\) this.popState(); \( this.popState(); this.begin("callback_args"); [^(]* return 'CALLBACK_NAME'; @@ -108,7 +108,7 @@ Function arguments are optional: 'call ()' simply executes 'callb [~] this.popState(); [^~]* return "GENERICTYPE"; -<*>[~] this.begin("generic"); +"~" this.begin("generic"); ["] this.popState(); [^"]* return "STR"; @@ -116,20 +116,20 @@ Function arguments are optional: 'call ()' simply executes 'callb [`] this.popState(); [^`]+ return "BQUOTE_STR"; -<*>[`] this.begin("bqstring"); - -<*>"_self" return 'LINK_TARGET'; -<*>"_blank" return 'LINK_TARGET'; -<*>"_parent" return 'LINK_TARGET'; -<*>"_top" return 'LINK_TARGET'; - -<*>\s*\<\| return 'EXTENSION'; -<*>\s*\|\> return 'EXTENSION'; -<*>\s*\> return 'DEPENDENCY'; -<*>\s*\< return 'DEPENDENCY'; -<*>\s*\* return 'COMPOSITION'; -<*>\s*o return 'AGGREGATION'; -<*>\s*\(\) return 'LOLLIPOP'; +[`] this.begin("bqstring"); + +"_self" return 'LINK_TARGET'; +"_blank" return 'LINK_TARGET'; +"_parent" return 'LINK_TARGET'; +"_top" return 'LINK_TARGET'; + +\s*\<\| return 'EXTENSION'; +\s*\|\> return 'EXTENSION'; +\s*\> return 'DEPENDENCY'; +\s*\< return 'DEPENDENCY'; +\s*\* return 'COMPOSITION'; +\s*o return 'AGGREGATION'; +\s*\(\) return 'LOLLIPOP'; <*>\-\- return 'LINE'; <*>\.\. return 'DOTTED_LINE'; <*>":"{1}[^:\n;]+ return 'LABEL'; @@ -285,8 +285,8 @@ className : alphaNumToken { $$=$1; } | classLiteralName { $$=$1; } | alphaNumToken className { $$=$1+$2; } - | alphaNumToken GENERICTYPE { $$=$1+'~'+$2+'~'; } - | classLiteralName GENERICTYPE { $$=$1+'~'+$2+'~'; } + | alphaNumToken GENERICTYPE { $$=$1+"~"+$2+"~"; } + | classLiteralName GENERICTYPE { $$=$1+"~"+$2+"~"; } ; statement @@ -321,7 +321,7 @@ classStatements ; classStatement - : classIdentifier + : classIdentifier | classIdentifier STYLE_SEPARATOR alphaNumToken {yy.setCssClass($1, $3);} | classIdentifier STRUCT_START members STRUCT_STOP {yy.addMembers($1,$3);} | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START members STRUCT_STOP {yy.setCssClass($1, $3);yy.addMembers($1,$5);} From 099f85f014af46491e308f7ba152cc0975c3fe5b Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Tue, 4 Jul 2023 21:07:46 -0300 Subject: [PATCH 130/263] Add unit tests with keywords in notes --- .../src/diagrams/class/classDiagram.spec.ts | 85 +++++++++++++++++++ 1 file changed, 85 insertions(+) diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts index 2182e8c34e..99f58898c4 100644 --- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts +++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts @@ -264,6 +264,91 @@ class C13["With CittΓ  foreign language"] const str = 'classDiagram\n' + 'note "test"\n'; parser.parse(str); }); + + it('should handle note with "cssClass" in it', function () { + const str = 'classDiagram\n' + 'note "cssClass"\n'; + parser.parse(str); + }); + + it('should handle note with "callback" in it', function () { + const str = 'classDiagram\n' + 'note "callback"\n'; + parser.parse(str); + }); + + it('should handle note with "link" in it', function () { + const str = 'classDiagram\n' + 'note "test"\n'; + parser.parse(str); + }); + + it('should handle note with "click" in it', function () { + const str = 'classDiagram\n' + 'note "click"\n'; + parser.parse(str); + }); + + it('should handle note with "link" in it', function () { + const str = 'classDiagram\n' + 'note "test"\n'; + parser.parse(str); + }); + + it('should handle note with "note" in it', function () { + const str = 'classDiagram\n' + 'note "note"\n'; + parser.parse(str); + }); + + it('should handle note with "note for" in it', function () { + const str = 'classDiagram\n' + 'note "note for"\n'; + parser.parse(str); + }); + + it('should handle note with "<<" in it', function () { + const str = 'classDiagram\n' + 'note "<<"\n'; + parser.parse(str); + }); + + it('should handle note with ">>" in it', function () { + const str = 'classDiagram\n' + 'note ">>"\n'; + parser.parse(str); + }); + + it('should handle note with "href " in it', function () { + const str = 'classDiagram\n' + 'note "href "\n'; + parser.parse(str); + }); + + it('should handle note with "call " in it', function () { + const str = 'classDiagram\n' + 'note "call "\n'; + parser.parse(str); + }); + + it('should handle note with "~" in it', function () { + const str = 'classDiagram\n' + 'note "~"\n'; + parser.parse(str); + }); + + it('should handle note with "``" in it', function () { + const str = 'classDiagram\n' + 'note "``"\n'; + parser.parse(str); + }); + + it('should handle note with "_self" in it', function () { + const str = 'classDiagram\n' + 'note "_self"\n'; + parser.parse(str); + }); + + it('should handle note with "_blank" in it', function () { + const str = 'classDiagram\n' + 'note "_blank"\n'; + parser.parse(str); + }); + + it('should handle note with "_parent" in it', function () { + const str = 'classDiagram\n' + 'note "_parent"\n'; + parser.parse(str); + }); + + it('should handle note with "_top" in it', function () { + const str = 'classDiagram\n' + 'note "_top"\n'; + parser.parse(str); + }); }); describe('when parsing class defined in brackets', function () { From e3c90ac0848f947b6a6cb7679a22f9c6961c1f82 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Tue, 4 Jul 2023 21:16:14 -0300 Subject: [PATCH 131/263] Apply formatting to file --- .../diagrams/class/parser/classDiagram.jison | 154 +++++++++--------- 1 file changed, 77 insertions(+), 77 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison index a8b880c8e1..d4ca667cfc 100644 --- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison +++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison @@ -43,12 +43,12 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili [\}] { this.popState(); } [^\}]* return "acc_descr_multiline_value"; -\s*(\r?\n)+ return 'NEWLINE'; -\s+ /* skip whitespace */ +\s*(\r?\n)+ return 'NEWLINE'; +\s+ /* skip whitespace */ -"classDiagram-v2" return 'CLASS_DIAGRAM'; -"classDiagram" return 'CLASS_DIAGRAM'; -"[*]" return 'EDGE_STATE'; +"classDiagram-v2" return 'CLASS_DIAGRAM'; +"classDiagram" return 'CLASS_DIAGRAM'; +"[*]" return 'EDGE_STATE'; "namespace" { this.begin('namespace'); return 'NAMESPACE'; } \s*(\r?\n)+ { this.popState(); return 'NEWLINE'; } @@ -60,26 +60,26 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili \s+ /* skip whitespace */ "[*]" return 'EDGE_STATE'; -"class" { this.begin('class'); return 'CLASS';} -\s*(\r?\n)+ { this.popState(); return 'NEWLINE'; } -\s+ /* skip whitespace */ -[}] { this.popState(); this.popState(); return 'STRUCT_STOP';} -[{] { this.begin("class-body"); return 'STRUCT_START';} -[}] { this.popState(); return 'STRUCT_STOP'; } -<> return "EOF_IN_STRUCT"; -"[*]" { return 'EDGE_STATE';} -[{] return "OPEN_IN_STRUCT"; -[\n] /* nothing */ -[^{}\n]* { return "MEMBER";} - -"cssClass" return 'CSSCLASS'; -"callback" return 'CALLBACK'; -"link" return 'LINK'; -"click" return 'CLICK'; -"note for" return 'NOTE_FOR'; -"note" return 'NOTE'; -"<<" return 'ANNOTATION_START'; -">>" return 'ANNOTATION_END'; +"class" { this.begin('class'); return 'CLASS';} +\s*(\r?\n)+ { this.popState(); return 'NEWLINE'; } +\s+ /* skip whitespace */ +[}] { this.popState(); this.popState(); return 'STRUCT_STOP';} +[{] { this.begin("class-body"); return 'STRUCT_START';} +[}] { this.popState(); return 'STRUCT_STOP'; } +<> return "EOF_IN_STRUCT"; +"[*]" { return 'EDGE_STATE';} +[{] return "OPEN_IN_STRUCT"; +[\n] /* nothing */ +[^{}\n]* { return "MEMBER";} + +"cssClass" return 'CSSCLASS'; +"callback" return 'CALLBACK'; +"link" return 'LINK'; +"click" return 'CLICK'; +"note for" return 'NOTE_FOR'; +"note" return 'NOTE'; +"<<" return 'ANNOTATION_START'; +">>" return 'ANNOTATION_END'; /* ---interactivity command--- @@ -87,9 +87,9 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili line was introduced with 'click'. 'href ""' attaches the specified link to the node that was specified by 'click'. */ -"href"[\s]+["] this.begin("href"); -["] this.popState(); -[^"]* return 'HREF'; +"href"[\s]+["] this.begin("href"); +["] this.popState(); +[^"]* return 'HREF'; /* ---interactivity command--- @@ -99,52 +99,52 @@ the line was introduced with 'click'. arguments to the node that was specified by 'click'. Function arguments are optional: 'call ()' simply executes 'callback_name' without any arguments. */ -"call"[\s]+ this.begin("callback_name"); -\([\s]*\) this.popState(); -\( this.popState(); this.begin("callback_args"); -[^(]* return 'CALLBACK_NAME'; -\) this.popState(); -[^)]* return 'CALLBACK_ARGS'; - -[~] this.popState(); -[^~]* return "GENERICTYPE"; -"~" this.begin("generic"); - -["] this.popState(); -[^"]* return "STR"; -<*>["] this.begin("string"); - -[`] this.popState(); -[^`]+ return "BQUOTE_STR"; -[`] this.begin("bqstring"); - -"_self" return 'LINK_TARGET'; -"_blank" return 'LINK_TARGET'; -"_parent" return 'LINK_TARGET'; -"_top" return 'LINK_TARGET'; - -\s*\<\| return 'EXTENSION'; -\s*\|\> return 'EXTENSION'; -\s*\> return 'DEPENDENCY'; -\s*\< return 'DEPENDENCY'; -\s*\* return 'COMPOSITION'; -\s*o return 'AGGREGATION'; -\s*\(\) return 'LOLLIPOP'; -<*>\-\- return 'LINE'; -<*>\.\. return 'DOTTED_LINE'; -<*>":"{1}[^:\n;]+ return 'LABEL'; -<*>":"{3} return 'STYLE_SEPARATOR'; -<*>\- return 'MINUS'; -<*>"." return 'DOT'; -<*>\+ return 'PLUS'; -<*>\% return 'PCT'; -<*>"=" return 'EQUALS'; -<*>\= return 'EQUALS'; -<*>\w+ return 'ALPHA'; -<*>"[" return 'SQS'; -<*>"]" return 'SQE'; -<*>[!"#$%&'*+,-.`?\\/] return 'PUNCTUATION'; -<*>[0-9]+ return 'NUM'; +"call"[\s]+ this.begin("callback_name"); +\([\s]*\) this.popState(); +\( this.popState(); this.begin("callback_args"); +[^(]* return 'CALLBACK_NAME'; +\) this.popState(); +[^)]* return 'CALLBACK_ARGS'; + +[~] this.popState(); +[^~]* return "GENERICTYPE"; +"~" this.begin("generic"); + +["] this.popState(); +[^"]* return "STR"; +<*>["] this.begin("string"); + +[`] this.popState(); +[^`]+ return "BQUOTE_STR"; +[`] this.begin("bqstring"); + +"_self" return 'LINK_TARGET'; +"_blank" return 'LINK_TARGET'; +"_parent" return 'LINK_TARGET'; +"_top" return 'LINK_TARGET'; + +\s*\<\| return 'EXTENSION'; +\s*\|\> return 'EXTENSION'; +\s*\> return 'DEPENDENCY'; +\s*\< return 'DEPENDENCY'; +\s*\* return 'COMPOSITION'; +\s*o return 'AGGREGATION'; +\s*\(\) return 'LOLLIPOP'; +<*>\-\- return 'LINE'; +<*>\.\. return 'DOTTED_LINE'; +<*>":"{1}[^:\n;]+ return 'LABEL'; +<*>":"{3} return 'STYLE_SEPARATOR'; +<*>\- return 'MINUS'; +<*>"." return 'DOT'; +<*>\+ return 'PLUS'; +<*>\% return 'PCT'; +<*>"=" return 'EQUALS'; +<*>\= return 'EQUALS'; +<*>\w+ return 'ALPHA'; +<*>"[" return 'SQS'; +<*>"]" return 'SQE'; +<*>[!"#$%&'*+,-.`?\\/] return 'PUNCTUATION'; +<*>[0-9]+ return 'NUM'; <*>[\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]| [\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]| [\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5]| @@ -206,9 +206,9 @@ Function arguments are optional: 'call ()' simply executes 'callb [\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC]| [\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF]| [\uFFD2-\uFFD7\uFFDA-\uFFDC] - return 'UNICODE_TEXT'; -<*>\s return 'SPACE'; -<*><> return 'EOF'; + return 'UNICODE_TEXT'; +<*>\s return 'SPACE'; +<*><> return 'EOF'; /lex From 34e89098f5357c5b739538877a823470761356cb Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Tue, 4 Jul 2023 21:34:14 -0300 Subject: [PATCH 132/263] Refactor code smells in unit tests --- packages/mermaid/src/diagrams/class/classDiagram.spec.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts index 99f58898c4..f6a2855c04 100644 --- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts +++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts @@ -276,7 +276,7 @@ class C13["With CittΓ  foreign language"] }); it('should handle note with "link" in it', function () { - const str = 'classDiagram\n' + 'note "test"\n'; + const str = 'classDiagram\n' + 'note "link"\n'; parser.parse(str); }); @@ -285,11 +285,6 @@ class C13["With CittΓ  foreign language"] parser.parse(str); }); - it('should handle note with "link" in it', function () { - const str = 'classDiagram\n' + 'note "test"\n'; - parser.parse(str); - }); - it('should handle note with "note" in it', function () { const str = 'classDiagram\n' + 'note "note"\n'; parser.parse(str); From 382026ed33982f5ce7351148dcbd1b57e1deca19 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 5 Jul 2023 12:20:56 +0530 Subject: [PATCH 133/263] Fix docs:dev --- packages/mermaid/package.json | 6 +++--- packages/mermaid/src/docs.mts | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 62efec3802..c73275a6fd 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -27,9 +27,9 @@ "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup", "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts", "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts --verify", - "docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress", - "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm --filter ./ install --no-frozen-lockfile --ignore-scripts && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing", - "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./ src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"", + "docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts ", + "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing", + "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"", "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress", "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"", "release": "pnpm build", diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts index 64c77254d1..f6efc1169c 100644 --- a/packages/mermaid/src/docs.mts +++ b/packages/mermaid/src/docs.mts @@ -122,7 +122,7 @@ const changeToFinalDocDir = (file: string): string => { const logWasOrShouldBeTransformed = (filename: string, wasCopied: boolean) => { const changeMsg = wasCopied ? LOGMSG_TRANSFORMED : LOGMSG_TO_BE_TRANSFORMED; let logMsg: string; - logMsg = ` File ${changeMsg}: ${filename}`; + logMsg = ` File ${changeMsg}: ${filename.replace(FINAL_DOCS_DIR, SOURCE_DOCS_DIR)}`; if (wasCopied) { logMsg += LOGMSG_COPIED; } @@ -363,14 +363,14 @@ const transformHtml = (filename: string) => { const getGlobs = (globs: string[]): string[] => { globs.push( - '!**/dist', + '!**/dist/**', '!**/redirect.spec.ts', - '!**/landing', - '!**/node_modules', - '!**/user-avatars' + '!**/landing/**', + '!**/node_modules/**', + '!**/user-avatars/**' ); if (!vitepress) { - globs.push('!**/.vitepress', '!**/vite.config.ts', '!src/docs/index.md', '!**/package.json'); + globs.push('!**/.vitepress/**', '!**/vite.config.ts', '!src/docs/index.md', '!**/package.json'); } return globs; }; From 34b2b5ba352c24c06492b9bd0207e81ae0774641 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Wed, 5 Jul 2023 17:25:07 +0300 Subject: [PATCH 134/263] Support docs:dev in docker --- packages/mermaid/src/docs/package.json | 2 +- run | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index 6e1934022b..3dd83fafce 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -3,7 +3,7 @@ "private": true, "type": "module", "scripts": { - "dev": "vitepress --port 3333 --open", + "dev": "vitepress --port 3333 --host", "build": "pnpm prefetch && vitepress build", "build-no-prefetch": "vitepress build", "serve": "vitepress serve", diff --git a/run b/run index d9f669cab2..1d5ef306fd 100755 --- a/run +++ b/run @@ -27,7 +27,7 @@ $RUN --service-ports mermaid sh -c "npx pnpm run dev" ;; docs:dev) -$RUN --service-ports mermaid sh -c "cd packages/mermaid/src/docs && npx pnpm prefetch && npx vitepress --port 3333 --host" +$RUN --service-ports mermaid sh -c "npx pnpm run --filter mermaid docs:dev" ;; cypress) From 95d62367e90839fe84824ded6da7d40d355c6206 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Wed, 5 Jul 2023 19:39:05 +0300 Subject: [PATCH 135/263] Add docker-specific command, leave commonly used command intact --- packages/mermaid/package.json | 1 + packages/mermaid/src/docs/package.json | 3 ++- run | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index c73275a6fd..e630f80fb2 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -30,6 +30,7 @@ "docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts ", "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing", "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"", + "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.mts --watch --vitepress\"", "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress", "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"", "release": "pnpm build", diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index 3dd83fafce..4529a76228 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -3,7 +3,8 @@ "private": true, "type": "module", "scripts": { - "dev": "vitepress --port 3333 --host", + "dev": "vitepress --port 3333 --open", + "dev:docker": "vitepress --port 3333 --host", "build": "pnpm prefetch && vitepress build", "build-no-prefetch": "vitepress build", "serve": "vitepress serve", diff --git a/run b/run index 1d5ef306fd..cc169e209b 100755 --- a/run +++ b/run @@ -27,7 +27,7 @@ $RUN --service-ports mermaid sh -c "npx pnpm run dev" ;; docs:dev) -$RUN --service-ports mermaid sh -c "npx pnpm run --filter mermaid docs:dev" +$RUN --service-ports mermaid sh -c "npx pnpm run --filter mermaid docs:dev:docker" ;; cypress) From fcb25aee7cdaad985cbb63740a245e09d1692415 Mon Sep 17 00:00:00 2001 From: Tom PERRILLAT-COLLOMB Date: Wed, 5 Jul 2023 20:57:37 +0200 Subject: [PATCH 136/263] docs(flowchart): add documentation on multiple nodes style --- docs/syntax/flowchart.md | 18 ++++++++++++++++++ packages/mermaid/src/docs/syntax/flowchart.md | 10 ++++++++++ 2 files changed, 28 insertions(+) diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index a470610258..92678fb6ec 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -991,6 +991,24 @@ flowchart LR classDef someclass fill:#f96 ``` +This form can be used when declaring multiple links between nodes: + +```mermaid-example +flowchart LR + A:::foo & B:::bar --> C:::foobar + classDef foo stroke:#f00 + classDef bar stroke:#0f0 + classDef foobar stroke:#00f +``` + +```mermaid +flowchart LR + A:::foo & B:::bar --> C:::foobar + classDef foo stroke:#f00 + classDef bar stroke:#0f0 + classDef foobar stroke:#00f +``` + ### Css classes It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 80cb242d65..2e3d78c305 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -676,6 +676,16 @@ flowchart LR classDef someclass fill:#f96 ``` +This form can be used when declaring multiple links between nodes: + +```mermaid-example +flowchart LR + A:::foo & B:::bar --> C:::foobar + classDef foo stroke:#f00 + classDef bar stroke:#0f0 + classDef foobar stroke:#00f +``` + ### Css classes It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example From 38013de7114966e8b1a83396703ef8158bb34466 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 6 Jul 2023 01:06:01 +0100 Subject: [PATCH 137/263] fix(quadrant): make quadrant options optional Make the types of the options in QuadrantChartConfig in the MermaidConfig optional. All of these (except for the values in `BaseDiagramConfig`) will be automatically set to their default values, so they're optional from a user perspective. --- packages/mermaid/src/config.type.ts | 36 +++++++++---------- .../quadrant-chart/quadrantBuilder.ts | 5 +-- 2 files changed, 21 insertions(+), 20 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 138eee44f3..3b5826d1ae 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -229,24 +229,24 @@ export interface PieDiagramConfig extends BaseDiagramConfig { } export interface QuadrantChartConfig extends BaseDiagramConfig { - chartWidth: number; - chartHeight: number; - titleFontSize: number; - titlePadding: number; - quadrantPadding: number; - xAxisLabelPadding: number; - yAxisLabelPadding: number; - xAxisLabelFontSize: number; - yAxisLabelFontSize: number; - quadrantLabelFontSize: number; - quadrantTextTopPadding: number; - pointTextPadding: number; - pointLabelFontSize: number; - pointRadius: number; - xAxisPosition: 'top' | 'bottom'; - yAxisPosition: 'left' | 'right'; - quadrantInternalBorderStrokeWidth: number; - quadrantExternalBorderStrokeWidth: number; + chartWidth?: number; + chartHeight?: number; + titleFontSize?: number; + titlePadding?: number; + quadrantPadding?: number; + xAxisLabelPadding?: number; + yAxisLabelPadding?: number; + xAxisLabelFontSize?: number; + yAxisLabelFontSize?: number; + quadrantLabelFontSize?: number; + quadrantTextTopPadding?: number; + pointTextPadding?: number; + pointLabelFontSize?: number; + pointRadius?: number; + xAxisPosition?: 'top' | 'bottom'; + yAxisPosition?: 'left' | 'right'; + quadrantInternalBorderStrokeWidth?: number; + quadrantExternalBorderStrokeWidth?: number; } export interface ErDiagramConfig extends BaseDiagramConfig { diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts index 8168551ad4..9c11627620 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts @@ -1,7 +1,7 @@ // @ts-ignore: TODO Fix ts errors import { scaleLinear } from 'd3'; import { log } from '../../logger.js'; -import { QuadrantChartConfig } from '../../config.type.js'; +import type { BaseDiagramConfig, QuadrantChartConfig } from '../../config.type.js'; import defaultConfig from '../../defaultConfig.js'; import { getThemeVariables } from '../../themes/theme-default.js'; @@ -71,7 +71,8 @@ export interface quadrantBuilderData { points: QuadrantPointInputType[]; } -export interface QuadrantBuilderConfig extends QuadrantChartConfig { +export interface QuadrantBuilderConfig + extends Required> { showXAxis: boolean; showYAxis: boolean; showTitle: boolean; From 5885f5f82a738afd439dca2f8992de110dfe7698 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 6 Jul 2023 01:19:34 +0100 Subject: [PATCH 138/263] test: rename src/config.spec.js to config.spec.ts --- packages/mermaid/src/{config.spec.js => config.spec.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/mermaid/src/{config.spec.js => config.spec.ts} (100%) diff --git a/packages/mermaid/src/config.spec.js b/packages/mermaid/src/config.spec.ts similarity index 100% rename from packages/mermaid/src/config.spec.js rename to packages/mermaid/src/config.spec.ts From f731853e01339d9cc9e7e5582d70039293a0db7e Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 6 Jul 2023 01:20:24 +0100 Subject: [PATCH 139/263] style: fix lint issues in src/config.spec.ts It looks like our linter automatically converts `let` to `const` in TypeScript files, but not in JavaScript files. --- packages/mermaid/src/config.spec.ts | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts index 1f7fd976b3..c962445e66 100644 --- a/packages/mermaid/src/config.spec.ts +++ b/packages/mermaid/src/config.spec.ts @@ -6,16 +6,16 @@ describe('when working with site config', function () { configApi.setSiteConfig({}); }); it('should set site config and config properly', function () { - let config_0 = { foo: 'bar', bar: 0 }; + const config_0 = { foo: 'bar', bar: 0 }; configApi.setSiteConfig(config_0); - let config_1 = configApi.getSiteConfig(); - let config_2 = configApi.getConfig(); + const config_1 = configApi.getSiteConfig(); + const config_2 = configApi.getConfig(); expect(config_1.foo).toEqual(config_0.foo); expect(config_1.bar).toEqual(config_0.bar); expect(config_1).toEqual(config_2); }); it('should respect secure keys when applying directives', function () { - let config_0 = { + const config_0 = { foo: 'bar', bar: 'cant-be-changed', secure: [...configApi.defaultConfig.secure, 'bar'], @@ -27,30 +27,30 @@ describe('when working with site config', function () { expect(cfg.bar).toBe(config_0.bar); }); it('should set reset config properly', function () { - let config_0 = { foo: 'bar', bar: 0 }; + const config_0 = { foo: 'bar', bar: 0 }; configApi.setSiteConfig(config_0); - let config_1 = { foo: 'baf' }; + const config_1 = { foo: 'baf' }; configApi.setConfig(config_1); - let config_2 = configApi.getConfig(); + const config_2 = configApi.getConfig(); expect(config_2.foo).toEqual(config_1.foo); configApi.reset(); - let config_3 = configApi.getConfig(); + const config_3 = configApi.getConfig(); expect(config_3.foo).toEqual(config_0.foo); - let config_4 = configApi.getSiteConfig(); + const config_4 = configApi.getSiteConfig(); expect(config_4.foo).toEqual(config_0.foo); }); it('should set global reset config properly', function () { - let config_0 = { foo: 'bar', bar: 0 }; + const config_0 = { foo: 'bar', bar: 0 }; configApi.setSiteConfig(config_0); - let config_1 = configApi.getSiteConfig(); + const config_1 = configApi.getSiteConfig(); expect(config_1.foo).toEqual(config_0.foo); - let config_2 = configApi.getConfig(); + const config_2 = configApi.getConfig(); expect(config_2.foo).toEqual(config_0.foo); configApi.setConfig({ foobar: 'bar0' }); - let config_3 = configApi.getConfig(); + const config_3 = configApi.getConfig(); expect(config_3.foobar).toEqual('bar0'); configApi.reset(); - let config_4 = configApi.getConfig(); + const config_4 = configApi.getConfig(); expect(config_4.foobar).toBeUndefined(); }); }); From 6ceee7f253ddc20b76b63a7a1b90500f9db0bd11 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 6 Jul 2023 01:27:24 +0100 Subject: [PATCH 140/263] test: fix types in `config.spec.ts` The `foo`, `bar`, and `foobar` options don't exist in MermaidConfig. Instead, I've replaced them with: - `foo` -> `fontFamily` - `bar` -> `fontSize` - `foobar` -> `altfontFamily` --- packages/mermaid/src/config.spec.ts | 40 ++++++++++++++--------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts index c962445e66..7a35614a49 100644 --- a/packages/mermaid/src/config.spec.ts +++ b/packages/mermaid/src/config.spec.ts @@ -6,51 +6,51 @@ describe('when working with site config', function () { configApi.setSiteConfig({}); }); it('should set site config and config properly', function () { - const config_0 = { foo: 'bar', bar: 0 }; + const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; configApi.setSiteConfig(config_0); const config_1 = configApi.getSiteConfig(); const config_2 = configApi.getConfig(); - expect(config_1.foo).toEqual(config_0.foo); - expect(config_1.bar).toEqual(config_0.bar); + expect(config_1.fontFamily).toEqual(config_0.fontFamily); + expect(config_1.fontSize).toEqual(config_0.fontSize); expect(config_1).toEqual(config_2); }); it('should respect secure keys when applying directives', function () { const config_0 = { - foo: 'bar', - bar: 'cant-be-changed', - secure: [...configApi.defaultConfig.secure, 'bar'], + fontFamily: 'foo-font', + fontSize: 12345, // can't be changed + secure: [...configApi.defaultConfig.secure!, 'fontSize'], }; configApi.setSiteConfig(config_0); - const directive = { foo: 'baf', bar: 'should-not-be-allowed' }; + const directive = { fontFamily: 'baf', fontSize: 54321 /* fontSize shouldn't be changed */ }; const cfg = configApi.updateCurrentConfig(config_0, [directive]); - expect(cfg.foo).toEqual(directive.foo); - expect(cfg.bar).toBe(config_0.bar); + expect(cfg.fontFamily).toEqual(directive.fontFamily); + expect(cfg.fontSize).toBe(config_0.fontSize); }); it('should set reset config properly', function () { - const config_0 = { foo: 'bar', bar: 0 }; + const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; configApi.setSiteConfig(config_0); - const config_1 = { foo: 'baf' }; + const config_1 = { fontFamily: 'baf' }; configApi.setConfig(config_1); const config_2 = configApi.getConfig(); - expect(config_2.foo).toEqual(config_1.foo); + expect(config_2.fontFamily).toEqual(config_1.fontFamily); configApi.reset(); const config_3 = configApi.getConfig(); - expect(config_3.foo).toEqual(config_0.foo); + expect(config_3.fontFamily).toEqual(config_0.fontFamily); const config_4 = configApi.getSiteConfig(); - expect(config_4.foo).toEqual(config_0.foo); + expect(config_4.fontFamily).toEqual(config_0.fontFamily); }); it('should set global reset config properly', function () { - const config_0 = { foo: 'bar', bar: 0 }; + const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; configApi.setSiteConfig(config_0); const config_1 = configApi.getSiteConfig(); - expect(config_1.foo).toEqual(config_0.foo); + expect(config_1.fontFamily).toEqual(config_0.fontFamily); const config_2 = configApi.getConfig(); - expect(config_2.foo).toEqual(config_0.foo); - configApi.setConfig({ foobar: 'bar0' }); + expect(config_2.fontFamily).toEqual(config_0.fontFamily); + configApi.setConfig({ altFontFamily: 'bar-font' }); const config_3 = configApi.getConfig(); - expect(config_3.foobar).toEqual('bar0'); + expect(config_3.altFontFamily).toEqual('bar-font'); configApi.reset(); const config_4 = configApi.getConfig(); - expect(config_4.foobar).toBeUndefined(); + expect(config_4.altFontFamily).toBeUndefined(); }); }); From a862565a24a6ffd47a689906b4b101aa7bdb80b2 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 6 Jul 2023 01:35:11 +0100 Subject: [PATCH 141/263] test: test partial QuadrantChartConfig options --- packages/mermaid/src/config.spec.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts index 7a35614a49..457cb82443 100644 --- a/packages/mermaid/src/config.spec.ts +++ b/packages/mermaid/src/config.spec.ts @@ -26,6 +26,22 @@ describe('when working with site config', function () { expect(cfg.fontFamily).toEqual(directive.fontFamily); expect(cfg.fontSize).toBe(config_0.fontSize); }); + it('should allow setting partial options', function () { + const defaultConfig = configApi.getConfig(); + + configApi.setConfig({ + quadrantChart: { + chartHeight: 600, + }, + }); + + const updatedConfig = configApi.getConfig(); + + // deep options we didn't update should remain the same + expect(defaultConfig.quadrantChart!.chartWidth).toEqual( + updatedConfig.quadrantChart!.chartWidth + ); + }); it('should set reset config properly', function () { const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; configApi.setSiteConfig(config_0); From 4372a54dbaf0304ff7b7866579e8abb011797428 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sun, 4 Dec 2022 23:32:20 +0000 Subject: [PATCH 142/263] docs: add support for ```regexp``` code blocks Currently, shiki doesn't support code-blocks that use the regexp language, which means vitepress throws an error on them: ```regexp ^([1-9][0-9]*)(minute|hour|day|week|month)$ ``` As a hack until shiki supports them, I've just modified them to get converted into JavaScript RegEx literal code-blocks, e.g.: ```javascript /^([1-9][0-9]*)(minute|hour|day|week|month)$/ ``` --- .../mermaid/src/docs/.vitepress/mermaid-markdown-all.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts index 14340462c5..30f044d988 100644 --- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts +++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts @@ -54,6 +54,15 @@ const MermaidExample = async (md: MarkdownRenderer) => { return `

    NOTE

    ${token.content}}

    `; } + if (token.info.trim() === 'regexp') { + // shiki doesn't yet support regexp code blocks, but the javascript + // one still makes RegExes look good + token.info = 'javascript'; + // use trimEnd to move trailing `\n` outside if the JavaScript regex `/` block + token.content = `/${token.content.trimEnd()}/\n`; + return defaultRenderer(tokens, index, options, env, slf); + } + if (token.info.trim() === 'jison') { return `
    From 58b43976ffbf0f063f647e3fc27502eb25ec9a4d Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sun, 4 Dec 2022 23:05:26 +0000 Subject: [PATCH 143/263] feat: add Mermaid Config in JSON Schema format Add a JSON Schema file (in YAML) for the MermaidConfig. This JSON Schema file follows [JSON Schema 2019-09][1], with some slight modifications to work with: - [json-schema-to-typescript][2] The `tsType` keyword is used to override the generated TypeScript type, when it doesn't match the JSON Schema type. This is used in two cases: - when the current type cannot be represented in JSON Schema (e.g. `FontCalculator`, which is a function) - when the JSON Schema type is narrower than the TypeScript type. Currently, many enums types are listed as `string` in TypeScript, but json-schema-to-typescript converts them to `"val1" | "val2"`. I've manually set them to `string | "val1" | "val2"` to avoid causing a breaking change in the TypeScript types. We should remove these in a future major version of TypeScript. - [@adobe/jsonschema2md][3] The `meta:enum` keyword is used to add documentation for specific enum values. [1]: https://json-schema.org/draft/2019-09/release-notes.html [2]: https://www.npmjs.com/package/json-schema-to-typescript [3]: https://www.npmjs.com/package/@adobe/jsonschema2md --- .../mermaid/src/schemas/config.schema.yaml | 1886 +++++++++++++++++ 1 file changed, 1886 insertions(+) create mode 100644 packages/mermaid/src/schemas/config.schema.yaml diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml new file mode 100644 index 0000000000..306aab2cc7 --- /dev/null +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -0,0 +1,1886 @@ +# Used for VS Code's YAML plugin to automatically error on invalid types +# yaml-language-server: $schema=https://json-schema.org/draft/2019-09/schema + +# This file defines the MermaidConfig JSON Schema as a YAML file. +# +# From this file, the following things can be generated: +# - `scripts/create-types-from-json-schema.mjs` +# Used to generate the `src/config.type.ts` TypeScript types for MermaidConfig +# with the `json-schema-to-typescript` NPM package. +# - `.vite/jsonSchemaPlugin.ts` +# Used to generate the default values from the `default` keys in this +# JSON Schema using the `ajv` NPM package. +# Non-JSON values, like functions or `undefined`, still need to be manually +# set in `src/defaultConfig.ts`) +# - `src/docs.mts` +# Used to genereate Markdown documentation for this JSON Schema by using +# the `@adobe/jsonschema2md` NPM package. + +# Useful things to know when editting this file +# - Use the `|` character for multi-line strings +# - Use `meta:enum` to document enum values (from jsonschema2md) +# - Use `tsType` to override the TypeScript type (from json-schema-to-typescript) +# - If adding a new object to `MermaidConfig` (e.g. a new diagram type), +# you may need to add it to `.vite/jsonSchemaPlugin.ts` and `src/docs.mts` +# to get the docs/default values to generate properly. +$id: https://mermaid-js.github.io/schemas/config.schema.json +$schema: https://json-schema.org/draft/2019-09/schema +title: Mermaid Config +type: object +additionalProperties: false +required: + - fontFamily + - logLevel + - securityLevel + - startOnLoad + - arrowMarkerAbsolute + - flowchart + - sequence + - gantt + - journey + - class + - state + - er + - pie + - quadrantChart + - requirement + - mindmap + - gitGraph + - c4 + - sankey +properties: + theme: + description: | + Theme, the CSS style sheet. + You may also use `themeCSS` to override this value. + type: string + enum: + - default + - forest + - dark + - neutral + - 'null' # should this be a `null`-type? + meta:enum: + 'null': Can be set to disable any pre-defined mermaid theme + default: 'default' + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "default" | "forest" | "dark" | "neutral" | "null"' + themeVariables: + tsType: any + themeCSS: + type: string + maxTextSize: + description: The maximum allowed size of the users text diagram + type: number + default: 50000 + darkMode: + type: boolean + default: false + htmlLabels: + type: boolean # maybe unused, seems to be copied in each diagram config + fontFamily: + description: | + Specifies the font to be used in the rendered diagrams. + Can be any possible CSS `font-family`. + See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family + type: string + default: '"trebuchet ms", verdana, arial, sans-serif;' + altFontFamily: + # TODO: seems to be unused, except for in tests + type: string + logLevel: + description: | + This option decides the amount of logging to be used by mermaid. + type: + - string + - number + enum: + - trace + - 0 + - debug + - 1 + - info + - 2 + - warn + - 3 + - error + - 4 + - fatal + - 5 + meta:enum: + trace: Equivalent to 0 + debug: Equivalent to 1 + info: Equivalent to 2 + warn: Equivalent to 3 + error: Equivalent to 4 + fatal: Equivalent to 5 (default) + default: 5 + # Allow any number or string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'number | string | 0 | 2 | 1 | "trace" | "debug" | "info" | "warn" | "error" | "fatal" | 3 | 4 | 5 | undefined' + securityLevel: + description: Level of trust for parsed diagram + type: string + enum: + - strict + - loose + - antiscript + - sandbox + meta:enum: + strict: (**default**) HTML tags in the text are encoded and click functionality is disabled. + antiscript: HTML tags in text are allowed (only script elements are removed), and click functionality is enabled. + loose: HTML tags in text are allowed and click functionality is enabled. + sandbox: | + With this security level, all rendering takes place in a sandboxed iframe. + This prevent any JavaScript from running in the context. + This may hinder interactive functionality of the diagram, like scripts, popups in the sequence diagram, or links to other tabs or targets, etc. + default: strict + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "strict" | "loose" | "antiscript" | "sandbox" | undefined' + startOnLoad: + description: Dictates whether mermaid starts on Page load + type: boolean + default: true + arrowMarkerAbsolute: + &arrowMarkerAbsolute # YAML anchor, can be used later with `*arrowMarkerAbsolute` + description: | + Controls whether or arrow markers in html code are absolute paths or anchors. + This matters if you are using base tag settings. + type: boolean + default: false + secure: + description: | + This option controls which `currentConfig` keys are considered secure and + can only be changed via call to `mermaidAPI.initialize`. + Calls to `mermaidAPI.reinitialize` cannot make changes to the secure keys + in the current `currentConfig`. + + This prevents malicious graph directives from overriding a site's default security. + default: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'] + type: array + items: + type: string + uniqueItems: false # Should be enabled, but it may be a breaking change from the old config + deterministicIds: + description: | + This option controls if the generated ids of nodes in the SVG are + generated randomly or based on a seed. + If set to `false`, the IDs are generated based on the current date and + thus are not deterministic. This is the default behavior. + + This matters if your files are checked into source control e.g. git and + should not change unless content is changed. + type: boolean + default: false + deterministicIDSeed: + description: | + This option is the optional seed for deterministic ids. + If set to `undefined` but deterministicIds is `true`, a simple number iterator is used. + You can set this attribute to base the seed on a static string. + type: string + flowchart: + $ref: '#/$defs/FlowchartDiagramConfig' + sequence: + $ref: '#/$defs/SequenceDiagramConfig' + gantt: + $ref: '#/$defs/GanttDiagramConfig' + journey: + $ref: '#/$defs/JourneyDiagramConfig' + timeline: + $ref: '#/$defs/TimelineDiagramConfig' + class: + $ref: '#/$defs/ClassDiagramConfig' + state: + $ref: '#/$defs/StateDiagramConfig' + er: + $ref: '#/$defs/ErDiagramConfig' + pie: + $ref: '#/$defs/PieDiagramConfig' + quadrantChart: + $ref: '#/$defs/QuadrantChartConfig' + requirement: + $ref: '#/$defs/RequirementDiagramConfig' + mindmap: + $ref: '#/$defs/MindmapDiagramConfig' + gitGraph: + $ref: '#/$defs/GitGraphDiagramConfig' + c4: + $ref: '#/$defs/C4DiagramConfig' + sankey: + $ref: '#/$defs/SankeyDiagramConfig' + dompurifyConfig: + title: DOM Purify Configuration + description: Configuration options to pass to the `dompurify` library. + type: object + tsType: "import('dompurify').Config" + wrap: + type: boolean + fontSize: + type: number + default: 16 + +$defs: # JSON Schema definition (maybe we should move these to a seperate file) + BaseDiagramConfig: + # TODO: More config needs to be moved here + title: Base Diagram Config + type: object + properties: + useWidth: + type: number + useMaxWidth: + description: | + When this flag is set to `true`, the height and width is set to 100% + and is then scaled with the available space. + If set to `false`, the absolute space required is used. + type: boolean + default: true + C4DiagramConfig: + title: C4 Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for c4 diagrams + type: object + unevaluatedProperties: false + required: + - diagramMarginX + - diagramMarginY + - c4ShapeMargin + - c4ShapePadding + - width + - height + - boxMargin + - useMaxWidth + - c4ShapeInRow + - c4BoundaryInRow + properties: + diagramMarginX: + description: | + Margin to the right and left of the c4 diagram, must be a positive value. + type: integer + default: 50 + minimum: 0 + diagramMarginY: + description: | + Margin to the over and under the c4 diagram, must be a positive value. + type: integer + default: 10 + minimum: 0 + c4ShapeMargin: + description: Margin between shapes + type: integer + default: 50 + minimum: 0 + c4ShapePadding: + description: Padding between shapes + type: integer + default: 20 + minimum: 0 + width: + description: Width of person boxes + type: integer + default: 216 + minimum: 0 + height: + description: Height of person boxes + type: integer + default: 60 + minimum: 0 + boxMargin: + description: Margin around boxes + type: integer + default: 10 + minimum: 0 + c4ShapeInRow: + description: How many shapes to place in each row. + type: integer + default: 4 + minimum: 0 + nextLinePaddingX: + # TODO: add description + type: number + default: 0 + c4BoundaryInRow: + description: How many boundaries to place in each row. + type: integer + default: 2 + minimum: 0 + + # --------------------------------------------------------------------- # + # Default font values + # --------------------------------------------------------------------- # + personFontSize: + description: This sets the font size of Person shape for the diagram + type: &fontSizeType ['string', 'number'] # YAML anchor + default: 14 + personFontFamily: + description: This sets the font weight of Person shape for the diagram + type: string + default: '"Open Sans", sans-serif' + personFontWeight: + description: This sets the font weight of Person shape for the diagram + type: ['string', 'number'] + default: normal + external_personFontSize: + description: This sets the font size of External Person shape for the diagram + type: *fontSizeType + default: 14 + external_personFontFamily: + description: This sets the font family of External Person shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_personFontWeight: + description: This sets the font weight of External Person shape for the diagram + type: ['string', 'number'] + default: normal + systemFontSize: + description: This sets the font size of System shape for the diagram + type: *fontSizeType + default: 14 + systemFontFamily: + description: This sets the font family of System shape for the diagram + type: string + default: '"Open Sans", sans-serif' + systemFontWeight: + description: This sets the font weight of System shape for the diagram + type: ['string', 'number'] + default: normal + external_systemFontSize: + description: This sets the font size of External System shape for the diagram + type: *fontSizeType + default: 14 + external_systemFontFamily: + description: This sets the font family of External System shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_systemFontWeight: + description: This sets the font weight of External System shape for the diagram + type: ['string', 'number'] + default: normal + system_dbFontSize: + description: This sets the font size of System DB shape for the diagram + type: *fontSizeType + default: 14 + system_dbFontFamily: + description: This sets the font family of System DB shape for the diagram + type: string + default: '"Open Sans", sans-serif' + system_dbFontWeight: + description: This sets the font weight of System DB shape for the diagram + type: ['string', 'number'] + default: normal + external_system_dbFontSize: + description: This sets the font size of External System DB shape for the diagram + type: *fontSizeType + default: 14 + external_system_dbFontFamily: + description: This sets the font family of External System DB shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_system_dbFontWeight: + description: This sets the font weight of External System DB shape for the diagram + type: ['string', 'number'] + default: normal + system_queueFontSize: + description: This sets the font size of System Queue shape for the diagram + type: *fontSizeType + default: 14 + system_queueFontFamily: + description: This sets the font family of System Queue shape for the diagram + type: string + default: '"Open Sans", sans-serif' + system_queueFontWeight: + description: This sets the font weight of System Queue shape for the diagram + type: ['string', 'number'] + default: normal + external_system_queueFontSize: + description: This sets the font size of External System Queue shape for the diagram + type: *fontSizeType + default: 14 + external_system_queueFontFamily: + description: This sets the font family of External System Queue shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_system_queueFontWeight: + description: This sets the font weight of External System Queue shape for the diagram + type: ['string', 'number'] + default: normal + boundaryFontSize: + description: This sets the font size of Boundary shape for the diagram + type: *fontSizeType + default: 14 + boundaryFontFamily: + description: This sets the font family of Boundary shape for the diagram + type: string + default: '"Open Sans", sans-serif' + boundaryFontWeight: + description: This sets the font weight of Boundary shape for the diagram + type: ['string', 'number'] + default: normal + messageFontSize: + description: This sets the font size of Message shape for the diagram + type: *fontSizeType + default: 12 + messageFontFamily: + description: This sets the font family of Message shape for the diagram + type: string + default: '"Open Sans", sans-serif' + messageFontWeight: + description: This sets the font weight of Message shape for the diagram + type: ['string', 'number'] + default: normal + + containerFontSize: + description: This sets the font size of Container shape for the diagram + type: *fontSizeType + default: 14 + containerFontFamily: + description: This sets the font family of Container shape for the diagram + type: string + default: '"Open Sans", sans-serif' + containerFontWeight: + description: This sets the font weight of Container shape for the diagram + type: ['string', 'number'] + default: normal + external_containerFontSize: + description: This sets the font size of External Container shape for the diagram + type: *fontSizeType + default: 14 + external_containerFontFamily: + description: This sets the font family of External Container shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_containerFontWeight: + description: This sets the font weight of External Container shape for the diagram + type: ['string', 'number'] + default: normal + + container_dbFontSize: + description: This sets the font size of Container DB shape for the diagram + type: *fontSizeType + default: 14 + container_dbFontFamily: + description: This sets the font family of Container DB shape for the diagram + type: string + default: '"Open Sans", sans-serif' + container_dbFontWeight: + description: This sets the font weight of Container DB shape for the diagram + type: ['string', 'number'] + default: normal + external_container_dbFontSize: + description: This sets the font size of External Container DB shape for the diagram + type: *fontSizeType + default: 14 + external_container_dbFontFamily: + description: This sets the font family of External Container DB shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_container_dbFontWeight: + description: This sets the font weight of External Container DB shape for the diagram + type: ['string', 'number'] + default: normal + + container_queueFontSize: + description: This sets the font size of Container Queue shape for the diagram + type: *fontSizeType + default: 14 + container_queueFontFamily: + description: This sets the font family of Container Queue shape for the diagram + type: string + default: '"Open Sans", sans-serif' + container_queueFontWeight: + description: This sets the font weight of Container Queue shape for the diagram + type: ['string', 'number'] + default: normal + external_container_queueFontSize: + description: This sets the font size of External Container Queue shape for the diagram + type: *fontSizeType + default: 14 + external_container_queueFontFamily: + description: This sets the font family of External Container Queue shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_container_queueFontWeight: + description: This sets the font weight of External Container Queue shape for the diagram + type: ['string', 'number'] + default: normal + + componentFontSize: + description: This sets the font size of Component shape for the diagram + type: *fontSizeType + default: 14 + componentFontFamily: + description: This sets the font family of Component shape for the diagram + type: string + default: '"Open Sans", sans-serif' + componentFontWeight: + description: This sets the font weight of Component shape for the diagram + type: ['string', 'number'] + default: normal + external_componentFontSize: + description: This sets the font size of External Component shape for the diagram + type: *fontSizeType + default: 14 + external_componentFontFamily: + description: This sets the font family of External Component shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_componentFontWeight: + description: This sets the font weight of External Component shape for the diagram + type: ['string', 'number'] + default: normal + + component_dbFontSize: + description: This sets the font size of Component DB shape for the diagram + type: *fontSizeType + default: 14 + component_dbFontFamily: + description: This sets the font family of Component DB shape for the diagram + type: string + default: '"Open Sans", sans-serif' + component_dbFontWeight: + description: This sets the font weight of Component DB shape for the diagram + type: ['string', 'number'] + default: normal + external_component_dbFontSize: + description: This sets the font size of External Component DB shape for the diagram + type: *fontSizeType + default: 14 + external_component_dbFontFamily: + description: This sets the font family of External Component DB shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_component_dbFontWeight: + description: This sets the font weight of External Component DB shape for the diagram + type: ['string', 'number'] + default: normal + + component_queueFontSize: + description: This sets the font size of Component Queue shape for the diagram + type: *fontSizeType + default: 14 + component_queueFontFamily: + description: This sets the font family of Component Queue shape for the diagram + type: string + default: '"Open Sans", sans-serif' + component_queueFontWeight: + description: This sets the font weight of Component Queue shape for the diagram + type: ['string', 'number'] + default: normal + external_component_queueFontSize: + description: This sets the font size of External Component Queue shape for the diagram + type: *fontSizeType + default: 14 + external_component_queueFontFamily: + description: This sets the font family of External Component Queue shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_component_queueFontWeight: + description: This sets the font weight of External Component Queue shape for the diagram + type: ['string', 'number'] + default: normal + + wrap: + description: This sets the auto-wrap state for the diagram + type: boolean + default: true + wrapPadding: + description: This sets the auto-wrap padding for the diagram (sides only) + type: number + default: 10 + + # --------------------------------------------------------------------- # + # Colors + # --------------------------------------------------------------------- # + person_bg_color: + type: string + default: '#08427B' + person_border_color: + type: string + default: '#073B6F' + external_person_bg_color: + type: string + default: '#686868' + external_person_border_color: + type: string + default: '#8A8A8A' + system_bg_color: + type: string + default: '#1168BD' + system_border_color: + type: string + default: '#3C7FC0' + system_db_bg_color: + type: string + default: '#1168BD' + system_db_border_color: + type: string + default: '#3C7FC0' + system_queue_bg_color: + type: string + default: '#1168BD' + system_queue_border_color: + type: string + default: '#3C7FC0' + external_system_bg_color: + type: string + default: '#999999' + external_system_border_color: + type: string + default: '#8A8A8A' + external_system_db_bg_color: + type: string + default: '#999999' + external_system_db_border_color: + type: string + default: '#8A8A8A' + external_system_queue_bg_color: + type: string + default: '#999999' + external_system_queue_border_color: + type: string + default: '#8A8A8A' + container_bg_color: + type: string + default: '#438DD5' + container_border_color: + type: string + default: '#3C7FC0' + container_db_bg_color: + type: string + default: '#438DD5' + container_db_border_color: + type: string + default: '#3C7FC0' + container_queue_bg_color: + type: string + default: '#438DD5' + container_queue_border_color: + type: string + default: '#3C7FC0' + external_container_bg_color: + type: string + default: '#B3B3B3' + external_container_border_color: + type: string + default: '#A6A6A6' + external_container_db_bg_color: + type: string + default: '#B3B3B3' + external_container_db_border_color: + type: string + default: '#A6A6A6' + external_container_queue_bg_color: + type: string + default: '#B3B3B3' + external_container_queue_border_color: + type: string + default: '#A6A6A6' + component_bg_color: + type: string + default: '#85BBF0' + component_border_color: + type: string + default: '#78A8D8' + component_db_bg_color: + type: string + default: '#85BBF0' + component_db_border_color: + type: string + default: '#78A8D8' + component_queue_bg_color: + type: string + default: '#85BBF0' + component_queue_border_color: + type: string + default: '#78A8D8' + external_component_bg_color: + type: string + default: '#CCCCCC' + external_component_border_color: + type: string + default: '#BFBFBF' + external_component_db_bg_color: + type: string + default: '#CCCCCC' + external_component_db_border_color: + type: string + default: '#BFBFBF' + external_component_queue_bg_color: + type: string + default: '#CCCCCC' + external_component_queue_border_color: + type: string + default: '#BFBFBF' + + # Font Calculators + # By default, these all return the values from this configuration. + personFont: { '$ref': '#/$defs/FontCalculator' } + external_personFont: { '$ref': '#/$defs/FontCalculator' } + systemFont: { '$ref': '#/$defs/FontCalculator' } + external_systemFont: { '$ref': '#/$defs/FontCalculator' } + system_dbFont: { '$ref': '#/$defs/FontCalculator' } + external_system_dbFont: { '$ref': '#/$defs/FontCalculator' } + system_queueFont: { '$ref': '#/$defs/FontCalculator' } + external_system_queueFont: { '$ref': '#/$defs/FontCalculator' } + containerFont: { '$ref': '#/$defs/FontCalculator' } + external_containerFont: { '$ref': '#/$defs/FontCalculator' } + container_dbFont: { '$ref': '#/$defs/FontCalculator' } + external_container_dbFont: { '$ref': '#/$defs/FontCalculator' } + container_queueFont: { '$ref': '#/$defs/FontCalculator' } + external_container_queueFont: { '$ref': '#/$defs/FontCalculator' } + componentFont: { '$ref': '#/$defs/FontCalculator' } + external_componentFont: { '$ref': '#/$defs/FontCalculator' } + component_dbFont: { '$ref': '#/$defs/FontCalculator' } + external_component_dbFont: { '$ref': '#/$defs/FontCalculator' } + component_queueFont: { '$ref': '#/$defs/FontCalculator' } + external_component_queueFont: { '$ref': '#/$defs/FontCalculator' } + boundaryFont: { '$ref': '#/$defs/FontCalculator' } + messageFont: { '$ref': '#/$defs/FontCalculator' } + + GitGraphDiagramConfig: + title: Git Graph Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + type: object + unevaluatedProperties: false + required: + - titleTopMargin + properties: + titleTopMargin: + # TODO: I've removed the `Git` part from this description, so that I + # could $ref: "#/$defs/GitGraphDiagramConfig/properties/titleTopMargin" + # this field in other diagrams + description: Margin top for the text over the diagram + type: integer + default: 25 + minimum: 0 + diagramPadding: + type: number + default: 8 + nodeLabel: + allOf: [{ $ref: '#/$defs/NodeLabel' }] + type: object + default: + width: 75 + height: 100 + x: -25 + y: 0 + mainBranchName: + type: string + default: 'main' + mainBranchOrder: + type: number + default: 0 + showCommitLabel: + type: boolean + default: true + showBranches: + type: boolean + default: true + rotateCommitLabel: + type: boolean + default: true + # YAML anchor reference, don't use $ref since ajv doesn't load defaults + arrowMarkerAbsolute: *arrowMarkerAbsolute + + NodeLabel: + title: Node Label + type: object + properties: + width: + type: number + height: + type: number + x: + type: number + y: + type: number + + RequirementDiagramConfig: + title: Requirement Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for req diagrams + type: object + unevaluatedProperties: false + required: + - useMaxWidth + properties: + rect_fill: + type: string + default: '#f9f9f9' + text_color: + type: string + default: '#333' + rect_border_size: + type: string + default: '0.5px' + rect_border_color: + type: string + default: '#bbb' + rect_min_width: + type: number + default: 200 + rect_min_height: + type: number + default: 200 + fontSize: + type: number # TODO, should this be `type: *fontSizeType` (aka string too) + default: 14 + rect_padding: + type: number + default: 10 + line_height: + type: number + default: 20 + + MindmapDiagramConfig: + title: Mindmap Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for mindmap diagrams + type: object + unevaluatedProperties: false + required: + - useMaxWidth + - padding + - maxNodeWidth + properties: + padding: + type: number + default: 10 + maxNodeWidth: + type: number + default: 200 + + PieDiagramConfig: + title: Pie Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + type: object + unevaluatedProperties: false + properties: + textPosition: + type: number + minimum: 0 + maximum: 1 + description: | + Axial position of slice's label from zero at the center to 1 at the outside edges. + default: 0.75 + + QuadrantChartConfig: + title: Quadrant Chart Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + type: object + unevaluatedProperties: false + required: + - chartWidth + - chartHeight + - titleFontSize + - titlePadding + - quadrantPadding + - xAxisLabelPadding + - yAxisLabelPadding + - xAxisLabelFontSize + - yAxisLabelFontSize + - quadrantLabelFontSize + - quadrantTextTopPadding + - pointTextPadding + - pointLabelFontSize + - pointRadius + - xAxisPosition + - yAxisPosition + - quadrantInternalBorderStrokeWidth + - quadrantExternalBorderStrokeWidth + - useMaxWidth + properties: + chartWidth: + description: Width of the chart + type: number + minimum: 0 + default: 500 + chartHeight: + description: Height of the chart + type: number + minimum: 0 + default: 500 + titleFontSize: + description: Chart title top and bottom padding + type: number + minimum: 0 + default: 20 + titlePadding: + description: Padding around the quadrant square + type: number + minimum: 0 + default: 10 + quadrantPadding: + description: quadrant title padding from top if the quadrant is rendered on top + type: number + minimum: 0 + default: 5 + xAxisLabelPadding: + description: Padding around x-axis labels + type: number + minimum: 0 + default: 5 + yAxisLabelPadding: + description: Padding around y-axis labels + type: number + minimum: 0 + default: 5 + xAxisLabelFontSize: + description: x-axis label font size + type: number + minimum: 0 + default: 16 + yAxisLabelFontSize: + description: y-axis label font size + type: number + minimum: 0 + default: 16 + quadrantLabelFontSize: + description: quadrant title font size + type: number + minimum: 0 + default: 16 + quadrantTextTopPadding: + description: quadrant title padding from top if the quadrant is rendered on top + type: number + minimum: 0 + default: 5 + pointTextPadding: + description: padding between point and point label + type: number + minimum: 0 + default: 5 + pointLabelFontSize: + description: point title font size + type: number + minimum: 0 + default: 12 + pointRadius: + description: radius of the point to be drawn + type: number + minimum: 0 + default: 5 + xAxisPosition: + description: position of x-axis labels + type: string + enum: + - top + - bottom + default: top + yAxisPosition: + description: position of y-axis labels + type: string + enum: + - left + - right + default: left + quadrantInternalBorderStrokeWidth: + description: stroke width of edges of the box that are inside the quadrant + type: number + minimum: 0 + default: 1 + quadrantExternalBorderStrokeWidth: + description: stroke width of edges of the box that are outside the quadrant + type: number + minimum: 0 + default: 2 + + ErDiagramConfig: + title: Er Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for entity relationship diagrams + type: object + unevaluatedProperties: false + required: + - titleTopMargin + - diagramPadding + - layoutDirection + - minEntityWidth + - minEntityHeight + - entityPadding + - stroke + - fill + # TODO: fontSize is the only property that is not required, is this correct? + - useMaxWidth + properties: + titleTopMargin: + $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin' + default: 25 + diagramPadding: + description: | + The amount of padding around the diagram as a whole so that embedded + diagrams have margins, expressed in pixels. + type: integer + default: 20 + minimum: 0 + layoutDirection: + description: Directional bias for layout of entities + type: string + enum: ['TB', 'BT', 'LR', 'RL'] + meta:enum: + TB: Top-Bottom + BT: Bottom-Top + LR: Left-Right + RL: Right to Left + default: TB + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "TB" | "BT" | "LR" | "RL"' + minEntityWidth: + description: The minimum width of an entity box. Expressed in pixels. + type: integer + default: 100 + minimum: 0 + minEntityHeight: + description: The minimum height of an entity box. Expressed in pixels. + type: integer + default: 75 + minimum: 0 + entityPadding: + description: | + The minimum internal padding between text in an entity box and the enclosing box borders. + Expressed in pixels. + type: integer + default: 15 + minimum: 0 + stroke: + description: Stroke color of box edges and lines. + type: string + default: gray + fill: + description: Fill color of entity boxes + type: string + default: honeydew + fontSize: + description: Font size (expressed as an integer representing a number of pixels) + type: integer + default: 12 + minimum: 0 + + StateDiagramConfig: + title: State Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for entity relationship diagrams + type: object + unevaluatedProperties: false + required: + - titleTopMargin + - useMaxWidth + - defaultRenderer + properties: + titleTopMargin: + $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin' + default: 25 + arrowMarkerAbsolute: + # TODO: use $ref: '#/properties/arrowMarkerAbsolute' to copy main setting + type: boolean + dividerMargin: + type: number + default: 10 + sizeUnit: + type: number + default: 5 + padding: + type: number + default: 8 + textHeight: + type: number + default: 10 + titleShift: + type: number + default: -15 + noteMargin: + type: number + default: 10 + forkWidth: + type: number + default: 70 + forkHeight: + type: number + default: 7 + # Used + miniPadding: + type: number + default: 2 + fontSizeFactor: + description: | + Font size factor, this is used to guess the width of the edges labels + before rendering by dagre layout. + This might need updating if/when switching font + type: number + default: 5.02 + fontSize: + type: number + default: 24 + labelHeight: + type: number + default: 16 + edgeLengthFactor: + type: string + default: '20' + compositTitleSize: + type: number + default: 35 + radius: + type: number + default: 5 + defaultRenderer: + description: | + Decides which rendering engine that is to be used for the rendering. + type: string + enum: + - dagre-d3 + - dagre-wrapper + - elk + # todo, check this, old docs said dagre-d3 even though value was dagre-wrapper + default: dagre-wrapper + meta:enum: + dagre-d3: The [dagre-d3-es](https://www.npmjs.com/package/dagre-d3-es) library. + dagre-wrapper: wrapper for dagre implemented in mermaid + elk: Layout using [elkjs](https://github.com/kieler/elkjs) + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "dagre-d3" | "dagre-wrapper" | "elk"' + + ClassDiagramConfig: + title: Class Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + type: object + unevaluatedProperties: false + required: + - titleTopMargin + - useMaxWidth + - defaultRenderer + properties: + titleTopMargin: + $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin' + default: 25 + # YAML anchor reference, don't use $ref since ajv doesn't load defaults + arrowMarkerAbsolute: *arrowMarkerAbsolute + dividerMargin: + type: number + default: 10 + padding: + type: number + default: 5 + textHeight: + type: number + default: 10 + defaultRenderer: + $ref: '#/$defs/StateDiagramConfig/properties/defaultRenderer' + default: dagre-wrapper + nodeSpacing: + type: integer + minimum: 0 + # should the default value be 50? + # see https://github.com/mermaid-js/mermaid/blob/7647ae317a7b2130e32777248d25a9c4d24b8f9f/packages/mermaid/src/diagrams/class/classRenderer-v2.ts#L258 + rankSpacing: + type: integer + minimum: 0 + # should the default value be 50? + # see https://github.com/mermaid-js/mermaid/blob/7647ae317a7b2130e32777248d25a9c4d24b8f9f/packages/mermaid/src/diagrams/class/classRenderer-v2.ts#L259 + diagramPadding: + $ref: '#/$defs/ErDiagramConfig/properties/diagramPadding' + htmlLabels: + type: boolean + default: false + + JourneyDiagramConfig: + title: Journey Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: | + The object containing configurations specific for journey diagrams + type: object + unevaluatedProperties: false + required: + - diagramMarginX + - diagramMarginY + - leftMargin + - width + - height + - boxMargin + - boxTextMargin + - noteMargin + - messageMargin + - messageAlign + - bottomMarginAdj + - useMaxWidth + - rightAngles + properties: + diagramMarginX: + $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginX' + default: 50 + diagramMarginY: + $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginY' + default: 10 + leftMargin: + description: Margin between actors + type: integer + default: 150 + minimum: 0 + width: + description: Width of actor boxes + type: integer + default: 150 + minimum: 0 + height: + description: Height of actor boxes + type: integer + default: 50 + minimum: 0 + boxMargin: + description: Margin around loop boxes + type: integer + default: 10 + minimum: 0 + boxTextMargin: + description: Margin around the text in loop/alt/opt boxes + type: integer + default: 5 + minimum: 0 + noteMargin: + description: Margin around notes + type: integer + default: 10 + minimum: 0 + messageMargin: + description: Space between messages. + type: integer + default: 35 + minimum: 0 + messageAlign: + description: Multiline message alignment + type: string + enum: + - left + - center + - right + default: center + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "left" | "center" | "right"' + bottomMarginAdj: + description: | + Prolongs the edge of the diagram downwards. + + Depending on css styling this might need adjustment. + type: integer + default: 1 + minimum: 0 + rightAngles: + description: | + Curved Arrows become Right Angles + + This will display arrows that start and begin at the same node as + right angles, rather than as curves. + type: boolean + default: false + taskFontSize: + type: *fontSizeType + default: 14 + taskFontFamily: + type: string + default: '"Open Sans", sans-serif' + taskMargin: + type: number + default: 50 + activationWidth: + description: Width of activation box + type: number + default: 10 + textPlacement: + description: | + text placement as: tspan | fo | old only text as before + type: string + # TODO, should this be an enum? + default: fo + actorColours: + type: array + items: + type: string + default: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'] + sectionFills: + type: array + items: + type: string + default: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'] + sectionColours: + type: array + items: + type: string + default: ['#fff'] + + TimelineDiagramConfig: + # added by https://github.com/mermaid-js/mermaid/commit/0d5246fbc730bf15463d7183fe4400a1e2fc492c + title: Timeline Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + type: object + unevaluatedProperties: false + required: + - diagramMarginX + - diagramMarginY + - leftMargin + - width + - height + - boxMargin + - boxTextMargin + - noteMargin + - messageMargin + - messageAlign + - bottomMarginAdj + - useMaxWidth + properties: + diagramMarginX: + $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginX' + default: 50 + diagramMarginY: + $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginY' + default: 10 + leftMargin: + description: Margin between actors + type: integer + default: 150 + minimum: 0 + width: + description: Width of actor boxes + type: integer + default: 150 + minimum: 0 + height: + description: Height of actor boxes + type: integer + default: 50 + minimum: 0 + padding: + type: number + # should the default value be 50? + # see https://github.com/mermaid-js/mermaid/blob/7647ae317a7b2130e32777248d25a9c4d24b8f9f/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts#L237 + boxMargin: + description: Margin around loop boxes + type: integer + default: 10 + minimum: 0 + boxTextMargin: + description: Margin around the text in loop/alt/opt boxes + type: integer + default: 5 + minimum: 0 + noteMargin: + description: Margin around notes + type: integer + default: 10 + minimum: 0 + messageMargin: + description: Space between messages. + type: integer + default: 35 + minimum: 0 + messageAlign: + description: Multiline message alignment + type: string + enum: + - left + - center + - right + default: center + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "left" | "center" | "right"' + bottomMarginAdj: + description: | + Prolongs the edge of the diagram downwards. + + Depending on css styling this might need adjustment. + type: integer + default: 1 + minimum: 0 + rightAngles: + description: | + Curved Arrows become Right Angles + + This will display arrows that start and begin at the same node as + right angles, rather than as curves. + type: boolean + default: false + taskFontSize: + type: *fontSizeType + default: 14 + taskFontFamily: + type: string + default: '"Open Sans", sans-serif' + taskMargin: + type: number + default: 50 + activationWidth: + description: Width of activation box + type: number + default: 10 + textPlacement: + description: | + text placement as: tspan | fo | old only text as before + type: string + # TODO, should this be an enum? + default: fo + actorColours: + type: array + items: + type: string + default: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'] + sectionFills: + type: array + items: + type: string + default: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'] + sectionColours: + type: array + items: + type: string + default: ['#fff'] + disableMulticolor: + # added by https://github.com/mermaid-js/mermaid/commit/652a42fe1aed7911a781a84716940a973b995639 + type: boolean + default: false + + GanttDiagramConfig: + title: Gantt Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: | + The object containing configurations specific for gantt diagrams + type: object + unevaluatedProperties: false + required: + - titleTopMargin + - barHeight + - topPadding + - rightPadding + - leftPadding + - gridLineStartPadding + - fontSize + - sectionFontSize + - numberSectionStyles + - axisFormat + - useMaxWidth + - topAxis + properties: + titleTopMargin: + $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin' + default: 25 + barHeight: + description: The height of the bars in the graph + type: integer + default: 20 + minimum: 0 + barGap: + description: The margin between the different activities in the gantt diagram + type: integer + default: 4 + minimum: 0 + topPadding: + description: | + Margin between title and gantt diagram and between axis and gantt diagram. + type: integer + default: 50 + minimum: 0 + rightPadding: + description: | + The space allocated for the section name to the right of the activities + type: integer + default: 75 + minimum: 0 + leftPadding: + description: | + The space allocated for the section name to the left of the activities + type: integer + default: 75 + minimum: 0 + gridLineStartPadding: + description: Vertical starting position of the grid lines + type: integer + default: 35 + minimum: 0 + fontSize: + description: Font size + type: integer + default: 11 + minimum: 0 + sectionFontSize: + description: Font size for sections + type: integer + # TODO: typescript type for this also allows strings, but the docs say only integers + tsType: 'string | number' + default: 11 + minimum: 0 + numberSectionStyles: + description: The number of alternating section styles + type: integer + default: 4 + minimum: 0 + axisFormat: + description: | + Date/time format of the axis + + This might need adjustment to match your locale and preferences. + type: string + default: '%Y-%m-%d' + tickInterval: + description: | + axis ticks + + Pattern is: + + ```javascript + /^([1-9][0-9]*)(minute|hour|day|week|month)$/ + ``` + type: string + pattern: ^([1-9][0-9]*)(minute|hour|day|week|month)$ + topAxis: + description: | + When this flag is set, date labels will be added to the top of the chart + type: boolean + default: false + displayMode: + description: | + Controls the display mode. + type: string + enum: + - '' + - compact + meta:enum: + compact: Enables displaying multiple tasks on the same row. + default: '' + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "compact"' + + SequenceDiagramConfig: + title: Sequence Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for sequence diagrams + type: object + unevaluatedProperties: false + required: + - activationWidth + - diagramMarginX + - diagramMarginY + - actorMargin + - width + - height + - boxMargin + - boxTextMargin + - noteMargin + - messageMargin + - messageAlign + - mirrorActors + - forceMenus + - bottomMarginAdj + - useMaxWidth + - rightAngles + - showSequenceNumbers + - actorFontSize + - actorFontFamily + - actorFontWeight + - noteFontSize + - noteFontFamily + - noteFontWeight + - noteAlign + - messageFontSize + - messageFontFamily + - messageFontWeight + properties: + arrowMarkerAbsolute: + type: boolean # TODO, is this actually used here (it has no default value but was in types) + hideUnusedParticipants: + type: boolean + default: false + activationWidth: + description: Width of the activation rect + type: integer + default: 10 + minimum: 0 + diagramMarginX: + description: Margin to the right and left of the sequence diagram + type: integer + default: 50 + minimum: 0 + diagramMarginY: + description: Margin to the over and under the sequence diagram + type: integer + default: 10 + minimum: 0 + actorMargin: + description: Margin between actors + type: integer + default: 50 + minimum: 0 + width: + $ref: '#/$defs/JourneyDiagramConfig/properties/width' + default: 150 + height: + $ref: '#/$defs/JourneyDiagramConfig/properties/height' + default: 65 + boxMargin: + $ref: '#/$defs/JourneyDiagramConfig/properties/boxMargin' + default: 10 + boxTextMargin: + $ref: '#/$defs/JourneyDiagramConfig/properties/boxTextMargin' + default: 5 + noteMargin: + $ref: '#/$defs/JourneyDiagramConfig/properties/noteMargin' + default: 10 + messageMargin: + $ref: '#/$defs/JourneyDiagramConfig/properties/messageMargin' + default: 35 + messageAlign: + $ref: '#/$defs/JourneyDiagramConfig/properties/messageAlign' + default: center + mirrorActors: + description: | + Mirror actors under diagram + type: boolean + default: true + forceMenus: + description: | + forces actor popup menus to always be visible (to support E2E testing). + type: boolean + default: false + bottomMarginAdj: + $ref: '#/$defs/JourneyDiagramConfig/properties/bottomMarginAdj' + default: 1 + rightAngles: + $ref: '#/$defs/JourneyDiagramConfig/properties/rightAngles' + default: false + showSequenceNumbers: + description: This will show the node numbers + type: boolean + default: false + actorFontSize: + description: This sets the font size of the actor's description + type: *fontSizeType + default: 14 + actorFontFamily: + description: This sets the font family of the actor's description + type: string + default: '"Open Sans", sans-serif' + actorFontWeight: + description: This sets the font weight of the actor's description + type: ['string', 'number'] + default: 400 + + noteFontSize: + description: This sets the font size of actor-attached notes + type: *fontSizeType + default: 14 + noteFontFamily: + description: This sets the font family of actor-attached notes + type: string + default: '"trebuchet ms", verdana, arial, sans-serif' + noteFontWeight: + description: This sets the font weight of actor-attached notes + type: ['string', 'number'] + default: 400 + noteAlign: + description: This sets the text alignment of actor-attached notes + type: string + enum: ['left', 'center', 'right'] + default: 'center' + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "left" | "center" | "right"' + + messageFontSize: + description: This sets the font size of actor messages + type: *fontSizeType + default: 16 + messageFontFamily: + description: This sets the font family of actor messages + type: string + default: '"trebuchet ms", verdana, arial, sans-serif' + messageFontWeight: + description: This sets the font weight of actor messages + type: ['string', 'number'] + default: 400 + + wrap: + description: This sets the auto-wrap state for the diagram + type: boolean + default: false # different from C4 Diagram + wrapPadding: + $ref: '#/$defs/C4DiagramConfig/properties/wrapPadding' + default: 10 + labelBoxWidth: + description: This sets the width of the loop-box (loop, alt, opt, par) + type: number + default: 50 + labelBoxHeight: + description: This sets the height of the loop-box (loop, alt, opt, par) + type: number + default: 20 + messageFont: { '$ref': '#/$defs/FontCalculator' } + noteFont: { '$ref': '#/$defs/FontCalculator' } + actorFont: { '$ref': '#/$defs/FontCalculator' } + + FlowchartDiagramConfig: + title: Flowchart Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for flowcharts + type: object + unevaluatedProperties: false + required: + - titleTopMargin + - diagramPadding + - htmlLabels + - nodeSpacing + - rankSpacing + - curve + - useMaxWidth + - defaultRenderer + - wrappingWidth + properties: + titleTopMargin: + $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin' + default: 25 + arrowMarkerAbsolute: + type: boolean # TODO, is this actually used here (it has no default value but was in types) + diagramPadding: + $ref: '#/$defs/ErDiagramConfig/properties/diagramPadding' + default: 8 + htmlLabels: + description: | + Flag for setting whether or not a html tag should be used for rendering labels on the edges. + type: boolean + default: true + nodeSpacing: + description: | + Defines the spacing between nodes on the same level + + Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, + and the vertical spacing for LR as well as RL graphs. + type: integer + default: 50 + minimum: 0 + rankSpacing: + description: | + Defines the spacing between nodes on different levels + + Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, + and the vertical spacing for LR as well as RL graphs. + type: integer + default: 50 + minimum: 0 + curve: + description: | + Defines how mermaid renders curves for flowcharts. + type: string + enum: ['basis', 'linear', 'cardinal'] + default: 'basis' + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "basis" | "linear" | "cardinal"' + padding: + description: | + Represents the padding between the labels and the shape + + **Only used in new experimental rendering.** + type: number + default: 15 + defaultRenderer: + $ref: '#/$defs/StateDiagramConfig/properties/defaultRenderer' + default: dagre-wrapper + wrappingWidth: + description: | + Width of nodes where text is wrapped. + + When using markdown strings the text ius wrapped automatically, this + value sets the max width of a text before it continues on a new line. + type: number + default: 200 + + SankeyLinkColor: + description: | + Picks the color of the sankey diagram links, using the colors of the source and/or target of the links. + type: string + enum: + - source + - target + - gradient + meta:enum: + source: Use the source of sankey link for the color of the link. + target: Use the target of sankey link for the color of the link. + gradient: Use a gradient of the source and target for the color of the link. + default: gradient + + SankeyNodeAlignment: + description: | + Controls the alignment of the Sankey diagrams. + + See . + type: string + enum: + - left + - right + - center + - justify + meta:enum: + left: Align all inputs to the left. + right: Align all outputs to the right. + center: Like `left`, except that nodes without any incoming links are moved as right as possible. + justify: Like `left`, except that nodes without any outgoing links are moved to the far right. + default: justify + + SankeyDiagramConfig: + title: Sankey Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for sankey diagrams. + type: object + unevaluatedProperties: false + properties: + width: + type: number + default: 600 + height: + type: number + default: 400 + linkColor: + description: | + The color of the links in the sankey diagram. + anyOf: + - $ref: '#/$defs/SankeyLinkColor' + - description: An arbtirary [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) + type: string + default: gradient + nodeAlignment: + $ref: '#/$defs/SankeyNodeAlignment' + default: justify + useMaxWidth: + default: false + + FontCalculator: + title: Font Calculator + description: | + JavaScript function that returns a `FontConfig`. + + By default, these return the appropriate `*FontSize`, `*FontFamily`, `*FontWeight` + values. + + For example, the font calculator called `boundaryFont` might be defined as: + + ```javascript + boundaryFont: function () { + return { + fontFamily: this.boundaryFontFamily, + fontSize: this.boundaryFontSize, + fontWeight: this.boundaryFontWeight, + }; + } + ``` + tsType: '() => Partial' + + FontConfig: + title: Font Config + type: object + additionalProperties: false + properties: + fontSize: + title: CSS Font Size + description: The font size to use + type: *fontSizeType + default: 14 + fontFamily: + description: The CSS [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) to use. + type: string + default: '"Open Sans", sans-serif' + fontWeight: + description: The font weight to use. + type: ['string', 'number'] + default: normal From 52a1243da58244adafc6b7053776239865b3d5ac Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 22 Dec 2022 01:19:02 +0000 Subject: [PATCH 144/263] build: use vite to get default mermaid config Adds a vitepress JsonSchema plugin that automatically loads the Mermaid Config JSON Schema from a .schema.yaml file and gets the default values from it. --- .vite/build.ts | 2 + .vite/jsonSchemaPlugin.ts | 150 ++ docs/config/setup/modules/defaultConfig.md | 35 +- package.json | 1 + packages/mermaid/src/defaultConfig.ts | 2108 +------------------- pnpm-lock.yaml | 33 +- vite.config.ts | 2 + 7 files changed, 216 insertions(+), 2115 deletions(-) create mode 100644 .vite/jsonSchemaPlugin.ts diff --git a/.vite/build.ts b/.vite/build.ts index 85c9b7fa0f..b89df9e310 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -2,6 +2,7 @@ import { build, InlineConfig, type PluginOption } from 'vite'; import { resolve } from 'path'; import { fileURLToPath } from 'url'; import jisonPlugin from './jisonPlugin.js'; +import jsonSchemaPlugin from './jsonSchemaPlugin.js'; import { readFileSync } from 'fs'; import typescript from '@rollup/plugin-typescript'; import { visualizer } from 'rollup-plugin-visualizer'; @@ -121,6 +122,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) }, plugins: [ jisonPlugin(), + jsonSchemaPlugin(), // handles `.schema.yaml` files // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite typescript({ compilerOptions: { declaration: false } }), istanbul({ diff --git a/.vite/jsonSchemaPlugin.ts b/.vite/jsonSchemaPlugin.ts new file mode 100644 index 0000000000..671a9612e8 --- /dev/null +++ b/.vite/jsonSchemaPlugin.ts @@ -0,0 +1,150 @@ +import { load, JSON_SCHEMA } from 'js-yaml'; +import assert from 'node:assert'; +import Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js'; +import { PluginOption } from 'vite'; + +import type { MermaidConfig, BaseDiagramConfig } from '../packages/mermaid/src/config.type.js'; + +/** + * All of the keys in the mermaid config that have a mermaid diagram config. + */ +const MERMAID_CONFIG_DIAGRAM_KEYS = [ + 'flowchart', + 'sequence', + 'gantt', + 'journey', + 'class', + 'state', + 'er', + 'pie', + 'quadrantChart', + 'requirement', + 'mindmap', + 'timeline', + 'gitGraph', + 'c4', + 'sankey', +] as const; + +/** + * Generate default values from the JSON Schema. + * + * AJV does not support nested default values yet (or default values with $ref), + * so we need to manually find them (this may be fixed in ajv v9). + * + * @param mermaidConfigSchema - The Mermaid JSON Schema to use. + * @returns The default mermaid config object. + */ +function generateDefaults(mermaidConfigSchema: JSONSchemaType) { + const ajv = new Ajv2019({ + useDefaults: true, + allowUnionTypes: true, + strict: true, + }); + + ajv.addKeyword({ + keyword: 'meta:enum', // used by jsonschema2md + errors: false, + }); + ajv.addKeyword({ + keyword: 'tsType', // used by json-schema-to-typescript + errors: false, + }); + + // ajv currently doesn't support nested default values, see https://github.com/ajv-validator/ajv/issues/1718 + // (may be fixed in v9) so we need to manually use sub-schemas + const mermaidDefaultConfig = {}; + + assert.ok(mermaidConfigSchema.$defs); + const baseDiagramConfig = mermaidConfigSchema.$defs.BaseDiagramConfig; + + for (const key of MERMAID_CONFIG_DIAGRAM_KEYS) { + const subSchemaRef = mermaidConfigSchema.properties[key].$ref; + const [root, defs, defName] = subSchemaRef.split('/'); + assert.strictEqual(root, '#'); + assert.strictEqual(defs, '$defs'); + const subSchema = { + $schema: mermaidConfigSchema.$schema, + $defs: mermaidConfigSchema.$defs, + ...mermaidConfigSchema.$defs[defName], + } as JSONSchemaType; + + const validate = ajv.compile(subSchema); + + mermaidDefaultConfig[key] = {}; + + for (const required of subSchema.required ?? []) { + if (subSchema.properties[required] === undefined && baseDiagramConfig.properties[required]) { + mermaidDefaultConfig[key][required] = baseDiagramConfig.properties[required].default; + } + } + if (!validate(mermaidDefaultConfig[key])) { + throw new Error( + `schema for subconfig ${key} does not have valid defaults! Errors were ${JSON.stringify( + validate.errors, + undefined, + 2 + )}` + ); + } + } + + const validate = ajv.compile(mermaidConfigSchema); + + if (!validate(mermaidDefaultConfig)) { + throw new Error( + `Mermaid config JSON Schema does not have valid defaults! Errors were ${JSON.stringify( + validate.errors, + undefined, + 2 + )}` + ); + } + + return mermaidDefaultConfig; +} + +/** + * Vite plugin that handles JSON Schemas saved as a `.schema.yaml` file. + * + * Use `my-example.schema.yaml?only-defaults=true` to only load the default values. + */ +export default function jsonSchemaPlugin(): PluginOption { + return { + name: 'json-schema-plugin', + transform(src: string, id: string) { + const idAsUrl = new URL(id, 'file:///'); + + if (!idAsUrl.pathname.endsWith('schema.yaml')) { + return; + } + + if (idAsUrl.searchParams.get('only-defaults')) { + const jsonSchema = load(src, { + filename: idAsUrl.pathname, + // only allow JSON types in our YAML doc (will probably be default in YAML 1.3) + // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`. + schema: JSON_SCHEMA, + }) as JSONSchemaType; + return { + code: `export default ${JSON.stringify(generateDefaults(jsonSchema), undefined, 2)};`, + map: null, // no source map + }; + } else { + return { + code: `export default ${JSON.stringify( + load(src, { + filename: idAsUrl.pathname, + // only allow JSON types in our YAML doc (will probably be default in YAML 1.3) + // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`. + schema: JSON_SCHEMA, + }), + undefined, + 2 + )};`, + map: null, // provide source map if available + }; + } + }, + }; +} diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index 793dfffaee..a55ec18085 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -[defaultConfig.ts:2300](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2300) +[defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266) --- @@ -22,35 +22,12 @@ β€’ `Const` **default**: `Partial`<`MermaidConfig`> -**Configuration methods in Mermaid version 8.6.0 have been updated, to learn more\[[click -here](8.6.0_docs.md)].** +Default mermaid configuration options. -## **What follows are config instructions for older versions** - -These are the default options which can be overridden with the initialization call like so: - -**Example 1:** - -```js -mermaid.initialize({ flowchart: { htmlLabels: false } }); -``` - -**Example 2:** - -```html - -``` - -A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). -A description of each option follows below. +Please see the Mermaid config JSON Schema for the default JSON values. +Non-JSON JS default values are listed in this file, e.g. functions, or +`undefined` (explicitly set so that `configKeys` finds them). #### Defined in -[defaultConfig.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L33) +[defaultConfig.ts:16](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L16) diff --git a/package.json b/package.json index 738d1796a7..e21e02d149 100644 --- a/package.json +++ b/package.json @@ -81,6 +81,7 @@ "@vitest/coverage-v8": "^0.32.2", "@vitest/spy": "^0.32.2", "@vitest/ui": "^0.32.2", + "ajv": "^8.12.0", "concurrently": "^8.0.1", "cors": "^2.8.5", "coveralls": "^3.1.1", diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index cc2b79a804..62b361cff4 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -1,559 +1,29 @@ import theme from './themes/index.js'; import { type MermaidConfig } from './config.type.js'; + +// Uses our custom Vite jsonSchemaPlugin to load only the default values from +// our JSON Schema +// @ts-expect-error This file is automatically generated via a custom Vite plugin +import defaultConfigJson from './schemas/config.schema.yaml?only-defaults=true'; + /** - * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click - * here](8.6.0_docs.md)].** - * - * ## **What follows are config instructions for older versions** - * - * These are the default options which can be overridden with the initialization call like so: - * - * **Example 1:** - * - * ```js - * mermaid.initialize({ flowchart:{ htmlLabels: false } }); - * ``` + * Default mermaid configuration options. * - * **Example 2:** - * - * ```html - * - * ``` - * - * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). - * A description of each option follows below. + * Please see the Mermaid config JSON Schema for the default JSON values. + * Non-JSON JS default values are listed in this file, e.g. functions, or + * `undefined` (explicitly set so that `configKeys` finds them). */ const config: Partial = { - /** - * Theme , the CSS style sheet - * - * | Parameter | Description | Type | Required | Values | - * | --------- | --------------- | ------ | -------- | ---------------------------------------------- | - * | theme | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' | - * - * **Notes:** To disable any pre-defined mermaid theme, use "null". - * - * @example - * - * ```js - * { - * "theme": "forest", - * "themeCSS": ".node rect { fill: red; }" - * } - * ``` - */ - theme: 'default', - themeVariables: theme['default'].getThemeVariables(), - themeCSS: undefined, - /* **maxTextSize** - The maximum allowed size of the users text diagram */ - maxTextSize: 50000, - darkMode: false, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- | - * | fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily | - * - * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif;'. - */ - fontFamily: '"trebuchet ms", verdana, arial, sans-serif;', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ----------------------------------------------------- | ---------------- | -------- | --------------------------------------------- | - * | logLevel | This option decides the amount of logging to be used. | string \| number | Required | 'trace','debug','info','warn','error','fatal' | - * - * **Notes:** - * - * - Trace: 0 - * - Debug: 1 - * - Info: 2 - * - Warn: 3 - * - Error: 4 - * - Fatal: 5 (default) - */ - logLevel: 5, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ | - * | securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' | - * - * **Notes**: - * - * - **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled. - * - **antiscript**: HTML tags in text are allowed (only script elements are removed), and click - * functionality is enabled. - * - **loose**: HTML tags in text are allowed and click functionality is enabled. - * - **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This - * prevent any JavaScript from running in the context. This may hinder interactive functionality - * of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc. - */ - securityLevel: 'strict', - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | -------------------------------------------- | ------- | -------- | ----------- | - * | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false | - * - * **Notes:** Default value: true - */ - startOnLoad: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- | - * | arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | boolean | Required | true, false | - * - * **Notes**: - * - * This matters if you are using base tag settings. - * - * Default value: false - */ - arrowMarkerAbsolute: false, - - /** - * This option controls which currentConfig keys are considered _secure_ and can only be changed - * via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the - * `secure` keys in the current currentConfig. This prevents malicious graph directives from - * overriding a site's default security. - * - * **Notes**: - * - * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'] - */ - secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'], - /** - * This option controls if the generated ids of nodes in the SVG are generated randomly or based - * on a seed. If set to false, the IDs are generated based on the current date and thus are not - * deterministic. This is the default behavior. - * - * **Notes**: - * - * This matters if your files are checked into source control e.g. git and should not change unless - * content is changed. - * - * Default value: false - */ - deterministicIds: false, - - /** - * This option is the optional seed for deterministic ids. if set to undefined but - * deterministicIds is true, a simple number iterator is used. You can set this attribute to base - * the seed on a static string. - */ + ...defaultConfigJson, + // Set, even though they're `undefined` so that `configKeys` finds these keys + // TODO: Should we replace these with `null` so that they can go in the JSON Schema? deterministicIDSeed: undefined, + themeCSS: undefined, - /** The object containing configurations specific for flowcharts */ - flowchart: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the flowchart | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ | - * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value | - * - * **Notes:** - * - * The amount of padding around the diagram as a whole so that embedded diagrams have margins, - * expressed in pixels - * - * Default value: 8 - */ - diagramPadding: 8, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | - * | htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | boolean | Required | true, false | - * - * **Notes:** Default value: true. - */ - htmlLabels: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------------------------------------- | ------- | -------- | ------------------- | - * | nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Number | - * - * **Notes:** - * - * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the - * vertical spacing for LR as well as RL graphs.** - * - * Default value: 50 - */ - nodeSpacing: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------------------------------------------------- | ------- | -------- | ------------------- | - * | rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Number | - * - * **Notes**: - * - * Pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal - * spacing for LR as well as RL graphs. - * - * Default value 50 - */ - rankSpacing: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- | - * | curve | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' | - * - * **Notes:** - * - * Default Value: 'basis' - */ - curve: 'basis', - // Only used in new experimental rendering - // represents the padding between the labels and the shape - padding: 15, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------- | ------- | -------- | ----------------------- | - * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper, elk | - * - * **Notes:** - * - * Decides which rendering engine that is to be used for the rendering. Legal values are: - * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid, elk for layout using - * elkjs - * - * Default value: 'dagre-wrapper' - */ - defaultRenderer: 'dagre-wrapper', - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------- | ------- | -------- | ----------------------- | - * | wrappingWidth | See notes | number | 4 | width of nodes where text is wrapped | - * - * **Notes:** - * - * When using markdown strings the text ius wrapped automatically, this - * value sets the max width of a text before it continues on a new line. - * Default value: 'dagre-wrapper' - */ - wrappingWidth: 200, - }, - - /** The object containing configurations specific for sequence diagrams */ + // add non-JSON default config values + themeVariables: theme['default'].getThemeVariables(), sequence: { - hideUnusedParticipants: false, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------- | ------- | -------- | ------------------ | - * | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value | - * - * **Notes:** Default value :10 - */ - activationWidth: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - diagramMarginX: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - diagramMarginY: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------- | ------- | -------- | ------------------ | - * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - actorMargin: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | -------------------- | ------- | -------- | ------------------ | - * | width | Width of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 150 - */ - width: 150, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | --------------------- | ------- | -------- | ------------------ | - * | height | Height of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 65 - */ - height: 65, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ------------------------ | ------- | -------- | ------------------ | - * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - boxMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | - * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 5 - */ - boxTextMargin: 5, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ------------------- | ------- | -------- | ------------------ | - * | noteMargin | margin around notes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - noteMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ---------------------- | ------- | -------- | ------------------ | - * | messageMargin | Space between messages | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 35 - */ - messageMargin: 35, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | --------------------------- | ------ | -------- | ------------------------- | - * | messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' | - * - * **Notes:** Default value: 'center' - */ - messageAlign: 'center', - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | --------------------------- | ------- | -------- | ----------- | - * | mirrorActors | Mirror actors under diagram | boolean | Required | true, false | - * - * **Notes:** Default value: true - */ - mirrorActors: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ----------------------------------------------------------------------- | ------- | -------- | ----------- | - * | forceMenus | forces actor popup menus to always be visible (to support E2E testing). | Boolean | Required | True, False | - * - * **Notes:** - * - * Default value: false. - */ - forceMenus: false, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | - * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | Required | Any Positive Value | - * - * **Notes:** - * - * Depending on css styling this might need adjustment. - * - * Default value: 1 - */ - bottomMarginAdj: 1, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** When this flag is set to true, the height and width is set to 100% and is then - * scaling with the available space. If set to false, the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ------------------------------------ | ------- | -------- | ----------- | - * | rightAngles | display curve arrows as right angles | boolean | Required | true, false | - * - * **Notes:** - * - * This will display arrows that start and begin at the same node as right angles, rather than a - * curve - * - * Default value: false - */ - rightAngles: false, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------- | ------------------------------- | ------- | -------- | ----------- | - * | showSequenceNumbers | This will show the node numbers | boolean | Required | true, false | - * - * **Notes:** Default value: false - */ - showSequenceNumbers: false, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | -------------------------------------------------- | ------- | -------- | ------------------ | - * | actorFontSize | This sets the font size of the actor's description | Integer | Require | Any Positive Value | - * - * **Notes:** **Default value 14**.. - */ - actorFontSize: 14, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- | - * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily | - * - * **Notes:** Default value: "'Open Sans", sans-serif' - */ - actorFontFamily: '"Open Sans", sans-serif', - - /** - * This sets the font weight of the actor's description - * - * **Notes:** Default value: 400. - */ - actorFontWeight: 400, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | ----------------------------------------------- | ------- | -------- | ------------------ | - * | noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 14 - */ - noteFontSize: 14, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- | - * | noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily | - * - * **Notes:** Default value: ''"trebuchet ms", verdana, arial, sans-serif' - */ - noteFontFamily: '"trebuchet ms", verdana, arial, sans-serif', - - /** - * This sets the font weight of the note's description - * - * **Notes:** Default value: 400 - */ - noteFontWeight: 400, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- | - * | noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' | - * - * **Notes:** Default value: 'center' - */ - noteAlign: 'center', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------------------------------------- | ------- | -------- | ------------------- | - * | messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number | - * - * **Notes:** Default value: 16 - */ - messageFontSize: 16, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- | - * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily | - * - * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif' - */ - messageFontFamily: '"trebuchet ms", verdana, arial, sans-serif', - - /** - * This sets the font weight of the message's description - * - * **Notes:** Default value: 400. - */ - messageFontWeight: 400, - - /** - * This sets the auto-wrap state for the diagram - * - * **Notes:** Default value: false. - */ - wrap: false, - - /** - * This sets the auto-wrap padding for the diagram (sides only) - * - * **Notes:** Default value: 0. - */ - wrapPadding: 10, - - /** - * This sets the width of the loop-box (loop, alt, opt, par) - * - * **Notes:** Default value: 50. - */ - labelBoxWidth: 50, - - /** - * This sets the height of the loop-box (loop, alt, opt, par) - * - * **Notes:** Default value: 20. - */ - labelBoxHeight: 20, - + ...defaultConfigJson.sequence, messageFont: function () { return { fontFamily: this.messageFontFamily, @@ -576,1476 +46,14 @@ const config: Partial = { }; }, }, - - /** The object containing configurations specific for gantt diagrams */ gantt: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ----------------------------------- | ------- | -------- | ------------------ | - * | barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 20 - */ - barHeight: 20, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ---------------------------------------------------------------- | ------- | -------- | ------------------ | - * | barGap | The margin between the different activities in the gantt diagram | Integer | Optional | Any Positive Value | - * - * **Notes:** Default value: 4 - */ - barGap: 4, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ | - * | topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - topPadding: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | ----------------------------------------------------------------------- | ------- | -------- | ------------------ | - * | rightPadding | The space allocated for the section name to the right of the activities | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 75 - */ - rightPadding: 75, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ---------------------------------------------------------------------- | ------- | -------- | ------------------ | - * | leftPadding | The space allocated for the section name to the left of the activities | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 75 - */ - leftPadding: 75, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------------- | -------------------------------------------- | ------- | -------- | ------------------ | - * | gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 35 - */ - gridLineStartPadding: 35, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ----------- | ------- | -------- | ------------------ | - * | fontSize | Font size | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 11 - */ - fontSize: 11, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------- | ------- | -------- | ------------------ | - * | sectionFontSize | Font size for sections | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 11 - */ - sectionFontSize: 11, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------- | ---------------------------------------- | ------- | -------- | ------------------ | - * | numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value | - * - * **Notes:** Default value: 4 - */ - numberSectionStyles: 4, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ------------------------- | ------ | -------- | --------- | - * | displayMode | Controls the display mode | string | 4 | 'compact' | - * - * **Notes**: - * - * - **compact**: Enables displaying multiple tasks on the same row. - */ - displayMode: '', - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ---------------------------- | ---- | -------- | ---------------- | - * | axisFormat | Date/time format of the axis | 3 | Required | Date in yy-mm-dd | - * - * **Notes:** - * - * This might need adjustment to match your locale and preferences - * - * Default value: '%Y-%m-%d'. - */ - axisFormat: '%Y-%m-%d', - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | ------------| ------ | -------- | ------- | - * | tickInterval | axis ticks | string | Optional | string | - * - * **Notes:** - * - * Pattern is /^([1-9][0-9]*)(minute|hour|day|week|month)$/ - * - * Default value: undefined - */ + ...defaultConfigJson.gantt, tickInterval: undefined, - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ----------- | ------- | -------- | ----------- | - * | topAxis | See notes | Boolean | 4 | True, False | - * - * **Notes:** when this flag is set date labels will be added to the top of the chart - * - * **Default value false**. - */ - topAxis: false, - - useWidth: undefined, - }, - - /** The object containing configurations specific for journey diagrams */ - journey: { - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - diagramMarginX: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - diagramMarginY: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------- | ------- | -------- | ------------------ | - * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - leftMargin: 150, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | -------------------- | ------- | -------- | ------------------ | - * | width | Width of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 150 - */ - width: 150, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | --------------------- | ------- | -------- | ------------------ | - * | height | Height of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 65 - */ - height: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ------------------------ | ------- | -------- | ------------------ | - * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - boxMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | - * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 5 - */ - boxTextMargin: 5, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ------------------- | ------- | -------- | ------------------ | - * | noteMargin | Margin around notes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - noteMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ----------------------- | ------- | -------- | ------------------ | - * | messageMargin | Space between messages. | Integer | Required | Any Positive Value | - * - * **Notes:** - * - * Space between messages. - * - * Default value: 35 - */ - messageMargin: 35, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | --------------------------- | ---- | -------- | ------------------------- | - * | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | - * - * **Notes:** Default value: 'center' - */ - messageAlign: 'center', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | - * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value | - * - * **Notes:** - * - * Depending on css styling this might need adjustment. - * - * Default value: 1 - */ - bottomMarginAdj: 1, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------------------- | ---- | -------- | ----------- | - * | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false | - * - * **Notes:** - * - * This will display arrows that start and begin at the same node as right angles, rather than a - * curves - * - * Default value: false - */ - rightAngles: false, - taskFontSize: 14, - taskFontFamily: '"Open Sans", sans-serif', - taskMargin: 50, - // width of activation box - activationWidth: 10, - - // text placement as: tspan | fo | old only text as before - textPlacement: 'fo', - actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'], - - sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'], - sectionColours: ['#fff'], - }, - /** The object containing configurations specific for timeline diagrams */ - timeline: { - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - diagramMarginX: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - diagramMarginY: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------- | ------- | -------- | ------------------ | - * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - leftMargin: 150, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | -------------------- | ------- | -------- | ------------------ | - * | width | Width of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 150 - */ - width: 150, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | --------------------- | ------- | -------- | ------------------ | - * | height | Height of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 65 - */ - height: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ------------------------ | ------- | -------- | ------------------ | - * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - boxMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | - * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 5 - */ - boxTextMargin: 5, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ------------------- | ------- | -------- | ------------------ | - * | noteMargin | Margin around notes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - noteMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ----------------------- | ------- | -------- | ------------------ | - * | messageMargin | Space between messages. | Integer | Required | Any Positive Value | - * - * **Notes:** - * - * Space between messages. - * - * Default value: 35 - */ - messageMargin: 35, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | --------------------------- | ---- | -------- | ------------------------- | - * | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | - * - * **Notes:** Default value: 'center' - */ - messageAlign: 'center', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | - * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value | - * - * **Notes:** - * - * Depending on css styling this might need adjustment. - * - * Default value: 1 - */ - bottomMarginAdj: 1, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------------------- | ---- | -------- | ----------- | - * | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false | - * - * **Notes:** - * - * This will display arrows that start and begin at the same node as right angles, rather than a - * curves - * - * Default value: false - */ - rightAngles: false, - taskFontSize: 14, - taskFontFamily: '"Open Sans", sans-serif', - taskMargin: 50, - // width of activation box - activationWidth: 10, - - // text placement as: tspan | fo | old only text as before - textPlacement: 'fo', - actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'], - - sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'], - sectionColours: ['#fff'], - disableMulticolor: false, - }, - class: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the class diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - arrowMarkerAbsolute: false, - dividerMargin: 10, - padding: 5, - textHeight: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------- | ------- | -------- | ----------------------- | - * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper | - * - * **Notes**: - * - * Decides which rendering engine that is to be used for the rendering. Legal values are: - * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid - * - * Default value: 'dagre-d3' - */ - defaultRenderer: 'dagre-wrapper', - }, - state: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the state diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - dividerMargin: 10, - sizeUnit: 5, - padding: 8, - textHeight: 10, - titleShift: -15, - noteMargin: 10, - forkWidth: 70, - forkHeight: 7, - // Used - miniPadding: 2, - // Font size factor, this is used to guess the width of the edges labels before rendering by dagre - // layout. This might need updating if/when switching font - fontSizeFactor: 5.02, - fontSize: 24, - labelHeight: 16, - edgeLengthFactor: '20', - compositTitleSize: 35, - radius: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------- | ------- | -------- | ----------------------- | - * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper | - * - * **Notes:** - * - * Decides which rendering engine that is to be used for the rendering. Legal values are: - * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid - * - * Default value: 'dagre-d3' - */ - defaultRenderer: 'dagre-wrapper', - }, - - /** The object containing configurations specific for entity relationship diagrams */ - er: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ | - * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value | - * - * **Notes:** - * - * The amount of padding around the diagram as a whole so that embedded diagrams have margins, - * expressed in pixels - * - * Default value: 20 - */ - diagramPadding: 20, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------------- | ------ | -------- | ---------------------- | - * | layoutDirection | Directional bias for layout of entities. | string | Required | "TB", "BT", "LR", "RL" | - * - * **Notes:** - * - * 'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left. - * - * T = top, B = bottom, L = left, and R = right. - * - * Default value: 'TB' - */ - layoutDirection: 'TB', - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------- | ------- | -------- | ------------------ | - * | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value | - * - * **Notes:** Expressed in pixels. Default value: 100 - */ - minEntityWidth: 100, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------------------------------- | ------- | -------- | ------------------ | - * | minEntityHeight | The minimum height of an entity box | Integer | 4 | Any Positive Value | - * - * **Notes:** Expressed in pixels Default value: 75 - */ - minEntityHeight: 75, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ | - * | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4 | Any Positive Value | - * - * **Notes:** - * - * The minimum internal padding between text in an entity box and the enclosing box borders, - * expressed in pixels. - * - * Default value: 15 - */ - entityPadding: 15, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ----------------------------------- | ------ | -------- | -------------------- | - * | stroke | Stroke color of box edges and lines | string | 4 | Any recognized color | - * - * **Notes:** Default value: 'gray' - */ - stroke: 'gray', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | -------------------------- | ------ | -------- | -------------------- | - * | fill | Fill color of entity boxes | string | 4 | Any recognized color | - * - * **Notes:** Default value: 'honeydew' - */ - fill: 'honeydew', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ------------------- | ------- | -------- | ------------------ | - * | fontSize | Font Size in pixels | Integer | | Any Positive Value | - * - * **Notes:** - * - * Font size (expressed as an integer representing a number of pixels) Default value: 12 - */ - fontSize: 12, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** - * - * When this flag is set to true, the diagram width is locked to 100% and scaled based on - * available space. If set to false, the diagram reserves its absolute width. - * - * Default value: true - */ - useMaxWidth: true, - }, - - /** The object containing configurations specific for pie diagrams */ - pie: { - useWidth: undefined, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** - * - * When this flag is set to true, the diagram width is locked to 100% and scaled based on - * available space. If set to false, the diagram reserves its absolute width. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | -------------------------------------------------------------------------------- | ------- | -------- | ------------------- | - * | textPosition | Axial position of slice's label from zero at the center to 1 at the outside edge | Number | Optional | Decimal from 0 to 1 | - * - * **Notes:** Default value: 0.75 - */ - textPosition: 0.75, + useWidth: undefined, // can probably be removed since `configKeys` already includes this }, - - quadrantChart: { - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | - * | chartWidth | Width of the chart | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 500 - */ - chartWidth: 500, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | - * | chartHeight | Height of the chart | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 500 - */ - chartHeight: 500, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | - * | titlePadding | Chart title top and bottom padding | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 10 - */ - titlePadding: 10, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | - * | titleFontSize | Chart title font size | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 20 - */ - titleFontSize: 20, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | - * | quadrantPadding | Padding around the quadrant square | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - quadrantPadding: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ---------------------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------- | - * | quadrantTextTopPadding | quadrant title padding from top if the quadrant is rendered on top | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - quadrantTextTopPadding: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | - * | quadrantLabelFontSize | quadrant title font size | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 16 - */ - quadrantLabelFontSize: 16, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------------------------- | ------------------------------------------------------------- | ------- | -------- | ------------------- | - * | quadrantInternalBorderStrokeWidth | stroke width of edges of the box that are inside the quadrant | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 1 - */ - quadrantInternalBorderStrokeWidth: 1, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------------------------- | -------------------------------------------------------------- | ------- | -------- | ------------------- | - * | quadrantExternalBorderStrokeWidth | stroke width of edges of the box that are outside the quadrant | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 2 - */ - quadrantExternalBorderStrokeWidth: 2, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | - * | xAxisLabelPadding | Padding around x-axis labels | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - xAxisLabelPadding: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | - * | xAxisLabelFontSize | x-axis label font size | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 16 - */ - xAxisLabelFontSize: 16, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ------------------------------- | ------- | -------- | ------------------- | - * | xAxisPosition | position of x-axis labels | string | Optional | 'top' or 'bottom' | - * - * **Notes:** - * Default value: top - */ - xAxisPosition: 'top', - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | - * | yAxisLabelPadding | Padding around y-axis labels | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - yAxisLabelPadding: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | - * | yAxisLabelFontSize | y-axis label font size | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 16 - */ - yAxisLabelFontSize: 16, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ------------------------------- | ------- | -------- | ------------------- | - * | yAxisPosition | position of y-axis labels | string | Optional | 'left' or 'right' | - * - * **Notes:** - * Default value: left - */ - yAxisPosition: 'left', - /** - * | Parameter | Description | Type | Required | Values | - * | ---------------------- | -------------------------------------- | ------- | -------- | ------------------- | - * | pointTextPadding | padding between point and point label | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - pointTextPadding: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ---------------------- | ---------------------- | ------- | -------- | ------------------- | - * | pointTextPadding | point title font size | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 12 - */ - pointLabelFontSize: 12, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ------------------------------- | ------- | -------- | ------------------- | - * | pointRadius | radius of the point to be drawn | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - pointRadius: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** - * - * When this flag is set to true, the diagram width is locked to 100% and scaled based on - * available space. If set to false, the diagram reserves its absolute width. - * - * Default value: true - */ - useMaxWidth: true, - }, - - /** The object containing configurations specific for req diagrams */ - requirement: { - useWidth: undefined, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** - * - * When this flag is set to true, the diagram width is locked to 100% and scaled based on - * available space. If set to false, the diagram reserves its absolute width. - * - * Default value: true - */ - useMaxWidth: true, - - rect_fill: '#f9f9f9', - text_color: '#333', - rect_border_size: '0.5px', - rect_border_color: '#bbb', - rect_min_width: 200, - rect_min_height: 200, - fontSize: 14, - rect_padding: 10, - line_height: 20, - }, - gitGraph: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the Git diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - diagramPadding: 8, - nodeLabel: { - width: 75, - height: 100, - x: -25, - y: 0, - }, - mainBranchName: 'main', - mainBranchOrder: 0, - showCommitLabel: true, - showBranches: true, - rotateCommitLabel: true, - }, - - /** The object containing configurations specific for c4 diagrams */ c4: { + ...defaultConfigJson.c4, useWidth: undefined, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginX | Margin to the right and left of the c4 diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - diagramMarginX: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - diagramMarginY: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | --------------------- | ------- | -------- | ------------------ | - * | c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - c4ShapeMargin: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------- | ------- | -------- | ------------------ | - * | c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 20 - */ - c4ShapePadding: 20, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | --------------------- | ------- | -------- | ------------------ | - * | width | Width of person boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 216 - */ - width: 216, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ---------------------- | ------- | -------- | ------------------ | - * | height | Height of person boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 60 - */ - height: 60, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ------------------- | ------- | -------- | ------------------ | - * | boxMargin | Margin around boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - boxMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** When this flag is set to true, the height and width is set to 100% and is then - * scaling with the available space. If set to false, the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | ----------- | ------- | -------- | ------------------ | - * | c4ShapeInRow | See Notes | Integer | Required | Any Positive Value | - * - * **Notes:** How many shapes to place in each row. - * - * Default value: 4 - */ - c4ShapeInRow: 4, - - nextLinePaddingX: 0, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------- | ------- | -------- | ------------------ | - * | c4BoundaryInRow | See Notes | Integer | Required | Any Positive Value | - * - * **Notes:** How many boundaries to place in each row. - * - * Default value: 2 - */ - c4BoundaryInRow: 2, - - /** - * This sets the font size of Person shape for the diagram - * - * **Notes:** Default value: 14. - */ - personFontSize: 14, - /** - * This sets the font family of Person shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - personFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Person shape for the diagram - * - * **Notes:** Default value: normal. - */ - personFontWeight: 'normal', - - /** - * This sets the font size of External Person shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_personFontSize: 14, - /** - * This sets the font family of External Person shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_personFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Person shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_personFontWeight: 'normal', - - /** - * This sets the font size of System shape for the diagram - * - * **Notes:** Default value: 14. - */ - systemFontSize: 14, - /** - * This sets the font family of System shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - systemFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of System shape for the diagram - * - * **Notes:** Default value: normal. - */ - systemFontWeight: 'normal', - - /** - * This sets the font size of External System shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_systemFontSize: 14, - /** - * This sets the font family of External System shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_systemFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External System shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_systemFontWeight: 'normal', - - /** - * This sets the font size of System DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - system_dbFontSize: 14, - /** - * This sets the font family of System DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - system_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of System DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - system_dbFontWeight: 'normal', - - /** - * This sets the font size of External System DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_system_dbFontSize: 14, - /** - * This sets the font family of External System DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_system_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External System DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_system_dbFontWeight: 'normal', - - /** - * This sets the font size of System Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - system_queueFontSize: 14, - /** - * This sets the font family of System Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - system_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of System Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - system_queueFontWeight: 'normal', - - /** - * This sets the font size of External System Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_system_queueFontSize: 14, - /** - * This sets the font family of External System Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_system_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External System Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_system_queueFontWeight: 'normal', - - /** - * This sets the font size of Boundary shape for the diagram - * - * **Notes:** Default value: 14. - */ - boundaryFontSize: 14, - /** - * This sets the font family of Boundary shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - boundaryFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Boundary shape for the diagram - * - * **Notes:** Default value: normal. - */ - boundaryFontWeight: 'normal', - - /** - * This sets the font size of Message shape for the diagram - * - * **Notes:** Default value: 12. - */ - messageFontSize: 12, - /** - * This sets the font family of Message shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - messageFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Message shape for the diagram - * - * **Notes:** Default value: normal. - */ - messageFontWeight: 'normal', - - /** - * This sets the font size of Container shape for the diagram - * - * **Notes:** Default value: 14. - */ - containerFontSize: 14, - /** - * This sets the font family of Container shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - containerFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Container shape for the diagram - * - * **Notes:** Default value: normal. - */ - containerFontWeight: 'normal', - - /** - * This sets the font size of External Container shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_containerFontSize: 14, - /** - * This sets the font family of External Container shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_containerFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Container shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_containerFontWeight: 'normal', - - /** - * This sets the font size of Container DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - container_dbFontSize: 14, - /** - * This sets the font family of Container DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - container_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Container DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - container_dbFontWeight: 'normal', - - /** - * This sets the font size of External Container DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_container_dbFontSize: 14, - /** - * This sets the font family of External Container DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_container_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Container DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_container_dbFontWeight: 'normal', - - /** - * This sets the font size of Container Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - container_queueFontSize: 14, - /** - * This sets the font family of Container Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - container_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Container Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - container_queueFontWeight: 'normal', - - /** - * This sets the font size of External Container Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_container_queueFontSize: 14, - /** - * This sets the font family of External Container Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_container_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Container Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_container_queueFontWeight: 'normal', - - /** - * This sets the font size of Component shape for the diagram - * - * **Notes:** Default value: 14. - */ - componentFontSize: 14, - /** - * This sets the font family of Component shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - componentFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Component shape for the diagram - * - * **Notes:** Default value: normal. - */ - componentFontWeight: 'normal', - - /** - * This sets the font size of External Component shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_componentFontSize: 14, - /** - * This sets the font family of External Component shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_componentFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Component shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_componentFontWeight: 'normal', - - /** - * This sets the font size of Component DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - component_dbFontSize: 14, - /** - * This sets the font family of Component DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - component_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Component DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - component_dbFontWeight: 'normal', - - /** - * This sets the font size of External Component DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_component_dbFontSize: 14, - /** - * This sets the font family of External Component DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_component_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Component DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_component_dbFontWeight: 'normal', - - /** - * This sets the font size of Component Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - component_queueFontSize: 14, - /** - * This sets the font family of Component Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - component_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Component Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - component_queueFontWeight: 'normal', - - /** - * This sets the font size of External Component Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_component_queueFontSize: 14, - /** - * This sets the font family of External Component Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_component_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Component Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_component_queueFontWeight: 'normal', - - /** - * This sets the auto-wrap state for the diagram - * - * **Notes:** Default value: true. - */ - wrap: true, - - /** - * This sets the auto-wrap padding for the diagram (sides only) - * - * **Notes:** Default value: 0. - */ - wrapPadding: 10, - personFont: function () { return { fontFamily: this.personFontFamily, @@ -2221,72 +229,30 @@ const config: Partial = { fontWeight: this.messageFontWeight, }; }, - - // ' Colors - // ' ################################## - person_bg_color: '#08427B', - person_border_color: '#073B6F', - external_person_bg_color: '#686868', - external_person_border_color: '#8A8A8A', - system_bg_color: '#1168BD', - system_border_color: '#3C7FC0', - system_db_bg_color: '#1168BD', - system_db_border_color: '#3C7FC0', - system_queue_bg_color: '#1168BD', - system_queue_border_color: '#3C7FC0', - external_system_bg_color: '#999999', - external_system_border_color: '#8A8A8A', - external_system_db_bg_color: '#999999', - external_system_db_border_color: '#8A8A8A', - external_system_queue_bg_color: '#999999', - external_system_queue_border_color: '#8A8A8A', - container_bg_color: '#438DD5', - container_border_color: '#3C7FC0', - container_db_bg_color: '#438DD5', - container_db_border_color: '#3C7FC0', - container_queue_bg_color: '#438DD5', - container_queue_border_color: '#3C7FC0', - external_container_bg_color: '#B3B3B3', - external_container_border_color: '#A6A6A6', - external_container_db_bg_color: '#B3B3B3', - external_container_db_border_color: '#A6A6A6', - external_container_queue_bg_color: '#B3B3B3', - external_container_queue_border_color: '#A6A6A6', - component_bg_color: '#85BBF0', - component_border_color: '#78A8D8', - component_db_bg_color: '#85BBF0', - component_db_border_color: '#78A8D8', - component_queue_bg_color: '#85BBF0', - component_queue_border_color: '#78A8D8', - external_component_bg_color: '#CCCCCC', - external_component_border_color: '#BFBFBF', - external_component_db_bg_color: '#CCCCCC', - external_component_db_border_color: '#BFBFBF', - external_component_queue_bg_color: '#CCCCCC', - external_component_queue_border_color: '#BFBFBF', }, - mindmap: { - useMaxWidth: true, - padding: 10, - maxNodeWidth: 200, + pie: { + ...defaultConfigJson.pie, + useWidth: undefined, + }, + requirement: { + ...defaultConfigJson.requirement, + useWidth: undefined, + }, + gitGraph: { + ...defaultConfigJson.gitGraph, + // TODO: This is a temporary override for `gitGraph`, since every other + // diagram does have `useMaxWidth`, but instead sets it to `true`. + // Should we set this to `true` instead? + useMaxWidth: false, }, sankey: { - width: 600, - height: 400, - linkColor: 'gradient', - nodeAlignment: 'justify', + ...defaultConfigJson.sankey, + // this is false, unlike every other diagram (other than gitGraph) + // TODO: can we make this default to `true` instead? useMaxWidth: false, }, - fontSize: 16, }; -if (config.class) { - config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute; -} -if (config.gitGraph) { - config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute; -} - const keyify = (obj: any, prefix = ''): string[] => Object.keys(obj).reduce((res: string[], el): string[] => { if (Array.isArray(obj[el])) { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 832703bae9..919087c7cd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -71,6 +71,9 @@ importers: '@vitest/ui': specifier: ^0.32.2 version: 0.32.2(vitest@0.32.2) + ajv: + specifier: ^8.12.0 + version: 8.12.0 concurrently: specifier: ^8.0.1 version: 8.0.1 @@ -663,13 +666,13 @@ packages: resolution: {integrity: sha512-qe8Nmh9rYI/HIspLSTwtbMFPj6dISG6+dJnOguTlPNXtCvS2uezdxscVBb7/3DrmNbQK49TDqpkSQ1chbRGdpQ==} dev: true - /@apideck/better-ajv-errors@0.3.6(ajv@8.11.0): + /@apideck/better-ajv-errors@0.3.6(ajv@8.12.0): resolution: {integrity: sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==} engines: {node: '>=10'} peerDependencies: ajv: '>=8' dependencies: - ajv: 8.11.0 + ajv: 8.12.0 json-schema: 0.4.0 jsonpointer: 5.0.1 leven: 3.1.0 @@ -2258,7 +2261,7 @@ packages: engines: {node: '>=v14'} dependencies: '@commitlint/types': 17.4.4 - ajv: 8.11.0 + ajv: 8.12.0 dev: true /@commitlint/ensure@17.4.4: @@ -5799,7 +5802,7 @@ packages: indent-string: 5.0.0 dev: true - /ajv-formats@2.1.1(ajv@8.11.0): + /ajv-formats@2.1.1(ajv@8.12.0): resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==} peerDependencies: ajv: ^8.0.0 @@ -5807,7 +5810,7 @@ packages: ajv: optional: true dependencies: - ajv: 8.11.0 + ajv: 8.12.0 dev: true /ajv-keywords@3.5.2(ajv@6.12.6): @@ -5818,12 +5821,12 @@ packages: ajv: 6.12.6 dev: true - /ajv-keywords@5.1.0(ajv@8.11.0): + /ajv-keywords@5.1.0(ajv@8.12.0): resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==} peerDependencies: ajv: ^8.8.2 dependencies: - ajv: 8.11.0 + ajv: 8.12.0 fast-deep-equal: 3.1.3 dev: true @@ -5836,8 +5839,8 @@ packages: uri-js: 4.4.1 dev: true - /ajv@8.11.0: - resolution: {integrity: sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==} + /ajv@8.12.0: + resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==} dependencies: fast-deep-equal: 3.1.3 json-schema-traverse: 1.0.0 @@ -11063,7 +11066,7 @@ packages: /light-my-request@4.12.0: resolution: {integrity: sha512-0y+9VIfJEsPVzK5ArSIJ8Dkxp8QMP7/aCuxCUtG/tr9a2NoOf/snATE/OUc05XUplJCEnRh6gTkH7xh9POt1DQ==} dependencies: - ajv: 8.11.0 + ajv: 8.12.0 cookie: 0.5.0 process-warning: 1.0.0 set-cookie-parser: 2.6.0 @@ -13514,9 +13517,9 @@ packages: engines: {node: '>= 12.13.0'} dependencies: '@types/json-schema': 7.0.11 - ajv: 8.11.0 - ajv-formats: 2.1.1(ajv@8.11.0) - ajv-keywords: 5.1.0(ajv@8.11.0) + ajv: 8.12.0 + ajv-formats: 2.1.1(ajv@8.12.0) + ajv-keywords: 5.1.0(ajv@8.12.0) dev: true /search-insights@2.6.0: @@ -15924,7 +15927,7 @@ packages: resolution: {integrity: sha512-CttE7WCYW9sZC+nUYhQg3WzzGPr4IHmrPnjKiu3AMXsiNQKx+l4hHl63WTrnicLmKEKHScWDH8xsGBdrYgtBzg==} engines: {node: '>=16.0.0'} dependencies: - '@apideck/better-ajv-errors': 0.3.6(ajv@8.11.0) + '@apideck/better-ajv-errors': 0.3.6(ajv@8.12.0) '@babel/core': 7.12.3 '@babel/preset-env': 7.20.2(@babel/core@7.12.3) '@babel/runtime': 7.21.0 @@ -15932,7 +15935,7 @@ packages: '@rollup/plugin-node-resolve': 11.2.1(rollup@2.79.1) '@rollup/plugin-replace': 2.4.2(rollup@2.79.1) '@surma/rollup-plugin-off-main-thread': 2.2.3 - ajv: 8.11.0 + ajv: 8.12.0 common-tags: 1.8.2 fast-json-stable-stringify: 2.1.0 fs-extra: 9.1.0 diff --git a/vite.config.ts b/vite.config.ts index 36d08351e0..080ff981f5 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,4 +1,5 @@ import jison from './.vite/jisonPlugin.js'; +import jsonSchemaPlugin from './.vite/jsonSchemaPlugin.js'; import typescript from '@rollup/plugin-typescript'; import { defineConfig } from 'vitest/config'; @@ -8,6 +9,7 @@ export default defineConfig({ }, plugins: [ jison(), + jsonSchemaPlugin(), // handles .schema.yaml JSON Schema files // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite typescript({ compilerOptions: { declaration: false } }), ], From 0230722d361b56d5b524bbb434912767c7ab70ad Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 22 Dec 2022 01:55:55 +0000 Subject: [PATCH 145/263] build(docs): build JSON Schema docs Automatically build documentation for JSON Schema. This is only built when running with `--vitepress`, as it currently produces loads of markdown files, which I feel like we shouldn't be committing. This currently manually uses some internal `jsonschema2md` functions so that we can manually control the Markdown output. --- packages/mermaid/package.json | 2 + packages/mermaid/src/docs.mts | 99 ++++++++++++++++++++++- pnpm-lock.yaml | 146 +++++++++++++++++++++++++++++++++- 3 files changed, 243 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index c73275a6fd..cd193f8a5f 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -74,6 +74,7 @@ "web-worker": "^1.2.0" }, "devDependencies": { + "@adobe/jsonschema2md": "^7.1.4", "@types/cytoscape": "^3.19.9", "@types/d3": "^7.4.0", "@types/d3-sankey": "^0.12.1", @@ -109,6 +110,7 @@ "typedoc-plugin-markdown": "^3.15.2", "typescript": "^5.0.4", "unist-util-flatmap": "^1.0.0", + "unist-util-visit": "^4.1.2", "vitepress": "^1.0.0-alpha.72", "vitepress-plugin-search": "^1.0.4-alpha.20" }, diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts index f6efc1169c..1a5ed5ea0f 100644 --- a/packages/mermaid/src/docs.mts +++ b/packages/mermaid/src/docs.mts @@ -34,7 +34,7 @@ import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync } import { exec } from 'child_process'; import { globby } from 'globby'; import { JSDOM } from 'jsdom'; -import type { Code, Root } from 'mdast'; +import type { Code, ListItem, Root, Text } from 'mdast'; import { posix, dirname, relative, join } from 'path'; import prettier from 'prettier'; import { remark } from 'remark'; @@ -44,6 +44,7 @@ import chokidar from 'chokidar'; import mm from 'micromatch'; // @ts-ignore No typescript declaration file import flatmap from 'unist-util-flatmap'; +import { visit } from 'unist-util-visit'; const MERMAID_MAJOR_VERSION = ( JSON.parse(readFileSync('../mermaid/package.json', 'utf8')).version as string @@ -150,6 +151,7 @@ const copyTransformedContents = (filename: string, doCopy = false, transformedCo } filesTransformed.add(fileInFinalDocDir); + if (doCopy) { writeFileSync(fileInFinalDocDir, newBuffer); } @@ -321,6 +323,93 @@ const transformMarkdown = (file: string) => { copyTransformedContents(file, !verifyOnly, formatted); }; +import { load, JSON_SCHEMA } from 'js-yaml'; +// @ts-ignore: we're importing internal jsonschema2md functions +import { default as schemaLoader } from '@adobe/jsonschema2md/lib/schemaProxy.js'; +// @ts-ignore: we're importing internal jsonschema2md functions +import { default as traverseSchemas } from '@adobe/jsonschema2md/lib/traverseSchema.js'; +// @ts-ignore: we're importing internal jsonschema2md functions +import { default as buildMarkdownFromSchema } from '@adobe/jsonschema2md/lib/markdownBuilder.js'; +// @ts-ignore: we're importing internal jsonschema2md functions +import { default as jsonSchemaReadmeBuilder } from '@adobe/jsonschema2md/lib/readmeBuilder.js'; + +/** + * Transforms the given JSON Schema into Markdown documentation + */ +async function transormJsonSchema(file: string) { + const yamlContents = readSyncedUTF8file(file); + const jsonSchema = load(yamlContents, { + filename: file, + // only allow JSON types in our YAML doc (will probably be default in YAML 1.3) + // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`. + schema: JSON_SCHEMA, + }); + + // write .schema.json files + const jsonFileName = file + .replace('.schema.yaml', '.schema.json') + .replace('src/schemas/', 'src/docs/schemas/'); + copyTransformedContents(jsonFileName, !verifyOnly, JSON.stringify(jsonSchema, undefined, 2)); + + const schemas = traverseSchemas([schemaLoader()(file, jsonSchema)]); + + // ignore output of this function + // for some reason, without calling this function, we get some broken links + // this is probably a bug in @adobe/jsonschema2md + jsonSchemaReadmeBuilder({ readme: true })(schemas); + + // write Markdown files + const markdownFiles = buildMarkdownFromSchema({ + header: true, + // links, + includeProperties: ['tsType'], // Custom TypeScript type + exampleFormat: 'json', + // skipProperties, + })(schemas); + + for (const [name, markdownAst] of Object.entries(markdownFiles)) { + /* + * Converts list entries of shape '- tsType: () => Partial' + * into '- tsType: `() => Partial`' (e.g. escaping with back-ticks), + * as otherwise VitePress doesn't like the bit. + */ + visit(markdownAst as Root, 'listItem', (listEntry: ListItem) => { + let listText: Text; + const blockItem = listEntry.children[0]; + if (blockItem.type === 'paragraph' && blockItem.children[0].type === 'text') { + listText = blockItem.children[0]; + } // @ts-expect-error: MD AST output from @adobe/jsonschema2md is technically wrong + else if (blockItem.type === 'text') { + listText = blockItem; + } else { + return; // skip + } + + if (listText.value.startsWith('tsType: ')) { + listText.value = listText.value.replace(/tsType: (.*)/g, 'tsType: `$1`'); + } + }); + + const transformed = remark() + .use(remarkGfm) + .use(remarkFrontmatter, ['yaml']) // support YAML front-matter in Markdown + .use(transformMarkdownAst, { + // mermaid project specific plugin + originalFilename: file, + addAutogeneratedWarning: !noHeader, + removeYAML: !noHeader, + }) + .stringify(markdownAst as Root); + + const formatted = prettier.format(transformed, { + parser: 'markdown', + ...prettierConfig, + }); + const newFileName = join('src', 'docs', 'config', 'schema-docs', `${name}.md`); + copyTransformedContents(newFileName, !verifyOnly, formatted); + } +} + /** * Transform an HTML file and write the transformed file to the directory for published * documentation @@ -388,6 +477,14 @@ const main = async () => { const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**'); const action = verifyOnly ? 'Verifying' : 'Transforming'; + if (vitepress) { + console.log(`${action} 1 .schema.yaml file`); + await transormJsonSchema('src/schemas/config.schema.yaml'); + } else { + // skip because this creates so many Markdown files that it lags git + console.log('Skipping 1 .schema.yaml file'); + } + const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]); const mdFiles = await getFilesFromGlobs(mdFileGlobs); console.log(`${action} ${mdFiles.length} markdown files...`); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 919087c7cd..fad43866ee 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -255,6 +255,9 @@ importers: specifier: ^1.2.0 version: 1.2.0 devDependencies: + '@adobe/jsonschema2md': + specifier: ^7.1.4 + version: 7.1.4 '@types/cytoscape': specifier: ^3.19.9 version: 3.19.9 @@ -360,6 +363,9 @@ importers: unist-util-flatmap: specifier: ^1.0.0 version: 1.0.0 + unist-util-visit: + specifier: ^4.1.2 + version: 4.1.2 vitepress: specifier: ^1.0.0-alpha.72 version: 1.0.0-alpha.72(@algolia/client-search@4.14.2)(@types/node@18.16.0) @@ -487,6 +493,43 @@ importers: packages: + /@adobe/helix-log@6.0.0: + resolution: {integrity: sha512-+9gpf49sFDmZLV3gtjY+RmEUistqYJdVWpiqlRYpxE59x5bHFzYf93dZ7fljSTBtZdVq8lm97HxrTUloh5HvRg==} + dependencies: + big.js: 6.2.1 + colorette: 2.0.20 + ferrum: 1.9.4 + phin: 3.7.0 + polka: 0.5.2 + dev: true + + /@adobe/jsonschema2md@7.1.4: + resolution: {integrity: sha512-sqzH/G+2oNZi5ltwbl0hGJacGTDpXv7uUykzh+LD/DNfOIjUq577b1HbES/JP5yWcp4YkX4I3V5Kxltewr0BUg==} + engines: {node: '>= 14.0.0'} + hasBin: true + dependencies: + '@adobe/helix-log': 6.0.0 + '@types/json-schema': 7.0.11 + '@types/mdast': 3.0.11 + es2015-i18n-tag: 1.6.1 + ferrum: 1.9.4 + fs-extra: 11.0.0 + github-slugger: 2.0.0 + js-yaml: 4.1.0 + json-schema: 0.4.0 + mdast-builder: 1.1.1 + mdast-util-to-string: 3.1.0 + readdirp: 3.6.0 + remark-gfm: 3.0.1 + remark-parse: 10.0.1 + remark-stringify: 10.0.2 + unified: 10.1.2 + unist-util-inspect: 7.0.1 + yargs: 17.6.2 + transitivePeerDependencies: + - supports-color + dev: true + /@algolia/autocomplete-core@1.8.2: resolution: {integrity: sha512-mTeshsyFhAqw/ebqNsQpMtbnjr+qVOSKXArEj4K0d7sqc8It1XD0gkASwecm9mF/jlOQ4Z9RNg1HbdA8JPdRwQ==} dependencies: @@ -1029,6 +1072,11 @@ packages: engines: {node: '>=12.13.0'} dev: true + /@arr/every@1.0.1: + resolution: {integrity: sha512-UQFQ6SgyJ6LX42W8rHCs8KVc0JS0tzVL9ct4XYedJukskYVWTo49tNiMEK9C2HTyarbNiT/RVIRSY82vH+6sTg==} + engines: {node: '>=4'} + dev: true + /@babel/code-frame@7.18.6: resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==} engines: {node: '>=6.9.0'} @@ -3863,6 +3911,10 @@ packages: tslib: 2.5.0 dev: true + /@polka/url@0.5.0: + resolution: {integrity: sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==} + dev: true + /@polka/url@1.0.0-next.21: resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==} dev: true @@ -6250,6 +6302,10 @@ packages: tweetnacl: 0.14.5 dev: true + /big.js@6.2.1: + resolution: {integrity: sha512-bCtHMwL9LeDIozFn+oNhhFoq+yQ3BNdnsLSASUxLciOb1vgvpHsIO1dsENiGMgbb4SkP5TrzWzRiLddn8ahVOQ==} + dev: true + /binary-extensions@2.2.0: resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} engines: {node: '>=8'} @@ -6524,6 +6580,10 @@ packages: resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} dev: true + /centra@2.6.0: + resolution: {integrity: sha512-dgh+YleemrT8u85QL11Z6tYhegAs3MMxsaWAq/oXeAmYJ7VxL3SI9TZtnfaEvNDMAPolj25FXIb3S+HCI4wQaQ==} + dev: true + /chai@4.3.7: resolution: {integrity: sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==} engines: {node: '>=4'} @@ -7302,6 +7362,10 @@ packages: /csstype@3.1.2: resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} + /cuint@0.2.2: + resolution: {integrity: sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==} + dev: true + /cypress-image-snapshot@4.0.1(cypress@12.10.0)(jest@29.5.0): resolution: {integrity: sha512-PBpnhX/XItlx3/DAk5ozsXQHUi72exybBNH5Mpqj1DVmjq+S5Jd9WE5CRa4q5q0zuMZb2V2VpXHth6MjFpgj9Q==} engines: {node: '>=8'} @@ -8174,6 +8238,11 @@ packages: is-symbol: 1.0.4 dev: true + /es2015-i18n-tag@1.6.1: + resolution: {integrity: sha512-MYoh9p+JTkgnzBh0MEBON6xUyzdmwT6wzsmmFJvZujGSXiI2kM+3XvFl6+AcIO2eeL6VWgtX9szSiDTMwDxyYA==} + engines: {node: '>= 4.0.0'} + dev: true + /es6-error@4.1.1: resolution: {integrity: sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==} dev: true @@ -8834,6 +8903,10 @@ packages: engines: {node: '>= 4.9.1'} dev: true + /fastestsmallesttextencoderdecoder@1.0.22: + resolution: {integrity: sha512-Pb8d48e+oIuY4MaM64Cd7OW1gt4nxCHs7/ddPPZ/Ic3sg8yVGM7O9wDvZ7us6ScaUupzM+pfBolwtYhN1IxBIw==} + dev: true + /fastify-plugin@3.0.1: resolution: {integrity: sha512-qKcDXmuZadJqdTm6vlCqioEbyewF60b/0LOFCcYN1B6BIZGlYJumWWOYs70SFYLDAH4YqdE1cxH/RKMG7rFxgA==} dev: true @@ -8891,6 +8964,14 @@ packages: pend: 1.2.0 dev: true + /ferrum@1.9.4: + resolution: {integrity: sha512-ooNerLoIht/dK4CQJux93z/hnt9JysrXniJCI3r6YRgmHeXC57EJ8XaTCT1Gm8LfhIAeWxyJA0O7d/W3pqDYRg==} + dependencies: + fastestsmallesttextencoderdecoder: 1.0.22 + lodash.isplainobject: 4.0.6 + xxhashjs: 0.2.2 + dev: true + /fetch-blob@3.2.0: resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==} engines: {node: ^12.20 || >= 14.13} @@ -9113,6 +9194,15 @@ packages: resolution: {integrity: sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==} dev: true + /fs-extra@11.0.0: + resolution: {integrity: sha512-4YxRvMi4P5C3WQTvdRfrv5UVqbISpqjORFQAW5QPiKAauaxNCwrEdIi6pG3tDFhKKpMen+enEhHIzB/tvIO+/w==} + engines: {node: '>=14.14'} + dependencies: + graceful-fs: 4.2.10 + jsonfile: 6.1.0 + universalify: 2.0.0 + dev: true + /fs-extra@11.1.1: resolution: {integrity: sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==} engines: {node: '>=14.14'} @@ -9269,6 +9359,10 @@ packages: through2: 4.0.2 dev: true + /github-slugger@2.0.0: + resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==} + dev: true + /glob-parent@5.1.2: resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} engines: {node: '>= 6'} @@ -11376,6 +11470,13 @@ packages: engines: {node: '>= 12'} hasBin: true + /matchit@1.1.0: + resolution: {integrity: sha512-+nGYoOlfHmxe5BW5tE0EMJppXEwdSf8uBA1GTZC7Q77kbT35+VKLYJMzVNWCHSsga1ps1tPYFtFyvxvKzWVmMA==} + engines: {node: '>=6'} + dependencies: + '@arr/every': 1.0.1 + dev: true + /md5-hex@3.0.1: resolution: {integrity: sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==} engines: {node: '>=8'} @@ -11383,6 +11484,12 @@ packages: blueimp-md5: 2.19.0 dev: true + /mdast-builder@1.1.1: + resolution: {integrity: sha512-a3KBk/LmYD6wKsWi8WJrGU/rXR4yuF4Men0JO0z6dSZCm5FrXXWTRDjqK0vGSqa+1M6p9edeuypZAZAzSehTUw==} + dependencies: + '@types/unist': 2.0.6 + dev: true + /mdast-util-find-and-replace@2.2.1: resolution: {integrity: sha512-SobxkQXFAdd4b5WmEakmkVoh18icjQRxGy5OWTCzgsLRm1Fu/KCtwD1HIQSsmq5ZRjVH0Ehwg6/Fn3xIUk+nKw==} dependencies: @@ -11491,7 +11598,7 @@ packages: longest-streak: 3.0.1 mdast-util-to-string: 3.1.0 micromark-util-decode-string: 1.0.2 - unist-util-visit: 4.1.1 + unist-util-visit: 4.1.2 zwitch: 2.0.2 dev: true @@ -12568,6 +12675,13 @@ packages: resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==} dev: true + /phin@3.7.0: + resolution: {integrity: sha512-DqnVNrpYhKGBZppNKprD+UJylMeEKOZxHgPB+ZP6mGzf3uA2uox4Ep9tUm+rUc8WLIdHT3HcAE4X8fhwQA9JKg==} + engines: {node: '>= 8'} + dependencies: + centra: 2.6.0 + dev: true + /picocolors@1.0.0: resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} @@ -12696,6 +12810,13 @@ packages: hasBin: true dev: true + /polka@0.5.2: + resolution: {integrity: sha512-FVg3vDmCqP80tOrs+OeNlgXYmFppTXdjD5E7I4ET1NjvtNmQrb1/mJibybKkb/d4NA7YWAr1ojxuhpL3FHqdlw==} + dependencies: + '@polka/url': 0.5.0 + trouter: 2.0.1 + dev: true + /postcss-import@15.1.0(postcss@8.4.24): resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} @@ -14537,6 +14658,13 @@ packages: resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==} dev: true + /trouter@2.0.1: + resolution: {integrity: sha512-kr8SKKw94OI+xTGOkfsvwZQ8mWoikZDd2n8XZHjJVZUARZT+4/VV6cacRS6CLsH9bNm+HFIPU1Zx4CnNnb4qlQ==} + engines: {node: '>=6'} + dependencies: + matchit: 1.1.0 + dev: true + /ts-dedent@2.2.0: resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==} engines: {node: '>=6.10'} @@ -14823,6 +14951,12 @@ packages: resolution: {integrity: sha512-IG32jcKJlhARCYT2LsYPJWdoXYkzz3ESAdl1aa2hn9Auh+cgUmU6wgkII4yCc/1GgeWibRdELdCZh/p3QKQ1dQ==} dev: true + /unist-util-inspect@7.0.1: + resolution: {integrity: sha512-gEPeSrsYXus8012VJ00p9uZC8D0iogtLLiHlBgvS61hU22KNKduQhMKezJm83viHlLf3TYS2y9SDEFglWPDMKw==} + dependencies: + '@types/unist': 2.0.6 + dev: true + /unist-util-is@5.1.1: resolution: {integrity: sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==} dev: true @@ -14845,8 +14979,8 @@ packages: unist-util-is: 5.1.1 dev: true - /unist-util-visit@4.1.1: - resolution: {integrity: sha512-n9KN3WV9k4h1DxYR1LoajgN93wpEi/7ZplVe02IoB4gH5ctI1AaF2670BLHQYbwj+pY83gFtyeySFiyMHJklrg==} + /unist-util-visit@4.1.2: + resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==} dependencies: '@types/unist': 2.0.6 unist-util-is: 5.1.1 @@ -16165,6 +16299,12 @@ packages: resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==} dev: true + /xxhashjs@0.2.2: + resolution: {integrity: sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==} + dependencies: + cuint: 0.2.2 + dev: true + /y18n@4.0.3: resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==} dev: true From 7c3a73d4a860c7ded69e465985e9ac9e4a55d6df Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Mon, 5 Dec 2022 04:35:05 +0000 Subject: [PATCH 146/263] build(types): add script to generate Config types Add script `packages/mermaid/scripts/create-types-from-json-schema.mts` to automatically generate the TypeScript definition for `MermaidConfig` from the `MermaidConfig` JSON Schema at `packages/mermaid/src/schemas/config.schema.yaml`. To do this, we are using this library [`json-schema-to-typescript`][1], which is also used by Webpack to generate their types from their JSON Schema. In order to make sure that this isn't a breaking change, the script makes all fields **optional**, as that is what the original typescript file has. Additionally, I've put in some custom logic into the script, so that the exact same order is used for the TypeScript file, to make the `git diff` easier to review. In the future, we can remove this custom logic, once we no longer need to worry about `git merge` conflicts. [1]: https://github.com/bcherny/json-schema-to-typescript --- .eslintrc.cjs | 4 + .prettierignore | 2 + packages/mermaid/.lintstagedrc.mjs | 1 + packages/mermaid/package.json | 4 + .../scripts/create-types-from-json-schema.mts | 252 ++++++++++++++++++ pnpm-lock.yaml | 182 ++++++++++++- 6 files changed, 441 insertions(+), 4 deletions(-) create mode 100644 packages/mermaid/scripts/create-types-from-json-schema.mts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 342d15d9ff..cae97e586d 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -38,6 +38,10 @@ module.exports = { 'lodash', 'unicorn', ], + ignorePatterns: [ + // this file is automatically generated by `pnpm run --filter mermaid types:build-config` + 'packages/mermaid/src/config.type.ts', + ], rules: { curly: 'error', 'no-console': 'error', diff --git a/.prettierignore b/.prettierignore index b50a94e845..6f2d553697 100644 --- a/.prettierignore +++ b/.prettierignore @@ -7,3 +7,5 @@ pnpm-lock.yaml stats packages/mermaid/src/docs/.vitepress/components.d.ts .nyc_output +# Autogenerated by `pnpm run --filter mermaid types:build-config` +packages/mermaid/src/config.type.ts diff --git a/packages/mermaid/.lintstagedrc.mjs b/packages/mermaid/.lintstagedrc.mjs index fe79ad2546..955000e20c 100644 --- a/packages/mermaid/.lintstagedrc.mjs +++ b/packages/mermaid/.lintstagedrc.mjs @@ -4,4 +4,5 @@ export default { 'src/docs/**': ['pnpm --filter mermaid run docs:build --git'], 'src/docs.mts': ['pnpm --filter mermaid run docs:build --git'], 'src/(defaultConfig|config|mermaidAPI).ts': ['pnpm --filter mermaid run docs:build --git'], + 'src/schemas/config.schema.yaml': ['pnpm --filter mermaid run types:build-config --git'], }; diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index cd193f8a5f..66bac897f5 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -32,6 +32,8 @@ "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"", "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress", "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"", + "types:build-config": "ts-node-esm --transpileOnly scripts/create-types-from-json-schema.mts", + "types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify", "release": "pnpm build", "prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm -w run build" }, @@ -88,6 +90,7 @@ "@types/uuid": "^9.0.1", "@typescript-eslint/eslint-plugin": "^5.59.0", "@typescript-eslint/parser": "^5.59.0", + "ajv": "^8.11.2", "chokidar": "^3.5.3", "concurrently": "^8.0.1", "coveralls": "^3.1.1", @@ -98,6 +101,7 @@ "jison": "^0.4.18", "js-base64": "^3.7.5", "jsdom": "^22.0.0", + "json-schema-to-typescript": "^11.0.3", "micromatch": "^4.0.5", "path-browserify": "^1.0.1", "prettier": "^2.8.8", diff --git a/packages/mermaid/scripts/create-types-from-json-schema.mts b/packages/mermaid/scripts/create-types-from-json-schema.mts new file mode 100644 index 0000000000..e81ea70ffd --- /dev/null +++ b/packages/mermaid/scripts/create-types-from-json-schema.mts @@ -0,0 +1,252 @@ +/** + * Script to load Mermaid Config JSON Schema from YAML and to: + * + * - Validate JSON Schema + * + * Then to generate: + * + * - config.types.ts TypeScript file + */ + +/* eslint-disable no-console */ + +import { readFile, writeFile } from 'node:fs/promises'; +import { join } from 'node:path'; +import assert from 'node:assert'; +import { execFile } from 'node:child_process'; +import { promisify } from 'node:util'; + +import { load, JSON_SCHEMA } from 'js-yaml'; +import { compile, type JSONSchema } from 'json-schema-to-typescript'; + +import _Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js'; + +// Workaround for wrong AJV types, see +// https://github.com/ajv-validator/ajv/issues/2132#issuecomment-1290409907 +const Ajv2019 = _Ajv2019 as unknown as typeof _Ajv2019.default; + +// !!! -- The config.type.js file is created by this script -- !!! +import type { MermaidConfig } from '../src/config.type.js'; + +// options for running the main command +const verifyOnly = process.argv.includes('--verify'); +/** If `true`, automatically `git add` any changes (i.e. during `pnpm run pre-commit`)*/ +const git = process.argv.includes('--git'); + +/** + * All of the keys in the mermaid config that have a mermaid diagram config. + */ +const MERMAID_CONFIG_DIAGRAM_KEYS = [ + 'flowchart', + 'sequence', + 'gantt', + 'journey', + 'class', + 'state', + 'er', + 'pie', + 'quadrantChart', + 'requirement', + 'mindmap', + 'timeline', + 'gitGraph', + 'c4', + 'sankey', +]; + +/** + * Loads the MermaidConfig JSON schema YAML file. + * + * @returns The loaded JSON Schema, use {@link validateSchema} to confirm it is a valid JSON Schema. + */ +async function loadJsonSchemaFromYaml() { + const configSchemaFile = join('src', 'schemas', 'config.schema.yaml'); + const contentsYaml = await readFile(configSchemaFile, { encoding: 'utf8' }); + const jsonSchema = load(contentsYaml, { + filename: configSchemaFile, + // only allow JSON types in our YAML doc (will probably be default in YAML 1.3) + // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`. + schema: JSON_SCHEMA, + }); + return jsonSchema; +} + +/** + * Asserts that the given value is a valid JSON Schema object. + * + * @param jsonSchema - The value to validate as JSON Schema 2019-09 + * @throws {Error} if the given object is invalid. + */ +function validateSchema(jsonSchema: unknown): asserts jsonSchema is JSONSchemaType { + if (typeof jsonSchema !== 'object') { + throw new Error(`jsonSchema param is not an object: actual type is ${typeof jsonSchema}`); + } + if (jsonSchema === null) { + throw new Error('jsonSchema param must not be null'); + } + const ajv = new Ajv2019({ + allErrors: true, + allowUnionTypes: true, + strict: true, + }); + + ajv.addKeyword({ + keyword: 'meta:enum', // used by jsonschema2md (in docs.mts script) + errors: false, + }); + ajv.addKeyword({ + keyword: 'tsType', // used by json-schema-to-typescript + errors: false, + }); + + ajv.compile(jsonSchema); +} + +/** + * Generate a typescript definition from a JSON Schema using json-schema-to-typescript. + * + * @param mermaidConfigSchema - The input JSON Schema. + */ +async function generateTypescript(mermaidConfigSchema: JSONSchemaType) { + /** + * Replace all usages of `allOf` with `extends`. + * + * `extends` is only valid JSON Schema in very old versions of JSON Schema. + * However, json-schema-to-typescript creates much nicer types when using + * `extends`, so we should use them instead when possible. + * + * @param schema - The input schema. + * @returns The schema with `allOf` replaced with `extends`. + */ + function replaceAllOfWithExtends(schema: JSONSchemaType>) { + if (schema['allOf']) { + const { allOf, ...schemaWithoutAllOf } = schema; + return { + ...schemaWithoutAllOf, + extends: allOf, + }; + } + return schema; + } + + /** + * For backwards compatibility with older Mermaid Typescript defs, + * we need to make all value optional instead of required. + * + * This is because the `MermaidConfig` type is used as an input, and everything is optional, + * since all the required values have default values.s + * + * In the future, we should make make the input to Mermaid `Partial`. + * + * @todo TODO: Remove this function when Mermaid releases a new breaking change. + * @param schema - The input schema. + * @returns The schema with all required values removed. + */ + function removeRequired(schema: JSONSchemaType>) { + return { ...schema, required: [] }; + } + + /** + * This is a temporary hack to control the order the types are generated in. + * + * By default, json-schema-to-typescript outputs the $defs in the order they + * are used, then any unused schemas at the end. + * + * **The only purpose of this function is to make the `git diff` simpler** + * **We should remove this later to simplify the code** + * + * @todo TODO: Remove this function in a future PR. + * @param schema - The input schema. + * @returns The schema with all `$ref`s removed. + */ + function unrefSubschemas(schema: JSONSchemaType>) { + return { + ...schema, + properties: Object.fromEntries( + Object.entries(schema.properties).map(([key, propertySchema]) => { + if (MERMAID_CONFIG_DIAGRAM_KEYS.includes(key)) { + const { $ref, ...propertySchemaWithoutRef } = propertySchema as JSONSchemaType; + if ($ref === undefined) { + throw Error( + `subSchema ${key} is in MERMAID_CONFIG_DIAGRAM_KEYS but does not have a $ref field` + ); + } + const [ + _root, // eslint-disable-line @typescript-eslint/no-unused-vars + _defs, // eslint-disable-line @typescript-eslint/no-unused-vars + defName, + ] = $ref.split('/'); + return [ + key, + { + ...propertySchemaWithoutRef, + tsType: defName, + }, + ]; + } + return [key, propertySchema]; + }) + ), + }; + } + + assert.ok(mermaidConfigSchema.$defs); + const modifiedSchema = { + ...unrefSubschemas(removeRequired(mermaidConfigSchema)), + + $defs: Object.fromEntries( + Object.entries(mermaidConfigSchema.$defs).map(([key, subSchema]) => { + return [key, removeRequired(replaceAllOfWithExtends(subSchema))]; + }) + ), + }; + + const typescriptFile = await compile( + modifiedSchema as JSONSchema, // json-schema-to-typescript only allows JSON Schema 4 as input type + 'MermaidConfig', + { + additionalProperties: false, // in JSON Schema 2019-09, these are called `unevaluatedProperties` + unreachableDefinitions: true, // definition for FontConfig is unreachable + } + ); + + // TODO, should we somehow use the functions from `docs.mts` instead? + if (verifyOnly) { + const originalFile = await readFile('./src/config.type.ts', { encoding: 'utf-8' }); + if (typescriptFile !== originalFile) { + console.error('❌ Error: ./src/config.type.ts will be changed.'); + console.error("Please run 'pnpm run --filter mermaid types:build-config' to update this"); + process.exitCode = 1; + } else { + console.log('βœ… ./src/config.type.ts will be unchanged'); + } + } else { + console.log('Writing typescript file to ./src/config.type.ts'); + await writeFile('./src/config.type.ts', typescriptFile, { encoding: 'utf8' }); + if (git) { + console.log('πŸ“§ Git: Adding ./src/config.type.ts changed'); + await promisify(execFile)('git', ['add', './src/config.type.ts']); + } + } +} + +/** Main function */ +async function main() { + if (verifyOnly) { + console.log( + 'Verifying that ./src/config.type.ts is in sync with src/schemas/config.schema.yaml' + ); + } + + const configJsonSchema = await loadJsonSchemaFromYaml(); + + validateSchema(configJsonSchema); + + // Generate types from JSON Schema + await generateTypescript(configJsonSchema); +} + +main().catch((error) => { + console.error(error); + process.exitCode = 1; +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fad43866ee..303985a318 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -297,6 +297,9 @@ importers: '@typescript-eslint/parser': specifier: ^5.59.0 version: 5.59.0(eslint@8.39.0)(typescript@5.0.4) + ajv: + specifier: ^8.11.2 + version: 8.12.0 chokidar: specifier: ^3.5.3 version: 3.5.3 @@ -327,6 +330,9 @@ importers: jsdom: specifier: ^22.0.0 version: 22.0.0 + json-schema-to-typescript: + specifier: ^11.0.3 + version: 11.0.3 micromatch: specifier: ^4.0.5 version: 4.0.5 @@ -2258,6 +2264,15 @@ packages: '@babel/helper-validator-identifier': 7.19.1 to-fast-properties: 2.0.0 + /@bcherny/json-schema-ref-parser@9.0.9: + resolution: {integrity: sha512-vmEmnJCfpkLdas++9OYg6riIezTYqTHpqUTODJzHLzs5UnXujbOJW9VwcVCnyo1mVRt32FRr23iXBx/sX8YbeQ==} + dependencies: + '@jsdevtools/ono': 7.1.3 + '@types/json-schema': 7.0.11 + call-me-maybe: 1.0.2 + js-yaml: 4.1.0 + dev: true + /@bcoe/v8-coverage@0.2.3: resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} dev: true @@ -3857,6 +3872,10 @@ packages: '@jridgewell/resolve-uri': 3.1.0 '@jridgewell/sourcemap-codec': 1.4.14 + /@jsdevtools/ono@7.1.3: + resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==} + dev: true + /@leichtgewicht/ip-codec@2.0.4: resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==} dev: true @@ -4437,6 +4456,13 @@ packages: resolution: {integrity: sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==} dev: true + /@types/glob@7.2.0: + resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==} + dependencies: + '@types/minimatch': 5.1.2 + '@types/node': 18.16.0 + dev: true + /@types/graceful-fs@4.1.5: resolution: {integrity: sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==} dependencies: @@ -4537,6 +4563,10 @@ packages: resolution: {integrity: sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==} dev: true + /@types/minimatch@5.1.2: + resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==} + dev: true + /@types/minimist@1.2.2: resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==} dev: true @@ -6004,7 +6034,6 @@ packages: /any-promise@1.3.0: resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==} - dev: false /anymatch@3.1.2: resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==} @@ -6525,6 +6554,10 @@ packages: get-intrinsic: 1.2.0 dev: true + /call-me-maybe@1.0.2: + resolution: {integrity: sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==} + dev: true + /callsites@3.1.0: resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} engines: {node: '>=6'} @@ -6752,6 +6785,17 @@ packages: engines: {node: '>=6'} dev: true + /cli-color@2.0.3: + resolution: {integrity: sha512-OkoZnxyC4ERN3zLzZaY9Emb7f/MhBOIpePv0Ycok0fJYT+Ouo00UBEIwsVsr0yoow++n5YWlSUgST9GKhNHiRQ==} + engines: {node: '>=0.10'} + dependencies: + d: 1.0.1 + es5-ext: 0.10.62 + es6-iterator: 2.0.3 + memoizee: 0.4.15 + timers-ext: 0.1.7 + dev: true + /cli-cursor@3.1.0: resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==} engines: {node: '>=8'} @@ -7730,6 +7774,13 @@ packages: d3-zoom: 3.0.0 dev: false + /d@1.0.1: + resolution: {integrity: sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==} + dependencies: + es5-ext: 0.10.62 + type: 1.2.0 + dev: true + /dagre-d3-es@7.0.10: resolution: {integrity: sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==} dependencies: @@ -8243,10 +8294,44 @@ packages: engines: {node: '>= 4.0.0'} dev: true + /es5-ext@0.10.62: + resolution: {integrity: sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==} + engines: {node: '>=0.10'} + requiresBuild: true + dependencies: + es6-iterator: 2.0.3 + es6-symbol: 3.1.3 + next-tick: 1.1.0 + dev: true + /es6-error@4.1.1: resolution: {integrity: sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==} dev: true + /es6-iterator@2.0.3: + resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==} + dependencies: + d: 1.0.1 + es5-ext: 0.10.62 + es6-symbol: 3.1.3 + dev: true + + /es6-symbol@3.1.3: + resolution: {integrity: sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==} + dependencies: + d: 1.0.1 + ext: 1.7.0 + dev: true + + /es6-weak-map@2.0.3: + resolution: {integrity: sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==} + dependencies: + d: 1.0.1 + es5-ext: 0.10.62 + es6-iterator: 2.0.3 + es6-symbol: 3.1.3 + dev: true + /esbuild@0.17.18: resolution: {integrity: sha512-z1lix43jBs6UKjcZVKOw2xx69ffE2aG0PygLL5qJ9OS/gy0Ewd1gW/PUQIOIQGXBHWNywSc0floSKoMFF8aK2w==} engines: {node: '>=12'} @@ -8671,6 +8756,13 @@ packages: engines: {node: '>= 0.6'} dev: true + /event-emitter@0.3.5: + resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==} + dependencies: + d: 1.0.1 + es5-ext: 0.10.62 + dev: true + /event-stream@3.3.4: resolution: {integrity: sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==} dependencies: @@ -8819,6 +8911,12 @@ packages: - supports-color dev: true + /ext@1.7.0: + resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==} + dependencies: + type: 2.7.2 + dev: true + /extend@3.0.2: resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==} dev: true @@ -9375,6 +9473,16 @@ packages: dependencies: is-glob: 4.0.3 + /glob-promise@4.2.2(glob@7.2.3): + resolution: {integrity: sha512-xcUzJ8NWN5bktoTIX7eOclO1Npxd/dyVqUJxlLIDasT4C7KZyqlPIwkdJ0Ypiy3p2ZKahTjK4M9uC3sNSfNMzw==} + engines: {node: '>=12'} + peerDependencies: + glob: ^7.1.6 + dependencies: + '@types/glob': 7.2.0 + glob: 7.2.3 + dev: true + /glob-to-regexp@0.4.1: resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==} dev: true @@ -10164,6 +10272,10 @@ packages: resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==} dev: true + /is-promise@2.2.2: + resolution: {integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==} + dev: true + /is-regex@1.1.4: resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==} engines: {node: '>= 0.4'} @@ -10993,6 +11105,27 @@ packages: resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==} dev: true + /json-schema-to-typescript@11.0.3: + resolution: {integrity: sha512-EaEE9Y4VZ8b9jW5zce5a9L3+p4C9AqgIRHbNVDJahfMnoKzcd4sDb98BLxLdQhJEuRAXyKLg4H66NKm80W8ilg==} + engines: {node: '>=12.0.0'} + hasBin: true + dependencies: + '@bcherny/json-schema-ref-parser': 9.0.9 + '@types/json-schema': 7.0.11 + '@types/lodash': 4.14.194 + '@types/prettier': 2.7.2 + cli-color: 2.0.3 + get-stdin: 8.0.0 + glob: 7.2.3 + glob-promise: 4.2.2(glob@7.2.3) + is-glob: 4.0.3 + lodash: 4.17.21 + minimist: 1.2.8 + mkdirp: 1.0.4 + mz: 2.7.0 + prettier: 2.8.8 + dev: true + /json-schema-traverse@0.4.1: resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==} dev: true @@ -11401,6 +11534,12 @@ packages: engines: {node: 14 || >=16.14} dev: true + /lru-queue@0.1.0: + resolution: {integrity: sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==} + dependencies: + es5-ext: 0.10.62 + dev: true + /lunr@2.3.9: resolution: {integrity: sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==} dev: true @@ -11629,6 +11768,19 @@ packages: fs-monkey: 1.0.3 dev: true + /memoizee@0.4.15: + resolution: {integrity: sha512-UBWmJpLZd5STPm7PMUlOw/TSy972M+z8gcyQ5veOnSDRREz/0bmpyTfKt3/51DhEBqCZQn1udM/5flcSPYhkdQ==} + dependencies: + d: 1.0.1 + es5-ext: 0.10.62 + es6-weak-map: 2.0.3 + event-emitter: 0.3.5 + is-promise: 2.2.2 + lru-queue: 0.1.0 + next-tick: 1.1.0 + timers-ext: 0.1.7 + dev: true + /meow@10.1.5: resolution: {integrity: sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -12043,6 +12195,12 @@ packages: minimist: 1.2.8 dev: true + /mkdirp@1.0.4: + resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==} + engines: {node: '>=10'} + hasBin: true + dev: true + /mlly@1.2.0: resolution: {integrity: sha512-+c7A3CV0KGdKcylsI6khWyts/CYrGTrRVo4R/I7u/cUsy0Conxa6LUhiEzVKIw14lc2L5aiO4+SeVe4TeGRKww==} dependencies: @@ -12086,7 +12244,6 @@ packages: any-promise: 1.3.0 object-assign: 4.1.1 thenify-all: 1.6.0 - dev: false /nanoid@3.3.6: resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} @@ -12114,6 +12271,10 @@ packages: resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==} dev: true + /next-tick@1.1.0: + resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==} + dev: true + /nice-try@1.0.5: resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==} dev: true @@ -14491,13 +14652,11 @@ packages: engines: {node: '>=0.8'} dependencies: thenify: 3.3.1 - dev: false /thenify@3.3.1: resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==} dependencies: any-promise: 1.3.0 - dev: false /thread-stream@2.3.0: resolution: {integrity: sha512-kaDqm1DET9pp3NXwR8382WHbnpXnRkN9xGN9dQt3B2+dmXiW8X1SOwmFOxAErEQ47ObhZ96J6yhZNXuyCOL7KA==} @@ -14536,6 +14695,13 @@ packages: engines: {node: '>=4'} dev: true + /timers-ext@0.1.7: + resolution: {integrity: sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==} + dependencies: + es5-ext: 0.10.62 + next-tick: 1.1.0 + dev: true + /tiny-glob@0.2.9: resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==} dependencies: @@ -14812,6 +14978,14 @@ packages: mime-types: 2.1.35 dev: true + /type@1.2.0: + resolution: {integrity: sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==} + dev: true + + /type@2.7.2: + resolution: {integrity: sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==} + dev: true + /typed-array-length@1.0.4: resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==} dependencies: From eb5d65fabc831cd0433eb2e13f9ab31e9921fe3a Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sun, 19 Feb 2023 21:43:27 +0000 Subject: [PATCH 147/263] build(types): create types from config JSON Schema Runs `pnpm --filter mermaid run types:build-config` to automatically generate typescript types for `MermaidConfig` from the JSON Schema file. --- packages/mermaid/src/config.type.ts | 978 ++++++++++++++++++++++++++-- 1 file changed, 928 insertions(+), 50 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 3b5826d1ae..352181c861 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -1,22 +1,144 @@ -// TODO: This was auto generated from defaultConfig. Needs to be verified. +/* eslint-disable */ +/** + * This file was automatically generated by json-schema-to-typescript. + * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file, + * and run json-schema-to-typescript to regenerate this file. + */ -import DOMPurify from 'dompurify'; +/** + * Configuration options to pass to the `dompurify` library. + */ +export type DOMPurifyConfiguration = import("dompurify").Config; +/** + * JavaScript function that returns a `FontConfig`. + * + * By default, these return the appropriate `*FontSize`, `*FontFamily`, `*FontWeight` + * values. + * + * For example, the font calculator called `boundaryFont` might be defined as: + * + * ```javascript + * boundaryFont: function () { + * return { + * fontFamily: this.boundaryFontFamily, + * fontSize: this.boundaryFontSize, + * fontWeight: this.boundaryFontWeight, + * }; + * } + * ``` + * + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "FontCalculator". + */ +export type FontCalculator = () => Partial; +/** + * Picks the color of the sankey diagram links, using the colors of the source and/or target of the links. + * + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "SankeyLinkColor". + */ +export type SankeyLinkColor = "source" | "target" | "gradient"; +/** + * Controls the alignment of the Sankey diagrams. + * + * See . + * + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "SankeyNodeAlignment". + */ +export type SankeyNodeAlignment = "left" | "right" | "center" | "justify"; +/** + * The font size to use + */ +export type CSSFontSize = string | number; export interface MermaidConfig { - theme?: string; + /** + * Theme, the CSS style sheet. + * You may also use `themeCSS` to override this value. + * + */ + theme?: string | "default" | "forest" | "dark" | "neutral" | "null"; themeVariables?: any; themeCSS?: string; + /** + * The maximum allowed size of the users text diagram + */ maxTextSize?: number; darkMode?: boolean; htmlLabels?: boolean; + /** + * Specifies the font to be used in the rendered diagrams. + * Can be any possible CSS `font-family`. + * See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family + * + */ fontFamily?: string; altFontFamily?: string; - logLevel?: number; - securityLevel?: string; + /** + * This option decides the amount of logging to be used by mermaid. + * + */ + logLevel?: + | number + | string + | 0 + | 2 + | 1 + | "trace" + | "debug" + | "info" + | "warn" + | "error" + | "fatal" + | 3 + | 4 + | 5 + | undefined; + /** + * Level of trust for parsed diagram + */ + securityLevel?: string | "strict" | "loose" | "antiscript" | "sandbox" | undefined; + /** + * Dictates whether mermaid starts on Page load + */ startOnLoad?: boolean; + /** + * Controls whether or arrow markers in html code are absolute paths or anchors. + * This matters if you are using base tag settings. + * + */ arrowMarkerAbsolute?: boolean; + /** + * This option controls which `currentConfig` keys are considered secure and + * can only be changed via call to `mermaidAPI.initialize`. + * Calls to `mermaidAPI.reinitialize` cannot make changes to the secure keys + * in the current `currentConfig`. + * + * This prevents malicious graph directives from overriding a site's default security. + * + */ secure?: string[]; + /** + * This option controls if the generated ids of nodes in the SVG are + * generated randomly or based on a seed. + * If set to `false`, the IDs are generated based on the current date and + * thus are not deterministic. This is the default behavior. + * + * This matters if your files are checked into source control e.g. git and + * should not change unless content is changed. + * + */ deterministicIds?: boolean; + /** + * This option is the optional seed for deterministic ids. + * If set to `undefined` but deterministicIds is `true`, a simple number iterator is used. + * You can set this attribute to base the seed on a static string. + * + */ deterministicIDSeed?: string; flowchart?: FlowchartDiagramConfig; sequence?: SequenceDiagramConfig; @@ -33,95 +155,341 @@ export interface MermaidConfig { gitGraph?: GitGraphDiagramConfig; c4?: C4DiagramConfig; sankey?: SankeyDiagramConfig; - dompurifyConfig?: DOMPurify.Config; + dompurifyConfig?: DOMPurifyConfiguration; wrap?: boolean; fontSize?: number; } - -// TODO: More configs needs to be moved in here +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "BaseDiagramConfig". + */ export interface BaseDiagramConfig { useWidth?: number; + /** + * When this flag is set to `true`, the height and width is set to 100% + * and is then scaled with the available space. + * If set to `false`, the absolute space required is used. + * + */ useMaxWidth?: boolean; } - +/** + * The object containing configurations specific for c4 diagrams + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "C4DiagramConfig". + */ export interface C4DiagramConfig extends BaseDiagramConfig { + /** + * Margin to the right and left of the c4 diagram, must be a positive value. + * + */ diagramMarginX?: number; + /** + * Margin to the over and under the c4 diagram, must be a positive value. + * + */ diagramMarginY?: number; + /** + * Margin between shapes + */ c4ShapeMargin?: number; + /** + * Padding between shapes + */ c4ShapePadding?: number; + /** + * Width of person boxes + */ width?: number; + /** + * Height of person boxes + */ height?: number; + /** + * Margin around boxes + */ boxMargin?: number; + /** + * How many shapes to place in each row. + */ c4ShapeInRow?: number; nextLinePaddingX?: number; + /** + * How many boundaries to place in each row. + */ c4BoundaryInRow?: number; + /** + * This sets the font size of Person shape for the diagram + */ personFontSize?: string | number; + /** + * This sets the font weight of Person shape for the diagram + */ personFontFamily?: string; + /** + * This sets the font weight of Person shape for the diagram + */ personFontWeight?: string | number; + /** + * This sets the font size of External Person shape for the diagram + */ external_personFontSize?: string | number; + /** + * This sets the font family of External Person shape for the diagram + */ external_personFontFamily?: string; + /** + * This sets the font weight of External Person shape for the diagram + */ external_personFontWeight?: string | number; + /** + * This sets the font size of System shape for the diagram + */ systemFontSize?: string | number; + /** + * This sets the font family of System shape for the diagram + */ systemFontFamily?: string; + /** + * This sets the font weight of System shape for the diagram + */ systemFontWeight?: string | number; + /** + * This sets the font size of External System shape for the diagram + */ external_systemFontSize?: string | number; + /** + * This sets the font family of External System shape for the diagram + */ external_systemFontFamily?: string; + /** + * This sets the font weight of External System shape for the diagram + */ external_systemFontWeight?: string | number; + /** + * This sets the font size of System DB shape for the diagram + */ system_dbFontSize?: string | number; + /** + * This sets the font family of System DB shape for the diagram + */ system_dbFontFamily?: string; + /** + * This sets the font weight of System DB shape for the diagram + */ system_dbFontWeight?: string | number; + /** + * This sets the font size of External System DB shape for the diagram + */ external_system_dbFontSize?: string | number; + /** + * This sets the font family of External System DB shape for the diagram + */ external_system_dbFontFamily?: string; + /** + * This sets the font weight of External System DB shape for the diagram + */ external_system_dbFontWeight?: string | number; + /** + * This sets the font size of System Queue shape for the diagram + */ system_queueFontSize?: string | number; + /** + * This sets the font family of System Queue shape for the diagram + */ system_queueFontFamily?: string; + /** + * This sets the font weight of System Queue shape for the diagram + */ system_queueFontWeight?: string | number; + /** + * This sets the font size of External System Queue shape for the diagram + */ external_system_queueFontSize?: string | number; + /** + * This sets the font family of External System Queue shape for the diagram + */ external_system_queueFontFamily?: string; + /** + * This sets the font weight of External System Queue shape for the diagram + */ external_system_queueFontWeight?: string | number; + /** + * This sets the font size of Boundary shape for the diagram + */ boundaryFontSize?: string | number; + /** + * This sets the font family of Boundary shape for the diagram + */ boundaryFontFamily?: string; + /** + * This sets the font weight of Boundary shape for the diagram + */ boundaryFontWeight?: string | number; + /** + * This sets the font size of Message shape for the diagram + */ messageFontSize?: string | number; + /** + * This sets the font family of Message shape for the diagram + */ messageFontFamily?: string; + /** + * This sets the font weight of Message shape for the diagram + */ messageFontWeight?: string | number; + /** + * This sets the font size of Container shape for the diagram + */ containerFontSize?: string | number; + /** + * This sets the font family of Container shape for the diagram + */ containerFontFamily?: string; + /** + * This sets the font weight of Container shape for the diagram + */ containerFontWeight?: string | number; + /** + * This sets the font size of External Container shape for the diagram + */ external_containerFontSize?: string | number; + /** + * This sets the font family of External Container shape for the diagram + */ external_containerFontFamily?: string; + /** + * This sets the font weight of External Container shape for the diagram + */ external_containerFontWeight?: string | number; + /** + * This sets the font size of Container DB shape for the diagram + */ container_dbFontSize?: string | number; + /** + * This sets the font family of Container DB shape for the diagram + */ container_dbFontFamily?: string; + /** + * This sets the font weight of Container DB shape for the diagram + */ container_dbFontWeight?: string | number; + /** + * This sets the font size of External Container DB shape for the diagram + */ external_container_dbFontSize?: string | number; + /** + * This sets the font family of External Container DB shape for the diagram + */ external_container_dbFontFamily?: string; + /** + * This sets the font weight of External Container DB shape for the diagram + */ external_container_dbFontWeight?: string | number; + /** + * This sets the font size of Container Queue shape for the diagram + */ container_queueFontSize?: string | number; + /** + * This sets the font family of Container Queue shape for the diagram + */ container_queueFontFamily?: string; + /** + * This sets the font weight of Container Queue shape for the diagram + */ container_queueFontWeight?: string | number; + /** + * This sets the font size of External Container Queue shape for the diagram + */ external_container_queueFontSize?: string | number; + /** + * This sets the font family of External Container Queue shape for the diagram + */ external_container_queueFontFamily?: string; + /** + * This sets the font weight of External Container Queue shape for the diagram + */ external_container_queueFontWeight?: string | number; + /** + * This sets the font size of Component shape for the diagram + */ componentFontSize?: string | number; + /** + * This sets the font family of Component shape for the diagram + */ componentFontFamily?: string; + /** + * This sets the font weight of Component shape for the diagram + */ componentFontWeight?: string | number; + /** + * This sets the font size of External Component shape for the diagram + */ external_componentFontSize?: string | number; + /** + * This sets the font family of External Component shape for the diagram + */ external_componentFontFamily?: string; + /** + * This sets the font weight of External Component shape for the diagram + */ external_componentFontWeight?: string | number; + /** + * This sets the font size of Component DB shape for the diagram + */ component_dbFontSize?: string | number; + /** + * This sets the font family of Component DB shape for the diagram + */ component_dbFontFamily?: string; + /** + * This sets the font weight of Component DB shape for the diagram + */ component_dbFontWeight?: string | number; + /** + * This sets the font size of External Component DB shape for the diagram + */ external_component_dbFontSize?: string | number; + /** + * This sets the font family of External Component DB shape for the diagram + */ external_component_dbFontFamily?: string; + /** + * This sets the font weight of External Component DB shape for the diagram + */ external_component_dbFontWeight?: string | number; + /** + * This sets the font size of Component Queue shape for the diagram + */ component_queueFontSize?: string | number; + /** + * This sets the font family of Component Queue shape for the diagram + */ component_queueFontFamily?: string; + /** + * This sets the font weight of Component Queue shape for the diagram + */ component_queueFontWeight?: string | number; + /** + * This sets the font size of External Component Queue shape for the diagram + */ external_component_queueFontSize?: string | number; + /** + * This sets the font family of External Component Queue shape for the diagram + */ external_component_queueFontFamily?: string; + /** + * This sets the font weight of External Component Queue shape for the diagram + */ external_component_queueFontWeight?: string | number; + /** + * This sets the auto-wrap state for the diagram + */ wrap?: boolean; + /** + * This sets the auto-wrap padding for the diagram (sides only) + */ wrapPadding?: number; person_bg_color?: string; person_border_color?: string; @@ -186,8 +554,14 @@ export interface C4DiagramConfig extends BaseDiagramConfig { boundaryFont?: FontCalculator; messageFont?: FontCalculator; } - +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "GitGraphDiagramConfig". + */ export interface GitGraphDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ titleTopMargin?: number; diagramPadding?: number; nodeLabel?: NodeLabel; @@ -196,16 +570,29 @@ export interface GitGraphDiagramConfig extends BaseDiagramConfig { showCommitLabel?: boolean; showBranches?: boolean; rotateCommitLabel?: boolean; + /** + * Controls whether or arrow markers in html code are absolute paths or anchors. + * This matters if you are using base tag settings. + * + */ arrowMarkerAbsolute?: boolean; } - +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "NodeLabel". + */ export interface NodeLabel { width?: number; height?: number; x?: number; y?: number; } - +/** + * The object containing configurations specific for req diagrams + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "RequirementDiagramConfig". + */ export interface RequirementDiagramConfig extends BaseDiagramConfig { rect_fill?: string; text_color?: string; @@ -217,51 +604,163 @@ export interface RequirementDiagramConfig extends BaseDiagramConfig { rect_padding?: number; line_height?: number; } - +/** + * The object containing configurations specific for mindmap diagrams + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "MindmapDiagramConfig". + */ export interface MindmapDiagramConfig extends BaseDiagramConfig { - useMaxWidth: boolean; - padding: number; - maxNodeWidth: number; + padding?: number; + maxNodeWidth?: number; } - +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "PieDiagramConfig". + */ export interface PieDiagramConfig extends BaseDiagramConfig { + /** + * Axial position of slice's label from zero at the center to 1 at the outside edges. + * + */ textPosition?: number; } - +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "QuadrantChartConfig". + */ export interface QuadrantChartConfig extends BaseDiagramConfig { + /** + * Width of the chart + */ chartWidth?: number; + /** + * Height of the chart + */ chartHeight?: number; + /** + * Chart title top and bottom padding + */ titleFontSize?: number; + /** + * Padding around the quadrant square + */ titlePadding?: number; + /** + * quadrant title padding from top if the quadrant is rendered on top + */ quadrantPadding?: number; + /** + * Padding around x-axis labels + */ xAxisLabelPadding?: number; + /** + * Padding around y-axis labels + */ yAxisLabelPadding?: number; + /** + * x-axis label font size + */ xAxisLabelFontSize?: number; + /** + * y-axis label font size + */ yAxisLabelFontSize?: number; + /** + * quadrant title font size + */ quadrantLabelFontSize?: number; + /** + * quadrant title padding from top if the quadrant is rendered on top + */ quadrantTextTopPadding?: number; + /** + * padding between point and point label + */ pointTextPadding?: number; + /** + * point title font size + */ pointLabelFontSize?: number; + /** + * radius of the point to be drawn + */ pointRadius?: number; - xAxisPosition?: 'top' | 'bottom'; - yAxisPosition?: 'left' | 'right'; + /** + * position of x-axis labels + */ + xAxisPosition?: "top" | "bottom"; + /** + * position of y-axis labels + */ + yAxisPosition?: "left" | "right"; + /** + * stroke width of edges of the box that are inside the quadrant + */ quadrantInternalBorderStrokeWidth?: number; + /** + * stroke width of edges of the box that are outside the quadrant + */ quadrantExternalBorderStrokeWidth?: number; } - +/** + * The object containing configurations specific for entity relationship diagrams + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "ErDiagramConfig". + */ export interface ErDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ titleTopMargin?: number; + /** + * The amount of padding around the diagram as a whole so that embedded + * diagrams have margins, expressed in pixels. + * + */ diagramPadding?: number; - layoutDirection?: string; + /** + * Directional bias for layout of entities + */ + layoutDirection?: string | "TB" | "BT" | "LR" | "RL"; + /** + * The minimum width of an entity box. Expressed in pixels. + */ minEntityWidth?: number; + /** + * The minimum height of an entity box. Expressed in pixels. + */ minEntityHeight?: number; + /** + * The minimum internal padding between text in an entity box and the enclosing box borders. + * Expressed in pixels. + * + */ entityPadding?: number; + /** + * Stroke color of box edges and lines. + */ stroke?: string; + /** + * Fill color of entity boxes + */ fill?: string; + /** + * Font size (expressed as an integer representing a number of pixels) + */ fontSize?: number; } - +/** + * The object containing configurations specific for entity relationship diagrams + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "StateDiagramConfig". + */ export interface StateDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ titleTopMargin?: number; arrowMarkerAbsolute?: boolean; dividerMargin?: number; @@ -273,161 +772,540 @@ export interface StateDiagramConfig extends BaseDiagramConfig { forkWidth?: number; forkHeight?: number; miniPadding?: number; + /** + * Font size factor, this is used to guess the width of the edges labels + * before rendering by dagre layout. + * This might need updating if/when switching font + * + */ fontSizeFactor?: number; fontSize?: number; labelHeight?: number; edgeLengthFactor?: string; compositTitleSize?: number; radius?: number; - defaultRenderer?: string; + /** + * Decides which rendering engine that is to be used for the rendering. + * + */ + defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk"; } - +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "ClassDiagramConfig". + */ export interface ClassDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ titleTopMargin?: number; + /** + * Controls whether or arrow markers in html code are absolute paths or anchors. + * This matters if you are using base tag settings. + * + */ arrowMarkerAbsolute?: boolean; dividerMargin?: number; padding?: number; textHeight?: number; - defaultRenderer?: string; + /** + * Decides which rendering engine that is to be used for the rendering. + * + */ + defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk"; nodeSpacing?: number; rankSpacing?: number; + /** + * The amount of padding around the diagram as a whole so that embedded + * diagrams have margins, expressed in pixels. + * + */ diagramPadding?: number; htmlLabels?: boolean; } - +/** + * The object containing configurations specific for journey diagrams + * + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "JourneyDiagramConfig". + */ export interface JourneyDiagramConfig extends BaseDiagramConfig { + /** + * Margin to the right and left of the c4 diagram, must be a positive value. + * + */ diagramMarginX?: number; + /** + * Margin to the over and under the c4 diagram, must be a positive value. + * + */ diagramMarginY?: number; + /** + * Margin between actors + */ leftMargin?: number; + /** + * Width of actor boxes + */ width?: number; + /** + * Height of actor boxes + */ height?: number; + /** + * Margin around loop boxes + */ boxMargin?: number; + /** + * Margin around the text in loop/alt/opt boxes + */ boxTextMargin?: number; + /** + * Margin around notes + */ noteMargin?: number; + /** + * Space between messages. + */ messageMargin?: number; - messageAlign?: string; + /** + * Multiline message alignment + */ + messageAlign?: string | "left" | "center" | "right"; + /** + * Prolongs the edge of the diagram downwards. + * + * Depending on css styling this might need adjustment. + * + */ bottomMarginAdj?: number; + /** + * Curved Arrows become Right Angles + * + * This will display arrows that start and begin at the same node as + * right angles, rather than as curves. + * + */ rightAngles?: boolean; taskFontSize?: string | number; taskFontFamily?: string; taskMargin?: number; + /** + * Width of activation box + */ activationWidth?: number; + /** + * text placement as: tspan | fo | old only text as before + * + */ textPlacement?: string; actorColours?: string[]; sectionFills?: string[]; sectionColours?: string[]; } - +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "TimelineDiagramConfig". + */ export interface TimelineDiagramConfig extends BaseDiagramConfig { + /** + * Margin to the right and left of the c4 diagram, must be a positive value. + * + */ diagramMarginX?: number; + /** + * Margin to the over and under the c4 diagram, must be a positive value. + * + */ diagramMarginY?: number; + /** + * Margin between actors + */ leftMargin?: number; + /** + * Width of actor boxes + */ width?: number; + /** + * Height of actor boxes + */ height?: number; padding?: number; + /** + * Margin around loop boxes + */ boxMargin?: number; + /** + * Margin around the text in loop/alt/opt boxes + */ boxTextMargin?: number; + /** + * Margin around notes + */ noteMargin?: number; + /** + * Space between messages. + */ messageMargin?: number; - messageAlign?: string; + /** + * Multiline message alignment + */ + messageAlign?: string | "left" | "center" | "right"; + /** + * Prolongs the edge of the diagram downwards. + * + * Depending on css styling this might need adjustment. + * + */ bottomMarginAdj?: number; + /** + * Curved Arrows become Right Angles + * + * This will display arrows that start and begin at the same node as + * right angles, rather than as curves. + * + */ rightAngles?: boolean; taskFontSize?: string | number; taskFontFamily?: string; taskMargin?: number; + /** + * Width of activation box + */ activationWidth?: number; + /** + * text placement as: tspan | fo | old only text as before + * + */ textPlacement?: string; actorColours?: string[]; sectionFills?: string[]; sectionColours?: string[]; disableMulticolor?: boolean; - useMaxWidth?: boolean; } - +/** + * The object containing configurations specific for gantt diagrams + * + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "GanttDiagramConfig". + */ export interface GanttDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ titleTopMargin?: number; + /** + * The height of the bars in the graph + */ barHeight?: number; + /** + * The margin between the different activities in the gantt diagram + */ barGap?: number; + /** + * Margin between title and gantt diagram and between axis and gantt diagram. + * + */ topPadding?: number; + /** + * The space allocated for the section name to the right of the activities + * + */ rightPadding?: number; + /** + * The space allocated for the section name to the left of the activities + * + */ leftPadding?: number; + /** + * Vertical starting position of the grid lines + */ gridLineStartPadding?: number; + /** + * Font size + */ fontSize?: number; + /** + * Font size for sections + */ sectionFontSize?: string | number; + /** + * The number of alternating section styles + */ numberSectionStyles?: number; + /** + * Date/time format of the axis + * + * This might need adjustment to match your locale and preferences. + * + */ axisFormat?: string; + /** + * axis ticks + * + * Pattern is: + * + * ```javascript + * /^([1-9][0-9]*)(minute|hour|day|week|month)$/ + * ``` + * + */ tickInterval?: string; + /** + * When this flag is set, date labels will be added to the top of the chart + * + */ topAxis?: boolean; - displayMode?: string; + /** + * Controls the display mode. + * + */ + displayMode?: string | "compact"; } - +/** + * The object containing configurations specific for sequence diagrams + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "SequenceDiagramConfig". + */ export interface SequenceDiagramConfig extends BaseDiagramConfig { arrowMarkerAbsolute?: boolean; hideUnusedParticipants?: boolean; + /** + * Width of the activation rect + */ activationWidth?: number; + /** + * Margin to the right and left of the sequence diagram + */ diagramMarginX?: number; + /** + * Margin to the over and under the sequence diagram + */ diagramMarginY?: number; + /** + * Margin between actors + */ actorMargin?: number; + /** + * Width of actor boxes + */ width?: number; + /** + * Height of actor boxes + */ height?: number; + /** + * Margin around loop boxes + */ boxMargin?: number; + /** + * Margin around the text in loop/alt/opt boxes + */ boxTextMargin?: number; + /** + * Margin around notes + */ noteMargin?: number; + /** + * Space between messages. + */ messageMargin?: number; - messageAlign?: string; + /** + * Multiline message alignment + */ + messageAlign?: string | "left" | "center" | "right"; + /** + * Mirror actors under diagram + * + */ mirrorActors?: boolean; + /** + * forces actor popup menus to always be visible (to support E2E testing). + * + */ forceMenus?: boolean; + /** + * Prolongs the edge of the diagram downwards. + * + * Depending on css styling this might need adjustment. + * + */ bottomMarginAdj?: number; + /** + * Curved Arrows become Right Angles + * + * This will display arrows that start and begin at the same node as + * right angles, rather than as curves. + * + */ rightAngles?: boolean; + /** + * This will show the node numbers + */ showSequenceNumbers?: boolean; + /** + * This sets the font size of the actor's description + */ actorFontSize?: string | number; + /** + * This sets the font family of the actor's description + */ actorFontFamily?: string; + /** + * This sets the font weight of the actor's description + */ actorFontWeight?: string | number; + /** + * This sets the font size of actor-attached notes + */ noteFontSize?: string | number; + /** + * This sets the font family of actor-attached notes + */ noteFontFamily?: string; + /** + * This sets the font weight of actor-attached notes + */ noteFontWeight?: string | number; - noteAlign?: string; + /** + * This sets the text alignment of actor-attached notes + */ + noteAlign?: string | "left" | "center" | "right"; + /** + * This sets the font size of actor messages + */ messageFontSize?: string | number; + /** + * This sets the font family of actor messages + */ messageFontFamily?: string; + /** + * This sets the font weight of actor messages + */ messageFontWeight?: string | number; + /** + * This sets the auto-wrap state for the diagram + */ wrap?: boolean; + /** + * This sets the auto-wrap padding for the diagram (sides only) + */ wrapPadding?: number; + /** + * This sets the width of the loop-box (loop, alt, opt, par) + */ labelBoxWidth?: number; + /** + * This sets the height of the loop-box (loop, alt, opt, par) + */ labelBoxHeight?: number; messageFont?: FontCalculator; noteFont?: FontCalculator; actorFont?: FontCalculator; } - +/** + * The object containing configurations specific for flowcharts + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "FlowchartDiagramConfig". + */ export interface FlowchartDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ titleTopMargin?: number; arrowMarkerAbsolute?: boolean; + /** + * The amount of padding around the diagram as a whole so that embedded + * diagrams have margins, expressed in pixels. + * + */ diagramPadding?: number; + /** + * Flag for setting whether or not a html tag should be used for rendering labels on the edges. + * + */ htmlLabels?: boolean; + /** + * Defines the spacing between nodes on the same level + * + * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, + * and the vertical spacing for LR as well as RL graphs. + * + */ nodeSpacing?: number; + /** + * Defines the spacing between nodes on different levels + * + * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, + * and the vertical spacing for LR as well as RL graphs. + * + */ rankSpacing?: number; - curve?: string; + /** + * Defines how mermaid renders curves for flowcharts. + * + */ + curve?: string | "basis" | "linear" | "cardinal"; + /** + * Represents the padding between the labels and the shape + * + * **Only used in new experimental rendering.** + * + */ padding?: number; - defaultRenderer?: string; + /** + * Decides which rendering engine that is to be used for the rendering. + * + */ + defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk"; + /** + * Width of nodes where text is wrapped. + * + * When using markdown strings the text ius wrapped automatically, this + * value sets the max width of a text before it continues on a new line. + * + */ wrappingWidth?: number; } - -export type SankeyLinkColor = 'source' | 'target' | 'gradient'; -export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify'; - +/** + * The object containing configurations specific for sankey diagrams. + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "SankeyDiagramConfig". + */ export interface SankeyDiagramConfig extends BaseDiagramConfig { width?: number; height?: number; + /** + * The color of the links in the sankey diagram. + * + */ linkColor?: SankeyLinkColor | string; - nodeAlignment?: SankeyNodeAlignment; + /** + * Controls the alignment of the Sankey diagrams. + * + * See . + * + */ + nodeAlignment?: "left" | "right" | "center" | "justify"; + useMaxWidth?: boolean; } - +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "FontConfig". + */ export interface FontConfig { - fontSize?: string | number; + fontSize?: CSSFontSize; + /** + * The CSS [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) to use. + */ fontFamily?: string; + /** + * The font weight to use. + */ fontWeight?: string | number; } - -export type FontCalculator = () => Partial; - -export {}; From 063cb124cd64a64c068aea8c417628a3e4058307 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sun, 11 Dec 2022 18:42:52 +0000 Subject: [PATCH 148/263] test(config): add temp test for defaultConfig Adds a temporary test to ensure that the new defaultConfig, generated by Vite automatically from the `MermaidConfig` JSON Schema, has the same values as the old defaultConfig (taken from https://github.com/mermaid-js/mermaid/blob/38013de7114966e8b1a83396703ef8158bb34466/packages/mermaid/src/defaultConfig.ts) The only minor difference seems to be that: - `gitGraph` now has a default `useMaxWidth: false` option (previously used to be `undefined`), - `class` now has a `htmlLabels` value of `false` instead of `undefined`. --- packages/mermaid/src/config.spec.js | 37 + packages/mermaid/src/oldDefaultConfig.ts | 2306 ++++++++++++++++++++++ 2 files changed, 2343 insertions(+) create mode 100644 packages/mermaid/src/oldDefaultConfig.ts diff --git a/packages/mermaid/src/config.spec.js b/packages/mermaid/src/config.spec.js index 1f7fd976b3..b143c837ae 100644 --- a/packages/mermaid/src/config.spec.js +++ b/packages/mermaid/src/config.spec.js @@ -1,3 +1,4 @@ +import isObject from 'lodash-es/isObject.js'; import * as configApi from './config.js'; describe('when working with site config', function () { @@ -53,4 +54,40 @@ describe('when working with site config', function () { let config_4 = configApi.getConfig(); expect(config_4.foobar).toBeUndefined(); }); + + it('test new default config', async function () { + const { default: oldDefault } = await import('./oldDefaultConfig.js'); + // gitGraph used to not have this option (aka it was `undefined`) + oldDefault.gitGraph.useMaxWidth = false; + + // class diagrams used to not have these options set (aka they were `undefined`) + oldDefault.class.htmlLabels = false; + + const { default: newDefault } = await import('./defaultConfig.js'); + + // check subsets of the objects, to improve vitest error messages + // we can't just use `expect(newDefault).to.deep.equal(oldDefault);` + // because the functions in the config won't be the same + expect(new Set(Object.keys(newDefault))).to.deep.equal(new Set(Object.keys(oldDefault))); + + for (const key in newDefault) { + // recurse through object, since we want to treat functions differently + if (!Array.isArray(newDefault[key]) && isObject(newDefault[key])) { + expect(new Set(Object.keys(newDefault[key]))).to.deep.equal( + new Set(Object.keys(oldDefault[key])) + ); + for (const key2 in newDefault[key]) { + if (typeof newDefault[key][key2] === 'function') { + expect(newDefault[key][key2].toString()).to.deep.equal( + oldDefault[key][key2].toString() + ); + } else { + expect(newDefault[key]).to.have.deep.property(key2, oldDefault[key][key2]); + } + } + } else { + expect(newDefault[key]).to.deep.equal(oldDefault[key]); + } + } + }); }); diff --git a/packages/mermaid/src/oldDefaultConfig.ts b/packages/mermaid/src/oldDefaultConfig.ts new file mode 100644 index 0000000000..fbbd39f2ad --- /dev/null +++ b/packages/mermaid/src/oldDefaultConfig.ts @@ -0,0 +1,2306 @@ +/** + * Temporary file for testing whether the new mermaid configuration defined in + * packages/mermaid/src/schemas/config.schema.yaml has the exact same default config. + */ + +import theme from './themes/index.js'; +import { type MermaidConfig } from './config.type.js'; +/** + * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click + * here](8.6.0_docs.md)].** + * + * ## **What follows are config instructions for older versions** + * + * These are the default options which can be overridden with the initialization call like so: + * + * **Example 1:** + * + * ```js + * mermaid.initialize({ flowchart:{ htmlLabels: false } }); + * ``` + * + * **Example 2:** + * + * ```html + * + * ``` + * + * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). + * A description of each option follows below. + */ +const config: Partial = { + /** + * Theme , the CSS style sheet + * + * | Parameter | Description | Type | Required | Values | + * | --------- | --------------- | ------ | -------- | ---------------------------------------------- | + * | theme | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' | + * + * **Notes:** To disable any pre-defined mermaid theme, use "null". + * + * @example + * + * ```js + * { + * "theme": "forest", + * "themeCSS": ".node rect { fill: red; }" + * } + * ``` + */ + theme: 'default', + themeVariables: theme['default'].getThemeVariables(), + themeCSS: undefined, + /* **maxTextSize** - The maximum allowed size of the users text diagram */ + maxTextSize: 50000, + darkMode: false, + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- | + * | fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily | + * + * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif;'. + */ + fontFamily: '"trebuchet ms", verdana, arial, sans-serif;', + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ----------------------------------------------------- | ---------------- | -------- | --------------------------------------------- | + * | logLevel | This option decides the amount of logging to be used. | string \| number | Required | 'trace','debug','info','warn','error','fatal' | + * + * **Notes:** + * + * - Trace: 0 + * - Debug: 1 + * - Info: 2 + * - Warn: 3 + * - Error: 4 + * - Fatal: 5 (default) + */ + logLevel: 5, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ | + * | securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' | + * + * **Notes**: + * + * - **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled. + * - **antiscript**: HTML tags in text are allowed (only script elements are removed), and click + * functionality is enabled. + * - **loose**: HTML tags in text are allowed and click functionality is enabled. + * - **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This + * prevent any JavaScript from running in the context. This may hinder interactive functionality + * of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc. + */ + securityLevel: 'strict', + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | -------------------------------------------- | ------- | -------- | ----------- | + * | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false | + * + * **Notes:** Default value: true + */ + startOnLoad: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- | + * | arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | boolean | Required | true, false | + * + * **Notes**: + * + * This matters if you are using base tag settings. + * + * Default value: false + */ + arrowMarkerAbsolute: false, + + /** + * This option controls which currentConfig keys are considered _secure_ and can only be changed + * via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the + * `secure` keys in the current currentConfig. This prevents malicious graph directives from + * overriding a site's default security. + * + * **Notes**: + * + * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'] + */ + secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'], + /** + * This option controls if the generated ids of nodes in the SVG are generated randomly or based + * on a seed. If set to false, the IDs are generated based on the current date and thus are not + * deterministic. This is the default behavior. + * + * **Notes**: + * + * This matters if your files are checked into source control e.g. git and should not change unless + * content is changed. + * + * Default value: false + */ + deterministicIds: false, + + /** + * This option is the optional seed for deterministic ids. if set to undefined but + * deterministicIds is true, a simple number iterator is used. You can set this attribute to base + * the seed on a static string. + */ + deterministicIDSeed: undefined, + + /** The object containing configurations specific for flowcharts */ + flowchart: { + /** + * ### titleTopMargin + * + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | + * | titleTopMargin | Margin top for the text over the flowchart | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 25 + */ + titleTopMargin: 25, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ | + * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value | + * + * **Notes:** + * + * The amount of padding around the diagram as a whole so that embedded diagrams have margins, + * expressed in pixels + * + * Default value: 8 + */ + diagramPadding: 8, + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | + * | htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | boolean | Required | true, false | + * + * **Notes:** Default value: true. + */ + htmlLabels: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | --------------------------------------------------- | ------- | -------- | ------------------- | + * | nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Number | + * + * **Notes:** + * + * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the + * vertical spacing for LR as well as RL graphs.** + * + * Default value: 50 + */ + nodeSpacing: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------------------------------------------------- | ------- | -------- | ------------------- | + * | rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Number | + * + * **Notes**: + * + * Pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal + * spacing for LR as well as RL graphs. + * + * Default value 50 + */ + rankSpacing: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- | + * | curve | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' | + * + * **Notes:** + * + * Default Value: 'basis' + */ + curve: 'basis', + // Only used in new experimental rendering + // represents the padding between the labels and the shape + padding: 15, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See notes | boolean | 4 | true, false | + * + * **Notes:** + * + * When this flag is set the height and width is set to 100% and is then scaling with the + * available space if not the absolute space required is used. + * + * Default value: true + */ + useMaxWidth: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ----------- | ------- | -------- | ----------------------- | + * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper, elk | + * + * **Notes:** + * + * Decides which rendering engine that is to be used for the rendering. Legal values are: + * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid, elk for layout using + * elkjs + * + * Default value: 'dagre-wrapper' + */ + defaultRenderer: 'dagre-wrapper', + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ----------- | ------- | -------- | ----------------------- | + * | wrappingWidth | See notes | number | 4 | width of nodes where text is wrapped | + * + * **Notes:** + * + * When using markdown strings the text ius wrapped automatically, this + * value sets the max width of a text before it continues on a new line. + * Default value: 'dagre-wrapper' + */ + wrappingWidth: 200, + }, + + /** The object containing configurations specific for sequence diagrams */ + sequence: { + hideUnusedParticipants: false, + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------------- | ------- | -------- | ------------------ | + * | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value | + * + * **Notes:** Default value :10 + */ + activationWidth: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | + * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + diagramMarginX: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ------------------------------------------------- | ------- | -------- | ------------------ | + * | diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + diagramMarginY: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | --------------------- | ------- | -------- | ------------------ | + * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + actorMargin: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | -------------------- | ------- | -------- | ------------------ | + * | width | Width of actor boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 150 + */ + width: 150, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | --------------------- | ------- | -------- | ------------------ | + * | height | Height of actor boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 65 + */ + height: 65, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ------------------------ | ------- | -------- | ------------------ | + * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + boxMargin: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | + * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 5 + */ + boxTextMargin: 5, + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------- | ------------------- | ------- | -------- | ------------------ | + * | noteMargin | margin around notes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + noteMargin: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | ---------------------- | ------- | -------- | ------------------ | + * | messageMargin | Space between messages | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 35 + */ + messageMargin: 35, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | --------------------------- | ------ | -------- | ------------------------- | + * | messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' | + * + * **Notes:** Default value: 'center' + */ + messageAlign: 'center', + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | --------------------------- | ------- | -------- | ----------- | + * | mirrorActors | Mirror actors under diagram | boolean | Required | true, false | + * + * **Notes:** Default value: true + */ + mirrorActors: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------- | ----------------------------------------------------------------------- | ------- | -------- | ----------- | + * | forceMenus | forces actor popup menus to always be visible (to support E2E testing). | Boolean | Required | True, False | + * + * **Notes:** + * + * Default value: false. + */ + forceMenus: false, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | + * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | Required | Any Positive Value | + * + * **Notes:** + * + * Depending on css styling this might need adjustment. + * + * Default value: 1 + */ + bottomMarginAdj: 1, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See Notes | boolean | Required | true, false | + * + * **Notes:** When this flag is set to true, the height and width is set to 100% and is then + * scaling with the available space. If set to false, the absolute space required is used. + * + * Default value: true + */ + useMaxWidth: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ------------------------------------ | ------- | -------- | ----------- | + * | rightAngles | display curve arrows as right angles | boolean | Required | true, false | + * + * **Notes:** + * + * This will display arrows that start and begin at the same node as right angles, rather than a + * curve + * + * Default value: false + */ + rightAngles: false, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------------- | ------------------------------- | ------- | -------- | ----------- | + * | showSequenceNumbers | This will show the node numbers | boolean | Required | true, false | + * + * **Notes:** Default value: false + */ + showSequenceNumbers: false, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | -------------------------------------------------- | ------- | -------- | ------------------ | + * | actorFontSize | This sets the font size of the actor's description | Integer | Require | Any Positive Value | + * + * **Notes:** **Default value 14**.. + */ + actorFontSize: 14, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- | + * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily | + * + * **Notes:** Default value: "'Open Sans", sans-serif' + */ + actorFontFamily: '"Open Sans", sans-serif', + + /** + * This sets the font weight of the actor's description + * + * **Notes:** Default value: 400. + */ + actorFontWeight: 400, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | ----------------------------------------------- | ------- | -------- | ------------------ | + * | noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 14 + */ + noteFontSize: 14, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- | + * | noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily | + * + * **Notes:** Default value: ''"trebuchet ms", verdana, arial, sans-serif' + */ + noteFontFamily: '"trebuchet ms", verdana, arial, sans-serif', + + /** + * This sets the font weight of the note's description + * + * **Notes:** Default value: 400 + */ + noteFontWeight: 400, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- | + * | noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' | + * + * **Notes:** Default value: 'center' + */ + noteAlign: 'center', + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ----------------------------------------- | ------- | -------- | ------------------- | + * | messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number | + * + * **Notes:** Default value: 16 + */ + messageFontSize: 16, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- | + * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily | + * + * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif' + */ + messageFontFamily: '"trebuchet ms", verdana, arial, sans-serif', + + /** + * This sets the font weight of the message's description + * + * **Notes:** Default value: 400. + */ + messageFontWeight: 400, + + /** + * This sets the auto-wrap state for the diagram + * + * **Notes:** Default value: false. + */ + wrap: false, + + /** + * This sets the auto-wrap padding for the diagram (sides only) + * + * **Notes:** Default value: 0. + */ + wrapPadding: 10, + + /** + * This sets the width of the loop-box (loop, alt, opt, par) + * + * **Notes:** Default value: 50. + */ + labelBoxWidth: 50, + + /** + * This sets the height of the loop-box (loop, alt, opt, par) + * + * **Notes:** Default value: 20. + */ + labelBoxHeight: 20, + + messageFont: function () { + return { + fontFamily: this.messageFontFamily, + fontSize: this.messageFontSize, + fontWeight: this.messageFontWeight, + }; + }, + noteFont: function () { + return { + fontFamily: this.noteFontFamily, + fontSize: this.noteFontSize, + fontWeight: this.noteFontWeight, + }; + }, + actorFont: function () { + return { + fontFamily: this.actorFontFamily, + fontSize: this.actorFontSize, + fontWeight: this.actorFontWeight, + }; + }, + }, + + /** The object containing configurations specific for gantt diagrams */ + gantt: { + /** + * ### titleTopMargin + * + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | + * | titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 25 + */ + titleTopMargin: 25, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ----------------------------------- | ------- | -------- | ------------------ | + * | barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 20 + */ + barHeight: 20, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ---------------------------------------------------------------- | ------- | -------- | ------------------ | + * | barGap | The margin between the different activities in the gantt diagram | Integer | Optional | Any Positive Value | + * + * **Notes:** Default value: 4 + */ + barGap: 4, + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ | + * | topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + topPadding: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | ----------------------------------------------------------------------- | ------- | -------- | ------------------ | + * | rightPadding | The space allocated for the section name to the right of the activities | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 75 + */ + rightPadding: 75, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ---------------------------------------------------------------------- | ------- | -------- | ------------------ | + * | leftPadding | The space allocated for the section name to the left of the activities | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 75 + */ + leftPadding: 75, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------------- | -------------------------------------------- | ------- | -------- | ------------------ | + * | gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 35 + */ + gridLineStartPadding: 35, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ----------- | ------- | -------- | ------------------ | + * | fontSize | Font size | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 11 + */ + fontSize: 11, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------- | ------- | -------- | ------------------ | + * | sectionFontSize | Font size for sections | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 11 + */ + sectionFontSize: 11, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------------- | ---------------------------------------- | ------- | -------- | ------------------ | + * | numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value | + * + * **Notes:** Default value: 4 + */ + numberSectionStyles: 4, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ------------------------- | ------ | -------- | --------- | + * | displayMode | Controls the display mode | string | 4 | 'compact' | + * + * **Notes**: + * + * - **compact**: Enables displaying multiple tasks on the same row. + */ + displayMode: '', + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------- | ---------------------------- | ---- | -------- | ---------------- | + * | axisFormat | Date/time format of the axis | 3 | Required | Date in yy-mm-dd | + * + * **Notes:** + * + * This might need adjustment to match your locale and preferences + * + * Default value: '%Y-%m-%d'. + */ + axisFormat: '%Y-%m-%d', + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | ------------| ------ | -------- | ------- | + * | tickInterval | axis ticks | string | Optional | string | + * + * **Notes:** + * + * Pattern is /^([1-9][0-9]*)(minute|hour|day|week|month)$/ + * + * Default value: undefined + */ + tickInterval: undefined, + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See notes | boolean | 4 | true, false | + * + * **Notes:** + * + * When this flag is set the height and width is set to 100% and is then scaling with the + * available space if not the absolute space required is used. + * + * Default value: true + */ + useMaxWidth: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ----------- | ------- | -------- | ----------- | + * | topAxis | See notes | Boolean | 4 | True, False | + * + * **Notes:** when this flag is set date labels will be added to the top of the chart + * + * **Default value false**. + */ + topAxis: false, + + useWidth: undefined, + }, + + /** The object containing configurations specific for journey diagrams */ + journey: { + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | + * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + diagramMarginX: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | + * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + diagramMarginY: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | --------------------- | ------- | -------- | ------------------ | + * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + leftMargin: 150, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | -------------------- | ------- | -------- | ------------------ | + * | width | Width of actor boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 150 + */ + width: 150, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | --------------------- | ------- | -------- | ------------------ | + * | height | Height of actor boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 65 + */ + height: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ------------------------ | ------- | -------- | ------------------ | + * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + boxMargin: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | + * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 5 + */ + boxTextMargin: 5, + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------- | ------------------- | ------- | -------- | ------------------ | + * | noteMargin | Margin around notes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + noteMargin: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | ----------------------- | ------- | -------- | ------------------ | + * | messageMargin | Space between messages. | Integer | Required | Any Positive Value | + * + * **Notes:** + * + * Space between messages. + * + * Default value: 35 + */ + messageMargin: 35, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | --------------------------- | ---- | -------- | ------------------------- | + * | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | + * + * **Notes:** Default value: 'center' + */ + messageAlign: 'center', + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | + * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value | + * + * **Notes:** + * + * Depending on css styling this might need adjustment. + * + * Default value: 1 + */ + bottomMarginAdj: 1, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See notes | boolean | 4 | true, false | + * + * **Notes:** + * + * When this flag is set the height and width is set to 100% and is then scaling with the + * available space if not the absolute space required is used. + * + * Default value: true + */ + useMaxWidth: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | --------------------------------- | ---- | -------- | ----------- | + * | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false | + * + * **Notes:** + * + * This will display arrows that start and begin at the same node as right angles, rather than a + * curves + * + * Default value: false + */ + rightAngles: false, + taskFontSize: 14, + taskFontFamily: '"Open Sans", sans-serif', + taskMargin: 50, + // width of activation box + activationWidth: 10, + + // text placement as: tspan | fo | old only text as before + textPlacement: 'fo', + actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'], + + sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'], + sectionColours: ['#fff'], + }, + /** The object containing configurations specific for timeline diagrams */ + timeline: { + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | + * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + diagramMarginX: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | + * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + diagramMarginY: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | --------------------- | ------- | -------- | ------------------ | + * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + leftMargin: 150, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | -------------------- | ------- | -------- | ------------------ | + * | width | Width of actor boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 150 + */ + width: 150, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | --------------------- | ------- | -------- | ------------------ | + * | height | Height of actor boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 65 + */ + height: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ------------------------ | ------- | -------- | ------------------ | + * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + boxMargin: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | + * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 5 + */ + boxTextMargin: 5, + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------- | ------------------- | ------- | -------- | ------------------ | + * | noteMargin | Margin around notes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + noteMargin: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | ----------------------- | ------- | -------- | ------------------ | + * | messageMargin | Space between messages. | Integer | Required | Any Positive Value | + * + * **Notes:** + * + * Space between messages. + * + * Default value: 35 + */ + messageMargin: 35, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | --------------------------- | ---- | -------- | ------------------------- | + * | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | + * + * **Notes:** Default value: 'center' + */ + messageAlign: 'center', + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | + * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value | + * + * **Notes:** + * + * Depending on css styling this might need adjustment. + * + * Default value: 1 + */ + bottomMarginAdj: 1, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See notes | boolean | 4 | true, false | + * + * **Notes:** + * + * When this flag is set the height and width is set to 100% and is then scaling with the + * available space if not the absolute space required is used. + * + * Default value: true + */ + useMaxWidth: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | --------------------------------- | ---- | -------- | ----------- | + * | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false | + * + * **Notes:** + * + * This will display arrows that start and begin at the same node as right angles, rather than a + * curves + * + * Default value: false + */ + rightAngles: false, + taskFontSize: 14, + taskFontFamily: '"Open Sans", sans-serif', + taskMargin: 50, + // width of activation box + activationWidth: 10, + + // text placement as: tspan | fo | old only text as before + textPlacement: 'fo', + actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'], + + sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'], + sectionColours: ['#fff'], + disableMulticolor: false, + }, + class: { + /** + * ### titleTopMargin + * + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | + * | titleTopMargin | Margin top for the text over the class diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 25 + */ + titleTopMargin: 25, + arrowMarkerAbsolute: false, + dividerMargin: 10, + padding: 5, + textHeight: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See notes | boolean | 4 | true, false | + * + * **Notes:** + * + * When this flag is set the height and width is set to 100% and is then scaling with the + * available space if not the absolute space required is used. + * + * Default value: true + */ + useMaxWidth: true, + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ----------- | ------- | -------- | ----------------------- | + * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper | + * + * **Notes**: + * + * Decides which rendering engine that is to be used for the rendering. Legal values are: + * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid + * + * Default value: 'dagre-d3' + */ + defaultRenderer: 'dagre-wrapper', + }, + state: { + /** + * ### titleTopMargin + * + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | + * | titleTopMargin | Margin top for the text over the state diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 25 + */ + titleTopMargin: 25, + dividerMargin: 10, + sizeUnit: 5, + padding: 8, + textHeight: 10, + titleShift: -15, + noteMargin: 10, + forkWidth: 70, + forkHeight: 7, + // Used + miniPadding: 2, + // Font size factor, this is used to guess the width of the edges labels before rendering by dagre + // layout. This might need updating if/when switching font + fontSizeFactor: 5.02, + fontSize: 24, + labelHeight: 16, + edgeLengthFactor: '20', + compositTitleSize: 35, + radius: 5, + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See notes | boolean | 4 | true, false | + * + * **Notes:** + * + * When this flag is set the height and width is set to 100% and is then scaling with the + * available space if not the absolute space required is used. + * + * Default value: true + */ + useMaxWidth: true, + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ----------- | ------- | -------- | ----------------------- | + * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper | + * + * **Notes:** + * + * Decides which rendering engine that is to be used for the rendering. Legal values are: + * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid + * + * Default value: 'dagre-d3' + */ + defaultRenderer: 'dagre-wrapper', + }, + + /** The object containing configurations specific for entity relationship diagrams */ + er: { + /** + * ### titleTopMargin + * + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | + * | titleTopMargin | Margin top for the text over the diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 25 + */ + titleTopMargin: 25, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ | + * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value | + * + * **Notes:** + * + * The amount of padding around the diagram as a whole so that embedded diagrams have margins, + * expressed in pixels + * + * Default value: 20 + */ + diagramPadding: 20, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------------------------- | ------ | -------- | ---------------------- | + * | layoutDirection | Directional bias for layout of entities. | string | Required | "TB", "BT", "LR", "RL" | + * + * **Notes:** + * + * 'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left. + * + * T = top, B = bottom, L = left, and R = right. + * + * Default value: 'TB' + */ + layoutDirection: 'TB', + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------- | ------- | -------- | ------------------ | + * | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value | + * + * **Notes:** Expressed in pixels. Default value: 100 + */ + minEntityWidth: 100, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ----------------------------------- | ------- | -------- | ------------------ | + * | minEntityHeight | The minimum height of an entity box | Integer | 4 | Any Positive Value | + * + * **Notes:** Expressed in pixels Default value: 75 + */ + minEntityHeight: 75, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ | + * | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4 | Any Positive Value | + * + * **Notes:** + * + * The minimum internal padding between text in an entity box and the enclosing box borders, + * expressed in pixels. + * + * Default value: 15 + */ + entityPadding: 15, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ----------------------------------- | ------ | -------- | -------------------- | + * | stroke | Stroke color of box edges and lines | string | 4 | Any recognized color | + * + * **Notes:** Default value: 'gray' + */ + stroke: 'gray', + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | -------------------------- | ------ | -------- | -------------------- | + * | fill | Fill color of entity boxes | string | 4 | Any recognized color | + * + * **Notes:** Default value: 'honeydew' + */ + fill: 'honeydew', + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ------------------- | ------- | -------- | ------------------ | + * | fontSize | Font Size in pixels | Integer | | Any Positive Value | + * + * **Notes:** + * + * Font size (expressed as an integer representing a number of pixels) Default value: 12 + */ + fontSize: 12, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See Notes | boolean | Required | true, false | + * + * **Notes:** + * + * When this flag is set to true, the diagram width is locked to 100% and scaled based on + * available space. If set to false, the diagram reserves its absolute width. + * + * Default value: true + */ + useMaxWidth: true, + }, + + /** The object containing configurations specific for pie diagrams */ + pie: { + useWidth: undefined, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See Notes | boolean | Required | true, false | + * + * **Notes:** + * + * When this flag is set to true, the diagram width is locked to 100% and scaled based on + * available space. If set to false, the diagram reserves its absolute width. + * + * Default value: true + */ + useMaxWidth: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | -------------------------------------------------------------------------------- | ------- | -------- | ------------------- | + * | textPosition | Axial position of slice's label from zero at the center to 1 at the outside edge | Number | Optional | Decimal from 0 to 1 | + * + * **Notes:** Default value: 0.75 + */ + textPosition: 0.75, + }, + + quadrantChart: { + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | + * | chartWidth | Width of the chart | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 500 + */ + chartWidth: 500, + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | + * | chartHeight | Height of the chart | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 500 + */ + chartHeight: 500, + /** + * | Parameter | Description | Type | Required | Values | + * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | + * | titlePadding | Chart title top and bottom padding | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 10 + */ + titlePadding: 10, + /** + * | Parameter | Description | Type | Required | Values | + * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | + * | titleFontSize | Chart title font size | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 20 + */ + titleFontSize: 20, + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | + * | quadrantPadding | Padding around the quadrant square | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 5 + */ + quadrantPadding: 5, + /** + * | Parameter | Description | Type | Required | Values | + * | ---------------------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------- | + * | quadrantTextTopPadding | quadrant title padding from top if the quadrant is rendered on top | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 5 + */ + quadrantTextTopPadding: 5, + /** + * | Parameter | Description | Type | Required | Values | + * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | + * | quadrantLabelFontSize | quadrant title font size | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 16 + */ + quadrantLabelFontSize: 16, + /** + * | Parameter | Description | Type | Required | Values | + * | --------------------------------- | ------------------------------------------------------------- | ------- | -------- | ------------------- | + * | quadrantInternalBorderStrokeWidth | stroke width of edges of the box that are inside the quadrant | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 1 + */ + quadrantInternalBorderStrokeWidth: 1, + /** + * | Parameter | Description | Type | Required | Values | + * | --------------------------------- | -------------------------------------------------------------- | ------- | -------- | ------------------- | + * | quadrantExternalBorderStrokeWidth | stroke width of edges of the box that are outside the quadrant | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 2 + */ + quadrantExternalBorderStrokeWidth: 2, + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | + * | xAxisLabelPadding | Padding around x-axis labels | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 5 + */ + xAxisLabelPadding: 5, + /** + * | Parameter | Description | Type | Required | Values | + * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | + * | xAxisLabelFontSize | x-axis label font size | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 16 + */ + xAxisLabelFontSize: 16, + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | ------------------------------- | ------- | -------- | ------------------- | + * | xAxisPosition | position of x-axis labels | string | Optional | 'top' or 'bottom' | + * + * **Notes:** + * Default value: top + */ + xAxisPosition: 'top', + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | + * | yAxisLabelPadding | Padding around y-axis labels | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 5 + */ + yAxisLabelPadding: 5, + /** + * | Parameter | Description | Type | Required | Values | + * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | + * | yAxisLabelFontSize | y-axis label font size | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 16 + */ + yAxisLabelFontSize: 16, + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | ------------------------------- | ------- | -------- | ------------------- | + * | yAxisPosition | position of y-axis labels | string | Optional | 'left' or 'right' | + * + * **Notes:** + * Default value: left + */ + yAxisPosition: 'left', + /** + * | Parameter | Description | Type | Required | Values | + * | ---------------------- | -------------------------------------- | ------- | -------- | ------------------- | + * | pointTextPadding | padding between point and point label | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 5 + */ + pointTextPadding: 5, + /** + * | Parameter | Description | Type | Required | Values | + * | ---------------------- | ---------------------- | ------- | -------- | ------------------- | + * | pointTextPadding | point title font size | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 12 + */ + pointLabelFontSize: 12, + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | ------------------------------- | ------- | -------- | ------------------- | + * | pointRadius | radius of the point to be drawn | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 5 + */ + pointRadius: 5, + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See Notes | boolean | Required | true, false | + * + * **Notes:** + * + * When this flag is set to true, the diagram width is locked to 100% and scaled based on + * available space. If set to false, the diagram reserves its absolute width. + * + * Default value: true + */ + useMaxWidth: true, + }, + + /** The object containing configurations specific for req diagrams */ + requirement: { + useWidth: undefined, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See Notes | boolean | Required | true, false | + * + * **Notes:** + * + * When this flag is set to true, the diagram width is locked to 100% and scaled based on + * available space. If set to false, the diagram reserves its absolute width. + * + * Default value: true + */ + useMaxWidth: true, + + rect_fill: '#f9f9f9', + text_color: '#333', + rect_border_size: '0.5px', + rect_border_color: '#bbb', + rect_min_width: 200, + rect_min_height: 200, + fontSize: 14, + rect_padding: 10, + line_height: 20, + }, + gitGraph: { + /** + * ### titleTopMargin + * + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | + * | titleTopMargin | Margin top for the text over the Git diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 25 + */ + titleTopMargin: 25, + diagramPadding: 8, + nodeLabel: { + width: 75, + height: 100, + x: -25, + y: 0, + }, + mainBranchName: 'main', + mainBranchOrder: 0, + showCommitLabel: true, + showBranches: true, + rotateCommitLabel: true, + }, + + /** The object containing configurations specific for c4 diagrams */ + c4: { + useWidth: undefined, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | + * | diagramMarginX | Margin to the right and left of the c4 diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + diagramMarginX: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ------------------------------------------- | ------- | -------- | ------------------ | + * | diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + diagramMarginY: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | --------------------- | ------- | -------- | ------------------ | + * | c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + c4ShapeMargin: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------- | ------- | -------- | ------------------ | + * | c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 20 + */ + c4ShapePadding: 20, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | --------------------- | ------- | -------- | ------------------ | + * | width | Width of person boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 216 + */ + width: 216, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ---------------------- | ------- | -------- | ------------------ | + * | height | Height of person boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 60 + */ + height: 60, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ------------------- | ------- | -------- | ------------------ | + * | boxMargin | Margin around boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + boxMargin: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See Notes | boolean | Required | true, false | + * + * **Notes:** When this flag is set to true, the height and width is set to 100% and is then + * scaling with the available space. If set to false, the absolute space required is used. + * + * Default value: true + */ + useMaxWidth: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | ----------- | ------- | -------- | ------------------ | + * | c4ShapeInRow | See Notes | Integer | Required | Any Positive Value | + * + * **Notes:** How many shapes to place in each row. + * + * Default value: 4 + */ + c4ShapeInRow: 4, + + nextLinePaddingX: 0, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ----------- | ------- | -------- | ------------------ | + * | c4BoundaryInRow | See Notes | Integer | Required | Any Positive Value | + * + * **Notes:** How many boundaries to place in each row. + * + * Default value: 2 + */ + c4BoundaryInRow: 2, + + /** + * This sets the font size of Person shape for the diagram + * + * **Notes:** Default value: 14. + */ + personFontSize: 14, + /** + * This sets the font family of Person shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + personFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Person shape for the diagram + * + * **Notes:** Default value: normal. + */ + personFontWeight: 'normal', + + /** + * This sets the font size of External Person shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_personFontSize: 14, + /** + * This sets the font family of External Person shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_personFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External Person shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_personFontWeight: 'normal', + + /** + * This sets the font size of System shape for the diagram + * + * **Notes:** Default value: 14. + */ + systemFontSize: 14, + /** + * This sets the font family of System shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + systemFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of System shape for the diagram + * + * **Notes:** Default value: normal. + */ + systemFontWeight: 'normal', + + /** + * This sets the font size of External System shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_systemFontSize: 14, + /** + * This sets the font family of External System shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_systemFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External System shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_systemFontWeight: 'normal', + + /** + * This sets the font size of System DB shape for the diagram + * + * **Notes:** Default value: 14. + */ + system_dbFontSize: 14, + /** + * This sets the font family of System DB shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + system_dbFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of System DB shape for the diagram + * + * **Notes:** Default value: normal. + */ + system_dbFontWeight: 'normal', + + /** + * This sets the font size of External System DB shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_system_dbFontSize: 14, + /** + * This sets the font family of External System DB shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_system_dbFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External System DB shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_system_dbFontWeight: 'normal', + + /** + * This sets the font size of System Queue shape for the diagram + * + * **Notes:** Default value: 14. + */ + system_queueFontSize: 14, + /** + * This sets the font family of System Queue shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + system_queueFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of System Queue shape for the diagram + * + * **Notes:** Default value: normal. + */ + system_queueFontWeight: 'normal', + + /** + * This sets the font size of External System Queue shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_system_queueFontSize: 14, + /** + * This sets the font family of External System Queue shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_system_queueFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External System Queue shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_system_queueFontWeight: 'normal', + + /** + * This sets the font size of Boundary shape for the diagram + * + * **Notes:** Default value: 14. + */ + boundaryFontSize: 14, + /** + * This sets the font family of Boundary shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + boundaryFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Boundary shape for the diagram + * + * **Notes:** Default value: normal. + */ + boundaryFontWeight: 'normal', + + /** + * This sets the font size of Message shape for the diagram + * + * **Notes:** Default value: 12. + */ + messageFontSize: 12, + /** + * This sets the font family of Message shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + messageFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Message shape for the diagram + * + * **Notes:** Default value: normal. + */ + messageFontWeight: 'normal', + + /** + * This sets the font size of Container shape for the diagram + * + * **Notes:** Default value: 14. + */ + containerFontSize: 14, + /** + * This sets the font family of Container shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + containerFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Container shape for the diagram + * + * **Notes:** Default value: normal. + */ + containerFontWeight: 'normal', + + /** + * This sets the font size of External Container shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_containerFontSize: 14, + /** + * This sets the font family of External Container shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_containerFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External Container shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_containerFontWeight: 'normal', + + /** + * This sets the font size of Container DB shape for the diagram + * + * **Notes:** Default value: 14. + */ + container_dbFontSize: 14, + /** + * This sets the font family of Container DB shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + container_dbFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Container DB shape for the diagram + * + * **Notes:** Default value: normal. + */ + container_dbFontWeight: 'normal', + + /** + * This sets the font size of External Container DB shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_container_dbFontSize: 14, + /** + * This sets the font family of External Container DB shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_container_dbFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External Container DB shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_container_dbFontWeight: 'normal', + + /** + * This sets the font size of Container Queue shape for the diagram + * + * **Notes:** Default value: 14. + */ + container_queueFontSize: 14, + /** + * This sets the font family of Container Queue shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + container_queueFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Container Queue shape for the diagram + * + * **Notes:** Default value: normal. + */ + container_queueFontWeight: 'normal', + + /** + * This sets the font size of External Container Queue shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_container_queueFontSize: 14, + /** + * This sets the font family of External Container Queue shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_container_queueFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External Container Queue shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_container_queueFontWeight: 'normal', + + /** + * This sets the font size of Component shape for the diagram + * + * **Notes:** Default value: 14. + */ + componentFontSize: 14, + /** + * This sets the font family of Component shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + componentFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Component shape for the diagram + * + * **Notes:** Default value: normal. + */ + componentFontWeight: 'normal', + + /** + * This sets the font size of External Component shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_componentFontSize: 14, + /** + * This sets the font family of External Component shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_componentFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External Component shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_componentFontWeight: 'normal', + + /** + * This sets the font size of Component DB shape for the diagram + * + * **Notes:** Default value: 14. + */ + component_dbFontSize: 14, + /** + * This sets the font family of Component DB shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + component_dbFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Component DB shape for the diagram + * + * **Notes:** Default value: normal. + */ + component_dbFontWeight: 'normal', + + /** + * This sets the font size of External Component DB shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_component_dbFontSize: 14, + /** + * This sets the font family of External Component DB shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_component_dbFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External Component DB shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_component_dbFontWeight: 'normal', + + /** + * This sets the font size of Component Queue shape for the diagram + * + * **Notes:** Default value: 14. + */ + component_queueFontSize: 14, + /** + * This sets the font family of Component Queue shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + component_queueFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Component Queue shape for the diagram + * + * **Notes:** Default value: normal. + */ + component_queueFontWeight: 'normal', + + /** + * This sets the font size of External Component Queue shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_component_queueFontSize: 14, + /** + * This sets the font family of External Component Queue shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_component_queueFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External Component Queue shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_component_queueFontWeight: 'normal', + + /** + * This sets the auto-wrap state for the diagram + * + * **Notes:** Default value: true. + */ + wrap: true, + + /** + * This sets the auto-wrap padding for the diagram (sides only) + * + * **Notes:** Default value: 0. + */ + wrapPadding: 10, + + personFont: function () { + return { + fontFamily: this.personFontFamily, + fontSize: this.personFontSize, + fontWeight: this.personFontWeight, + }; + }, + + external_personFont: function () { + return { + fontFamily: this.external_personFontFamily, + fontSize: this.external_personFontSize, + fontWeight: this.external_personFontWeight, + }; + }, + + systemFont: function () { + return { + fontFamily: this.systemFontFamily, + fontSize: this.systemFontSize, + fontWeight: this.systemFontWeight, + }; + }, + + external_systemFont: function () { + return { + fontFamily: this.external_systemFontFamily, + fontSize: this.external_systemFontSize, + fontWeight: this.external_systemFontWeight, + }; + }, + + system_dbFont: function () { + return { + fontFamily: this.system_dbFontFamily, + fontSize: this.system_dbFontSize, + fontWeight: this.system_dbFontWeight, + }; + }, + + external_system_dbFont: function () { + return { + fontFamily: this.external_system_dbFontFamily, + fontSize: this.external_system_dbFontSize, + fontWeight: this.external_system_dbFontWeight, + }; + }, + + system_queueFont: function () { + return { + fontFamily: this.system_queueFontFamily, + fontSize: this.system_queueFontSize, + fontWeight: this.system_queueFontWeight, + }; + }, + + external_system_queueFont: function () { + return { + fontFamily: this.external_system_queueFontFamily, + fontSize: this.external_system_queueFontSize, + fontWeight: this.external_system_queueFontWeight, + }; + }, + + containerFont: function () { + return { + fontFamily: this.containerFontFamily, + fontSize: this.containerFontSize, + fontWeight: this.containerFontWeight, + }; + }, + + external_containerFont: function () { + return { + fontFamily: this.external_containerFontFamily, + fontSize: this.external_containerFontSize, + fontWeight: this.external_containerFontWeight, + }; + }, + + container_dbFont: function () { + return { + fontFamily: this.container_dbFontFamily, + fontSize: this.container_dbFontSize, + fontWeight: this.container_dbFontWeight, + }; + }, + + external_container_dbFont: function () { + return { + fontFamily: this.external_container_dbFontFamily, + fontSize: this.external_container_dbFontSize, + fontWeight: this.external_container_dbFontWeight, + }; + }, + + container_queueFont: function () { + return { + fontFamily: this.container_queueFontFamily, + fontSize: this.container_queueFontSize, + fontWeight: this.container_queueFontWeight, + }; + }, + + external_container_queueFont: function () { + return { + fontFamily: this.external_container_queueFontFamily, + fontSize: this.external_container_queueFontSize, + fontWeight: this.external_container_queueFontWeight, + }; + }, + + componentFont: function () { + return { + fontFamily: this.componentFontFamily, + fontSize: this.componentFontSize, + fontWeight: this.componentFontWeight, + }; + }, + + external_componentFont: function () { + return { + fontFamily: this.external_componentFontFamily, + fontSize: this.external_componentFontSize, + fontWeight: this.external_componentFontWeight, + }; + }, + + component_dbFont: function () { + return { + fontFamily: this.component_dbFontFamily, + fontSize: this.component_dbFontSize, + fontWeight: this.component_dbFontWeight, + }; + }, + + external_component_dbFont: function () { + return { + fontFamily: this.external_component_dbFontFamily, + fontSize: this.external_component_dbFontSize, + fontWeight: this.external_component_dbFontWeight, + }; + }, + + component_queueFont: function () { + return { + fontFamily: this.component_queueFontFamily, + fontSize: this.component_queueFontSize, + fontWeight: this.component_queueFontWeight, + }; + }, + + external_component_queueFont: function () { + return { + fontFamily: this.external_component_queueFontFamily, + fontSize: this.external_component_queueFontSize, + fontWeight: this.external_component_queueFontWeight, + }; + }, + + boundaryFont: function () { + return { + fontFamily: this.boundaryFontFamily, + fontSize: this.boundaryFontSize, + fontWeight: this.boundaryFontWeight, + }; + }, + + messageFont: function () { + return { + fontFamily: this.messageFontFamily, + fontSize: this.messageFontSize, + fontWeight: this.messageFontWeight, + }; + }, + + // ' Colors + // ' ################################## + person_bg_color: '#08427B', + person_border_color: '#073B6F', + external_person_bg_color: '#686868', + external_person_border_color: '#8A8A8A', + system_bg_color: '#1168BD', + system_border_color: '#3C7FC0', + system_db_bg_color: '#1168BD', + system_db_border_color: '#3C7FC0', + system_queue_bg_color: '#1168BD', + system_queue_border_color: '#3C7FC0', + external_system_bg_color: '#999999', + external_system_border_color: '#8A8A8A', + external_system_db_bg_color: '#999999', + external_system_db_border_color: '#8A8A8A', + external_system_queue_bg_color: '#999999', + external_system_queue_border_color: '#8A8A8A', + container_bg_color: '#438DD5', + container_border_color: '#3C7FC0', + container_db_bg_color: '#438DD5', + container_db_border_color: '#3C7FC0', + container_queue_bg_color: '#438DD5', + container_queue_border_color: '#3C7FC0', + external_container_bg_color: '#B3B3B3', + external_container_border_color: '#A6A6A6', + external_container_db_bg_color: '#B3B3B3', + external_container_db_border_color: '#A6A6A6', + external_container_queue_bg_color: '#B3B3B3', + external_container_queue_border_color: '#A6A6A6', + component_bg_color: '#85BBF0', + component_border_color: '#78A8D8', + component_db_bg_color: '#85BBF0', + component_db_border_color: '#78A8D8', + component_queue_bg_color: '#85BBF0', + component_queue_border_color: '#78A8D8', + external_component_bg_color: '#CCCCCC', + external_component_border_color: '#BFBFBF', + external_component_db_bg_color: '#CCCCCC', + external_component_db_border_color: '#BFBFBF', + external_component_queue_bg_color: '#CCCCCC', + external_component_queue_border_color: '#BFBFBF', + }, + mindmap: { + useMaxWidth: true, + padding: 10, + maxNodeWidth: 200, + }, + sankey: { + width: 600, + height: 400, + linkColor: 'gradient', + nodeAlignment: 'justify', + useMaxWidth: false, + }, + fontSize: 16, +}; + +if (config.class) { + config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute; +} +if (config.gitGraph) { + config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute; +} + +const keyify = (obj: any, prefix = ''): string[] => + Object.keys(obj).reduce((res: string[], el): string[] => { + if (Array.isArray(obj[el])) { + return res; + } else if (typeof obj[el] === 'object' && obj[el] !== null) { + return [...res, prefix + el, ...keyify(obj[el], '')]; + } + return [...res, prefix + el]; + }, []); + +export const configKeys: string[] = keyify(config, ''); +export default config; From 70a5a1327364d0e41bc600b2a5f79223b8203df0 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sun, 19 Feb 2023 22:08:07 +0000 Subject: [PATCH 149/263] docs: add link to mermaid config docs in sidebar --- packages/mermaid/src/docs/.vitepress/config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 2b2914ca3d..330b088d93 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -155,6 +155,7 @@ function sidebarConfig() { { text: 'Tutorials', link: '/config/Tutorials' }, { text: 'API-Usage', link: '/config/usage' }, { text: 'Mermaid API Configuration', link: '/config/setup/README' }, + { text: 'Mermaid Configuration Options', link: '/config/schema-docs/config' }, { text: 'Directives', link: '/config/directives' }, { text: 'Theming', link: '/config/theming' }, { text: 'Accessibility', link: '/config/accessibility' }, From 23d6a0dab71b89c53119dc7147fc6e0f769cabbb Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Mon, 20 Feb 2023 03:54:59 +0000 Subject: [PATCH 150/263] ci(lint): check if MermaidConfig types are in sync Add a CI check that runs `pnpm run --filter mermaid types:verify-config` and checks whether the MermaidConfig TypeScript types are in sync with the MermaidConfig JSON Schema. --- .github/workflows/lint.yml | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 53b7f484d7..493bacaf74 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -53,6 +53,19 @@ jobs: exit 1 fi + - name: Verify `./src/config.type.ts` is in sync with `./src/schemas/config.schema.yaml` + shell: bash + run: | + if ! pnpm run --filter mermaid types:verify-config; then + ERROR_MESSAGE='Running `pnpm run --filter mermaid types:verify-config` failed.' + ERROR_MESSAGE+=' This should be fixed by running' + ERROR_MESSAGE+=' `pnpm run --filter mermaid types:build-config`' + ERROR_MESSAGE+=' on your local machine.' + echo "::error title=Lint failure::${ERROR_MESSAGE}" + # make sure to return an error exitcode so that GitHub actions shows a red-cross + exit 1 + fi + - name: Verify Docs id: verifyDocs working-directory: ./packages/mermaid From c29088af019a8180ac2f85d79b890cab4cd5fee5 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sun, 26 Feb 2023 02:51:11 +0000 Subject: [PATCH 151/263] build(docs): fix links to `config.schema.json` Fix the link in some Mermaid Config markdown documentation, which previously pointed to `src/schemas/config.schema.yaml`, which went nowhere. Now, these links point to: - config.schema.json (i.e. the generated JSON file, not YAML) - links are relative to the markdown documentation We also needed to store the `schema.json` file in the Vitepress `public/` folder, as Vitepress otherwise doesn't bundle `.json` files properly, when running `vitepress build src/vitepress`. --- packages/mermaid/src/docs.mts | 36 ++++++++++++++++++++++++++++++++--- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts index 1a5ed5ea0f..7ee6e50c87 100644 --- a/packages/mermaid/src/docs.mts +++ b/packages/mermaid/src/docs.mts @@ -345,13 +345,30 @@ async function transormJsonSchema(file: string) { schema: JSON_SCHEMA, }); + /** Location of the `schema.yaml` files */ + const SCHEMA_INPUT_DIR = 'src/schemas/'; + /** + * Location to store the generated `schema.json` file for the website + * + * Because Vitepress doesn't handle bundling `.json` files properly, we need + * to instead place it into a `public/` subdirectory. + */ + const SCHEMA_OUTPUT_DIR = 'src/docs/public/schemas/'; + const VITEPRESS_PUBLIC_DIR = 'src/docs/public'; + /** + * Location to store the generated Schema Markdown docs. + * Links to JSON Schemas should automatically be rewritten to point to + * `SCHEMA_OUTPUT_DIR`. + */ + const SCHEMA_MARKDOWN_OUTPUT_DIR = join('src', 'docs', 'config', 'schema-docs'); + // write .schema.json files const jsonFileName = file .replace('.schema.yaml', '.schema.json') - .replace('src/schemas/', 'src/docs/schemas/'); + .replace(SCHEMA_INPUT_DIR, SCHEMA_OUTPUT_DIR); copyTransformedContents(jsonFileName, !verifyOnly, JSON.stringify(jsonSchema, undefined, 2)); - const schemas = traverseSchemas([schemaLoader()(file, jsonSchema)]); + const schemas = traverseSchemas([schemaLoader()(jsonFileName, jsonSchema)]); // ignore output of this function // for some reason, without calling this function, we get some broken links @@ -365,6 +382,19 @@ async function transormJsonSchema(file: string) { includeProperties: ['tsType'], // Custom TypeScript type exampleFormat: 'json', // skipProperties, + /** + * Automatically rewrite schema paths passed to `schemaLoader` + * (e.g. src/docs/schemas/config.schema.json) + * to relative links (e.g. /schemas/config.schema.json) + * + * See https://vitepress.vuejs.org/guide/asset-handling + * + * @param origin - Original schema path (relative to this script). + * @returns New absolute Vitepress path to schema + */ + rewritelinks: (origin: string) => { + return `/${relative(VITEPRESS_PUBLIC_DIR, origin)}`; + }, })(schemas); for (const [name, markdownAst] of Object.entries(markdownFiles)) { @@ -405,7 +435,7 @@ async function transormJsonSchema(file: string) { parser: 'markdown', ...prettierConfig, }); - const newFileName = join('src', 'docs', 'config', 'schema-docs', `${name}.md`); + const newFileName = join(SCHEMA_MARKDOWN_OUTPUT_DIR, `${name}.md`); copyTransformedContents(newFileName, !verifyOnly, formatted); } } From d2e62022f1c55d667b3e031c6d9a7fd04c7cd2a7 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 11:09:09 +0530 Subject: [PATCH 152/263] Avoid downloading avtars everytime on docs:dev --- packages/mermaid/package.json | 2 +- packages/mermaid/src/docs.mts | 16 +-- .../src/docs/.vitepress/contributors.ts | 112 +----------------- packages/mermaid/src/docs/.vitepress/data.ts | 110 +++++++++++++++++ .../.vitepress/scripts/fetch-contributors.ts | 12 +- 5 files changed, 131 insertions(+), 121 deletions(-) create mode 100644 packages/mermaid/src/docs/.vitepress/data.ts diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index e630f80fb2..0f93377087 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -27,7 +27,7 @@ "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup", "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts", "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts --verify", - "docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts ", + "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts", "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing", "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"", "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.mts --watch --vitepress\"", diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts index f6efc1169c..7e701bb207 100644 --- a/packages/mermaid/src/docs.mts +++ b/packages/mermaid/src/docs.mts @@ -362,15 +362,15 @@ const transformHtml = (filename: string) => { }; const getGlobs = (globs: string[]): string[] => { - globs.push( - '!**/dist/**', - '!**/redirect.spec.ts', - '!**/landing/**', - '!**/node_modules/**', - '!**/user-avatars/**' - ); + globs.push('!**/dist/**', '!**/redirect.spec.ts', '!**/landing/**', '!**/node_modules/**'); if (!vitepress) { - globs.push('!**/.vitepress/**', '!**/vite.config.ts', '!src/docs/index.md', '!**/package.json'); + globs.push( + '!**/.vitepress/**', + '!**/vite.config.ts', + '!src/docs/index.md', + '!**/package.json', + '!**/user-avatars/**' + ); } return globs; }; diff --git a/packages/mermaid/src/docs/.vitepress/contributors.ts b/packages/mermaid/src/docs/.vitepress/contributors.ts index bef2c1311c..5a80ac3fef 100644 --- a/packages/mermaid/src/docs/.vitepress/contributors.ts +++ b/packages/mermaid/src/docs/.vitepress/contributors.ts @@ -1,30 +1,5 @@ import contributorUsernamesJson from './contributor-names.json'; - -export interface Contributor { - name: string; - avatar: string; -} - -export interface SocialEntry { - icon: string | { svg: string }; - link: string; -} - -export interface CoreTeam { - name: string; - // required to download avatars from GitHub - github: string; - avatar?: string; - twitter?: string; - mastodon?: string; - sponsor?: string; - website?: string; - linkedIn?: string; - title?: string; - org?: string; - desc?: string; - links?: SocialEntry[]; -} +import { CoreTeam, knut, plainTeamMembers } from './data.js'; const contributorUsernames: string[] = contributorUsernamesJson; @@ -54,91 +29,6 @@ const createLinks = (tm: CoreTeam): CoreTeam => { return tm; }; -const knut: CoreTeam = { - github: 'knsv', - name: 'Knut Sveidqvist', - title: 'Creator', - twitter: 'knutsveidqvist', - sponsor: 'https://github.com/sponsors/knsv', -}; - -const plainTeamMembers: CoreTeam[] = [ - { - github: 'NeilCuzon', - name: 'Neil Cuzon', - title: 'Developer', - }, - { - github: 'tylerlong', - name: 'Tyler Liu', - title: 'Developer', - }, - { - github: 'sidharthv96', - name: 'Sidharth Vinod', - title: 'Developer', - twitter: 'sidv42', - mastodon: 'https://techhub.social/@sidv', - sponsor: 'https://github.com/sponsors/sidharthv96', - linkedIn: 'sidharth-vinod', - website: 'https://sidharth.dev', - }, - { - github: 'ashishjain0512', - name: 'Ashish Jain', - title: 'Developer', - }, - { - github: 'mmorel-35', - name: 'Matthieu Morel', - title: 'Developer', - linkedIn: 'matthieumorel35', - }, - { - github: 'aloisklink', - name: 'Alois Klink', - title: 'Developer', - linkedIn: 'aloisklink', - website: 'https://aloisklink.com', - }, - { - github: 'pbrolin47', - name: 'Per Brolin', - title: 'Developer', - }, - { - github: 'Yash-Singh1', - name: 'Yash Singh', - title: 'Developer', - }, - { - github: 'GDFaber', - name: 'Marc Faber', - title: 'Developer', - linkedIn: 'marc-faber', - }, - { - github: 'MindaugasLaganeckas', - name: 'Mindaugas Laganeckas', - title: 'Developer', - }, - { - github: 'jgreywolf', - name: 'Justin Greywolf', - title: 'Developer', - }, - { - github: 'IOrlandoni', - name: 'Nacho Orlandoni', - title: 'Developer', - }, - { - github: 'huynhicode', - name: 'Steph Huynh', - title: 'Developer', - }, -]; - const teamMembers = plainTeamMembers.map((tm) => createLinks(tm)); teamMembers.sort( (a, b) => contributorUsernames.indexOf(a.github) - contributorUsernames.indexOf(b.github) diff --git a/packages/mermaid/src/docs/.vitepress/data.ts b/packages/mermaid/src/docs/.vitepress/data.ts new file mode 100644 index 0000000000..e8bb07ce8c --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/data.ts @@ -0,0 +1,110 @@ +export interface Contributor { + name: string; + avatar: string; +} + +export interface SocialEntry { + icon: string | { svg: string }; + link: string; +} + +export interface CoreTeam { + name: string; + // required to download avatars from GitHub + github: string; + avatar?: string; + twitter?: string; + mastodon?: string; + sponsor?: string; + website?: string; + linkedIn?: string; + title?: string; + org?: string; + desc?: string; + links?: SocialEntry[]; +} + +export const knut: CoreTeam = { + github: 'knsv', + name: 'Knut Sveidqvist', + title: 'Creator', + twitter: 'knutsveidqvist', + sponsor: 'https://github.com/sponsors/knsv', +}; + +export const plainTeamMembers: CoreTeam[] = [ + { + github: 'NeilCuzon', + name: 'Neil Cuzon', + title: 'Developer', + }, + { + github: 'tylerlong', + name: 'Tyler Liu', + title: 'Developer', + }, + { + github: 'sidharthv96', + name: 'Sidharth Vinod', + title: 'Developer', + twitter: 'sidv42', + mastodon: 'https://techhub.social/@sidv', + sponsor: 'https://github.com/sponsors/sidharthv96', + linkedIn: 'sidharth-vinod', + website: 'https://sidharth.dev', + }, + { + github: 'ashishjain0512', + name: 'Ashish Jain', + title: 'Developer', + }, + { + github: 'mmorel-35', + name: 'Matthieu Morel', + title: 'Developer', + linkedIn: 'matthieumorel35', + }, + { + github: 'aloisklink', + name: 'Alois Klink', + title: 'Developer', + linkedIn: 'aloisklink', + website: 'https://aloisklink.com', + }, + { + github: 'pbrolin47', + name: 'Per Brolin', + title: 'Developer', + }, + { + github: 'Yash-Singh1', + name: 'Yash Singh', + title: 'Developer', + }, + { + github: 'GDFaber', + name: 'Marc Faber', + title: 'Developer', + linkedIn: 'marc-faber', + }, + { + github: 'MindaugasLaganeckas', + name: 'Mindaugas Laganeckas', + title: 'Developer', + }, + { + github: 'jgreywolf', + name: 'Justin Greywolf', + title: 'Developer', + }, + { + github: 'IOrlandoni', + name: 'Nacho Orlandoni', + title: 'Developer', + }, + { + github: 'huynhicode', + name: 'Steph Huynh', + title: 'Developer', + }, +]; diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts index a810fc30f0..53df066c92 100644 --- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts +++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts @@ -1,6 +1,8 @@ // Adapted from https://github.dev/vitest-dev/vitest/blob/991ff33ab717caee85ef6cbe1c16dc514186b4cc/scripts/update-contributors.ts#L6 import { writeFile } from 'node:fs/promises'; +import { knut, plainTeamMembers } from '../data.js'; +import { existsSync } from 'node:fs'; const pathContributors = new URL('../contributor-names.json', import.meta.url); @@ -35,7 +37,15 @@ async function fetchContributors() { } async function generate() { - const collaborators = await fetchContributors(); + if (existsSync(pathContributors)) { + // Only fetch contributors once, when running locally. + // In CI, the file won't exist, so it'll fetch every time as expected. + return; + } + // Will fetch all contributors only in CI to speed up local development. + const collaborators = process.env.CI + ? await fetchContributors() + : [knut, ...plainTeamMembers].map((m) => m.github); await writeFile(pathContributors, JSON.stringify(collaborators, null, 2) + '\n', 'utf8'); } From db30f21ac5a6aefa7988bcc90c6fd626baef51d9 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 11:16:41 +0530 Subject: [PATCH 153/263] Turn off codecov project status check --- .github/codecov.yaml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/.github/codecov.yaml b/.github/codecov.yaml index 3db0811ad1..950edb6a9a 100644 --- a/.github/codecov.yaml +++ b/.github/codecov.yaml @@ -11,5 +11,7 @@ comment: coverage: status: project: - default: - threshold: 2% + off + # Turing off for now as code coverage isn't stable and causes unnecessary build failures. + # default: + # threshold: 2% From 4d0c461fa3ac64e2bba9d1cfd400ce5ddb82b7da Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 11:32:37 +0530 Subject: [PATCH 154/263] chore: Reduce codecov pushes pushes to non-develop branches will not send coverage reports. This might reduce the coverage variability issue we're having. --- .github/workflows/e2e.yml | 3 ++- .github/workflows/test.yml | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index 63e20e5759..6777a1e4f3 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -47,7 +47,8 @@ jobs: VITEST_COVERAGE: true - name: Upload Coverage to Codecov uses: codecov/codecov-action@v3 - if: steps.cypress.conclusion == 'success' + # Run step only pushes to develop and pull_requests + if: ${{ steps.cypress.conclusion == 'success' && (github.event_name == 'pull_request' || github.ref == 'refs/heads/develop')}} with: files: coverage/cypress/lcov.info flags: e2e diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index ba77d83bc5..7c32795e8d 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -43,6 +43,8 @@ jobs: - name: Upload Coverage to Codecov uses: codecov/codecov-action@v3 + # Run step only pushes to develop and pull_requests + if: ${{ github.event_name == 'pull_request' || github.ref == 'refs/heads/develop' }} with: files: ./coverage/vitest/lcov.info flags: unit From aaec16ed6c743ab8a787f2cbc942c9a84044f823 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 11:58:55 +0530 Subject: [PATCH 155/263] chore: Remove lint warnings in example-diagram --- .prettierignore | 3 ++- packages/mermaid-example-diagram/src/exampleDiagramDb.js | 1 - packages/mermaid-example-diagram/src/exampleDiagramRenderer.js | 1 - packages/mermaid-example-diagram/src/mermaidUtils.ts | 2 +- 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/.prettierignore b/.prettierignore index b50a94e845..61ba3d0135 100644 --- a/.prettierignore +++ b/.prettierignore @@ -5,5 +5,6 @@ coverage # Autogenerated by PNPM pnpm-lock.yaml stats -packages/mermaid/src/docs/.vitepress/components.d.ts +**/.vitepress/components.d.ts +**/.vitepress/cache .nyc_output diff --git a/packages/mermaid-example-diagram/src/exampleDiagramDb.js b/packages/mermaid-example-diagram/src/exampleDiagramDb.js index a5fa88e6d7..21ba9e2482 100644 --- a/packages/mermaid-example-diagram/src/exampleDiagramDb.js +++ b/packages/mermaid-example-diagram/src/exampleDiagramDb.js @@ -22,7 +22,6 @@ export const setInfo = (inf) => { info = inf; }; -/** @returns Returns the info flag */ export const getInfo = () => { return info; }; diff --git a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js index 2c6839203e..9b3854aafc 100644 --- a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js +++ b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js @@ -8,7 +8,6 @@ import { log, getConfig, setupGraphViewbox } from './mermaidUtils.js'; * @param {any} text * @param {any} id * @param {any} version - * @param diagObj */ export const draw = (text, id, version) => { try { diff --git a/packages/mermaid-example-diagram/src/mermaidUtils.ts b/packages/mermaid-example-diagram/src/mermaidUtils.ts index 44cc85f73c..eeeca05c5d 100644 --- a/packages/mermaid-example-diagram/src/mermaidUtils.ts +++ b/packages/mermaid-example-diagram/src/mermaidUtils.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ const warning = (s: string) => { // Todo remove debug code // eslint-disable-next-line no-console @@ -28,7 +29,6 @@ export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void; export let getConfig: () => object; export let sanitizeText: (str: string) => string; export let commonDb: () => object; -// eslint-disable @typescript-eslint/no-explicit-any export let setupGraphViewbox: ( graph: any, svgElem: any, From c17dc15c572208f3a1ffc084dd781a56a5e0b60b Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 15:54:27 +0530 Subject: [PATCH 156/263] chore: Rename to teamMembers --- packages/mermaid/src/docs/.vitepress/contributors.ts | 2 +- .../mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts | 2 +- .../mermaid/src/docs/.vitepress/{data.ts => teamMembers.ts} | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename packages/mermaid/src/docs/.vitepress/{data.ts => teamMembers.ts} (100%) diff --git a/packages/mermaid/src/docs/.vitepress/contributors.ts b/packages/mermaid/src/docs/.vitepress/contributors.ts index 5a80ac3fef..724b48fcb5 100644 --- a/packages/mermaid/src/docs/.vitepress/contributors.ts +++ b/packages/mermaid/src/docs/.vitepress/contributors.ts @@ -1,5 +1,5 @@ import contributorUsernamesJson from './contributor-names.json'; -import { CoreTeam, knut, plainTeamMembers } from './data.js'; +import { CoreTeam, knut, plainTeamMembers } from './teamMembers.js'; const contributorUsernames: string[] = contributorUsernamesJson; diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts index 53df066c92..da7621b299 100644 --- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts +++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts @@ -1,7 +1,7 @@ // Adapted from https://github.dev/vitest-dev/vitest/blob/991ff33ab717caee85ef6cbe1c16dc514186b4cc/scripts/update-contributors.ts#L6 import { writeFile } from 'node:fs/promises'; -import { knut, plainTeamMembers } from '../data.js'; +import { knut, plainTeamMembers } from '../teamMembers.js'; import { existsSync } from 'node:fs'; const pathContributors = new URL('../contributor-names.json', import.meta.url); diff --git a/packages/mermaid/src/docs/.vitepress/data.ts b/packages/mermaid/src/docs/.vitepress/teamMembers.ts similarity index 100% rename from packages/mermaid/src/docs/.vitepress/data.ts rename to packages/mermaid/src/docs/.vitepress/teamMembers.ts From f5484636aae16327f84042505c6355d962727f25 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 16:12:09 +0530 Subject: [PATCH 157/263] createText to TS --- .../mermaid/src/rendering-util/{createText.js => createText.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/mermaid/src/rendering-util/{createText.js => createText.ts} (100%) diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.ts similarity index 100% rename from packages/mermaid/src/rendering-util/createText.js rename to packages/mermaid/src/rendering-util/createText.ts From 60a93f7377a468547a316a3049ebcd88f8839c6a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 20:34:17 +0530 Subject: [PATCH 158/263] Handle proper formatting for markdown strings --- .../mermaid/src/rendering-util/createText.ts | 103 ++++++------------ .../handle-markdown-text.spec.ts | 21 +++- .../rendering-util/handle-markdown-text.ts | 7 +- .../src/rendering-util/splitText.spec.ts | 46 +++++++- .../mermaid/src/rendering-util/splitText.ts | 72 +++++++----- .../mermaid/src/rendering-util/types.d.ts | 7 ++ 6 files changed, 145 insertions(+), 111 deletions(-) create mode 100644 packages/mermaid/src/rendering-util/types.d.ts diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index 06fba94c73..4afe2f7f2d 100644 --- a/packages/mermaid/src/rendering-util/createText.ts +++ b/packages/mermaid/src/rendering-util/createText.ts @@ -1,25 +1,17 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +// @ts-nocheck TODO: Fix types import { log } from '../logger.js'; import { decodeEntities } from '../mermaidAPI.js'; import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js'; import { splitLineToFitWidth } from './splitText.js'; -/** - * @param dom - * @param styleFn - */ +import { MarkdownLine, MarkdownWord } from './types.js'; + function applyStyle(dom, styleFn) { if (styleFn) { dom.attr('style', styleFn); } } -/** - * @param element - * @param {any} node - * @param width - * @param classes - * @param addBackground - * @returns {SVGForeignObjectElement} Node - */ function addHtmlSpan(element, node, width, classes, addBackground = false) { const fo = element.append('foreignObject'); // const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); @@ -65,12 +57,12 @@ function addHtmlSpan(element, node, width, classes, addBackground = false) { /** * Creates a tspan element with the specified attributes for text positioning. * - * @param {object} textElement - The parent text element to append the tspan element. - * @param {number} lineIndex - The index of the current line in the structuredText array. - * @param {number} lineHeight - The line height value for the text. - * @returns {object} The created tspan element. + * @param textElement - The parent text element to append the tspan element. + * @param lineIndex - The index of the current line in the structuredText array. + * @param lineHeight - The line height value for the text. + * @returns The created tspan element. */ -function createTspan(textElement, lineIndex, lineHeight) { +function createTspan(textElement: any, lineIndex: number, lineHeight: number) { return textElement .append('tspan') .attr('class', 'text-outer-tspan') @@ -79,55 +71,41 @@ function createTspan(textElement, lineIndex, lineHeight) { .attr('dy', lineHeight + 'em'); } -/** - * Compute the width of rendered text - * @param {object} parentNode - * @param {number} lineHeight - * @param {string} text - * @returns {number} - */ -function computeWidthOfText(parentNode, lineHeight, text) { +function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownLine): number { const testElement = parentNode.append('text'); const testSpan = createTspan(testElement, 1, lineHeight); - updateTextContentAndStyles(testSpan, [{ content: text, type: 'normal' }]); + updateTextContentAndStyles(testSpan, line); const textLength = testSpan.node().getComputedTextLength(); testElement.remove(); return textLength; } -/** - * Creates a formatted text element by breaking lines and applying styles based on - * the given structuredText. - * - * @param {number} width - The maximum allowed width of the text. - * @param {object} g - The parent group element to append the formatted text. - * @param {Array} structuredText - The structured text data to format. - * @param addBackground - */ -function createFormattedText(width, g, structuredText, addBackground = false) { +function createFormattedText( + width: number, + g: any, + structuredText: MarkdownWord[][], + addBackground = false +) { const lineHeight = 1.1; const labelGroup = g.append('g'); - let bkg = labelGroup.insert('rect').attr('class', 'background'); + const bkg = labelGroup.insert('rect').attr('class', 'background'); const textElement = labelGroup.append('text').attr('y', '-10.1'); let lineIndex = 0; - structuredText.forEach((line) => { + for (const line of structuredText) { /** * Preprocess raw string content of line data * Creating an array of strings pre-split to satisfy width limit */ - let fullStr = line.map((data) => data.content).join(' '); - const checkWidth = (str) => computeWidthOfText(labelGroup, lineHeight, str) <= width; - const linesUnderWidth = checkWidth(fullStr) - ? [fullStr] - : splitLineToFitWidth(fullStr, checkWidth); + const checkWidth = (line: MarkdownLine) => + computeWidthOfText(labelGroup, lineHeight, line) <= width; + const linesUnderWidth = checkWidth(line) ? [line] : splitLineToFitWidth(line, checkWidth); /** Add each prepared line as a tspan to the parent node */ - const preparedLines = linesUnderWidth.map((w) => ({ content: w, type: line.type })); - for (const preparedLine of preparedLines) { - let tspan = createTspan(textElement, lineIndex, lineHeight); - updateTextContentAndStyles(tspan, [preparedLine]); + for (const preparedLine of linesUnderWidth) { + const tspan = createTspan(textElement, lineIndex, lineHeight); + updateTextContentAndStyles(tspan, preparedLine); lineIndex++; } - }); + } if (addBackground) { const bbox = textElement.node().getBBox(); const padding = 2; @@ -143,44 +121,25 @@ function createFormattedText(width, g, structuredText, addBackground = false) { } } -/** - * Updates the text content and styles of the given tspan element based on the - * provided wrappedLine data. - * - * @param {object} tspan - The tspan element to update. - * @param {Array} wrappedLine - The line data to apply to the tspan element. - */ -function updateTextContentAndStyles(tspan, wrappedLine) { +function updateTextContentAndStyles(tspan: any, wrappedLine: MarkdownWord[]) { tspan.text(''); wrappedLine.forEach((word, index) => { const innerTspan = tspan .append('tspan') - .attr('font-style', word.type === 'em' ? 'italic' : 'normal') + .attr('font-style', word.type === 'emphasis' ? 'italic' : 'normal') .attr('class', 'text-inner-tspan') .attr('font-weight', word.type === 'strong' ? 'bold' : 'normal'); - const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}']; + // const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}']; if (index === 0) { innerTspan.text(word.content); } else { + // TODO: check what joiner to use. innerTspan.text(' ' + word.content); } }); } -/** - * - * @param el - * @param {*} text - * @param {*} param1 - * @param root0 - * @param root0.style - * @param root0.isTitle - * @param root0.classes - * @param root0.useHtmlLabels - * @param root0.isNode - * @returns - */ // Note when using from flowcharts converting the API isNode means classes should be set accordingly. When using htmlLabels => to sett classes to'nodeLabel' when isNode=true otherwise 'edgeLabel' // When not using htmlLabels => to set classes to 'title-row' when isTitle=true otherwise 'title-row' export const createText = ( @@ -210,7 +169,7 @@ export const createText = ( ), labelStyle: style.replace('fill:', 'color:'), }; - let vertexNode = addHtmlSpan(el, node, width, classes, addSvgBackground); + const vertexNode = addHtmlSpan(el, node, width, classes, addSvgBackground); return vertexNode; } else { const structuredText = markdownToLines(text); diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts index 8ae519cfa0..3ca7a3d7a6 100644 --- a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts +++ b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts @@ -152,9 +152,8 @@ test('markdownToLines - Only italic formatting', () => { }); it('markdownToLines - Mixed formatting', () => { - const input = `*Italic* and **bold** formatting`; - - const expectedOutput = [ + let input = `*Italic* and **bold** formatting`; + let expected = [ [ { content: 'Italic', type: 'emphasis' }, { content: 'and', type: 'normal' }, @@ -162,9 +161,21 @@ it('markdownToLines - Mixed formatting', () => { { content: 'formatting', type: 'normal' }, ], ]; + expect(markdownToLines(input)).toEqual(expected); - const output = markdownToLines(input); - expect(output).toEqual(expectedOutput); + input = `*Italic with space* and **bold ws** formatting`; + expected = [ + [ + { content: 'Italic', type: 'emphasis' }, + { content: 'with', type: 'emphasis' }, + { content: 'space', type: 'emphasis' }, + { content: 'and', type: 'normal' }, + { content: 'bold', type: 'strong' }, + { content: 'ws', type: 'strong' }, + { content: 'formatting', type: 'normal' }, + ], + ]; + expect(markdownToLines(input)).toEqual(expected); }); it('markdownToLines - Mixed formatting', () => { diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.ts b/packages/mermaid/src/rendering-util/handle-markdown-text.ts index 04dbe5b763..ae76faf8a6 100644 --- a/packages/mermaid/src/rendering-util/handle-markdown-text.ts +++ b/packages/mermaid/src/rendering-util/handle-markdown-text.ts @@ -1,6 +1,7 @@ import type { Content } from 'mdast'; import { fromMarkdown } from 'mdast-util-from-markdown'; import { dedent } from 'ts-dedent'; +import { MarkdownLine, MarkdownWordType } from './types.js'; /** * @param markdown - markdown to process @@ -17,13 +18,13 @@ function preprocessMarkdown(markdown: string): string { /** * @param markdown - markdown to split into lines */ -export function markdownToLines(markdown: string) { +export function markdownToLines(markdown: string): MarkdownLine[] { const preprocessedMarkdown = preprocessMarkdown(markdown); const { children } = fromMarkdown(preprocessedMarkdown); - const lines: { content: string; type: string }[][] = [[]]; + const lines: MarkdownLine[] = [[]]; let currentLine = 0; - function processNode(node: Content, parentType = 'normal') { + function processNode(node: Content, parentType: MarkdownWordType = 'normal') { if (node.type === 'text') { const textLines = node.value.split('\n'); textLines.forEach((textLine, index) => { diff --git a/packages/mermaid/src/rendering-util/splitText.spec.ts b/packages/mermaid/src/rendering-util/splitText.spec.ts index 3dafb80ee6..a09d683d3c 100644 --- a/packages/mermaid/src/rendering-util/splitText.spec.ts +++ b/packages/mermaid/src/rendering-util/splitText.spec.ts @@ -1,5 +1,6 @@ -import { splitTextToChars, splitLineToFitWidth, type CheckFitFunction } from './splitText.js'; +import { splitTextToChars, splitLineToFitWidth, splitLineToWords } from './splitText.js'; import { describe, it, expect } from 'vitest'; +import type { CheckFitFunction, MarkdownLine, MarkdownWordType } from './types.js'; describe('splitText', () => { it.each([ @@ -13,12 +14,35 @@ describe('splitText', () => { }); describe('split lines', () => { + /** + * Creates a checkFunction for a given width + * @param width - width of characters to fit in a line + * @returns checkFunction + */ const createCheckFn = (width: number): CheckFitFunction => { - return (text: string) => { - return splitTextToChars(text).length <= width; + return (text: MarkdownLine) => { + // Join all words into a single string + const joinedContent = text.map((w) => w.content).join(''); + const characters = splitTextToChars(joinedContent); + return characters.length <= width; }; }; + it('should create valid checkFit function', () => { + const checkFit5 = createCheckFn(5); + expect(checkFit5([{ content: 'hello', type: 'normal' }])).toBe(true); + expect( + checkFit5([ + { content: 'hello', type: 'normal' }, + { content: 'world', type: 'normal' }, + ]) + ).toBe(false); + const checkFit1 = createCheckFn(1); + expect(checkFit1([{ content: 'A', type: 'normal' }])).toBe(true); + expect(checkFit1([{ content: 'πŸ³οΈβ€βš§οΈ', type: 'normal' }])).toBe(true); + expect(checkFit1([{ content: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€βš§οΈ', type: 'normal' }])).toBe(false); + }); + it.each([ // empty string { str: 'hello world', width: 7, split: ['hello', 'world'] }, @@ -40,7 +64,10 @@ describe('split lines', () => { 'should split $str into lines of $width characters', ({ str, split, width }: { str: string; width: number; split: string[] }) => { const checkFn = createCheckFn(width); - expect(splitLineToFitWidth(str, checkFn)).toEqual(split); + const line: MarkdownLine = getLineFromString(str); + expect(splitLineToFitWidth(line, checkFn)).toEqual( + split.map((str) => splitLineToWords(str).map((content) => ({ content, type: 'normal' }))) + ); } ); @@ -48,8 +75,17 @@ describe('split lines', () => { const checkFn: CheckFitFunction = createCheckFn(6); const str = `Flag πŸ³οΈβ€βš§οΈ this πŸ³οΈβ€πŸŒˆ`; - expect(() => splitLineToFitWidth(str, checkFn)).toThrowErrorMatchingInlineSnapshot( + expect(() => + splitLineToFitWidth(getLineFromString(str), checkFn) + ).toThrowErrorMatchingInlineSnapshot( '"splitLineToFitWidth does not support newlines in the line"' ); }); }); + +const getLineFromString = (str: string, type: MarkdownWordType = 'normal'): MarkdownLine => { + return splitLineToWords(str).map((content) => ({ + content, + type, + })); +}; diff --git a/packages/mermaid/src/rendering-util/splitText.ts b/packages/mermaid/src/rendering-util/splitText.ts index c1d25ea13d..f32f3aacff 100644 --- a/packages/mermaid/src/rendering-util/splitText.ts +++ b/packages/mermaid/src/rendering-util/splitText.ts @@ -1,4 +1,4 @@ -export type CheckFitFunction = (text: string) => boolean; +import type { CheckFitFunction, MarkdownLine, MarkdownWord, MarkdownWordType } from './types.js'; /** * Splits a string into graphemes if available, otherwise characters. @@ -13,7 +13,7 @@ export function splitTextToChars(text: string): string[] { /** * Splits a string into words. */ -function splitLineToWords(text: string): string[] { +export function splitLineToWords(text: string): string[] { if (Intl.Segmenter) { return [...new Intl.Segmenter(undefined, { granularity: 'word' }).segment(text)].map( (s) => s.segment @@ -34,46 +34,61 @@ function splitLineToWords(text: string): string[] { * @param word - Word to split * @returns [first part of word that fits, rest of word] */ -export function splitWordToFitWidth(checkFit: CheckFitFunction, word: string): [string, string] { - const characters = splitTextToChars(word); +export function splitWordToFitWidth( + checkFit: CheckFitFunction, + word: MarkdownWord +): [MarkdownWord, MarkdownWord] { + const characters = splitTextToChars(word.content); if (characters.length === 0) { - return ['', '']; + return [ + { content: '', type: word.type }, + { content: '', type: word.type }, + ]; } - return splitWordToFitWidthRecursion(checkFit, [], characters); + return splitWordToFitWidthRecursion(checkFit, [], characters, word.type); } function splitWordToFitWidthRecursion( checkFit: CheckFitFunction, usedChars: string[], - remainingChars: string[] -): [string, string] { + remainingChars: string[], + type: MarkdownWordType +): [MarkdownWord, MarkdownWord] { // eslint-disable-next-line no-console console.error({ usedChars, remainingChars }); if (remainingChars.length === 0) { - return [usedChars.join(''), '']; + return [ + { content: usedChars.join(''), type }, + { content: '', type }, + ]; } const [nextChar, ...rest] = remainingChars; const newWord = [...usedChars, nextChar]; - if (checkFit(newWord.join(''))) { - return splitWordToFitWidthRecursion(checkFit, newWord, rest); + if (checkFit([{ content: newWord.join(''), type }])) { + return splitWordToFitWidthRecursion(checkFit, newWord, rest, type); } - return [usedChars.join(''), remainingChars.join('')]; + return [ + { content: usedChars.join(''), type }, + { content: remainingChars.join(''), type }, + ]; } -export function splitLineToFitWidth(line: string, checkFit: CheckFitFunction): string[] { - if (line.includes('\n')) { +export function splitLineToFitWidth( + line: MarkdownLine, + checkFit: CheckFitFunction +): MarkdownLine[] { + if (line.some(({ content }) => content.includes('\n'))) { throw new Error('splitLineToFitWidth does not support newlines in the line'); } - const words = splitLineToWords(line); - return splitLineToFitWidthRecursion(words, checkFit); + return splitLineToFitWidthRecursion(line, checkFit); } function splitLineToFitWidthRecursion( - words: string[], + words: MarkdownWord[], checkFit: CheckFitFunction, - lines: string[] = [], - newLine = '' -): string[] { + lines: MarkdownLine[] = [], + newLine: MarkdownLine = [] +): MarkdownLine[] { // eslint-disable-next-line no-console console.error({ words, lines, newLine }); // Return if there is nothing left to split @@ -82,17 +97,22 @@ function splitLineToFitWidthRecursion( if (newLine.length > 0) { lines.push(newLine); } - return lines.length > 0 ? lines : ['']; + return lines.length > 0 ? lines : []; } let joiner = ''; - if (words[0] === ' ') { + if (words[0].content === ' ') { joiner = ' '; words.shift(); } - const nextWord = words.shift() ?? ' '; + const nextWord: MarkdownWord = words.shift() ?? { content: ' ', type: 'normal' }; + + // const nextWordWithJoiner: MarkdownWord = { ...nextWord, content: joiner + nextWord.content }; + const lineWithNextWord: MarkdownLine = [...newLine]; + if (joiner !== '') { + lineWithNextWord.push({ content: joiner, type: 'normal' }); + } + lineWithNextWord.push(nextWord); - const nextWordWithJoiner = joiner + nextWord; - const lineWithNextWord = newLine ? `${newLine}${nextWordWithJoiner}` : nextWordWithJoiner; if (checkFit(lineWithNextWord)) { // nextWord fits, so we can add it to the new line and continue return splitLineToFitWidthRecursion(words, checkFit, lines, lineWithNextWord); @@ -106,7 +126,7 @@ function splitLineToFitWidthRecursion( } else { // There was no text in newLine, so we need to split nextWord const [line, rest] = splitWordToFitWidth(checkFit, nextWord); - lines.push(line); + lines.push([line]); words.unshift(rest); } return splitLineToFitWidthRecursion(words, checkFit, lines); diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts new file mode 100644 index 0000000000..aec99e636e --- /dev/null +++ b/packages/mermaid/src/rendering-util/types.d.ts @@ -0,0 +1,7 @@ +export type MarkdownWordType = 'normal' | 'strong' | 'emphasis'; +export interface MarkdownWord { + content: string; + type: MarkdownWordType; +} +export type MarkdownLine = MarkdownWord[]; +export type CheckFitFunction = (text: MarkdownLine) => boolean; From 5ac70bbc00c4bead77a369772b6808d72b46b734 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 21:22:28 +0530 Subject: [PATCH 159/263] Fix flowchart failure --- packages/mermaid/src/rendering-util/splitText.spec.ts | 2 ++ packages/mermaid/src/rendering-util/splitText.ts | 9 ++++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/rendering-util/splitText.spec.ts b/packages/mermaid/src/rendering-util/splitText.spec.ts index a09d683d3c..95512edfbb 100644 --- a/packages/mermaid/src/rendering-util/splitText.spec.ts +++ b/packages/mermaid/src/rendering-util/splitText.spec.ts @@ -53,6 +53,8 @@ describe('split lines', () => { { str: 'hello 12 world', width: 4, split: ['hell', 'o 12', 'worl', 'd'] }, { str: 'hello 1 2 world', width: 4, split: ['hell', 'o 1', '2', 'worl', 'd'] }, { str: 'hello 1 2 world', width: 6, split: ['hello', ' 1 2', 'world'] }, + // width = 0, impossible, so split into individual characters + { str: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»', width: 0, split: ['πŸ³οΈβ€βš§οΈ', 'πŸ³οΈβ€πŸŒˆ', 'πŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»'] }, { str: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»', width: 1, split: ['πŸ³οΈβ€βš§οΈ', 'πŸ³οΈβ€πŸŒˆ', 'πŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»'] }, { str: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»', width: 2, split: ['πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆ', 'πŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»'] }, { str: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»', width: 3, split: ['πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»'] }, diff --git a/packages/mermaid/src/rendering-util/splitText.ts b/packages/mermaid/src/rendering-util/splitText.ts index f32f3aacff..64a6cebbe8 100644 --- a/packages/mermaid/src/rendering-util/splitText.ts +++ b/packages/mermaid/src/rendering-util/splitText.ts @@ -67,6 +67,11 @@ function splitWordToFitWidthRecursion( if (checkFit([{ content: newWord.join(''), type }])) { return splitWordToFitWidthRecursion(checkFit, newWord, rest, type); } + if (usedChars.length === 0 && nextChar) { + // If the first character does not fit, split it anyway + usedChars.push(nextChar); + remainingChars.shift(); + } return [ { content: usedChars.join(''), type }, { content: remainingChars.join(''), type }, @@ -127,7 +132,9 @@ function splitLineToFitWidthRecursion( // There was no text in newLine, so we need to split nextWord const [line, rest] = splitWordToFitWidth(checkFit, nextWord); lines.push([line]); - words.unshift(rest); + if (rest.content) { + words.unshift(rest); + } } return splitLineToFitWidthRecursion(words, checkFit, lines); } From d4281d365d09f8b2ae2fd7136cc91002be117e66 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 21:29:40 +0530 Subject: [PATCH 160/263] Add Yokozuna59 & nirname --- cSpell.json | 6 ++++++ .../src/docs/.vitepress/contributors.ts | 1 + .../src/docs/.vitepress/teamMembers.ts | 21 +++++++------------ 3 files changed, 15 insertions(+), 13 deletions(-) diff --git a/cSpell.json b/cSpell.json index 690c2bd335..abcfa03830 100644 --- a/cSpell.json +++ b/cSpell.json @@ -89,6 +89,8 @@ "mult", "neurodiverse", "nextra", + "nikolay", + "nirname", "orlandoni", "pathe", "pbrolin", @@ -102,9 +104,11 @@ "ranksep", "rect", "rects", + "reda", "redmine", "rehype", "roledescription", + "rozhkov", "sandboxed", "sankey", "setupgraphviewbox", @@ -121,6 +125,7 @@ "stylis", "subhash-halder", "substate", + "sulais", "sveidqvist", "swimm", "techn", @@ -144,6 +149,7 @@ "vueuse", "xlink", "yash", + "yokozuna", "zenuml" ], "patterns": [ diff --git a/packages/mermaid/src/docs/.vitepress/contributors.ts b/packages/mermaid/src/docs/.vitepress/contributors.ts index 724b48fcb5..93eeee2e21 100644 --- a/packages/mermaid/src/docs/.vitepress/contributors.ts +++ b/packages/mermaid/src/docs/.vitepress/contributors.ts @@ -13,6 +13,7 @@ const websiteSVG = { const createLinks = (tm: CoreTeam): CoreTeam => { tm.avatar = `/user-avatars/${tm.github}.png`; + tm.title = tm.title ?? 'Developer'; tm.links = [{ icon: 'github', link: `https://github.com/${tm.github}` }]; if (tm.mastodon) { tm.links.push({ icon: 'mastodon', link: tm.mastodon }); diff --git a/packages/mermaid/src/docs/.vitepress/teamMembers.ts b/packages/mermaid/src/docs/.vitepress/teamMembers.ts index e8bb07ce8c..d95f49ed87 100644 --- a/packages/mermaid/src/docs/.vitepress/teamMembers.ts +++ b/packages/mermaid/src/docs/.vitepress/teamMembers.ts @@ -36,17 +36,14 @@ export const plainTeamMembers: CoreTeam[] = [ { github: 'NeilCuzon', name: 'Neil Cuzon', - title: 'Developer', }, { github: 'tylerlong', name: 'Tyler Liu', - title: 'Developer', }, { github: 'sidharthv96', name: 'Sidharth Vinod', - title: 'Developer', twitter: 'sidv42', mastodon: 'https://techhub.social/@sidv', sponsor: 'https://github.com/sponsors/sidharthv96', @@ -56,55 +53,53 @@ export const plainTeamMembers: CoreTeam[] = [ { github: 'ashishjain0512', name: 'Ashish Jain', - title: 'Developer', }, { github: 'mmorel-35', name: 'Matthieu Morel', - title: 'Developer', linkedIn: 'matthieumorel35', }, { github: 'aloisklink', name: 'Alois Klink', - title: 'Developer', linkedIn: 'aloisklink', website: 'https://aloisklink.com', }, { github: 'pbrolin47', name: 'Per Brolin', - title: 'Developer', }, { github: 'Yash-Singh1', name: 'Yash Singh', - title: 'Developer', }, { github: 'GDFaber', name: 'Marc Faber', - title: 'Developer', linkedIn: 'marc-faber', }, { github: 'MindaugasLaganeckas', name: 'Mindaugas Laganeckas', - title: 'Developer', }, { github: 'jgreywolf', name: 'Justin Greywolf', - title: 'Developer', }, { github: 'IOrlandoni', name: 'Nacho Orlandoni', - title: 'Developer', }, { github: 'huynhicode', name: 'Steph Huynh', - title: 'Developer', + }, + { + github: 'Yokozuna59', + name: 'Reda Al Sulais', + }, + { + github: 'nirname', + name: 'Nikolay Rozhkov', }, ]; From bcffff3b7be95a77717538ac8d009103d2a0dff2 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 21:36:10 +0530 Subject: [PATCH 161/263] Terminate build in CI if download fails --- .../mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts index 47f371fee5..cd78be782a 100644 --- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts +++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts @@ -19,6 +19,10 @@ async function download(url: string, fileName: URL) { await writeFile(fileName, Buffer.from(await image.arrayBuffer())); } catch (error) { console.error('failed to load', url, error); + // Exit the build process if we are in CI + if (process.env.CI) { + throw error; + } } } @@ -32,7 +36,7 @@ async function fetchAvatars() { download(`https://github.com/${name}.png?size=100`, getAvatarPath(name)); }); - await Promise.all(avatars); + await Promise.allSettled(avatars); } fetchAvatars(); From 7d996c3d336932f1020af0c1d94f9c4a17d6376d Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 21:48:18 +0530 Subject: [PATCH 162/263] Cleanup --- packages/mermaid/src/rendering-util/splitText.ts | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/packages/mermaid/src/rendering-util/splitText.ts b/packages/mermaid/src/rendering-util/splitText.ts index 64a6cebbe8..8b31c4ce6d 100644 --- a/packages/mermaid/src/rendering-util/splitText.ts +++ b/packages/mermaid/src/rendering-util/splitText.ts @@ -39,12 +39,6 @@ export function splitWordToFitWidth( word: MarkdownWord ): [MarkdownWord, MarkdownWord] { const characters = splitTextToChars(word.content); - if (characters.length === 0) { - return [ - { content: '', type: word.type }, - { content: '', type: word.type }, - ]; - } return splitWordToFitWidthRecursion(checkFit, [], characters, word.type); } @@ -54,8 +48,6 @@ function splitWordToFitWidthRecursion( remainingChars: string[], type: MarkdownWordType ): [MarkdownWord, MarkdownWord] { - // eslint-disable-next-line no-console - console.error({ usedChars, remainingChars }); if (remainingChars.length === 0) { return [ { content: usedChars.join(''), type }, @@ -94,8 +86,6 @@ function splitLineToFitWidthRecursion( lines: MarkdownLine[] = [], newLine: MarkdownLine = [] ): MarkdownLine[] { - // eslint-disable-next-line no-console - console.error({ words, lines, newLine }); // Return if there is nothing left to split if (words.length === 0) { // If there is a new line, add it to the lines @@ -110,8 +100,6 @@ function splitLineToFitWidthRecursion( words.shift(); } const nextWord: MarkdownWord = words.shift() ?? { content: ' ', type: 'normal' }; - - // const nextWordWithJoiner: MarkdownWord = { ...nextWord, content: joiner + nextWord.content }; const lineWithNextWord: MarkdownLine = [...newLine]; if (joiner !== '') { lineWithNextWord.push({ content: joiner, type: 'normal' }); @@ -128,7 +116,7 @@ function splitLineToFitWidthRecursion( // There was text in newLine, so add it to lines and push nextWord back into words. lines.push(newLine); words.unshift(nextWord); - } else { + } else if (nextWord.content) { // There was no text in newLine, so we need to split nextWord const [line, rest] = splitWordToFitWidth(checkFit, nextWord); lines.push([line]); From 355586f29772dca57f1e5a0886bca8b669d572dd Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 22:03:48 +0530 Subject: [PATCH 163/263] Run PR-labeler-config-validator only if config changes --- .github/workflows/pr-labeler-config-validator.yml | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml index af5c477d64..d928eb0fa8 100644 --- a/.github/workflows/pr-labeler-config-validator.yml +++ b/.github/workflows/pr-labeler-config-validator.yml @@ -1,11 +1,7 @@ name: Validate PR Labeler Configuration on: - push: {} + push: pull_request: - types: - - opened - - synchronize - - ready_for_review jobs: pr-labeler: @@ -13,7 +9,14 @@ jobs: steps: - name: Checkout Repository uses: actions/checkout@v3 + - uses: dorny/paths-filter@v2 + id: filter + with: + filters: | + pr-labeller: + - '.github/pr-labeler.yml' - name: Validate Configuration + if: steps.filter.outputs.pr-labeller == 'true' uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3 with: configuration-path: .github/pr-labeler.yml From 1682fa1e53ee2d82c8d140023d8f04f9eb6496c6 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 22:05:58 +0530 Subject: [PATCH 164/263] Update PR Labeler config --- .github/pr-labeler.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index 077cc568b4..67e6798396 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -1,3 +1,3 @@ -'Type: Bug / Error': 'bug/*' -'Type: Enhancement': 'feature/*' +'Type: Bug / Error': ['bug/*', fix/*] +'Type: Enhancement': ['feature/*', 'feat/*'] 'Type: Other': 'other/*' From 4af2fca339735a9343be7b77185c03acf1b58b1e Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Thu, 6 Jul 2023 19:40:54 -0300 Subject: [PATCH 165/263] 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 9fa5fa5173..dd887b0ee2 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 b7066ab3d0..7e5fa2711c 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 2b53e021537597819b87edfc4e06d0d292f7477c Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Fri, 7 Jul 2023 02:01:03 +0100 Subject: [PATCH 166/263] test: fix 'new default config' test This test was accidentally removed by a bad merge commit, see 29291c89 (Merge branch 'develop' into pr/aloisklink/4112, 2023-07-06). This test checks whether the default config defined in the `config.schema.yaml` file matches the old default config defined in `oldDefaultConfig.ts`. Fixes: 29291c8901fe9d8b316f17fe4e84d1ce8ca05002 --- packages/mermaid/src/config.spec.ts | 41 +++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts index 457cb82443..6a9eb204c7 100644 --- a/packages/mermaid/src/config.spec.ts +++ b/packages/mermaid/src/config.spec.ts @@ -1,4 +1,6 @@ import * as configApi from './config.js'; +import isObject from 'lodash-es/isObject.js'; +import type { MermaidConfig } from './config.type.js'; describe('when working with site config', function () { beforeEach(() => { @@ -69,4 +71,43 @@ describe('when working with site config', function () { const config_4 = configApi.getConfig(); expect(config_4.altFontFamily).toBeUndefined(); }); + + it('test new default config', async function () { + const { default: oldDefault } = (await import('./oldDefaultConfig.js')) as { + default: Required; + }; + // gitGraph used to not have this option (aka it was `undefined`) + oldDefault.gitGraph.useMaxWidth = false; + + // class diagrams used to not have these options set (aka they were `undefined`) + oldDefault.class.htmlLabels = false; + + const { default: newDefault } = await import('./defaultConfig.js'); + + // check subsets of the objects, to improve vitest error messages + // we can't just use `expect(newDefault).to.deep.equal(oldDefault);` + // because the functions in the config won't be the same + expect(new Set(Object.keys(newDefault))).to.deep.equal(new Set(Object.keys(oldDefault))); + + // @ts-ignore: Expect that all the keys in newDefault are valid MermaidConfig keys + Object.keys(newDefault).forEach((key: keyof MermaidConfig) => { + // recurse through object, since we want to treat functions differently + if (!Array.isArray(newDefault[key]) && isObject(newDefault[key])) { + expect(new Set(Object.keys(newDefault[key]))).to.deep.equal( + new Set(Object.keys(oldDefault[key])) + ); + for (const key2 in newDefault[key]) { + if (typeof newDefault[key][key2] === 'function') { + expect(newDefault[key][key2].toString()).to.deep.equal( + oldDefault[key][key2].toString() + ); + } else { + expect(newDefault[key]).to.have.deep.property(key2, oldDefault[key][key2]); + } + } + } else { + expect(newDefault[key]).to.deep.equal(oldDefault[key]); + } + }); + }); }); From 8167f8c1dfa5ea656bf0a8be5be7b8b6a0413eb4 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Fri, 7 Jul 2023 02:05:43 +0100 Subject: [PATCH 167/263] Revert "test(config): add temp test for defaultConfig" This reverts commit 063cb124cd64a64c068aea8c417628a3e4058307. This file was originally added to test whether the new implementation of the default config in `packages/mermaid/src/schemas/config.schema.yaml` matched the old existing default config in `packages/mermaid/src/oldDefaultConfig.ts`, and this test is no longer needed. --- packages/mermaid/src/config.spec.ts | 41 - packages/mermaid/src/oldDefaultConfig.ts | 2306 ---------------------- 2 files changed, 2347 deletions(-) delete mode 100644 packages/mermaid/src/oldDefaultConfig.ts diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts index 6a9eb204c7..457cb82443 100644 --- a/packages/mermaid/src/config.spec.ts +++ b/packages/mermaid/src/config.spec.ts @@ -1,6 +1,4 @@ import * as configApi from './config.js'; -import isObject from 'lodash-es/isObject.js'; -import type { MermaidConfig } from './config.type.js'; describe('when working with site config', function () { beforeEach(() => { @@ -71,43 +69,4 @@ describe('when working with site config', function () { const config_4 = configApi.getConfig(); expect(config_4.altFontFamily).toBeUndefined(); }); - - it('test new default config', async function () { - const { default: oldDefault } = (await import('./oldDefaultConfig.js')) as { - default: Required; - }; - // gitGraph used to not have this option (aka it was `undefined`) - oldDefault.gitGraph.useMaxWidth = false; - - // class diagrams used to not have these options set (aka they were `undefined`) - oldDefault.class.htmlLabels = false; - - const { default: newDefault } = await import('./defaultConfig.js'); - - // check subsets of the objects, to improve vitest error messages - // we can't just use `expect(newDefault).to.deep.equal(oldDefault);` - // because the functions in the config won't be the same - expect(new Set(Object.keys(newDefault))).to.deep.equal(new Set(Object.keys(oldDefault))); - - // @ts-ignore: Expect that all the keys in newDefault are valid MermaidConfig keys - Object.keys(newDefault).forEach((key: keyof MermaidConfig) => { - // recurse through object, since we want to treat functions differently - if (!Array.isArray(newDefault[key]) && isObject(newDefault[key])) { - expect(new Set(Object.keys(newDefault[key]))).to.deep.equal( - new Set(Object.keys(oldDefault[key])) - ); - for (const key2 in newDefault[key]) { - if (typeof newDefault[key][key2] === 'function') { - expect(newDefault[key][key2].toString()).to.deep.equal( - oldDefault[key][key2].toString() - ); - } else { - expect(newDefault[key]).to.have.deep.property(key2, oldDefault[key][key2]); - } - } - } else { - expect(newDefault[key]).to.deep.equal(oldDefault[key]); - } - }); - }); }); diff --git a/packages/mermaid/src/oldDefaultConfig.ts b/packages/mermaid/src/oldDefaultConfig.ts deleted file mode 100644 index fbbd39f2ad..0000000000 --- a/packages/mermaid/src/oldDefaultConfig.ts +++ /dev/null @@ -1,2306 +0,0 @@ -/** - * Temporary file for testing whether the new mermaid configuration defined in - * packages/mermaid/src/schemas/config.schema.yaml has the exact same default config. - */ - -import theme from './themes/index.js'; -import { type MermaidConfig } from './config.type.js'; -/** - * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click - * here](8.6.0_docs.md)].** - * - * ## **What follows are config instructions for older versions** - * - * These are the default options which can be overridden with the initialization call like so: - * - * **Example 1:** - * - * ```js - * mermaid.initialize({ flowchart:{ htmlLabels: false } }); - * ``` - * - * **Example 2:** - * - * ```html - * - * ``` - * - * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). - * A description of each option follows below. - */ -const config: Partial = { - /** - * Theme , the CSS style sheet - * - * | Parameter | Description | Type | Required | Values | - * | --------- | --------------- | ------ | -------- | ---------------------------------------------- | - * | theme | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' | - * - * **Notes:** To disable any pre-defined mermaid theme, use "null". - * - * @example - * - * ```js - * { - * "theme": "forest", - * "themeCSS": ".node rect { fill: red; }" - * } - * ``` - */ - theme: 'default', - themeVariables: theme['default'].getThemeVariables(), - themeCSS: undefined, - /* **maxTextSize** - The maximum allowed size of the users text diagram */ - maxTextSize: 50000, - darkMode: false, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- | - * | fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily | - * - * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif;'. - */ - fontFamily: '"trebuchet ms", verdana, arial, sans-serif;', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ----------------------------------------------------- | ---------------- | -------- | --------------------------------------------- | - * | logLevel | This option decides the amount of logging to be used. | string \| number | Required | 'trace','debug','info','warn','error','fatal' | - * - * **Notes:** - * - * - Trace: 0 - * - Debug: 1 - * - Info: 2 - * - Warn: 3 - * - Error: 4 - * - Fatal: 5 (default) - */ - logLevel: 5, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ | - * | securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' | - * - * **Notes**: - * - * - **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled. - * - **antiscript**: HTML tags in text are allowed (only script elements are removed), and click - * functionality is enabled. - * - **loose**: HTML tags in text are allowed and click functionality is enabled. - * - **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This - * prevent any JavaScript from running in the context. This may hinder interactive functionality - * of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc. - */ - securityLevel: 'strict', - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | -------------------------------------------- | ------- | -------- | ----------- | - * | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false | - * - * **Notes:** Default value: true - */ - startOnLoad: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- | - * | arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | boolean | Required | true, false | - * - * **Notes**: - * - * This matters if you are using base tag settings. - * - * Default value: false - */ - arrowMarkerAbsolute: false, - - /** - * This option controls which currentConfig keys are considered _secure_ and can only be changed - * via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the - * `secure` keys in the current currentConfig. This prevents malicious graph directives from - * overriding a site's default security. - * - * **Notes**: - * - * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'] - */ - secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'], - /** - * This option controls if the generated ids of nodes in the SVG are generated randomly or based - * on a seed. If set to false, the IDs are generated based on the current date and thus are not - * deterministic. This is the default behavior. - * - * **Notes**: - * - * This matters if your files are checked into source control e.g. git and should not change unless - * content is changed. - * - * Default value: false - */ - deterministicIds: false, - - /** - * This option is the optional seed for deterministic ids. if set to undefined but - * deterministicIds is true, a simple number iterator is used. You can set this attribute to base - * the seed on a static string. - */ - deterministicIDSeed: undefined, - - /** The object containing configurations specific for flowcharts */ - flowchart: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the flowchart | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ | - * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value | - * - * **Notes:** - * - * The amount of padding around the diagram as a whole so that embedded diagrams have margins, - * expressed in pixels - * - * Default value: 8 - */ - diagramPadding: 8, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | - * | htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | boolean | Required | true, false | - * - * **Notes:** Default value: true. - */ - htmlLabels: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------------------------------------- | ------- | -------- | ------------------- | - * | nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Number | - * - * **Notes:** - * - * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the - * vertical spacing for LR as well as RL graphs.** - * - * Default value: 50 - */ - nodeSpacing: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------------------------------------------------- | ------- | -------- | ------------------- | - * | rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Number | - * - * **Notes**: - * - * Pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal - * spacing for LR as well as RL graphs. - * - * Default value 50 - */ - rankSpacing: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- | - * | curve | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' | - * - * **Notes:** - * - * Default Value: 'basis' - */ - curve: 'basis', - // Only used in new experimental rendering - // represents the padding between the labels and the shape - padding: 15, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------- | ------- | -------- | ----------------------- | - * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper, elk | - * - * **Notes:** - * - * Decides which rendering engine that is to be used for the rendering. Legal values are: - * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid, elk for layout using - * elkjs - * - * Default value: 'dagre-wrapper' - */ - defaultRenderer: 'dagre-wrapper', - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------- | ------- | -------- | ----------------------- | - * | wrappingWidth | See notes | number | 4 | width of nodes where text is wrapped | - * - * **Notes:** - * - * When using markdown strings the text ius wrapped automatically, this - * value sets the max width of a text before it continues on a new line. - * Default value: 'dagre-wrapper' - */ - wrappingWidth: 200, - }, - - /** The object containing configurations specific for sequence diagrams */ - sequence: { - hideUnusedParticipants: false, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------- | ------- | -------- | ------------------ | - * | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value | - * - * **Notes:** Default value :10 - */ - activationWidth: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - diagramMarginX: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - diagramMarginY: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------- | ------- | -------- | ------------------ | - * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - actorMargin: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | -------------------- | ------- | -------- | ------------------ | - * | width | Width of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 150 - */ - width: 150, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | --------------------- | ------- | -------- | ------------------ | - * | height | Height of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 65 - */ - height: 65, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ------------------------ | ------- | -------- | ------------------ | - * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - boxMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | - * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 5 - */ - boxTextMargin: 5, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ------------------- | ------- | -------- | ------------------ | - * | noteMargin | margin around notes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - noteMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ---------------------- | ------- | -------- | ------------------ | - * | messageMargin | Space between messages | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 35 - */ - messageMargin: 35, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | --------------------------- | ------ | -------- | ------------------------- | - * | messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' | - * - * **Notes:** Default value: 'center' - */ - messageAlign: 'center', - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | --------------------------- | ------- | -------- | ----------- | - * | mirrorActors | Mirror actors under diagram | boolean | Required | true, false | - * - * **Notes:** Default value: true - */ - mirrorActors: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ----------------------------------------------------------------------- | ------- | -------- | ----------- | - * | forceMenus | forces actor popup menus to always be visible (to support E2E testing). | Boolean | Required | True, False | - * - * **Notes:** - * - * Default value: false. - */ - forceMenus: false, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | - * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | Required | Any Positive Value | - * - * **Notes:** - * - * Depending on css styling this might need adjustment. - * - * Default value: 1 - */ - bottomMarginAdj: 1, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** When this flag is set to true, the height and width is set to 100% and is then - * scaling with the available space. If set to false, the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ------------------------------------ | ------- | -------- | ----------- | - * | rightAngles | display curve arrows as right angles | boolean | Required | true, false | - * - * **Notes:** - * - * This will display arrows that start and begin at the same node as right angles, rather than a - * curve - * - * Default value: false - */ - rightAngles: false, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------- | ------------------------------- | ------- | -------- | ----------- | - * | showSequenceNumbers | This will show the node numbers | boolean | Required | true, false | - * - * **Notes:** Default value: false - */ - showSequenceNumbers: false, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | -------------------------------------------------- | ------- | -------- | ------------------ | - * | actorFontSize | This sets the font size of the actor's description | Integer | Require | Any Positive Value | - * - * **Notes:** **Default value 14**.. - */ - actorFontSize: 14, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- | - * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily | - * - * **Notes:** Default value: "'Open Sans", sans-serif' - */ - actorFontFamily: '"Open Sans", sans-serif', - - /** - * This sets the font weight of the actor's description - * - * **Notes:** Default value: 400. - */ - actorFontWeight: 400, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | ----------------------------------------------- | ------- | -------- | ------------------ | - * | noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 14 - */ - noteFontSize: 14, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- | - * | noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily | - * - * **Notes:** Default value: ''"trebuchet ms", verdana, arial, sans-serif' - */ - noteFontFamily: '"trebuchet ms", verdana, arial, sans-serif', - - /** - * This sets the font weight of the note's description - * - * **Notes:** Default value: 400 - */ - noteFontWeight: 400, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- | - * | noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' | - * - * **Notes:** Default value: 'center' - */ - noteAlign: 'center', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------------------------------------- | ------- | -------- | ------------------- | - * | messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number | - * - * **Notes:** Default value: 16 - */ - messageFontSize: 16, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- | - * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily | - * - * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif' - */ - messageFontFamily: '"trebuchet ms", verdana, arial, sans-serif', - - /** - * This sets the font weight of the message's description - * - * **Notes:** Default value: 400. - */ - messageFontWeight: 400, - - /** - * This sets the auto-wrap state for the diagram - * - * **Notes:** Default value: false. - */ - wrap: false, - - /** - * This sets the auto-wrap padding for the diagram (sides only) - * - * **Notes:** Default value: 0. - */ - wrapPadding: 10, - - /** - * This sets the width of the loop-box (loop, alt, opt, par) - * - * **Notes:** Default value: 50. - */ - labelBoxWidth: 50, - - /** - * This sets the height of the loop-box (loop, alt, opt, par) - * - * **Notes:** Default value: 20. - */ - labelBoxHeight: 20, - - messageFont: function () { - return { - fontFamily: this.messageFontFamily, - fontSize: this.messageFontSize, - fontWeight: this.messageFontWeight, - }; - }, - noteFont: function () { - return { - fontFamily: this.noteFontFamily, - fontSize: this.noteFontSize, - fontWeight: this.noteFontWeight, - }; - }, - actorFont: function () { - return { - fontFamily: this.actorFontFamily, - fontSize: this.actorFontSize, - fontWeight: this.actorFontWeight, - }; - }, - }, - - /** The object containing configurations specific for gantt diagrams */ - gantt: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ----------------------------------- | ------- | -------- | ------------------ | - * | barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 20 - */ - barHeight: 20, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ---------------------------------------------------------------- | ------- | -------- | ------------------ | - * | barGap | The margin between the different activities in the gantt diagram | Integer | Optional | Any Positive Value | - * - * **Notes:** Default value: 4 - */ - barGap: 4, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ | - * | topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - topPadding: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | ----------------------------------------------------------------------- | ------- | -------- | ------------------ | - * | rightPadding | The space allocated for the section name to the right of the activities | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 75 - */ - rightPadding: 75, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ---------------------------------------------------------------------- | ------- | -------- | ------------------ | - * | leftPadding | The space allocated for the section name to the left of the activities | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 75 - */ - leftPadding: 75, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------------- | -------------------------------------------- | ------- | -------- | ------------------ | - * | gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 35 - */ - gridLineStartPadding: 35, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ----------- | ------- | -------- | ------------------ | - * | fontSize | Font size | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 11 - */ - fontSize: 11, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------- | ------- | -------- | ------------------ | - * | sectionFontSize | Font size for sections | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 11 - */ - sectionFontSize: 11, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------- | ---------------------------------------- | ------- | -------- | ------------------ | - * | numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value | - * - * **Notes:** Default value: 4 - */ - numberSectionStyles: 4, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ------------------------- | ------ | -------- | --------- | - * | displayMode | Controls the display mode | string | 4 | 'compact' | - * - * **Notes**: - * - * - **compact**: Enables displaying multiple tasks on the same row. - */ - displayMode: '', - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ---------------------------- | ---- | -------- | ---------------- | - * | axisFormat | Date/time format of the axis | 3 | Required | Date in yy-mm-dd | - * - * **Notes:** - * - * This might need adjustment to match your locale and preferences - * - * Default value: '%Y-%m-%d'. - */ - axisFormat: '%Y-%m-%d', - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | ------------| ------ | -------- | ------- | - * | tickInterval | axis ticks | string | Optional | string | - * - * **Notes:** - * - * Pattern is /^([1-9][0-9]*)(minute|hour|day|week|month)$/ - * - * Default value: undefined - */ - tickInterval: undefined, - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ----------- | ------- | -------- | ----------- | - * | topAxis | See notes | Boolean | 4 | True, False | - * - * **Notes:** when this flag is set date labels will be added to the top of the chart - * - * **Default value false**. - */ - topAxis: false, - - useWidth: undefined, - }, - - /** The object containing configurations specific for journey diagrams */ - journey: { - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - diagramMarginX: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - diagramMarginY: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------- | ------- | -------- | ------------------ | - * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - leftMargin: 150, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | -------------------- | ------- | -------- | ------------------ | - * | width | Width of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 150 - */ - width: 150, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | --------------------- | ------- | -------- | ------------------ | - * | height | Height of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 65 - */ - height: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ------------------------ | ------- | -------- | ------------------ | - * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - boxMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | - * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 5 - */ - boxTextMargin: 5, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ------------------- | ------- | -------- | ------------------ | - * | noteMargin | Margin around notes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - noteMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ----------------------- | ------- | -------- | ------------------ | - * | messageMargin | Space between messages. | Integer | Required | Any Positive Value | - * - * **Notes:** - * - * Space between messages. - * - * Default value: 35 - */ - messageMargin: 35, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | --------------------------- | ---- | -------- | ------------------------- | - * | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | - * - * **Notes:** Default value: 'center' - */ - messageAlign: 'center', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | - * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value | - * - * **Notes:** - * - * Depending on css styling this might need adjustment. - * - * Default value: 1 - */ - bottomMarginAdj: 1, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------------------- | ---- | -------- | ----------- | - * | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false | - * - * **Notes:** - * - * This will display arrows that start and begin at the same node as right angles, rather than a - * curves - * - * Default value: false - */ - rightAngles: false, - taskFontSize: 14, - taskFontFamily: '"Open Sans", sans-serif', - taskMargin: 50, - // width of activation box - activationWidth: 10, - - // text placement as: tspan | fo | old only text as before - textPlacement: 'fo', - actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'], - - sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'], - sectionColours: ['#fff'], - }, - /** The object containing configurations specific for timeline diagrams */ - timeline: { - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - diagramMarginX: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - diagramMarginY: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------- | ------- | -------- | ------------------ | - * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - leftMargin: 150, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | -------------------- | ------- | -------- | ------------------ | - * | width | Width of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 150 - */ - width: 150, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | --------------------- | ------- | -------- | ------------------ | - * | height | Height of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 65 - */ - height: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ------------------------ | ------- | -------- | ------------------ | - * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - boxMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | - * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 5 - */ - boxTextMargin: 5, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ------------------- | ------- | -------- | ------------------ | - * | noteMargin | Margin around notes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - noteMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ----------------------- | ------- | -------- | ------------------ | - * | messageMargin | Space between messages. | Integer | Required | Any Positive Value | - * - * **Notes:** - * - * Space between messages. - * - * Default value: 35 - */ - messageMargin: 35, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | --------------------------- | ---- | -------- | ------------------------- | - * | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | - * - * **Notes:** Default value: 'center' - */ - messageAlign: 'center', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | - * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value | - * - * **Notes:** - * - * Depending on css styling this might need adjustment. - * - * Default value: 1 - */ - bottomMarginAdj: 1, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------------------- | ---- | -------- | ----------- | - * | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false | - * - * **Notes:** - * - * This will display arrows that start and begin at the same node as right angles, rather than a - * curves - * - * Default value: false - */ - rightAngles: false, - taskFontSize: 14, - taskFontFamily: '"Open Sans", sans-serif', - taskMargin: 50, - // width of activation box - activationWidth: 10, - - // text placement as: tspan | fo | old only text as before - textPlacement: 'fo', - actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'], - - sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'], - sectionColours: ['#fff'], - disableMulticolor: false, - }, - class: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the class diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - arrowMarkerAbsolute: false, - dividerMargin: 10, - padding: 5, - textHeight: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------- | ------- | -------- | ----------------------- | - * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper | - * - * **Notes**: - * - * Decides which rendering engine that is to be used for the rendering. Legal values are: - * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid - * - * Default value: 'dagre-d3' - */ - defaultRenderer: 'dagre-wrapper', - }, - state: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the state diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - dividerMargin: 10, - sizeUnit: 5, - padding: 8, - textHeight: 10, - titleShift: -15, - noteMargin: 10, - forkWidth: 70, - forkHeight: 7, - // Used - miniPadding: 2, - // Font size factor, this is used to guess the width of the edges labels before rendering by dagre - // layout. This might need updating if/when switching font - fontSizeFactor: 5.02, - fontSize: 24, - labelHeight: 16, - edgeLengthFactor: '20', - compositTitleSize: 35, - radius: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------- | ------- | -------- | ----------------------- | - * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper | - * - * **Notes:** - * - * Decides which rendering engine that is to be used for the rendering. Legal values are: - * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid - * - * Default value: 'dagre-d3' - */ - defaultRenderer: 'dagre-wrapper', - }, - - /** The object containing configurations specific for entity relationship diagrams */ - er: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ | - * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value | - * - * **Notes:** - * - * The amount of padding around the diagram as a whole so that embedded diagrams have margins, - * expressed in pixels - * - * Default value: 20 - */ - diagramPadding: 20, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------------- | ------ | -------- | ---------------------- | - * | layoutDirection | Directional bias for layout of entities. | string | Required | "TB", "BT", "LR", "RL" | - * - * **Notes:** - * - * 'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left. - * - * T = top, B = bottom, L = left, and R = right. - * - * Default value: 'TB' - */ - layoutDirection: 'TB', - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------- | ------- | -------- | ------------------ | - * | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value | - * - * **Notes:** Expressed in pixels. Default value: 100 - */ - minEntityWidth: 100, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------------------------------- | ------- | -------- | ------------------ | - * | minEntityHeight | The minimum height of an entity box | Integer | 4 | Any Positive Value | - * - * **Notes:** Expressed in pixels Default value: 75 - */ - minEntityHeight: 75, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ | - * | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4 | Any Positive Value | - * - * **Notes:** - * - * The minimum internal padding between text in an entity box and the enclosing box borders, - * expressed in pixels. - * - * Default value: 15 - */ - entityPadding: 15, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ----------------------------------- | ------ | -------- | -------------------- | - * | stroke | Stroke color of box edges and lines | string | 4 | Any recognized color | - * - * **Notes:** Default value: 'gray' - */ - stroke: 'gray', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | -------------------------- | ------ | -------- | -------------------- | - * | fill | Fill color of entity boxes | string | 4 | Any recognized color | - * - * **Notes:** Default value: 'honeydew' - */ - fill: 'honeydew', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ------------------- | ------- | -------- | ------------------ | - * | fontSize | Font Size in pixels | Integer | | Any Positive Value | - * - * **Notes:** - * - * Font size (expressed as an integer representing a number of pixels) Default value: 12 - */ - fontSize: 12, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** - * - * When this flag is set to true, the diagram width is locked to 100% and scaled based on - * available space. If set to false, the diagram reserves its absolute width. - * - * Default value: true - */ - useMaxWidth: true, - }, - - /** The object containing configurations specific for pie diagrams */ - pie: { - useWidth: undefined, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** - * - * When this flag is set to true, the diagram width is locked to 100% and scaled based on - * available space. If set to false, the diagram reserves its absolute width. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | -------------------------------------------------------------------------------- | ------- | -------- | ------------------- | - * | textPosition | Axial position of slice's label from zero at the center to 1 at the outside edge | Number | Optional | Decimal from 0 to 1 | - * - * **Notes:** Default value: 0.75 - */ - textPosition: 0.75, - }, - - quadrantChart: { - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | - * | chartWidth | Width of the chart | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 500 - */ - chartWidth: 500, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | - * | chartHeight | Height of the chart | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 500 - */ - chartHeight: 500, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | - * | titlePadding | Chart title top and bottom padding | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 10 - */ - titlePadding: 10, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | - * | titleFontSize | Chart title font size | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 20 - */ - titleFontSize: 20, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | - * | quadrantPadding | Padding around the quadrant square | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - quadrantPadding: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ---------------------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------- | - * | quadrantTextTopPadding | quadrant title padding from top if the quadrant is rendered on top | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - quadrantTextTopPadding: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | - * | quadrantLabelFontSize | quadrant title font size | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 16 - */ - quadrantLabelFontSize: 16, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------------------------- | ------------------------------------------------------------- | ------- | -------- | ------------------- | - * | quadrantInternalBorderStrokeWidth | stroke width of edges of the box that are inside the quadrant | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 1 - */ - quadrantInternalBorderStrokeWidth: 1, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------------------------- | -------------------------------------------------------------- | ------- | -------- | ------------------- | - * | quadrantExternalBorderStrokeWidth | stroke width of edges of the box that are outside the quadrant | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 2 - */ - quadrantExternalBorderStrokeWidth: 2, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | - * | xAxisLabelPadding | Padding around x-axis labels | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - xAxisLabelPadding: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | - * | xAxisLabelFontSize | x-axis label font size | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 16 - */ - xAxisLabelFontSize: 16, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ------------------------------- | ------- | -------- | ------------------- | - * | xAxisPosition | position of x-axis labels | string | Optional | 'top' or 'bottom' | - * - * **Notes:** - * Default value: top - */ - xAxisPosition: 'top', - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | - * | yAxisLabelPadding | Padding around y-axis labels | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - yAxisLabelPadding: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | - * | yAxisLabelFontSize | y-axis label font size | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 16 - */ - yAxisLabelFontSize: 16, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ------------------------------- | ------- | -------- | ------------------- | - * | yAxisPosition | position of y-axis labels | string | Optional | 'left' or 'right' | - * - * **Notes:** - * Default value: left - */ - yAxisPosition: 'left', - /** - * | Parameter | Description | Type | Required | Values | - * | ---------------------- | -------------------------------------- | ------- | -------- | ------------------- | - * | pointTextPadding | padding between point and point label | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - pointTextPadding: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ---------------------- | ---------------------- | ------- | -------- | ------------------- | - * | pointTextPadding | point title font size | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 12 - */ - pointLabelFontSize: 12, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ------------------------------- | ------- | -------- | ------------------- | - * | pointRadius | radius of the point to be drawn | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - pointRadius: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** - * - * When this flag is set to true, the diagram width is locked to 100% and scaled based on - * available space. If set to false, the diagram reserves its absolute width. - * - * Default value: true - */ - useMaxWidth: true, - }, - - /** The object containing configurations specific for req diagrams */ - requirement: { - useWidth: undefined, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** - * - * When this flag is set to true, the diagram width is locked to 100% and scaled based on - * available space. If set to false, the diagram reserves its absolute width. - * - * Default value: true - */ - useMaxWidth: true, - - rect_fill: '#f9f9f9', - text_color: '#333', - rect_border_size: '0.5px', - rect_border_color: '#bbb', - rect_min_width: 200, - rect_min_height: 200, - fontSize: 14, - rect_padding: 10, - line_height: 20, - }, - gitGraph: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the Git diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - diagramPadding: 8, - nodeLabel: { - width: 75, - height: 100, - x: -25, - y: 0, - }, - mainBranchName: 'main', - mainBranchOrder: 0, - showCommitLabel: true, - showBranches: true, - rotateCommitLabel: true, - }, - - /** The object containing configurations specific for c4 diagrams */ - c4: { - useWidth: undefined, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginX | Margin to the right and left of the c4 diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - diagramMarginX: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - diagramMarginY: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | --------------------- | ------- | -------- | ------------------ | - * | c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - c4ShapeMargin: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------- | ------- | -------- | ------------------ | - * | c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 20 - */ - c4ShapePadding: 20, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | --------------------- | ------- | -------- | ------------------ | - * | width | Width of person boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 216 - */ - width: 216, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ---------------------- | ------- | -------- | ------------------ | - * | height | Height of person boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 60 - */ - height: 60, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ------------------- | ------- | -------- | ------------------ | - * | boxMargin | Margin around boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - boxMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** When this flag is set to true, the height and width is set to 100% and is then - * scaling with the available space. If set to false, the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | ----------- | ------- | -------- | ------------------ | - * | c4ShapeInRow | See Notes | Integer | Required | Any Positive Value | - * - * **Notes:** How many shapes to place in each row. - * - * Default value: 4 - */ - c4ShapeInRow: 4, - - nextLinePaddingX: 0, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------- | ------- | -------- | ------------------ | - * | c4BoundaryInRow | See Notes | Integer | Required | Any Positive Value | - * - * **Notes:** How many boundaries to place in each row. - * - * Default value: 2 - */ - c4BoundaryInRow: 2, - - /** - * This sets the font size of Person shape for the diagram - * - * **Notes:** Default value: 14. - */ - personFontSize: 14, - /** - * This sets the font family of Person shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - personFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Person shape for the diagram - * - * **Notes:** Default value: normal. - */ - personFontWeight: 'normal', - - /** - * This sets the font size of External Person shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_personFontSize: 14, - /** - * This sets the font family of External Person shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_personFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Person shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_personFontWeight: 'normal', - - /** - * This sets the font size of System shape for the diagram - * - * **Notes:** Default value: 14. - */ - systemFontSize: 14, - /** - * This sets the font family of System shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - systemFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of System shape for the diagram - * - * **Notes:** Default value: normal. - */ - systemFontWeight: 'normal', - - /** - * This sets the font size of External System shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_systemFontSize: 14, - /** - * This sets the font family of External System shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_systemFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External System shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_systemFontWeight: 'normal', - - /** - * This sets the font size of System DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - system_dbFontSize: 14, - /** - * This sets the font family of System DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - system_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of System DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - system_dbFontWeight: 'normal', - - /** - * This sets the font size of External System DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_system_dbFontSize: 14, - /** - * This sets the font family of External System DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_system_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External System DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_system_dbFontWeight: 'normal', - - /** - * This sets the font size of System Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - system_queueFontSize: 14, - /** - * This sets the font family of System Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - system_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of System Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - system_queueFontWeight: 'normal', - - /** - * This sets the font size of External System Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_system_queueFontSize: 14, - /** - * This sets the font family of External System Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_system_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External System Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_system_queueFontWeight: 'normal', - - /** - * This sets the font size of Boundary shape for the diagram - * - * **Notes:** Default value: 14. - */ - boundaryFontSize: 14, - /** - * This sets the font family of Boundary shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - boundaryFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Boundary shape for the diagram - * - * **Notes:** Default value: normal. - */ - boundaryFontWeight: 'normal', - - /** - * This sets the font size of Message shape for the diagram - * - * **Notes:** Default value: 12. - */ - messageFontSize: 12, - /** - * This sets the font family of Message shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - messageFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Message shape for the diagram - * - * **Notes:** Default value: normal. - */ - messageFontWeight: 'normal', - - /** - * This sets the font size of Container shape for the diagram - * - * **Notes:** Default value: 14. - */ - containerFontSize: 14, - /** - * This sets the font family of Container shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - containerFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Container shape for the diagram - * - * **Notes:** Default value: normal. - */ - containerFontWeight: 'normal', - - /** - * This sets the font size of External Container shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_containerFontSize: 14, - /** - * This sets the font family of External Container shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_containerFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Container shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_containerFontWeight: 'normal', - - /** - * This sets the font size of Container DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - container_dbFontSize: 14, - /** - * This sets the font family of Container DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - container_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Container DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - container_dbFontWeight: 'normal', - - /** - * This sets the font size of External Container DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_container_dbFontSize: 14, - /** - * This sets the font family of External Container DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_container_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Container DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_container_dbFontWeight: 'normal', - - /** - * This sets the font size of Container Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - container_queueFontSize: 14, - /** - * This sets the font family of Container Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - container_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Container Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - container_queueFontWeight: 'normal', - - /** - * This sets the font size of External Container Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_container_queueFontSize: 14, - /** - * This sets the font family of External Container Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_container_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Container Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_container_queueFontWeight: 'normal', - - /** - * This sets the font size of Component shape for the diagram - * - * **Notes:** Default value: 14. - */ - componentFontSize: 14, - /** - * This sets the font family of Component shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - componentFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Component shape for the diagram - * - * **Notes:** Default value: normal. - */ - componentFontWeight: 'normal', - - /** - * This sets the font size of External Component shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_componentFontSize: 14, - /** - * This sets the font family of External Component shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_componentFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Component shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_componentFontWeight: 'normal', - - /** - * This sets the font size of Component DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - component_dbFontSize: 14, - /** - * This sets the font family of Component DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - component_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Component DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - component_dbFontWeight: 'normal', - - /** - * This sets the font size of External Component DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_component_dbFontSize: 14, - /** - * This sets the font family of External Component DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_component_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Component DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_component_dbFontWeight: 'normal', - - /** - * This sets the font size of Component Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - component_queueFontSize: 14, - /** - * This sets the font family of Component Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - component_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Component Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - component_queueFontWeight: 'normal', - - /** - * This sets the font size of External Component Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_component_queueFontSize: 14, - /** - * This sets the font family of External Component Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_component_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Component Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_component_queueFontWeight: 'normal', - - /** - * This sets the auto-wrap state for the diagram - * - * **Notes:** Default value: true. - */ - wrap: true, - - /** - * This sets the auto-wrap padding for the diagram (sides only) - * - * **Notes:** Default value: 0. - */ - wrapPadding: 10, - - personFont: function () { - return { - fontFamily: this.personFontFamily, - fontSize: this.personFontSize, - fontWeight: this.personFontWeight, - }; - }, - - external_personFont: function () { - return { - fontFamily: this.external_personFontFamily, - fontSize: this.external_personFontSize, - fontWeight: this.external_personFontWeight, - }; - }, - - systemFont: function () { - return { - fontFamily: this.systemFontFamily, - fontSize: this.systemFontSize, - fontWeight: this.systemFontWeight, - }; - }, - - external_systemFont: function () { - return { - fontFamily: this.external_systemFontFamily, - fontSize: this.external_systemFontSize, - fontWeight: this.external_systemFontWeight, - }; - }, - - system_dbFont: function () { - return { - fontFamily: this.system_dbFontFamily, - fontSize: this.system_dbFontSize, - fontWeight: this.system_dbFontWeight, - }; - }, - - external_system_dbFont: function () { - return { - fontFamily: this.external_system_dbFontFamily, - fontSize: this.external_system_dbFontSize, - fontWeight: this.external_system_dbFontWeight, - }; - }, - - system_queueFont: function () { - return { - fontFamily: this.system_queueFontFamily, - fontSize: this.system_queueFontSize, - fontWeight: this.system_queueFontWeight, - }; - }, - - external_system_queueFont: function () { - return { - fontFamily: this.external_system_queueFontFamily, - fontSize: this.external_system_queueFontSize, - fontWeight: this.external_system_queueFontWeight, - }; - }, - - containerFont: function () { - return { - fontFamily: this.containerFontFamily, - fontSize: this.containerFontSize, - fontWeight: this.containerFontWeight, - }; - }, - - external_containerFont: function () { - return { - fontFamily: this.external_containerFontFamily, - fontSize: this.external_containerFontSize, - fontWeight: this.external_containerFontWeight, - }; - }, - - container_dbFont: function () { - return { - fontFamily: this.container_dbFontFamily, - fontSize: this.container_dbFontSize, - fontWeight: this.container_dbFontWeight, - }; - }, - - external_container_dbFont: function () { - return { - fontFamily: this.external_container_dbFontFamily, - fontSize: this.external_container_dbFontSize, - fontWeight: this.external_container_dbFontWeight, - }; - }, - - container_queueFont: function () { - return { - fontFamily: this.container_queueFontFamily, - fontSize: this.container_queueFontSize, - fontWeight: this.container_queueFontWeight, - }; - }, - - external_container_queueFont: function () { - return { - fontFamily: this.external_container_queueFontFamily, - fontSize: this.external_container_queueFontSize, - fontWeight: this.external_container_queueFontWeight, - }; - }, - - componentFont: function () { - return { - fontFamily: this.componentFontFamily, - fontSize: this.componentFontSize, - fontWeight: this.componentFontWeight, - }; - }, - - external_componentFont: function () { - return { - fontFamily: this.external_componentFontFamily, - fontSize: this.external_componentFontSize, - fontWeight: this.external_componentFontWeight, - }; - }, - - component_dbFont: function () { - return { - fontFamily: this.component_dbFontFamily, - fontSize: this.component_dbFontSize, - fontWeight: this.component_dbFontWeight, - }; - }, - - external_component_dbFont: function () { - return { - fontFamily: this.external_component_dbFontFamily, - fontSize: this.external_component_dbFontSize, - fontWeight: this.external_component_dbFontWeight, - }; - }, - - component_queueFont: function () { - return { - fontFamily: this.component_queueFontFamily, - fontSize: this.component_queueFontSize, - fontWeight: this.component_queueFontWeight, - }; - }, - - external_component_queueFont: function () { - return { - fontFamily: this.external_component_queueFontFamily, - fontSize: this.external_component_queueFontSize, - fontWeight: this.external_component_queueFontWeight, - }; - }, - - boundaryFont: function () { - return { - fontFamily: this.boundaryFontFamily, - fontSize: this.boundaryFontSize, - fontWeight: this.boundaryFontWeight, - }; - }, - - messageFont: function () { - return { - fontFamily: this.messageFontFamily, - fontSize: this.messageFontSize, - fontWeight: this.messageFontWeight, - }; - }, - - // ' Colors - // ' ################################## - person_bg_color: '#08427B', - person_border_color: '#073B6F', - external_person_bg_color: '#686868', - external_person_border_color: '#8A8A8A', - system_bg_color: '#1168BD', - system_border_color: '#3C7FC0', - system_db_bg_color: '#1168BD', - system_db_border_color: '#3C7FC0', - system_queue_bg_color: '#1168BD', - system_queue_border_color: '#3C7FC0', - external_system_bg_color: '#999999', - external_system_border_color: '#8A8A8A', - external_system_db_bg_color: '#999999', - external_system_db_border_color: '#8A8A8A', - external_system_queue_bg_color: '#999999', - external_system_queue_border_color: '#8A8A8A', - container_bg_color: '#438DD5', - container_border_color: '#3C7FC0', - container_db_bg_color: '#438DD5', - container_db_border_color: '#3C7FC0', - container_queue_bg_color: '#438DD5', - container_queue_border_color: '#3C7FC0', - external_container_bg_color: '#B3B3B3', - external_container_border_color: '#A6A6A6', - external_container_db_bg_color: '#B3B3B3', - external_container_db_border_color: '#A6A6A6', - external_container_queue_bg_color: '#B3B3B3', - external_container_queue_border_color: '#A6A6A6', - component_bg_color: '#85BBF0', - component_border_color: '#78A8D8', - component_db_bg_color: '#85BBF0', - component_db_border_color: '#78A8D8', - component_queue_bg_color: '#85BBF0', - component_queue_border_color: '#78A8D8', - external_component_bg_color: '#CCCCCC', - external_component_border_color: '#BFBFBF', - external_component_db_bg_color: '#CCCCCC', - external_component_db_border_color: '#BFBFBF', - external_component_queue_bg_color: '#CCCCCC', - external_component_queue_border_color: '#BFBFBF', - }, - mindmap: { - useMaxWidth: true, - padding: 10, - maxNodeWidth: 200, - }, - sankey: { - width: 600, - height: 400, - linkColor: 'gradient', - nodeAlignment: 'justify', - useMaxWidth: false, - }, - fontSize: 16, -}; - -if (config.class) { - config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute; -} -if (config.gitGraph) { - config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute; -} - -const keyify = (obj: any, prefix = ''): string[] => - Object.keys(obj).reduce((res: string[], el): string[] => { - if (Array.isArray(obj[el])) { - return res; - } else if (typeof obj[el] === 'object' && obj[el] !== null) { - return [...res, prefix + el, ...keyify(obj[el], '')]; - } - return [...res, prefix + el]; - }, []); - -export const configKeys: string[] = keyify(config, ''); -export default config; From 42da53f58a4b933035325c8762af80b5297fb976 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Thu, 6 Jul 2023 22:15:18 -0300 Subject: [PATCH 168/263] 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 0c6eaa8386..91c93b6a85 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 169/263] 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 4ab09b2f87..2bf2f5b8c8 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 d58c41dbc082c36ab38d914e4d4e5702adf7c785 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 7 Jul 2023 10:02:04 +0530 Subject: [PATCH 170/263] Add tests without Intl.Segmenter --- .../mermaid/src/rendering-util/createText.ts | 5 - .../src/rendering-util/splitText.spec.ts | 152 ++++++++++++------ .../mermaid/src/rendering-util/splitText.ts | 2 +- 3 files changed, 102 insertions(+), 57 deletions(-) diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index 4afe2f7f2d..5f086e9867 100644 --- a/packages/mermaid/src/rendering-util/createText.ts +++ b/packages/mermaid/src/rendering-util/createText.ts @@ -14,11 +14,7 @@ function applyStyle(dom, styleFn) { function addHtmlSpan(element, node, width, classes, addBackground = false) { const fo = element.append('foreignObject'); - // const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); - // const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); const div = fo.append('xhtml:div'); - // const div = body.append('div'); - // const div = fo.append('div'); const label = node.label; const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel'; @@ -130,7 +126,6 @@ function updateTextContentAndStyles(tspan: any, wrappedLine: MarkdownWord[]) { .attr('font-style', word.type === 'emphasis' ? 'italic' : 'normal') .attr('class', 'text-inner-tspan') .attr('font-weight', word.type === 'strong' ? 'bold' : 'normal'); - // const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}']; if (index === 0) { innerTspan.text(word.content); } else { diff --git a/packages/mermaid/src/rendering-util/splitText.spec.ts b/packages/mermaid/src/rendering-util/splitText.spec.ts index 95512edfbb..00db27ea23 100644 --- a/packages/mermaid/src/rendering-util/splitText.spec.ts +++ b/packages/mermaid/src/rendering-util/splitText.spec.ts @@ -1,47 +1,86 @@ import { splitTextToChars, splitLineToFitWidth, splitLineToWords } from './splitText.js'; -import { describe, it, expect } from 'vitest'; +import { describe, it, expect, vi } from 'vitest'; import type { CheckFitFunction, MarkdownLine, MarkdownWordType } from './types.js'; -describe('splitText', () => { +describe('when Intl.Segmenter is available', () => { + describe('splitText', () => { + it.each([ + { str: '', split: [] }, + { str: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»', split: ['πŸ³οΈβ€βš§οΈ', 'πŸ³οΈβ€πŸŒˆ', 'πŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»'] }, + { str: 'ok', split: ['o', 'k'] }, + { str: 'abc', split: ['a', 'b', 'c'] }, + ])('should split $str into graphemes', ({ str, split }: { str: string; split: string[] }) => { + expect(splitTextToChars(str)).toEqual(split); + }); + }); + + describe('split lines', () => { + it('should create valid checkFit function', () => { + const checkFit5 = createCheckFn(5); + expect(checkFit5([{ content: 'hello', type: 'normal' }])).toBe(true); + expect( + checkFit5([ + { content: 'hello', type: 'normal' }, + { content: 'world', type: 'normal' }, + ]) + ).toBe(false); + const checkFit1 = createCheckFn(1); + expect(checkFit1([{ content: 'A', type: 'normal' }])).toBe(true); + expect(checkFit1([{ content: 'πŸ³οΈβ€βš§οΈ', type: 'normal' }])).toBe(true); + expect(checkFit1([{ content: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€βš§οΈ', type: 'normal' }])).toBe(false); + }); + + it.each([ + // empty string + { str: 'hello world', width: 7, split: ['hello', 'world'] }, + // width > full line + { str: 'hello world', width: 20, split: ['hello world'] }, + // width < individual word + { str: 'hello world', width: 3, split: ['hel', 'lo', 'wor', 'ld'] }, + { str: 'hello 12 world', width: 4, split: ['hell', 'o 12', 'worl', 'd'] }, + { str: 'hello 1 2 world', width: 4, split: ['hell', 'o 1', '2', 'worl', 'd'] }, + { str: 'hello 1 2 world', width: 6, split: ['hello', ' 1 2', 'world'] }, + // width = 0, impossible, so split into individual characters + { str: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»', width: 0, split: ['πŸ³οΈβ€βš§οΈ', 'πŸ³οΈβ€πŸŒˆ', 'πŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»'] }, + { str: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»', width: 1, split: ['πŸ³οΈβ€βš§οΈ', 'πŸ³οΈβ€πŸŒˆ', 'πŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»'] }, + { str: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»', width: 2, split: ['πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆ', 'πŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»'] }, + { str: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»', width: 3, split: ['πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»'] }, + { str: 'δΈ­ζ–‡δΈ­', width: 1, split: ['δΈ­', 'ζ–‡', 'δΈ­'] }, + { str: 'δΈ­ζ–‡δΈ­', width: 2, split: ['δΈ­ζ–‡', 'δΈ­'] }, + { str: 'δΈ­ζ–‡δΈ­', width: 3, split: ['δΈ­ζ–‡δΈ­'] }, + { str: 'Flag πŸ³οΈβ€βš§οΈ this πŸ³οΈβ€πŸŒˆ', width: 6, split: ['Flag πŸ³οΈβ€βš§οΈ', 'this πŸ³οΈβ€πŸŒˆ'] }, + ])( + 'should split $str into lines of $width characters', + ({ str, split, width }: { str: string; width: number; split: string[] }) => { + const checkFn = createCheckFn(width); + const line: MarkdownLine = getLineFromString(str); + expect(splitLineToFitWidth(line, checkFn)).toEqual( + split.map((str) => getLineFromString(str)) + ); + } + ); + }); +}); + +describe('when Intl.segmenter is not available', () => { + beforeAll(() => { + vi.stubGlobal('Intl', { Segmenter: undefined }); + }); + afterAll(() => { + vi.unstubAllGlobals(); + }); + it.each([ { str: '', split: [] }, - { str: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»', split: ['πŸ³οΈβ€βš§οΈ', 'πŸ³οΈβ€πŸŒˆ', 'πŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»'] }, + { + str: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»', + split: [...'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»'], + }, { str: 'ok', split: ['o', 'k'] }, { str: 'abc', split: ['a', 'b', 'c'] }, - ])('should split $str into graphemes', ({ str, split }: { str: string; split: string[] }) => { + ])('should split $str into characters', ({ str, split }: { str: string; split: string[] }) => { expect(splitTextToChars(str)).toEqual(split); }); -}); - -describe('split lines', () => { - /** - * Creates a checkFunction for a given width - * @param width - width of characters to fit in a line - * @returns checkFunction - */ - const createCheckFn = (width: number): CheckFitFunction => { - return (text: MarkdownLine) => { - // Join all words into a single string - const joinedContent = text.map((w) => w.content).join(''); - const characters = splitTextToChars(joinedContent); - return characters.length <= width; - }; - }; - - it('should create valid checkFit function', () => { - const checkFit5 = createCheckFn(5); - expect(checkFit5([{ content: 'hello', type: 'normal' }])).toBe(true); - expect( - checkFit5([ - { content: 'hello', type: 'normal' }, - { content: 'world', type: 'normal' }, - ]) - ).toBe(false); - const checkFit1 = createCheckFn(1); - expect(checkFit1([{ content: 'A', type: 'normal' }])).toBe(true); - expect(checkFit1([{ content: 'πŸ³οΈβ€βš§οΈ', type: 'normal' }])).toBe(true); - expect(checkFit1([{ content: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€βš§οΈ', type: 'normal' }])).toBe(false); - }); it.each([ // empty string @@ -52,37 +91,34 @@ describe('split lines', () => { { str: 'hello world', width: 3, split: ['hel', 'lo', 'wor', 'ld'] }, { str: 'hello 12 world', width: 4, split: ['hell', 'o 12', 'worl', 'd'] }, { str: 'hello 1 2 world', width: 4, split: ['hell', 'o 1', '2', 'worl', 'd'] }, - { str: 'hello 1 2 world', width: 6, split: ['hello', ' 1 2', 'world'] }, + { str: 'hello 1 2 world', width: 6, split: ['hello', ' 1 2', 'world'] }, // width = 0, impossible, so split into individual characters - { str: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»', width: 0, split: ['πŸ³οΈβ€βš§οΈ', 'πŸ³οΈβ€πŸŒˆ', 'πŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»'] }, - { str: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»', width: 1, split: ['πŸ³οΈβ€βš§οΈ', 'πŸ³οΈβ€πŸŒˆ', 'πŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»'] }, - { str: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»', width: 2, split: ['πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆ', 'πŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»'] }, - { str: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»', width: 3, split: ['πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»'] }, + { str: 'abc', width: 0, split: ['a', 'b', 'c'] }, + { str: 'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»', width: 1, split: [...'πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆπŸ‘©πŸΎβ€β€οΈβ€πŸ‘¨πŸ»'] }, { str: 'δΈ­ζ–‡δΈ­', width: 1, split: ['δΈ­', 'ζ–‡', 'δΈ­'] }, { str: 'δΈ­ζ–‡δΈ­', width: 2, split: ['δΈ­ζ–‡', 'δΈ­'] }, { str: 'δΈ­ζ–‡δΈ­', width: 3, split: ['δΈ­ζ–‡δΈ­'] }, - { str: 'Flag πŸ³οΈβ€βš§οΈ this πŸ³οΈβ€πŸŒˆ', width: 6, split: ['Flag πŸ³οΈβ€βš§οΈ', 'this πŸ³οΈβ€πŸŒˆ'] }, ])( 'should split $str into lines of $width characters', ({ str, split, width }: { str: string; width: number; split: string[] }) => { const checkFn = createCheckFn(width); const line: MarkdownLine = getLineFromString(str); expect(splitLineToFitWidth(line, checkFn)).toEqual( - split.map((str) => splitLineToWords(str).map((content) => ({ content, type: 'normal' }))) + split.map((str) => getLineFromString(str)) ); } ); +}); - it('should handle strings with newlines', () => { - const checkFn: CheckFitFunction = createCheckFn(6); - const str = `Flag +it('should handle strings with newlines', () => { + const checkFn: CheckFitFunction = createCheckFn(6); + const str = `Flag πŸ³οΈβ€βš§οΈ this πŸ³οΈβ€πŸŒˆ`; - expect(() => - splitLineToFitWidth(getLineFromString(str), checkFn) - ).toThrowErrorMatchingInlineSnapshot( - '"splitLineToFitWidth does not support newlines in the line"' - ); - }); + expect(() => + splitLineToFitWidth(getLineFromString(str), checkFn) + ).toThrowErrorMatchingInlineSnapshot( + '"splitLineToFitWidth does not support newlines in the line"' + ); }); const getLineFromString = (str: string, type: MarkdownWordType = 'normal'): MarkdownLine => { @@ -91,3 +127,17 @@ const getLineFromString = (str: string, type: MarkdownWordType = 'normal'): Mark type, })); }; + +/** + * Creates a checkFunction for a given width + * @param width - width of characters to fit in a line + * @returns checkFunction + */ +const createCheckFn = (width: number): CheckFitFunction => { + return (text: MarkdownLine) => { + // Join all words into a single string + const joinedContent = text.map((w) => w.content).join(''); + const characters = splitTextToChars(joinedContent); + return characters.length <= width; + }; +}; diff --git a/packages/mermaid/src/rendering-util/splitText.ts b/packages/mermaid/src/rendering-util/splitText.ts index 8b31c4ce6d..103e8ca677 100644 --- a/packages/mermaid/src/rendering-util/splitText.ts +++ b/packages/mermaid/src/rendering-util/splitText.ts @@ -22,7 +22,7 @@ export function splitLineToWords(text: string): string[] { // Split by ' ' removes the ' 's from the result. const words = text.split(' '); // Add the ' 's back to the result. - const wordsWithSpaces = words.flatMap((s) => [s, ' ']); + const wordsWithSpaces = words.flatMap((s) => [s, ' ']).filter((s) => s); // Remove last space. wordsWithSpaces.pop(); return wordsWithSpaces; From 28406fc9c4ff0a8426d4f08d0395630b39955aee Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 7 Jul 2023 10:05:05 +0530 Subject: [PATCH 171/263] Add comments --- .../mermaid/src/rendering-util/createText.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index 5f086e9867..2705a37ac9 100644 --- a/packages/mermaid/src/rendering-util/createText.ts +++ b/packages/mermaid/src/rendering-util/createText.ts @@ -76,6 +76,15 @@ function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownL return textLength; } +/** + * Creates a formatted text element by breaking lines and applying styles based on + * the given structuredText. + * + * @param width - The maximum allowed width of the text. + * @param g - The parent group element to append the formatted text. + * @param structuredText - The structured text data to format. + * @param addBackground - Whether to add a background to the text. + */ function createFormattedText( width: number, g: any, @@ -117,6 +126,13 @@ function createFormattedText( } } +/** + * Updates the text content and styles of the given tspan element based on the + * provided wrappedLine data. + * + * @param tspan - The tspan element to update. + * @param wrappedLine - The line data to apply to the tspan element. + */ function updateTextContentAndStyles(tspan: any, wrappedLine: MarkdownWord[]) { tspan.text(''); From 9263f75e5bdaf32091a9d2149895dcd95b428f0f Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 7 Jul 2023 10:27:56 +0530 Subject: [PATCH 172/263] Update .github/pr-labeler.yml Co-authored-by: Alois Klink --- .github/pr-labeler.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index 67e6798396..9952068ecf 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -1,3 +1,3 @@ 'Type: Bug / Error': ['bug/*', fix/*] 'Type: Enhancement': ['feature/*', 'feat/*'] -'Type: Other': 'other/*' +'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*'] From 4648532814ee6895d3946c9d11b5246d053a32fc Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 7 Jul 2023 10:29:58 +0530 Subject: [PATCH 173/263] Update .github/workflows/pr-labeler-config-validator.yml Co-authored-by: Alois Klink --- .github/workflows/pr-labeler-config-validator.yml | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml index d928eb0fa8..2fb9421b8e 100644 --- a/.github/workflows/pr-labeler-config-validator.yml +++ b/.github/workflows/pr-labeler-config-validator.yml @@ -1,7 +1,15 @@ name: Validate PR Labeler Configuration on: push: + paths: + - .github/workflows/pr-labeler-config-validator.yml + - .github/workflows/pr-labeler.yml + - .github/pr-labeler.yml pull_request: + paths: + - .github/workflows/pr-labeler-config-validator.yml + - .github/workflows/pr-labeler.yml + - .github/pr-labeler.yml jobs: pr-labeler: From 052e9db16a0aeac4e3362185035d8285b2129123 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 7 Jul 2023 10:30:59 +0530 Subject: [PATCH 174/263] Remove filter action --- .github/workflows/pr-labeler-config-validator.yml | 7 ------- 1 file changed, 7 deletions(-) diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml index 2fb9421b8e..ff5d8d0a1f 100644 --- a/.github/workflows/pr-labeler-config-validator.yml +++ b/.github/workflows/pr-labeler-config-validator.yml @@ -17,14 +17,7 @@ jobs: steps: - name: Checkout Repository uses: actions/checkout@v3 - - uses: dorny/paths-filter@v2 - id: filter - with: - filters: | - pr-labeller: - - '.github/pr-labeler.yml' - name: Validate Configuration - if: steps.filter.outputs.pr-labeller == 'true' uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3 with: configuration-path: .github/pr-labeler.yml From 0f4af09398c59be6e23df389144be8800d332651 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 7 Jul 2023 10:32:13 +0530 Subject: [PATCH 175/263] Add `Area: Documentation` to labeler --- .github/pr-labeler.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index 9952068ecf..0bbd8db66a 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -1,3 +1,4 @@ 'Type: Bug / Error': ['bug/*', fix/*] 'Type: Enhancement': ['feature/*', 'feat/*'] 'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*'] +'Area: Documentation': ['docs/*'] From 88856a721f17b4d16337ecb88253d5d7297e22ce Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 7 Jul 2023 11:28:04 +0530 Subject: [PATCH 176/263] Support MERMAID_RELEASE_VERSION in docs --- docs/community/development.md | 3 ++ packages/mermaid/package.json | 11 +++--- .../scripts/update-release-version.mts | 34 +++++++++++++++++++ packages/mermaid/src/docs.cli.mts | 3 ++ packages/mermaid/src/docs.mts | 24 ++++++------- .../mermaid/src/docs/community/development.md | 3 ++ 6 files changed, 59 insertions(+), 19 deletions(-) create mode 100644 packages/mermaid/scripts/update-release-version.mts create mode 100644 packages/mermaid/src/docs.cli.mts diff --git a/docs/community/development.md b/docs/community/development.md index 90f728e152..0634759f5e 100644 --- a/docs/community/development.md +++ b/docs/community/development.md @@ -223,6 +223,9 @@ If the users have no way to know that things have changed, then you haven't real Likewise, if users don't know that there is a new feature that you've implemented, it will forever remain unknown and unused. The documentation has to be updated to users know that things have changed and added! +If you are adding a new feature, add `(v+)` in the title or description. It will be replaced automatically with the current version number when the release happens. + +eg: `# Feature Name (v+)` We know it can sometimes be hard to code _and_ write user documentation. diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index afbbed2e68..fd5a459a02 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -25,14 +25,15 @@ "scripts": { "clean": "rimraf dist", "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup", - "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts", - "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts --verify", - "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts", + "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.cli.mts", + "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.cli.mts --verify", + "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts", "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing", - "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"", - "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.mts --watch --vitepress\"", + "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.cli.mts --watch --vitepress\"", + "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.cli.mts --watch --vitepress\"", "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress", "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"", + "docs:release-version": "ts-node-esm scripts/update-release-version.mts", "types:build-config": "ts-node-esm --transpileOnly scripts/create-types-from-json-schema.mts", "types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify", "release": "pnpm build", diff --git a/packages/mermaid/scripts/update-release-version.mts b/packages/mermaid/scripts/update-release-version.mts new file mode 100644 index 0000000000..edd2017b92 --- /dev/null +++ b/packages/mermaid/scripts/update-release-version.mts @@ -0,0 +1,34 @@ +/* eslint-disable no-console */ + +/** + * @file Update the MERMAID_RELEASE_VERSION placeholder in the documentation source files with the current version of mermaid. + * So contributors adding new features will only have to add the placeholder and not worry about updating the version number. + * + */ +import { posix } from 'path'; +import { + getGlobs, + getFilesFromGlobs, + SOURCE_DOCS_DIR, + readSyncedUTF8file, + MERMAID_RELEASE_VERSION, +} from '../src/docs.mjs'; +import { writeFile } from 'fs/promises'; + +const main = async () => { + const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**'); + const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]); + mdFileGlobs.push('!**/community/development.md'); + const mdFiles = await getFilesFromGlobs(mdFileGlobs); + mdFiles.sort(); + for (const mdFile of mdFiles) { + const content = readSyncedUTF8file(mdFile); + const updatedContent = content.replace(//g, MERMAID_RELEASE_VERSION); + if (content !== updatedContent) { + await writeFile(mdFile, updatedContent); + console.log(`Updated MERMAID_RELEASE_VERSION in ${mdFile}`); + } + } +}; + +void main(); diff --git a/packages/mermaid/src/docs.cli.mts b/packages/mermaid/src/docs.cli.mts new file mode 100644 index 0000000000..067eec1c50 --- /dev/null +++ b/packages/mermaid/src/docs.cli.mts @@ -0,0 +1,3 @@ +import { processDocs } from './docs.mjs'; + +void processDocs(); diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts index 356cd3cd11..e11c6104dc 100644 --- a/packages/mermaid/src/docs.mts +++ b/packages/mermaid/src/docs.mts @@ -27,8 +27,6 @@ * get their absolute paths. Ensures that the location of those 2 directories is not dependent on * where this file resides. * - * @todo Write a test file for this. (Will need to be able to deal .mts file. Jest has trouble with - * it.) */ import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync } from 'fs'; import { exec } from 'child_process'; @@ -46,9 +44,9 @@ import mm from 'micromatch'; import flatmap from 'unist-util-flatmap'; import { visit } from 'unist-util-visit'; -const MERMAID_MAJOR_VERSION = ( - JSON.parse(readFileSync('../mermaid/package.json', 'utf8')).version as string -).split('.')[0]; +export const MERMAID_RELEASE_VERSION = JSON.parse(readFileSync('../mermaid/package.json', 'utf8')) + .version as string; +const MERMAID_MAJOR_VERSION = MERMAID_RELEASE_VERSION.split('.')[0]; const CDN_URL = 'https://cdn.jsdelivr.net/npm'; // 'https://unpkg.com'; const MERMAID_KEYWORD = 'mermaid'; @@ -71,7 +69,7 @@ const vitepress: boolean = process.argv.includes('--vitepress'); const noHeader: boolean = process.argv.includes('--noHeader') || vitepress; // These paths are from the root of the mono-repo, not from the mermaid subdirectory -const SOURCE_DOCS_DIR = 'src/docs'; +export const SOURCE_DOCS_DIR = 'src/docs'; const FINAL_DOCS_DIR = vitepress ? 'src/vitepress' : '../../docs'; const LOGMSG_TRANSFORMED = 'transformed'; @@ -158,7 +156,7 @@ const copyTransformedContents = (filename: string, doCopy = false, transformedCo logWasOrShouldBeTransformed(fileInFinalDocDir, doCopy); }; -const readSyncedUTF8file = (filename: string): string => { +export const readSyncedUTF8file = (filename: string): string => { return readFileSync(filename, 'utf8'); }; @@ -336,7 +334,7 @@ import { default as jsonSchemaReadmeBuilder } from '@adobe/jsonschema2md/lib/rea /** * Transforms the given JSON Schema into Markdown documentation */ -async function transormJsonSchema(file: string) { +async function transformJsonSchema(file: string) { const yamlContents = readSyncedUTF8file(file); const jsonSchema = load(yamlContents, { filename: file, @@ -480,7 +478,7 @@ const transformHtml = (filename: string) => { copyTransformedContents(filename, !verifyOnly, formattedHTML); }; -const getGlobs = (globs: string[]): string[] => { +export const getGlobs = (globs: string[]): string[] => { globs.push('!**/dist/**', '!**/redirect.spec.ts', '!**/landing/**', '!**/node_modules/**'); if (!vitepress) { globs.push( @@ -494,12 +492,12 @@ const getGlobs = (globs: string[]): string[] => { return globs; }; -const getFilesFromGlobs = async (globs: string[]): Promise => { +export const getFilesFromGlobs = async (globs: string[]): Promise => { return await globby(globs, { dot: true }); }; /** Main method (entry point) */ -const main = async () => { +export const processDocs = async () => { if (verifyOnly) { console.log('Verifying that all files are in sync with the source files'); } @@ -509,7 +507,7 @@ const main = async () => { if (vitepress) { console.log(`${action} 1 .schema.yaml file`); - await transormJsonSchema('src/schemas/config.schema.yaml'); + await transformJsonSchema('src/schemas/config.schema.yaml'); } else { // skip because this creates so many Markdown files that it lags git console.log('Skipping 1 .schema.yaml file'); @@ -577,5 +575,3 @@ const main = async () => { }); } }; - -void main(); diff --git a/packages/mermaid/src/docs/community/development.md b/packages/mermaid/src/docs/community/development.md index a5aa39539d..93146f0c32 100644 --- a/packages/mermaid/src/docs/community/development.md +++ b/packages/mermaid/src/docs/community/development.md @@ -212,6 +212,9 @@ If the users have no way to know that things have changed, then you haven't real Likewise, if users don't know that there is a new feature that you've implemented, it will forever remain unknown and unused. The documentation has to be updated to users know that things have changed and added! +If you are adding a new feature, add `(v+)` in the title or description. It will be replaced automatically with the current version number when the release happens. + +eg: `# Feature Name (v+)` We know it can sometimes be hard to code _and_ write user documentation. From 79d38cef4b2dde04899ca8e74cdec20f2a03f03b Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 7 Jul 2023 11:32:00 +0530 Subject: [PATCH 177/263] Run `docs:release-version` in CI --- .github/workflows/publish-docs.yml | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml index f63e587502..d66d61a26f 100644 --- a/.github/workflows/publish-docs.yml +++ b/.github/workflows/publish-docs.yml @@ -36,6 +36,19 @@ jobs: - name: Install Packages run: pnpm install --frozen-lockfile + - name: Update release verion + run: | + pnpm --filter mermaid run docs:release-version + pnpm --filter mermaid run docs:build + + - name: Commit changes + uses: EndBug/add-and-commit@v9 + with: + add: '["docs", "packages/mermaid/src/docs"]' + author_name: ${{ github.actor }} + author_email: ${{ github.actor }}@users.noreply.github.com + message: 'chore: Update MERMAID_RELEASE_VERSION in docs' + - name: Setup Pages uses: actions/configure-pages@v3 From 962ff73fc3d6a1813f364359ed3b7aeec176c631 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 7 Jul 2023 15:56:30 +0530 Subject: [PATCH 178/263] Batch by commit --- .github/workflows/e2e.yml | 1 + cypress/helpers/util.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index 6777a1e4f3..3e6966677b 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -45,6 +45,7 @@ jobs: env: CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} VITEST_COVERAGE: true + CYPRESS_COMMIT: ${{ github.sha }} - name: Upload Coverage to Codecov uses: codecov/codecov-action@v3 # Run step only pushes to develop and pull_requests diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts index e2c330f61a..2e9254e6a4 100644 --- a/cypress/helpers/util.ts +++ b/cypress/helpers/util.ts @@ -16,7 +16,7 @@ const utf8ToB64 = (str: string): string => { return window.btoa(decodeURIComponent(encodeURIComponent(str))); }; -const batchId: string = 'mermaid-batch' + new Date().getTime(); +const batchId: string = 'mermaid-batch-' + Cypress.env('CYPRESS_COMMIT') || Date.now().toString(); export const mermaidUrl = ( graphStr: string, From 07df9eeb609f9c4f608942a047641c812f442f81 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 7 Jul 2023 15:57:05 +0530 Subject: [PATCH 179/263] Rename docs.cli.mts --- .vscode/launch.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vscode/launch.json b/.vscode/launch.json index 83b80fa403..01ed070465 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -17,7 +17,7 @@ "name": "Docs generation", "type": "node", "request": "launch", - "args": ["src/docs.mts"], + "args": ["src/docs.cli.mts"], "runtimeArgs": ["--loader", "ts-node/esm"], "cwd": "${workspaceRoot}/packages/mermaid", "skipFiles": ["/**", "**/node_modules/**"], From 0cdf801884aacc4cd6bc91ab3d69d5c1bde6b67f Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 7 Jul 2023 17:21:18 +0530 Subject: [PATCH 180/263] Fix import file extension --- cypress/integration/other/configuration.spec.js | 2 +- cypress/integration/other/external-diagrams.spec.js | 2 +- cypress/integration/other/ghsa.spec.js | 2 +- cypress/integration/other/xss.spec.js | 2 +- cypress/integration/rendering/appli.spec.js | 2 +- cypress/integration/rendering/c4.spec.js | 2 +- cypress/integration/rendering/classDiagram-v2.spec.js | 2 +- cypress/integration/rendering/classDiagram.spec.js | 2 +- cypress/integration/rendering/conf-and-directives.spec.js | 2 +- cypress/integration/rendering/current.spec.js | 2 +- cypress/integration/rendering/debug.spec.js | 2 +- cypress/integration/rendering/erDiagram.spec.js | 2 +- cypress/integration/rendering/flowchart-elk.spec.js | 2 +- cypress/integration/rendering/flowchart-v2.spec.js | 2 +- cypress/integration/rendering/flowchart.spec.js | 2 +- cypress/integration/rendering/gantt.spec.js | 2 +- cypress/integration/rendering/gitGraph.spec.js | 2 +- cypress/integration/rendering/info.spec.ts | 2 +- cypress/integration/rendering/journey.spec.js | 2 +- cypress/integration/rendering/mindmap.spec.ts | 2 +- cypress/integration/rendering/pie.spec.js | 2 +- cypress/integration/rendering/quadrantChart.spec.js | 2 +- cypress/integration/rendering/requirement.spec.js | 2 +- cypress/integration/rendering/sankey.spec.ts | 2 +- cypress/integration/rendering/sequencediagram.spec.js | 2 +- cypress/integration/rendering/stateDiagram-v2.spec.js | 2 +- cypress/integration/rendering/stateDiagram.spec.js | 2 +- cypress/integration/rendering/theme.spec.js | 2 +- cypress/integration/rendering/timeline.spec.ts | 2 +- cypress/integration/rendering/zenuml.spec.js | 2 +- 30 files changed, 30 insertions(+), 30 deletions(-) diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js index 6df7edd843..7cbc5d1059 100644 --- a/cypress/integration/other/configuration.spec.js +++ b/cypress/integration/other/configuration.spec.js @@ -1,4 +1,4 @@ -import { renderGraph } from '../../helpers/util.js'; +import { renderGraph } from '../../helpers/util.ts'; describe('Configuration', () => { describe('arrowMarkerAbsolute', () => { it('should handle default value false of arrowMarkerAbsolute', () => { diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js index 4ade11e81a..704222f2fb 100644 --- a/cypress/integration/other/external-diagrams.spec.js +++ b/cypress/integration/other/external-diagrams.spec.js @@ -1,4 +1,4 @@ -import { urlSnapshotTest } from '../../helpers/util.js'; +import { urlSnapshotTest } from '../../helpers/util.ts'; describe('mermaid', () => { describe('registerDiagram', () => { diff --git a/cypress/integration/other/ghsa.spec.js b/cypress/integration/other/ghsa.spec.js index 912f357280..48eb57a916 100644 --- a/cypress/integration/other/ghsa.spec.js +++ b/cypress/integration/other/ghsa.spec.js @@ -1,4 +1,4 @@ -import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.js'; +import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.ts'; describe('CSS injections', () => { it('should not allow CSS injections outside of the diagram', () => { diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js index 76b2c47f2c..fa4ca4fc80 100644 --- a/cypress/integration/other/xss.spec.js +++ b/cypress/integration/other/xss.spec.js @@ -1,4 +1,4 @@ -import { mermaidUrl } from '../../helpers/util.js'; +import { mermaidUrl } from '../../helpers/util.ts'; describe('XSS', () => { it('should handle xss in tags', () => { const str = diff --git a/cypress/integration/rendering/appli.spec.js b/cypress/integration/rendering/appli.spec.js index 462fe869cd..5def968157 100644 --- a/cypress/integration/rendering/appli.spec.js +++ b/cypress/integration/rendering/appli.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Git Graph diagram', () => { it('1: should render a simple gitgraph with commit on main branch', () => { diff --git a/cypress/integration/rendering/c4.spec.js b/cypress/integration/rendering/c4.spec.js index 0cf128ff63..59af6504b9 100644 --- a/cypress/integration/rendering/c4.spec.js +++ b/cypress/integration/rendering/c4.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('C4 diagram', () => { it('should render a simple C4Context diagram', () => { diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js index 2e7a1cbd72..be6aa643bc 100644 --- a/cypress/integration/rendering/classDiagram-v2.spec.js +++ b/cypress/integration/rendering/classDiagram-v2.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Class diagram V2', () => { it('0: should render a simple class diagram', () => { imgSnapshotTest( diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index 427b4cf0b6..aa0483ca38 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Class diagram', () => { it('1: should render a simple class diagram', () => { diff --git a/cypress/integration/rendering/conf-and-directives.spec.js b/cypress/integration/rendering/conf-and-directives.spec.js index 3fc0f7f02f..bc17f62361 100644 --- a/cypress/integration/rendering/conf-and-directives.spec.js +++ b/cypress/integration/rendering/conf-and-directives.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Configuration and directives - nodes should be light blue', () => { it('No config - use default', () => { diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js index e0b36d53a2..d7bc08105e 100644 --- a/cypress/integration/rendering/current.spec.js +++ b/cypress/integration/rendering/current.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Current diagram', () => { it('should render a state with states in it', () => { diff --git a/cypress/integration/rendering/debug.spec.js b/cypress/integration/rendering/debug.spec.js index afde4af3e3..56ad0f15f8 100644 --- a/cypress/integration/rendering/debug.spec.js +++ b/cypress/integration/rendering/debug.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Flowchart', () => { it('34: testing the label width in percy', () => { diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js index 0c6eaa8386..b14c83e6a3 100644 --- a/cypress/integration/rendering/erDiagram.spec.js +++ b/cypress/integration/rendering/erDiagram.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Entity Relationship Diagram', () => { it('should render a simple ER diagram', () => { diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js index 10e95af5cd..221806b073 100644 --- a/cypress/integration/rendering/flowchart-elk.spec.js +++ b/cypress/integration/rendering/flowchart-elk.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe.skip('Flowchart ELK', () => { it('1-elk: should render a simple flowchart', () => { diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 091482f357..4cf563e028 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Flowchart v2', () => { it('1: should render a simple flowchart', () => { diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index d25043d289..4f6d6478ef 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Graph', () => { it('1: should render a simple flowchart no htmlLabels', () => { diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index cb65f73b0b..6cc7b6391e 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Gantt diagram', () => { beforeEach(() => { diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index 43f91a983e..8cf7104134 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Git Graph diagram', () => { it('1: should render a simple gitgraph with commit on main branch', () => { diff --git a/cypress/integration/rendering/info.spec.ts b/cypress/integration/rendering/info.spec.ts index 3db74c9802..97b384eb5e 100644 --- a/cypress/integration/rendering/info.spec.ts +++ b/cypress/integration/rendering/info.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('info diagram', () => { it('should handle an info definition', () => { diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index 6f9d9bb609..d8bef6d1b9 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/cypress/integration/rendering/journey.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('User journey diagram', () => { it('Simple test', () => { diff --git a/cypress/integration/rendering/mindmap.spec.ts b/cypress/integration/rendering/mindmap.spec.ts index 90d5d9edde..a77459f589 100644 --- a/cypress/integration/rendering/mindmap.spec.ts +++ b/cypress/integration/rendering/mindmap.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; /** * Check whether the SVG Element has a Mindmap root diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js index 8a89a0cde5..01b2484868 100644 --- a/cypress/integration/rendering/pie.spec.js +++ b/cypress/integration/rendering/pie.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Pie Chart', () => { it('should render a simple pie diagram', () => { diff --git a/cypress/integration/rendering/quadrantChart.spec.js b/cypress/integration/rendering/quadrantChart.spec.js index 4bcf58b601..50520eb1a5 100644 --- a/cypress/integration/rendering/quadrantChart.spec.js +++ b/cypress/integration/rendering/quadrantChart.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Quadrant Chart', () => { it('should render if only chart type is provided', () => { diff --git a/cypress/integration/rendering/requirement.spec.js b/cypress/integration/rendering/requirement.spec.js index 0bf9014bf9..f33ae7a0cb 100644 --- a/cypress/integration/rendering/requirement.spec.js +++ b/cypress/integration/rendering/requirement.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Requirement diagram', () => { it('sample', () => { diff --git a/cypress/integration/rendering/sankey.spec.ts b/cypress/integration/rendering/sankey.spec.ts index e334b898be..ad0d75f187 100644 --- a/cypress/integration/rendering/sankey.spec.ts +++ b/cypress/integration/rendering/sankey.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Sankey Diagram', () => { it('should render a simple example', () => { diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index 7d36c1ff1a..7659138241 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -1,6 +1,6 @@ /// -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; context('Sequence diagram', () => { it('should render a sequence diagram with boxes', () => { diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js index 700791621f..9a1a27abe5 100644 --- a/cypress/integration/rendering/stateDiagram-v2.spec.js +++ b/cypress/integration/rendering/stateDiagram-v2.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('State diagram', () => { it('v2 should render a simple info', () => { diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js index 28c24d3985..01e7a2b44e 100644 --- a/cypress/integration/rendering/stateDiagram.spec.js +++ b/cypress/integration/rendering/stateDiagram.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('State diagram', () => { it('should render a simple state diagrams', () => { diff --git a/cypress/integration/rendering/theme.spec.js b/cypress/integration/rendering/theme.spec.js index ef3bd9a4b0..c84ad0c4b7 100644 --- a/cypress/integration/rendering/theme.spec.js +++ b/cypress/integration/rendering/theme.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('themeCSS balancing, it', () => { it('should not allow unbalanced CSS definitions', () => { diff --git a/cypress/integration/rendering/timeline.spec.ts b/cypress/integration/rendering/timeline.spec.ts index 6fae82fb4e..68da01d503 100644 --- a/cypress/integration/rendering/timeline.spec.ts +++ b/cypress/integration/rendering/timeline.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Timeline diagram', () => { it('1: should render a simple timeline with no specific sections', () => { diff --git a/cypress/integration/rendering/zenuml.spec.js b/cypress/integration/rendering/zenuml.spec.js index f317fbe824..53d8ae3469 100644 --- a/cypress/integration/rendering/zenuml.spec.js +++ b/cypress/integration/rendering/zenuml.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Zen UML', () => { it('Basic Zen UML diagram', () => { From cd118ad5cbb402aff7703fa7b78301fd6f586848 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Fri, 7 Jul 2023 19:59:52 -0300 Subject: [PATCH 181/263] 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 91c93b6a85..c125d6f747 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 23f27d151aff859b8b6891ab906a84dd6816ccae Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Fri, 7 Jul 2023 22:44:34 -0300 Subject: [PATCH 182/263] Remove redundancy in unit tests --- .../src/diagrams/class/classDiagram.spec.ts | 109 ++++++------------ 1 file changed, 34 insertions(+), 75 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts index f6a2855c04..7f3622db20 100644 --- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts +++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts @@ -265,84 +265,43 @@ class C13["With CittΓ  foreign language"] parser.parse(str); }); - it('should handle note with "cssClass" in it', function () { - const str = 'classDiagram\n' + 'note "cssClass"\n'; - parser.parse(str); - }); - - it('should handle note with "callback" in it', function () { - const str = 'classDiagram\n' + 'note "callback"\n'; - parser.parse(str); - }); - - it('should handle note with "link" in it', function () { - const str = 'classDiagram\n' + 'note "link"\n'; - parser.parse(str); - }); - - it('should handle note with "click" in it', function () { - const str = 'classDiagram\n' + 'note "click"\n'; - parser.parse(str); - }); - - it('should handle note with "note" in it', function () { - const str = 'classDiagram\n' + 'note "note"\n'; - parser.parse(str); - }); - - it('should handle note with "note for" in it', function () { - const str = 'classDiagram\n' + 'note "note for"\n'; - parser.parse(str); - }); - - it('should handle note with "<<" in it', function () { - const str = 'classDiagram\n' + 'note "<<"\n'; - parser.parse(str); - }); - - it('should handle note with ">>" in it', function () { - const str = 'classDiagram\n' + 'note ">>"\n'; - parser.parse(str); - }); - - it('should handle note with "href " in it', function () { - const str = 'classDiagram\n' + 'note "href "\n'; - parser.parse(str); - }); - - it('should handle note with "call " in it', function () { - const str = 'classDiagram\n' + 'note "call "\n'; - parser.parse(str); - }); - - it('should handle note with "~" in it', function () { - const str = 'classDiagram\n' + 'note "~"\n'; - parser.parse(str); - }); - - it('should handle note with "``" in it', function () { - const str = 'classDiagram\n' + 'note "``"\n'; - parser.parse(str); - }); - - it('should handle note with "_self" in it', function () { - const str = 'classDiagram\n' + 'note "_self"\n'; - parser.parse(str); - }); - - it('should handle note with "_blank" in it', function () { - const str = 'classDiagram\n' + 'note "_blank"\n'; - parser.parse(str); - }); - - it('should handle note with "_parent" in it', function () { - const str = 'classDiagram\n' + 'note "_parent"\n'; + const keywords = [ + 'cssClass', + 'callback', + 'link', + 'click', + 'note', + 'note for', + '<<', + '>>', + 'href ', + 'call ', + '~', + '``', + '_self', + '_blank', + '_parent', + '_top', + ]; + + test.each(keywords)('should handle a note with keyword in it', function (note: string) { + const str = `classDiagram + note "This is a keyword: ${note}. It truly is." + `; parser.parse(str); + expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${note}. It truly is.`); }); - it('should handle note with "_top" in it', function () { - const str = 'classDiagram\n' + 'note "_top"\n'; - parser.parse(str); + test.each(keywords)('should handle a note for with a keyword in it', function (note: string) { + const str = `classDiagram + class Something { + int id + string name + } + note for Something "This is a keyword: ${note}. It truly is." + `; + parser.parse(str); + expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${note}. It truly is.`); }); }); From eca2efa46da3a3276c73c3e80a7d2f5e9e532475 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 8 Jul 2023 19:01:45 +0530 Subject: [PATCH 183/263] Update packages/mermaid/src/rendering-util/splitText.spec.ts Co-authored-by: Alois Klink --- packages/mermaid/src/rendering-util/splitText.spec.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/rendering-util/splitText.spec.ts b/packages/mermaid/src/rendering-util/splitText.spec.ts index 00db27ea23..017fe9c6a8 100644 --- a/packages/mermaid/src/rendering-util/splitText.spec.ts +++ b/packages/mermaid/src/rendering-util/splitText.spec.ts @@ -62,7 +62,11 @@ describe('when Intl.Segmenter is available', () => { }); }); -describe('when Intl.segmenter is not available', () => { +/** + * Intl.Segmenter is not supported in Firefox yet, + * see https://bugzilla.mozilla.org/show_bug.cgi?id=1423593 + */ +describe('when Intl.Segmenter is not available', () => { beforeAll(() => { vi.stubGlobal('Intl', { Segmenter: undefined }); }); From 1e781c0c90e992a8c5b5881879c6a3cdd446ee23 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Sat, 8 Jul 2023 13:23:46 -0300 Subject: [PATCH 184/263] Refactor unit tests --- .../src/diagrams/class/classDiagram.spec.ts | 64 ++++++++++++++++--- 1 file changed, 56 insertions(+), 8 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts index 7f3622db20..4346478063 100644 --- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts +++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts @@ -266,6 +266,14 @@ class C13["With CittΓ  foreign language"] }); const keywords = [ + 'direction', + 'classDiagram', + 'classDiagram-v2', + 'namespace', + '}', + '()', + 'class', + '\n', 'cssClass', 'callback', 'link', @@ -274,34 +282,74 @@ class C13["With CittΓ  foreign language"] 'note for', '<<', '>>', - 'href ', 'call ', '~', - '``', + '~Generic~', '_self', '_blank', '_parent', '_top', + '<|', + '|>', + '>', + '<', + '*', + 'o', + '\\', + '--', + '..', + '-->', + '--|>', + ': label', + ':::', + '.', + '+', + 'alphaNum', + '[', + ']', + '!', + '0123', ]; - test.each(keywords)('should handle a note with keyword in it', function (note: string) { + it.each(keywords)('should handle a note with %s in it', function (keyword: string) { const str = `classDiagram - note "This is a keyword: ${note}. It truly is." + note "This is a keyword: ${keyword}. It truly is." `; + const str2 = `classDiagram + note "${keyword}"`; parser.parse(str); - expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${note}. It truly is.`); + parser.parse(str2); + expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${keyword}. It truly is.`); + expect(classDb.getNotes()[1].text).toEqual(`${keyword}`); }); - test.each(keywords)('should handle a note for with a keyword in it', function (note: string) { + it.each(keywords)('should handle a "note for" with a %s in it', function (keyword: string) { const str = `classDiagram class Something { int id string name } - note for Something "This is a keyword: ${note}. It truly is." + note for Something "This is a keyword: ${keyword}. It truly is." `; + + const str2 = `classDiagram + class Something { + int id + string name + } + note for Something "${keyword}" + `; + parser.parse(str); - expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${note}. It truly is.`); + parser.parse(str2); + expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${keyword}. It truly is.`); + expect(classDb.getNotes()[1].text).toEqual(`${keyword}`); + }); + + it.each(keywords)('should elicit error for %s after NOTE token', function (keyword: string) { + const str = `classDiagram + note ${keyword}`; + expect(() => parser.parse(str)).toThrowError(/expecting | unrecognized/i); }); }); From d05d24908073b73626f45d812a8e457f90d5cfd0 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Sat, 8 Jul 2023 13:28:45 -0300 Subject: [PATCH 185/263] Undo state changes --- .../diagrams/class/parser/classDiagram.jison | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison index d4ca667cfc..93bae2d51a 100644 --- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison +++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison @@ -72,14 +72,14 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili [\n] /* nothing */ [^{}\n]* { return "MEMBER";} -"cssClass" return 'CSSCLASS'; -"callback" return 'CALLBACK'; -"link" return 'LINK'; -"click" return 'CLICK'; -"note for" return 'NOTE_FOR'; -"note" return 'NOTE'; -"<<" return 'ANNOTATION_START'; -">>" return 'ANNOTATION_END'; +<*>"cssClass" return 'CSSCLASS'; +<*>"callback" return 'CALLBACK'; +<*>"link" return 'LINK'; +<*>"click" return 'CLICK'; +<*>"note for" return 'NOTE_FOR'; +<*>"note" return 'NOTE'; +<*>"<<" return 'ANNOTATION_START'; +<*>">>" return 'ANNOTATION_END'; /* ---interactivity command--- @@ -87,7 +87,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili line was introduced with 'click'. 'href ""' attaches the specified link to the node that was specified by 'click'. */ -"href"[\s]+["] this.begin("href"); +<*>"href"[\s]+["] this.begin("href"); ["] this.popState(); [^"]* return 'HREF'; @@ -99,7 +99,7 @@ the line was introduced with 'click'. arguments to the node that was specified by 'click'. Function arguments are optional: 'call ()' simply executes 'callback_name' without any arguments. */ -"call"[\s]+ this.begin("callback_name"); +<*>"call"[\s]+ this.begin("callback_name"); \([\s]*\) this.popState(); \( this.popState(); this.begin("callback_args"); [^(]* return 'CALLBACK_NAME'; @@ -116,20 +116,20 @@ Function arguments are optional: 'call ()' simply executes 'callb [`] this.popState(); [^`]+ return "BQUOTE_STR"; -[`] this.begin("bqstring"); - -"_self" return 'LINK_TARGET'; -"_blank" return 'LINK_TARGET'; -"_parent" return 'LINK_TARGET'; -"_top" return 'LINK_TARGET'; - -\s*\<\| return 'EXTENSION'; -\s*\|\> return 'EXTENSION'; -\s*\> return 'DEPENDENCY'; -\s*\< return 'DEPENDENCY'; -\s*\* return 'COMPOSITION'; -\s*o return 'AGGREGATION'; -\s*\(\) return 'LOLLIPOP'; +<*>[`] this.begin("bqstring"); + +<*>"_self" return 'LINK_TARGET'; +<*>"_blank" return 'LINK_TARGET'; +<*>"_parent" return 'LINK_TARGET'; +<*>"_top" return 'LINK_TARGET'; + +<*>\s*\<\| return 'EXTENSION'; +<*>\s*\|\> return 'EXTENSION'; +<*>\s*\> return 'DEPENDENCY'; +<*>\s*\< return 'DEPENDENCY'; +<*>\s*\* return 'COMPOSITION'; +<*>\s*o return 'AGGREGATION'; +<*>\s*\(\) return 'LOLLIPOP'; <*>\-\- return 'LINE'; <*>\.\. return 'DOTTED_LINE'; <*>":"{1}[^:\n;]+ return 'LABEL'; From 58b2b0993a9e0c93b25bc6203ebedb547f49a62c Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Sat, 8 Jul 2023 13:29:48 -0300 Subject: [PATCH 186/263] Give STR token higher precedence --- .../mermaid/src/diagrams/class/parser/classDiagram.jison | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison index 93bae2d51a..263e890e7e 100644 --- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison +++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison @@ -50,6 +50,10 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili "classDiagram" return 'CLASS_DIAGRAM'; "[*]" return 'EDGE_STATE'; +["] this.popState(); +[^"]* return "STR"; +<*>["] this.begin("string"); + "namespace" { this.begin('namespace'); return 'NAMESPACE'; } \s*(\r?\n)+ { this.popState(); return 'NEWLINE'; } \s+ /* skip whitespace */ @@ -110,10 +114,6 @@ Function arguments are optional: 'call ()' simply executes 'callb [^~]* return "GENERICTYPE"; "~" this.begin("generic"); -["] this.popState(); -[^"]* return "STR"; -<*>["] this.begin("string"); - [`] this.popState(); [^`]+ return "BQUOTE_STR"; <*>[`] this.begin("bqstring"); From 6a40f4b9559381e1b7621cb071a02ca77c182c6f Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Sat, 8 Jul 2023 13:34:51 -0300 Subject: [PATCH 187/263] Decouple HREF token from STR and correct grammar --- .../src/diagrams/class/parser/classDiagram.jison | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison index 263e890e7e..170e2cd4fe 100644 --- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison +++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison @@ -91,10 +91,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili line was introduced with 'click'. 'href ""' attaches the specified link to the node that was specified by 'click'. */ -<*>"href"[\s]+["] this.begin("href"); -["] this.popState(); -[^"]* return 'HREF'; - +<*>"href" return 'HREF'; /* ---interactivity command--- 'call' adds a callback to the specified node. 'call' can only be specified when @@ -391,10 +388,10 @@ clickStatement | CLICK className CALLBACK_NAME STR {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4);} | CLICK className CALLBACK_NAME CALLBACK_ARGS {$$ = $1;yy.setClickEvent($2, $3, $4);} | CLICK className CALLBACK_NAME CALLBACK_ARGS STR {$$ = $1;yy.setClickEvent($2, $3, $4);yy.setTooltip($2, $5);} - | CLICK className HREF {$$ = $1;yy.setLink($2, $3);} - | CLICK className HREF LINK_TARGET {$$ = $1;yy.setLink($2, $3, $4);} - | CLICK className HREF STR {$$ = $1;yy.setLink($2, $3);yy.setTooltip($2, $4);} - | CLICK className HREF STR LINK_TARGET {$$ = $1;yy.setLink($2, $3, $5);yy.setTooltip($2, $4);} + | CLICK className HREF STR {$$ = $1;yy.setLink($2, $4);} + | CLICK className HREF STR LINK_TARGET {$$ = $1;yy.setLink($2, $4, $5);} + | CLICK className HREF STR STR {$$ = $1;yy.setLink($2, $4);yy.setTooltip($2, $5);} + | CLICK className HREF STR STR LINK_TARGET {$$ = $1;yy.setLink($2, $4, $6);yy.setTooltip($2, $5);} ; cssClassStatement From fbb6eb849eb11700b7a3356027c2825dd507fd2c Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Sat, 8 Jul 2023 14:07:46 -0300 Subject: [PATCH 188/263] Give call higher precedence than STR --- .../diagrams/class/parser/classDiagram.jison | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison index 170e2cd4fe..28725c7ac1 100644 --- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison +++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison @@ -50,6 +50,21 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili "classDiagram" return 'CLASS_DIAGRAM'; "[*]" return 'EDGE_STATE'; +/* +---interactivity command--- +'call' adds a callback to the specified node. 'call' can only be specified when +the line was introduced with 'click'. +'call ()' attaches the function 'callback_name' with the specified +arguments to the node that was specified by 'click'. +Function arguments are optional: 'call ()' simply executes 'callback_name' without any arguments. +*/ +"call"[\s]+ this.begin("callback_name"); +\([\s]*\) this.popState(); +\( this.popState(); this.begin("callback_args"); +[^(]* return 'CALLBACK_NAME'; +\) this.popState(); +[^)]* return 'CALLBACK_ARGS'; + ["] this.popState(); [^"]* return "STR"; <*>["] this.begin("string"); @@ -92,24 +107,10 @@ line was introduced with 'click'. 'href ""' attaches the specified link to the node that was specified by 'click'. */ <*>"href" return 'HREF'; -/* ----interactivity command--- -'call' adds a callback to the specified node. 'call' can only be specified when -the line was introduced with 'click'. -'call ()' attaches the function 'callback_name' with the specified -arguments to the node that was specified by 'click'. -Function arguments are optional: 'call ()' simply executes 'callback_name' without any arguments. -*/ -<*>"call"[\s]+ this.begin("callback_name"); -\([\s]*\) this.popState(); -\( this.popState(); this.begin("callback_args"); -[^(]* return 'CALLBACK_NAME'; -\) this.popState(); -[^)]* return 'CALLBACK_ARGS'; [~] this.popState(); [^~]* return "GENERICTYPE"; -"~" this.begin("generic"); +<*>"~" this.begin("generic"); [`] this.popState(); [^`]+ return "BQUOTE_STR"; From 4bec3188dee79b50e4bbf5821c93765c4705fac0 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Sat, 8 Jul 2023 14:12:45 -0300 Subject: [PATCH 189/263] Reformat code --- .../diagrams/class/parser/classDiagram.jison | 84 +++++++++---------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison index 28725c7ac1..c563b5e68f 100644 --- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison +++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison @@ -24,24 +24,24 @@ %x namespace %x namespace-body %% -\%\%\{ { this.begin('open_directive'); return 'open_directive'; } -.*direction\s+TB[^\n]* return 'direction_tb'; -.*direction\s+BT[^\n]* return 'direction_bt'; -.*direction\s+RL[^\n]* return 'direction_rl'; -.*direction\s+LR[^\n]* return 'direction_lr'; -((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } -":" { this.popState(); this.begin('arg_directive'); return ':'; } -\}\%\% { this.popState(); this.popState(); return 'close_directive'; } -((?:(?!\}\%\%).|\n)*) return 'arg_directive'; -\%\%(?!\{)*[^\n]*(\r?\n?)+ /* skip comments */ -\%\%[^\n]*(\r?\n)* /* skip comments */ -accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } -(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } -accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } -(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } -accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} -[\}] { this.popState(); } -[^\}]* return "acc_descr_multiline_value"; +\%\%\{ { this.begin('open_directive'); return 'open_directive'; } +.*direction\s+TB[^\n]* return 'direction_tb'; +.*direction\s+BT[^\n]* return 'direction_bt'; +.*direction\s+RL[^\n]* return 'direction_rl'; +.*direction\s+LR[^\n]* return 'direction_lr'; +((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } +":" { this.popState(); this.begin('arg_directive'); return ':'; } +\}\%\% { this.popState(); this.popState(); return 'close_directive'; } +((?:(?!\}\%\%).|\n)*) return 'arg_directive'; +\%\%(?!\{)*[^\n]*(\r?\n?)+ /* skip comments */ +\%\%[^\n]*(\r?\n)* /* skip comments */ +accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } +(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } +accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } +(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } +accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} +[\}] { this.popState(); } +[^\}]* return "acc_descr_multiline_value"; \s*(\r?\n)+ return 'NEWLINE'; \s+ /* skip whitespace */ @@ -91,14 +91,14 @@ Function arguments are optional: 'call ()' simply executes 'callb [\n] /* nothing */ [^{}\n]* { return "MEMBER";} -<*>"cssClass" return 'CSSCLASS'; -<*>"callback" return 'CALLBACK'; -<*>"link" return 'LINK'; -<*>"click" return 'CLICK'; -<*>"note for" return 'NOTE_FOR'; -<*>"note" return 'NOTE'; -<*>"<<" return 'ANNOTATION_START'; -<*>">>" return 'ANNOTATION_END'; +<*>"cssClass" return 'CSSCLASS'; +<*>"callback" return 'CALLBACK'; +<*>"link" return 'LINK'; +<*>"click" return 'CLICK'; +<*>"note for" return 'NOTE_FOR'; +<*>"note" return 'NOTE'; +<*>"<<" return 'ANNOTATION_START'; +<*>">>" return 'ANNOTATION_END'; /* ---interactivity command--- @@ -106,28 +106,28 @@ Function arguments are optional: 'call ()' simply executes 'callb line was introduced with 'click'. 'href ""' attaches the specified link to the node that was specified by 'click'. */ -<*>"href" return 'HREF'; +<*>"href" return 'HREF'; [~] this.popState(); [^~]* return "GENERICTYPE"; -<*>"~" this.begin("generic"); +<*>"~" this.begin("generic"); [`] this.popState(); [^`]+ return "BQUOTE_STR"; -<*>[`] this.begin("bqstring"); - -<*>"_self" return 'LINK_TARGET'; -<*>"_blank" return 'LINK_TARGET'; -<*>"_parent" return 'LINK_TARGET'; -<*>"_top" return 'LINK_TARGET'; - -<*>\s*\<\| return 'EXTENSION'; -<*>\s*\|\> return 'EXTENSION'; -<*>\s*\> return 'DEPENDENCY'; -<*>\s*\< return 'DEPENDENCY'; -<*>\s*\* return 'COMPOSITION'; -<*>\s*o return 'AGGREGATION'; -<*>\s*\(\) return 'LOLLIPOP'; +<*>[`] this.begin("bqstring"); + +<*>"_self" return 'LINK_TARGET'; +<*>"_blank" return 'LINK_TARGET'; +<*>"_parent" return 'LINK_TARGET'; +<*>"_top" return 'LINK_TARGET'; + +<*>\s*\<\| return 'EXTENSION'; +<*>\s*\|\> return 'EXTENSION'; +<*>\s*\> return 'DEPENDENCY'; +<*>\s*\< return 'DEPENDENCY'; +<*>\s*\* return 'COMPOSITION'; +<*>\s*o return 'AGGREGATION'; +<*>\s*\(\) return 'LOLLIPOP'; <*>\-\- return 'LINE'; <*>\.\. return 'DOTTED_LINE'; <*>":"{1}[^:\n;]+ return 'LABEL'; From f82407a2f02d87f3ae350c6578636498e6d5d470 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Sat, 8 Jul 2023 14:33:57 -0300 Subject: [PATCH 190/263] Make unit test regex unit test more accurate --- packages/mermaid/src/diagrams/class/classDiagram.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts index 4346478063..5666ac3586 100644 --- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts +++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts @@ -349,7 +349,7 @@ class C13["With CittΓ  foreign language"] it.each(keywords)('should elicit error for %s after NOTE token', function (keyword: string) { const str = `classDiagram note ${keyword}`; - expect(() => parser.parse(str)).toThrowError(/expecting | unrecognized/i); + expect(() => parser.parse(str)).toThrowError(/(Expecting\s'STR'|Unrecognized\stext)/); }); }); From 00bb2a1f68111bd7241c2a4648541d8c3b53f675 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Sat, 8 Jul 2023 14:45:06 -0300 Subject: [PATCH 191/263] Revert back to single quotes for generic grammar --- packages/mermaid/src/diagrams/class/parser/classDiagram.jison | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison index c563b5e68f..8fdfced75b 100644 --- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison +++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison @@ -283,8 +283,8 @@ className : alphaNumToken { $$=$1; } | classLiteralName { $$=$1; } | alphaNumToken className { $$=$1+$2; } - | alphaNumToken GENERICTYPE { $$=$1+"~"+$2+"~"; } - | classLiteralName GENERICTYPE { $$=$1+"~"+$2+"~"; } + | alphaNumToken GENERICTYPE { $$=$1+'~'+$2+'~'; } + | classLiteralName GENERICTYPE { $$=$1+'~'+$2+'~'; } ; statement From c59fee8de274229b848edec36e77d26b153d8d54 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Sat, 8 Jul 2023 17:20:56 -0300 Subject: [PATCH 192/263] Split tests to have one parse statement in each test --- .../src/diagrams/class/classDiagram.spec.ts | 35 +++++++++++++------ 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts index 5666ac3586..c1c328bc7e 100644 --- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts +++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts @@ -270,7 +270,7 @@ class C13["With CittΓ  foreign language"] 'classDiagram', 'classDiagram-v2', 'namespace', - '}', + '{}', '()', 'class', '\n', @@ -315,14 +315,21 @@ class C13["With CittΓ  foreign language"] const str = `classDiagram note "This is a keyword: ${keyword}. It truly is." `; - const str2 = `classDiagram - note "${keyword}"`; parser.parse(str); - parser.parse(str2); expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${keyword}. It truly is.`); - expect(classDb.getNotes()[1].text).toEqual(`${keyword}`); }); + it.each(keywords)( + 'should handle note with %s at beginning of string', + function (keyword: string) { + const str = `classDiagram + note "${keyword}"`; + + parser.parse(str); + expect(classDb.getNotes()[0].text).toEqual(`${keyword}`); + } + ); + it.each(keywords)('should handle a "note for" with a %s in it', function (keyword: string) { const str = `classDiagram class Something { @@ -332,7 +339,14 @@ class C13["With CittΓ  foreign language"] note for Something "This is a keyword: ${keyword}. It truly is." `; - const str2 = `classDiagram + parser.parse(str); + expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${keyword}. It truly is.`); + }); + + it.each(keywords)( + 'should handle a "note for" with a %s at beginning of string', + function (keyword: string) { + const str = `classDiagram class Something { int id string name @@ -340,11 +354,10 @@ class C13["With CittΓ  foreign language"] note for Something "${keyword}" `; - parser.parse(str); - parser.parse(str2); - expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${keyword}. It truly is.`); - expect(classDb.getNotes()[1].text).toEqual(`${keyword}`); - }); + parser.parse(str); + expect(classDb.getNotes()[0].text).toEqual(`${keyword}`); + } + ); it.each(keywords)('should elicit error for %s after NOTE token', function (keyword: string) { const str = `classDiagram From e127b146e91db13121c2a8c94ca9575f6cbc2538 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Sat, 8 Jul 2023 17:46:28 -0300 Subject: [PATCH 193/263] Add more test cases --- .../mermaid/src/diagrams/class/classDiagram.spec.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts index c1c328bc7e..7816345c80 100644 --- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts +++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts @@ -271,7 +271,14 @@ class C13["With CittΓ  foreign language"] 'classDiagram-v2', 'namespace', '{}', + '{', + '}', '()', + '(', + ')', + '[]', + '[', + ']', 'class', '\n', 'cssClass', @@ -305,10 +312,10 @@ class C13["With CittΓ  foreign language"] '.', '+', 'alphaNum', - '[', - ']', '!', '0123', + 'function()', + 'function(arg1, arg2)', ]; it.each(keywords)('should handle a note with %s in it', function (keyword: string) { From 47f46c8a464e35a38c33bebca9b06b77723c51b5 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 10 Jul 2023 01:17:36 +0000 Subject: [PATCH 194/263] chore(deps): update all minor dependencies --- docker-compose.yml | 2 +- package.json | 8 +- pnpm-lock.yaml | 240 +++++++++++++++++++-------------------------- 3 files changed, 108 insertions(+), 142 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index c881d0473b..f7195b3620 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -17,7 +17,7 @@ services: - 9000:9000 - 3333:3333 cypress: - image: cypress/included:12.16.0 + image: cypress/included:12.17.0 stdin_open: true tty: true working_dir: /mermaid diff --git a/package.json b/package.json index e21e02d149..1b4cb62330 100644 --- a/package.json +++ b/package.json @@ -78,9 +78,9 @@ "@types/rollup-plugin-visualizer": "^4.2.1", "@typescript-eslint/eslint-plugin": "^5.59.0", "@typescript-eslint/parser": "^5.59.0", - "@vitest/coverage-v8": "^0.32.2", - "@vitest/spy": "^0.32.2", - "@vitest/ui": "^0.32.2", + "@vitest/coverage-v8": "^0.33.0", + "@vitest/spy": "^0.33.0", + "@vitest/ui": "^0.33.0", "ajv": "^8.12.0", "concurrently": "^8.0.1", "cors": "^2.8.5", @@ -120,7 +120,7 @@ "typescript": "^5.1.3", "vite": "^4.3.9", "vite-plugin-istanbul": "^4.1.0", - "vitest": "^0.32.2" + "vitest": "^0.33.0" }, "volta": { "node": "18.16.1" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 303985a318..e09d023f7d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -63,14 +63,14 @@ importers: specifier: ^5.59.0 version: 5.59.0(eslint@8.39.0)(typescript@5.1.3) '@vitest/coverage-v8': - specifier: ^0.32.2 - version: 0.32.2(vitest@0.32.2) + specifier: ^0.33.0 + version: 0.33.0(vitest@0.33.0) '@vitest/spy': - specifier: ^0.32.2 - version: 0.32.2 + specifier: ^0.33.0 + version: 0.33.0 '@vitest/ui': - specifier: ^0.32.2 - version: 0.32.2(vitest@0.32.2) + specifier: ^0.33.0 + version: 0.33.0(vitest@0.33.0) ajv: specifier: ^8.12.0 version: 8.12.0 @@ -189,8 +189,8 @@ importers: specifier: ^4.1.0 version: 4.1.0(vite@4.3.9) vitest: - specifier: ^0.32.2 - version: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0) + specifier: ^0.33.0 + version: 0.33.0(@vitest/ui@0.33.0)(jsdom@22.0.0) packages/mermaid: dependencies: @@ -3860,6 +3860,10 @@ packages: /@jridgewell/sourcemap-codec@1.4.14: resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==} + /@jridgewell/sourcemap-codec@1.4.15: + resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} + dev: true + /@jridgewell/trace-mapping@0.3.17: resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==} dependencies: @@ -5187,8 +5191,8 @@ packages: vue: 3.3.4 dev: true - /@vitest/coverage-v8@0.32.2(vitest@0.32.2): - resolution: {integrity: sha512-/+V3nB3fyeuuSeKxCfi6XmWjDIxpky7AWSkGVfaMjAk7di8igBwRsThLjultwIZdTDH1RAxpjmCXEfSqsMFZOA==} + /@vitest/coverage-v8@0.33.0(vitest@0.33.0): + resolution: {integrity: sha512-Rj5IzoLF7FLj6yR7TmqsfRDSeaFki6NAJ/cQexqhbWkHEV2htlVGrmuOde3xzvFsCbLCagf4omhcIaVmfU8Okg==} peerDependencies: vitest: '>=0.32.0 <1' dependencies: @@ -5198,68 +5202,67 @@ packages: istanbul-lib-report: 3.0.0 istanbul-lib-source-maps: 4.0.1 istanbul-reports: 3.1.5 - magic-string: 0.30.0 + magic-string: 0.30.1 picocolors: 1.0.0 - std-env: 3.3.2 + std-env: 3.3.3 test-exclude: 6.0.0 v8-to-istanbul: 9.1.0 - vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0) + vitest: 0.33.0(@vitest/ui@0.33.0)(jsdom@22.0.0) transitivePeerDependencies: - supports-color dev: true - /@vitest/expect@0.32.2: - resolution: {integrity: sha512-6q5yzweLnyEv5Zz1fqK5u5E83LU+gOMVBDuxBl2d2Jfx1BAp5M+rZgc5mlyqdnxquyoiOXpXmFNkcGcfFnFH3Q==} + /@vitest/expect@0.33.0: + resolution: {integrity: sha512-sVNf+Gla3mhTCxNJx+wJLDPp/WcstOe0Ksqz4Vec51MmgMth/ia0MGFEkIZmVGeTL5HtjYR4Wl/ZxBxBXZJTzQ==} dependencies: - '@vitest/spy': 0.32.2 - '@vitest/utils': 0.32.2 + '@vitest/spy': 0.33.0 + '@vitest/utils': 0.33.0 chai: 4.3.7 dev: true - /@vitest/runner@0.32.2: - resolution: {integrity: sha512-06vEL0C1pomOEktGoLjzZw+1Fb+7RBRhmw/06WkDrd1akkT9i12su0ku+R/0QM69dfkIL/rAIDTG+CSuQVDcKw==} + /@vitest/runner@0.33.0: + resolution: {integrity: sha512-UPfACnmCB6HKRHTlcgCoBh6ppl6fDn+J/xR8dTufWiKt/74Y9bHci5CKB8tESSV82zKYtkBJo9whU3mNvfaisg==} dependencies: - '@vitest/utils': 0.32.2 - concordance: 5.0.4 + '@vitest/utils': 0.33.0 p-limit: 4.0.0 pathe: 1.1.1 dev: true - /@vitest/snapshot@0.32.2: - resolution: {integrity: sha512-JwhpeH/PPc7GJX38vEfCy9LtRzf9F4er7i4OsAJyV7sjPwjj+AIR8cUgpMTWK4S3TiamzopcTyLsZDMuldoi5A==} + /@vitest/snapshot@0.33.0: + resolution: {integrity: sha512-tJjrl//qAHbyHajpFvr8Wsk8DIOODEebTu7pgBrP07iOepR5jYkLFiqLq2Ltxv+r0uptUb4izv1J8XBOwKkVYA==} dependencies: - magic-string: 0.30.0 + magic-string: 0.30.1 pathe: 1.1.1 - pretty-format: 27.5.1 + pretty-format: 29.5.0 dev: true - /@vitest/spy@0.32.2: - resolution: {integrity: sha512-Q/ZNILJ4ca/VzQbRM8ur3Si5Sardsh1HofatG9wsJY1RfEaw0XKP8IVax2lI1qnrk9YPuG9LA2LkZ0EI/3d4ug==} + /@vitest/spy@0.33.0: + resolution: {integrity: sha512-Kv+yZ4hnH1WdiAkPUQTpRxW8kGtH8VRTnus7ZTGovFYM1ZezJpvGtb9nPIjPnptHbsyIAxYZsEpVPYgtpjGnrg==} dependencies: - tinyspy: 2.1.0 + tinyspy: 2.1.1 dev: true - /@vitest/ui@0.32.2(vitest@0.32.2): - resolution: {integrity: sha512-N5JKftnB8qzKFtpQC5OcUGxYTLo6wiB/95Lgyk6MF52t74Y7BJOWbf6EFYhXqt9J0MSbhOR2kapq+WKKUGDW0g==} + /@vitest/ui@0.33.0(vitest@0.33.0): + resolution: {integrity: sha512-7gbAjLqt30R4bodkJAutdpy4ncv+u5IKTHYTow1c2q+FOxZUC9cKOSqMUxjwaaTwLN+EnDnmXYPtg3CoahaUzQ==} peerDependencies: vitest: '>=0.30.1 <1' dependencies: - '@vitest/utils': 0.32.2 - fast-glob: 3.2.12 - fflate: 0.7.4 + '@vitest/utils': 0.33.0 + fast-glob: 3.3.0 + fflate: 0.8.0 flatted: 3.2.7 - pathe: 1.1.0 + pathe: 1.1.1 picocolors: 1.0.0 sirv: 2.0.3 - vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0) + vitest: 0.33.0(@vitest/ui@0.33.0)(jsdom@22.0.0) dev: true - /@vitest/utils@0.32.2: - resolution: {integrity: sha512-lnJ0T5i03j0IJaeW73hxe2AuVnZ/y1BhhCOuIcl9LIzXnbpXJT9Lrt6brwKHXLOiA7MZ6N5hSJjt0xE1dGNCzQ==} + /@vitest/utils@0.33.0: + resolution: {integrity: sha512-pF1w22ic965sv+EN6uoePkAOTkAPWM03Ri/jXNyMIKBb/XHLDPfhLvf/Fa9g0YECevAIz56oVYXhodLvLQ/awA==} dependencies: diff-sequences: 29.4.3 loupe: 2.3.6 - pretty-format: 27.5.1 + pretty-format: 29.5.0 dev: true /@vue/compat@3.3.4(vue@3.3.4): @@ -5848,6 +5851,12 @@ packages: hasBin: true dev: true + /acorn@8.10.0: + resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==} + engines: {node: '>=0.4.0'} + hasBin: true + dev: true + /acorn@8.8.0: resolution: {integrity: sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==} engines: {node: '>=0.4.0'} @@ -6362,10 +6371,6 @@ packages: resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==} dev: true - /blueimp-md5@2.19.0: - resolution: {integrity: sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==} - dev: true - /bmpimagejs@1.0.4: resolution: {integrity: sha512-21oKU7kbRt2OgOOj7rdiNr/yznDNUQ585plxR00rsmECcZr+6O1oCwB8OIoSHk/bDhbG8mFXIdeQuCPHgZ6QBw==} dev: true @@ -7001,20 +7006,6 @@ packages: /concat-map@0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} - /concordance@5.0.4: - resolution: {integrity: sha512-OAcsnTEYu1ARJqWVGwf4zh4JDfHZEaSNlNccFmt8YjB2l/n19/PF2viLINHc57vO4FKIAFl2FWASIGZZWZ2Kxw==} - engines: {node: '>=10.18.0 <11 || >=12.14.0 <13 || >=14'} - dependencies: - date-time: 3.1.0 - esutils: 2.0.3 - fast-diff: 1.2.0 - js-string-escape: 1.0.1 - lodash: 4.17.21 - md5-hex: 3.0.1 - semver: 7.5.3 - well-known-symbols: 2.0.0 - dev: true - /concurrently@8.0.1: resolution: {integrity: sha512-Sh8bGQMEL0TAmAm2meAXMjcASHZa7V0xXQVDBLknCPa9TPtkY9yYs+0cnGGgfdkW0SV1Mlg+hVGfXcoI8d3MJA==} engines: {node: ^14.13.0 || >=16.0.0} @@ -7828,13 +7819,6 @@ packages: engines: {node: '>=0.11'} dev: true - /date-time@3.1.0: - resolution: {integrity: sha512-uqCUKXE5q1PNBXjPqvwhwJf9SwMoAHBgWJ6DcrnS5o+W2JOiIILl0JEdVD8SGujrNS02GGxgwAg2PN2zONgtjg==} - engines: {node: '>=6'} - dependencies: - time-zone: 1.0.0 - dev: true - /dayjs@1.10.7: resolution: {integrity: sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==} dev: true @@ -8952,10 +8936,6 @@ packages: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} dev: true - /fast-diff@1.2.0: - resolution: {integrity: sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==} - dev: true - /fast-equals@4.0.3: resolution: {integrity: sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==} dev: true @@ -8970,6 +8950,17 @@ packages: merge2: 1.4.1 micromatch: 4.0.5 + /fast-glob@3.3.0: + resolution: {integrity: sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==} + engines: {node: '>=8.6.0'} + dependencies: + '@nodelib/fs.stat': 2.0.5 + '@nodelib/fs.walk': 1.2.8 + glob-parent: 5.1.2 + merge2: 1.4.1 + micromatch: 4.0.5 + dev: true + /fast-json-stable-stringify@2.1.0: resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==} dev: true @@ -9078,8 +9069,8 @@ packages: web-streams-polyfill: 3.2.1 dev: true - /fflate@0.7.4: - resolution: {integrity: sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==} + /fflate@0.8.0: + resolution: {integrity: sha512-FAdS4qMuFjsJj6XHbBaZeXOgaypXp8iw/Tpyuq/w3XA41jjLHT8NPA+n7czH/DDhdncq0nAyDZmPeWXh2qmdIg==} dev: true /figures@3.2.0: @@ -11009,11 +11000,6 @@ packages: resolution: {integrity: sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==} dev: true - /js-string-escape@1.0.1: - resolution: {integrity: sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==} - engines: {node: '>= 0.8'} - dev: true - /js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} dev: true @@ -11555,6 +11541,13 @@ packages: dependencies: '@jridgewell/sourcemap-codec': 1.4.14 + /magic-string@0.30.1: + resolution: {integrity: sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==} + engines: {node: '>=12'} + dependencies: + '@jridgewell/sourcemap-codec': 1.4.15 + dev: true + /make-dir@3.1.0: resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==} engines: {node: '>=8'} @@ -11616,13 +11609,6 @@ packages: '@arr/every': 1.0.1 dev: true - /md5-hex@3.0.1: - resolution: {integrity: sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==} - engines: {node: '>=8'} - dependencies: - blueimp-md5: 2.19.0 - dev: true - /mdast-builder@1.1.1: resolution: {integrity: sha512-a3KBk/LmYD6wKsWi8WJrGU/rXR4yuF4Men0JO0z6dSZCm5FrXXWTRDjqK0vGSqa+1M6p9edeuypZAZAzSehTUw==} dependencies: @@ -12201,13 +12187,13 @@ packages: hasBin: true dev: true - /mlly@1.2.0: - resolution: {integrity: sha512-+c7A3CV0KGdKcylsI6khWyts/CYrGTrRVo4R/I7u/cUsy0Conxa6LUhiEzVKIw14lc2L5aiO4+SeVe4TeGRKww==} + /mlly@1.4.0: + resolution: {integrity: sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==} dependencies: - acorn: 8.8.2 + acorn: 8.10.0 pathe: 1.1.1 - pkg-types: 1.0.2 - ufo: 1.1.1 + pkg-types: 1.0.3 + ufo: 1.1.2 dev: true /mri@1.2.0: @@ -12930,11 +12916,11 @@ packages: find-up: 4.1.0 dev: true - /pkg-types@1.0.2: - resolution: {integrity: sha512-hM58GKXOcj8WTqUXnsQyJYXdeAPbythQgEF3nTcEo+nkD49chjQ9IKm/QJy9xf6JakXptz86h7ecP2024rrLaQ==} + /pkg-types@1.0.3: + resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==} dependencies: jsonc-parser: 3.2.0 - mlly: 1.2.0 + mlly: 1.4.0 pathe: 1.1.1 dev: true @@ -13100,15 +13086,6 @@ packages: engines: {node: ^14.13.1 || >=16.0.0} dev: true - /pretty-format@27.5.1: - resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==} - engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} - dependencies: - ansi-regex: 5.0.1 - ansi-styles: 5.2.0 - react-is: 17.0.2 - dev: true - /pretty-format@29.5.0: resolution: {integrity: sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -13252,10 +13229,6 @@ packages: unpipe: 1.0.0 dev: true - /react-is@17.0.2: - resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} - dev: true - /react-is@18.2.0: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} dev: true @@ -14291,8 +14264,8 @@ packages: engines: {node: '>= 0.8'} dev: true - /std-env@3.3.2: - resolution: {integrity: sha512-uUZI65yrV2Qva5gqE0+A7uVAvO40iPo6jGhs7s8keRfHCmtg+uB2X6EiLGCI9IgL1J17xGhvoOqSz79lzICPTA==} + /std-env@3.3.3: + resolution: {integrity: sha512-Rz6yejtVyWnVjC1RFvNmYL10kgjC49EOghxWn0RFqlCHGFpQx+Xe7yW3I4ceK1SGrWIGMjD5Kbue8W/udkbMJg==} dev: true /stream-combiner@0.0.4: @@ -14455,7 +14428,7 @@ packages: /strip-literal@1.0.1: resolution: {integrity: sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==} dependencies: - acorn: 8.8.2 + acorn: 8.10.0 dev: true /stylis@4.1.3: @@ -14690,11 +14663,6 @@ packages: resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==} dev: true - /time-zone@1.0.0: - resolution: {integrity: sha512-TIsDdtKo6+XrPtiTm1ssmMngN1sAhyKnTO2kunQWqNPWIVvCm15Wmw4SWInwTVgJ5u/Tr04+8Ei9TNcw4x4ONA==} - engines: {node: '>=4'} - dev: true - /timers-ext@0.1.7: resolution: {integrity: sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==} dependencies: @@ -14718,13 +14686,13 @@ packages: resolution: {integrity: sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==} dev: true - /tinypool@0.5.0: - resolution: {integrity: sha512-paHQtnrlS1QZYKF/GnLoOM/DN9fqaGOFbCbxzAhwniySnzl9Ebk8w73/dd34DAhe/obUbPAOldTyYXQZxnPBPQ==} + /tinypool@0.6.0: + resolution: {integrity: sha512-FdswUUo5SxRizcBc6b1GSuLpLjisa8N8qMyYoP3rl+bym+QauhtJP5bvZY1ytt8krKGmMLYIRl36HBZfeAoqhQ==} engines: {node: '>=14.0.0'} dev: true - /tinyspy@2.1.0: - resolution: {integrity: sha512-7eORpyqImoOvkQJCSkL0d0mB4NHHIFAy4b1u8PHdDa7SjGS2njzl6/lyGoZLm+eyYEtlUmFGE0rFj66SWxZgQQ==} + /tinyspy@2.1.1: + resolution: {integrity: sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==} engines: {node: '>=14.0.0'} dev: true @@ -15051,6 +15019,10 @@ packages: resolution: {integrity: sha512-MvlCc4GHrmZdAllBc0iUDowff36Q9Ndw/UzqmEKyrfSzokTd9ZCy1i+IIk5hrYKkjoYVQyNbrw7/F8XJ2rEwTg==} dev: true + /ufo@1.1.2: + resolution: {integrity: sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==} + dev: true + /uglify-js@3.17.3: resolution: {integrity: sha512-JmMFDME3iufZnBpyKL+uS78LRiC+mK55zWfM5f/pWBJfpOttXAqYfdDGRukYhJuyRinvPVAtUhvy7rlDybNtFg==} engines: {node: '>=0.8.0'} @@ -15383,14 +15355,14 @@ packages: vfile-message: 3.1.2 dev: true - /vite-node@0.32.2(@types/node@18.16.0): - resolution: {integrity: sha512-dTQ1DCLwl2aEseov7cfQ+kDMNJpM1ebpyMMMwWzBvLbis8Nla/6c9WQcqpPssTwS6Rp/+U6KwlIj8Eapw4bLdA==} + /vite-node@0.33.0(@types/node@18.16.0): + resolution: {integrity: sha512-19FpHYbwWWxDr73ruNahC+vtEdza52kA90Qb3La98yZ0xULqV8A5JLNPUff0f5zID4984tW7l3DH2przTJUZSw==} engines: {node: '>=v14.18.0'} hasBin: true dependencies: cac: 6.7.14 debug: 4.3.4(supports-color@8.1.1) - mlly: 1.2.0 + mlly: 1.4.0 pathe: 1.1.1 picocolors: 1.0.0 vite: 4.3.9(@types/node@18.16.0) @@ -15661,8 +15633,8 @@ packages: - universal-cookie dev: true - /vitest@0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0): - resolution: {integrity: sha512-hU8GNNuQfwuQmqTLfiKcqEhZY72Zxb7nnN07koCUNmntNxbKQnVbeIS6sqUgR3eXSlbOpit8+/gr1KpqoMgWCQ==} + /vitest@0.33.0(@vitest/ui@0.33.0)(jsdom@22.0.0): + resolution: {integrity: sha512-1CxaugJ50xskkQ0e969R/hW47za4YXDUfWJDxip1hwbnhUjYolpfUn2AMOulqG/Dtd9WYAtkHmM/m3yKVrEejQ==} engines: {node: '>=v14.18.0'} hasBin: true peerDependencies: @@ -15695,29 +15667,28 @@ packages: '@types/chai': 4.3.5 '@types/chai-subset': 1.3.3 '@types/node': 18.16.0 - '@vitest/expect': 0.32.2 - '@vitest/runner': 0.32.2 - '@vitest/snapshot': 0.32.2 - '@vitest/spy': 0.32.2 - '@vitest/ui': 0.32.2(vitest@0.32.2) - '@vitest/utils': 0.32.2 - acorn: 8.8.2 + '@vitest/expect': 0.33.0 + '@vitest/runner': 0.33.0 + '@vitest/snapshot': 0.33.0 + '@vitest/spy': 0.33.0 + '@vitest/ui': 0.33.0(vitest@0.33.0) + '@vitest/utils': 0.33.0 + acorn: 8.10.0 acorn-walk: 8.2.0 cac: 6.7.14 chai: 4.3.7 - concordance: 5.0.4 debug: 4.3.4(supports-color@8.1.1) jsdom: 22.0.0 local-pkg: 0.4.3 - magic-string: 0.30.0 - pathe: 1.1.0 + magic-string: 0.30.1 + pathe: 1.1.1 picocolors: 1.0.0 - std-env: 3.3.2 + std-env: 3.3.3 strip-literal: 1.0.1 tinybench: 2.5.0 - tinypool: 0.5.0 + tinypool: 0.6.0 vite: 4.3.9(@types/node@18.16.0) - vite-node: 0.32.2(@types/node@18.16.0) + vite-node: 0.33.0(@types/node@18.16.0) why-is-node-running: 2.2.2 transitivePeerDependencies: - less @@ -16092,11 +16063,6 @@ packages: engines: {node: '>=0.8.0'} dev: true - /well-known-symbols@2.0.0: - resolution: {integrity: sha512-ZMjC3ho+KXo0BfJb7JgtQ5IBuvnShdlACNkKkdsqBmYw3bPAaJfPeYUo6tLUaT5tG/Gkh7xkpBhKRQ9e7pyg9Q==} - engines: {node: '>=6'} - dev: true - /whatwg-encoding@2.0.0: resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==} engines: {node: '>=12'} From 3664ff4463abb54a119de9350848ced52a70487e Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Tue, 11 Jul 2023 18:12:27 +0300 Subject: [PATCH 195/263] Removed unused code in state diagrams --- .../mermaid/src/diagrams/state/stateRenderer.js | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js index 689d7a0e52..1b3e0f27ed 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer.js +++ b/packages/mermaid/src/diagrams/state/stateRenderer.js @@ -63,20 +63,6 @@ export const draw = function (text, id, _version, diagObj) { const diagram = root.select(`[id='${id}']`); insertMarkers(diagram); - // Layout graph, Create a new directed graph - const graph = new graphlib.Graph({ - multigraph: true, - compound: true, - // acyclicer: 'greedy', - rankdir: 'RL', - // ranksep: '20' - }); - - // Default to assigning a new object as a label for each new edge. - graph.setDefaultEdgeLabel(function () { - return {}; - }); - const rootDoc = diagObj.db.getRootDoc(); renderDoc(rootDoc, diagram, undefined, false, root, doc, diagObj); 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 196/263] 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 f7195b3620..1037b51021 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 1b4cb62330..b23c8bd980 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 afbbed2e68..481eef8887 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 e09d023f7d..6d604e5246 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 197/263] 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 410703f6c1..b30084e900 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 198/263] 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 427b4cf0b6..cc4a7bfa90 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 199/263] 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 b30084e900..1e1fbd41e2 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 200/263] 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 1e1fbd41e2..6c67333585 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 201/263] 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 cc4a7bfa90..3d91426e64 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 202/263] 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 3d91426e64..21fe8c726c 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 7cb009cd38954f28b68a459e2eddd67596fff7e8 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 13 Jul 2023 23:54:49 +0100 Subject: [PATCH 203/263] build(docs): run remark plugins on MermaidConfig We use the `unified.stringify()` function on our remark plugins to stringify the Markdown AST for our MermaidConfig documentation. However, [`.stringify()`][1] only runs the stringify phase in unified, not the "run" phase. If we want to run our plugins on the Markdown AST, we need to also use the [`.run()`][2] function. [1]: https://github.com/unifiedjs/unified#processorstringifytree-file [2]: https://github.com/unifiedjs/unified#processorruntree-file-done --- packages/mermaid/src/docs.mts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts index 356cd3cd11..b3f356f344 100644 --- a/packages/mermaid/src/docs.mts +++ b/packages/mermaid/src/docs.mts @@ -420,7 +420,7 @@ async function transormJsonSchema(file: string) { } }); - const transformed = remark() + const transformer = remark() .use(remarkGfm) .use(remarkFrontmatter, ['yaml']) // support YAML front-matter in Markdown .use(transformMarkdownAst, { @@ -428,8 +428,9 @@ async function transormJsonSchema(file: string) { originalFilename: file, addAutogeneratedWarning: !noHeader, removeYAML: !noHeader, - }) - .stringify(markdownAst as Root); + }); + + const transformed = transformer.stringify(await transformer.run(markdownAst as Root)); const formatted = prettier.format(transformed, { parser: 'markdown', From 5631a218d14cc00a35ea3fa005995a03492a261d Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Wed, 12 Jul 2023 13:58:22 +0000 Subject: [PATCH 204/263] fix: make gantt chart interval weeks start on monday instead of sunday --- packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 215a4df29d..6e34276edf 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -13,7 +13,7 @@ import { timeMinute, timeHour, timeDay, - timeWeek, + timeMonday, timeMonth, } from 'd3'; import common from '../common/common.js'; @@ -572,7 +572,7 @@ export const draw = function (text, id, version, diagObj) { bottomXAxis.ticks(timeDay.every(every)); break; case 'week': - bottomXAxis.ticks(timeWeek.every(every)); + bottomXAxis.ticks(timeMonday.every(every)); break; case 'month': bottomXAxis.ticks(timeMonth.every(every)); @@ -611,7 +611,7 @@ export const draw = function (text, id, version, diagObj) { topXAxis.ticks(timeDay.every(every)); break; case 'week': - topXAxis.ticks(timeWeek.every(every)); + topXAxis.ticks(timeMonday.every(every)); break; case 'month': topXAxis.ticks(timeMonth.every(every)); From 03ce2810b53920d7de2b6fa6eae3e5bc1e7ac580 Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Wed, 12 Jul 2023 17:23:21 +0200 Subject: [PATCH 205/263] feat: allow specifying on which weekday a tickInterval should start --- docs/syntax/gantt.md | 6 ++++ packages/mermaid/src/defaultConfig.ts | 1 + .../mermaid/src/diagrams/gantt/ganttDb.js | 12 +++++++ .../src/diagrams/gantt/ganttRenderer.js | 33 ++++++++++++++++++- .../src/diagrams/gantt/parser/gantt.jison | 2 ++ .../src/diagrams/gantt/parser/gantt.spec.js | 5 +++ 6 files changed, 58 insertions(+), 1 deletion(-) diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index 8e64a268aa..ef40aef0f7 100644 --- a/docs/syntax/gantt.md +++ b/docs/syntax/gantt.md @@ -257,6 +257,12 @@ The pattern is: More info in: +Week-based `tickInterval`s start the week on sunday by default. If you wish to specify another weekday on which the `tickInterval` should start, use the `weekday` option: + +```markdown +weekday monday +``` + ## Output in compact mode The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings. diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 62b361cff4..28454e3532 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -50,6 +50,7 @@ const config: Partial = { ...defaultConfigJson.gantt, tickInterval: undefined, useWidth: undefined, // can probably be removed since `configKeys` already includes this + weekday: 'sunday', // the sane default is a monday, but it's set to sunday for legacy reasons }, c4: { ...defaultConfigJson.c4, diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js index 3964027025..339cb65ecc 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttDb.js +++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js @@ -37,6 +37,7 @@ const tags = ['active', 'done', 'crit', 'milestone']; let funs = []; let inclusiveEndDates = false; let topAxis = false; +let weekday = undefined; // The serial order of the task in the script let lastOrder = 0; @@ -66,6 +67,7 @@ export const clear = function () { lastOrder = 0; links = {}; commonClear(); + weekday = undefined; }; export const setAxisFormat = function (txt) { @@ -179,6 +181,14 @@ export const isInvalidDate = function (date, dateFormat, excludes, includes) { return excludes.includes(date.format(dateFormat.trim())); }; +export const setWeekday = function (txt) { + weekday = txt; +}; + +export const getWeekday = function () { + return weekday; +}; + /** * TODO: fully document what this function does and what types it accepts * @@ -759,6 +769,8 @@ export default { bindFunctions, parseDuration, isInvalidDate, + setWeekday, + getWeekday, }; /** diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 6e34276edf..05ff7f8a9f 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -14,6 +14,12 @@ import { timeHour, timeDay, timeMonday, + timeTuesday, + timeWednesday, + timeThursday, + timeFriday, + timeSaturday, + timeSunday, timeMonth, } from 'd3'; import common from '../common/common.js'; @@ -561,6 +567,8 @@ export const draw = function (text, id, version, diagObj) { if (resultTickInterval !== null) { const every = resultTickInterval[1]; const interval = resultTickInterval[2]; + const weekday = diagObj.db.getWeekday() || conf.weekday; + switch (interval) { case 'minute': bottomXAxis.ticks(timeMinute.every(every)); @@ -572,7 +580,30 @@ export const draw = function (text, id, version, diagObj) { bottomXAxis.ticks(timeDay.every(every)); break; case 'week': - bottomXAxis.ticks(timeMonday.every(every)); + switch (weekday) { + case 'monday': + bottomXAxis.ticks(timeMonday.every(every)); + break; + case 'tuesday': + bottomXAxis.ticks(timeTuesday.every(every)); + break; + case 'wednesday': + bottomXAxis.ticks(timeWednesday.every(every)); + break; + case 'thursday': + bottomXAxis.ticks(timeThursday.every(every)); + break; + case 'friday': + bottomXAxis.ticks(timeFriday.every(every)); + break; + case 'saturday': + bottomXAxis.ticks(timeSaturday.every(every)); + break; + case 'sunday': + default: + bottomXAxis.ticks(timeSunday.every(every)); + break; + } break; case 'month': bottomXAxis.ticks(timeMonth.every(every)); diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison index 0eb45ec416..d83baeea9c 100644 --- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison +++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison @@ -86,6 +86,7 @@ that id. "includes"\s[^#\n;]+ return 'includes'; "excludes"\s[^#\n;]+ return 'excludes'; "todayMarker"\s[^\n;]+ return 'todayMarker'; +"weekday"\s[^#\n;]+ return 'weekday'; \d\d\d\d"-"\d\d"-"\d\d return 'date'; "title"\s[^#\n;]+ return 'title'; "accDescription"\s[^#\n;]+ return 'accDescription' @@ -130,6 +131,7 @@ statement | excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);} | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);} | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);} + | weekday { yy.setWeekday($1.substr(8));$$=$1.substr(8);} | title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);} | acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); } | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); } diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js index 020bab0ed3..5758333991 100644 --- a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js +++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js @@ -180,4 +180,9 @@ row2`; expect(ganttDb.getAccTitle()).toBe(expectedTitle); expect(ganttDb.getAccDescription()).toBe(expectedAccDescription); }); + + it('should allow for customising the weekday for tick intervals', function () { + parser.parse('gantt\nweekday wednesday'); + expect(ganttDb.getWeekday()).toBe('wednesday'); + }); }); From e360e90f884ff71e371c892c19c41ab499380e32 Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Wed, 12 Jul 2023 17:30:44 +0200 Subject: [PATCH 206/263] chore: move documentation to source file --- docs/config/setup/modules/defaultConfig.md | 2 +- packages/mermaid/src/docs/syntax/gantt.md | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index a55ec18085..d03ed36dae 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -[defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266) +[defaultConfig.ts:267](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L267) --- diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md index 710b39e521..5859c74033 100644 --- a/packages/mermaid/src/docs/syntax/gantt.md +++ b/packages/mermaid/src/docs/syntax/gantt.md @@ -189,6 +189,12 @@ The pattern is: More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/d3/d3-time#interval_every) +Week-based `tickInterval`s start the week on sunday by default. If you wish to specify another weekday on which the `tickInterval` should start, use the `weekday` option: + +```markdown +weekday monday +``` + ## Output in compact mode The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings. From 0d7427ed20529019bb623c5207c171d70779175b Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Wed, 12 Jul 2023 22:31:34 +0200 Subject: [PATCH 207/263] chore: add cypress test --- cypress/integration/rendering/gantt.spec.js | 22 +++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index cb65f73b0b..0005e3e765 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -414,6 +414,28 @@ describe('Gantt diagram', () => { ); }); + it('should render a gantt diagram with tick is 1 week, with the day starting on monday', () => { + imgSnapshotTest( + ` + gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + axisFormat %m-%d + tickInterval 1week + weekday monday + excludes weekends + + section Section + A task : a1, 2022-10-01, 30d + Another task : after a1, 20d + section Another + Task in sec : 2022-10-20, 12d + another task : 24d + `, + {} + ); + }); + it('should render a gantt diagram with tick is 1 month', () => { imgSnapshotTest( ` From df10ab501a84c99b6d34f944f62d864689168dd1 Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Wed, 12 Jul 2023 22:31:51 +0200 Subject: [PATCH 208/263] chore: add tests for all days --- .../src/diagrams/gantt/parser/gantt.spec.js | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js index 5758333991..6c1f2e2ca9 100644 --- a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js +++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js @@ -181,8 +181,32 @@ row2`; expect(ganttDb.getAccDescription()).toBe(expectedAccDescription); }); - it('should allow for customising the weekday for tick intervals', function () { + it('should allow for setting the starting weekday to monday for tick intervals', function () { + parser.parse('gantt\nweekday monday'); + expect(ganttDb.getWeekday()).toBe('monday'); + }); + it('should allow for setting the starting weekday to tuesday for tick intervals', function () { + parser.parse('gantt\nweekday tuesday'); + expect(ganttDb.getWeekday()).toBe('tuesday'); + }); + it('should allow for setting the starting weekday to wednesday for tick intervals', function () { parser.parse('gantt\nweekday wednesday'); expect(ganttDb.getWeekday()).toBe('wednesday'); }); + it('should allow for setting the starting weekday to thursday for tick intervals', function () { + parser.parse('gantt\nweekday thursday'); + expect(ganttDb.getWeekday()).toBe('thursday'); + }); + it('should allow for setting the starting weekday to friday for tick intervals', function () { + parser.parse('gantt\nweekday friday'); + expect(ganttDb.getWeekday()).toBe('friday'); + }); + it('should allow for setting the starting weekday to saturday for tick intervals', function () { + parser.parse('gantt\nweekday saturday'); + expect(ganttDb.getWeekday()).toBe('saturday'); + }); + it('should allow for setting the starting weekday to sunday for tick intervals', function () { + parser.parse('gantt\nweekday sunday'); + expect(ganttDb.getWeekday()).toBe('sunday'); + }); }); From cd92c46f3180a1db1533d2d4aeab35ff0b3e7adb Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Wed, 12 Jul 2023 22:34:22 +0200 Subject: [PATCH 209/263] chore: format example more correctly --- packages/mermaid/src/docs/syntax/gantt.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md index 5859c74033..05ccf7bff2 100644 --- a/packages/mermaid/src/docs/syntax/gantt.md +++ b/packages/mermaid/src/docs/syntax/gantt.md @@ -191,8 +191,10 @@ More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/ Week-based `tickInterval`s start the week on sunday by default. If you wish to specify another weekday on which the `tickInterval` should start, use the `weekday` option: -```markdown -weekday monday +```mermaid-example +gantt + tickInterval 1week + weekday monday ``` ## Output in compact mode From 5f7212c7696b1058e1aa0e60b804b85220431ac4 Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Wed, 12 Jul 2023 22:38:00 +0200 Subject: [PATCH 210/263] chore: move default value to config.schema.yaml --- packages/mermaid/src/defaultConfig.ts | 1 - packages/mermaid/src/schemas/config.schema.yaml | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 28454e3532..62b361cff4 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -50,7 +50,6 @@ const config: Partial = { ...defaultConfigJson.gantt, tickInterval: undefined, useWidth: undefined, // can probably be removed since `configKeys` already includes this - weekday: 'sunday', // the sane default is a monday, but it's set to sunday for legacy reasons }, c4: { ...defaultConfigJson.c4, diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 306aab2cc7..8bebd68cf4 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -1455,6 +1455,7 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) - axisFormat - useMaxWidth - topAxis + - weekday properties: titleTopMargin: $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin' @@ -1544,6 +1545,20 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) default: '' # Allow any string for typescript backwards compatibility (fix in Mermaid v10) tsType: 'string | "compact"' + weekday: + description: | + On which day a week-based interval should start + type: string + enum: + - monday + - tuesday + - wednesday + - thursday + - friday + - saturday + - sunday + # the sane default is a monday, but it's set to sunday for legacy reasons + default: sunday SequenceDiagramConfig: title: Sequence Diagram Config From 37adc23ae2bc674cdac6c40ccb83e4df0afd6a3b Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Wed, 12 Jul 2023 22:38:48 +0200 Subject: [PATCH 211/263] chore: also default to sundat in ganttDb --- packages/mermaid/src/diagrams/gantt/ganttDb.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js index 339cb65ecc..d79a57fc26 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttDb.js +++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js @@ -37,7 +37,7 @@ const tags = ['active', 'done', 'crit', 'milestone']; let funs = []; let inclusiveEndDates = false; let topAxis = false; -let weekday = undefined; +let weekday = 'sunday'; // The serial order of the task in the script let lastOrder = 0; From ebf639377bd6296429ae39a267d3490e08b7ffdf Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Wed, 12 Jul 2023 22:54:28 +0200 Subject: [PATCH 212/263] chore: generate typescript config type --- packages/mermaid/src/config.type.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 352181c861..df87e9c406 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -1063,6 +1063,11 @@ export interface GanttDiagramConfig extends BaseDiagramConfig { * */ displayMode?: string | "compact"; + /** + * On which day a week-based interval should start + * + */ + weekday?: "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"; } /** * The object containing configurations specific for sequence diagrams From cfe31fe89ff0da74c70d932d457c8ee0f7784f25 Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Wed, 12 Jul 2023 22:59:06 +0200 Subject: [PATCH 213/263] chore: generate new docs --- docs/config/setup/modules/defaultConfig.md | 2 +- docs/syntax/gantt.md | 12 ++++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index d03ed36dae..a55ec18085 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -[defaultConfig.ts:267](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L267) +[defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266) --- diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index ef40aef0f7..5cf5840500 100644 --- a/docs/syntax/gantt.md +++ b/docs/syntax/gantt.md @@ -259,8 +259,16 @@ More info in: Week-based `tickInterval`s start the week on sunday by default. If you wish to specify another weekday on which the `tickInterval` should start, use the `weekday` option: -```markdown -weekday monday +```mermaid-example +gantt + tickInterval 1week + weekday monday +``` + +```mermaid +gantt + tickInterval 1week + weekday monday ``` ## Output in compact mode From 4e8eeda30e351b1976c88383466b28d26de82015 Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Thu, 13 Jul 2023 17:18:13 +0200 Subject: [PATCH 214/263] chore: also apply weekday to topXAxis --- .../src/diagrams/gantt/ganttRenderer.js | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 05ff7f8a9f..def988ed26 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -631,6 +631,8 @@ export const draw = function (text, id, version, diagObj) { if (resultTickInterval !== null) { const every = resultTickInterval[1]; const interval = resultTickInterval[2]; + const weekday = diagObj.db.getWeekday() || conf.weekday; + switch (interval) { case 'minute': topXAxis.ticks(timeMinute.every(every)); @@ -642,7 +644,30 @@ export const draw = function (text, id, version, diagObj) { topXAxis.ticks(timeDay.every(every)); break; case 'week': - topXAxis.ticks(timeMonday.every(every)); + switch (weekday) { + case 'monday': + topXAxis.ticks(timeMonday.every(every)); + break; + case 'tuesday': + topXAxis.ticks(timeTuesday.every(every)); + break; + case 'wednesday': + topXAxis.ticks(timeWednesday.every(every)); + break; + case 'thursday': + topXAxis.ticks(timeThursday.every(every)); + break; + case 'friday': + topXAxis.ticks(timeFriday.every(every)); + break; + case 'saturday': + topXAxis.ticks(timeSaturday.every(every)); + break; + case 'sunday': + default: + topXAxis.ticks(timeSunday.every(every)); + break; + } break; case 'month': topXAxis.ticks(timeMonth.every(every)); From d9c15b1e7ae42564edfeea824963ed68f4a3fb54 Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Thu, 13 Jul 2023 17:26:49 +0200 Subject: [PATCH 215/263] chore: move spec test to it.each --- .../src/diagrams/gantt/parser/gantt.spec.js | 35 ++++--------------- 1 file changed, 7 insertions(+), 28 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js index 6c1f2e2ca9..e7ce1ffa4f 100644 --- a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js +++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js @@ -181,32 +181,11 @@ row2`; expect(ganttDb.getAccDescription()).toBe(expectedAccDescription); }); - it('should allow for setting the starting weekday to monday for tick intervals', function () { - parser.parse('gantt\nweekday monday'); - expect(ganttDb.getWeekday()).toBe('monday'); - }); - it('should allow for setting the starting weekday to tuesday for tick intervals', function () { - parser.parse('gantt\nweekday tuesday'); - expect(ganttDb.getWeekday()).toBe('tuesday'); - }); - it('should allow for setting the starting weekday to wednesday for tick intervals', function () { - parser.parse('gantt\nweekday wednesday'); - expect(ganttDb.getWeekday()).toBe('wednesday'); - }); - it('should allow for setting the starting weekday to thursday for tick intervals', function () { - parser.parse('gantt\nweekday thursday'); - expect(ganttDb.getWeekday()).toBe('thursday'); - }); - it('should allow for setting the starting weekday to friday for tick intervals', function () { - parser.parse('gantt\nweekday friday'); - expect(ganttDb.getWeekday()).toBe('friday'); - }); - it('should allow for setting the starting weekday to saturday for tick intervals', function () { - parser.parse('gantt\nweekday saturday'); - expect(ganttDb.getWeekday()).toBe('saturday'); - }); - it('should allow for setting the starting weekday to sunday for tick intervals', function () { - parser.parse('gantt\nweekday sunday'); - expect(ganttDb.getWeekday()).toBe('sunday'); - }); + it.each(['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'])( + 'should allow for setting the starting weekday to %s for tick interval', + (day) => { + parser.parse(`gantt\nweekday ${day}`); + expect(ganttDb.getWeekday()).toBe(day); + } + ); }); From 11f2e31ff12cf29fc023e585e41b98684dcce60a Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Fri, 14 Jul 2023 10:04:22 +0200 Subject: [PATCH 216/263] fix: also set weekday value to sunday in clear --- packages/mermaid/src/diagrams/gantt/ganttDb.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js index d79a57fc26..da838f8392 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttDb.js +++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js @@ -67,7 +67,7 @@ export const clear = function () { lastOrder = 0; links = {}; commonClear(); - weekday = undefined; + weekday = 'sunday'; }; export const setAxisFormat = function (txt) { From d0afc3bffeb2ac94191a7146a1e3bb1eb5d09509 Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Fri, 14 Jul 2023 14:09:29 +0200 Subject: [PATCH 217/263] feat: validate individual values of weekdays --- .../src/diagrams/gantt/parser/gantt.jison | 56 ++++++++++++------- 1 file changed, 36 insertions(+), 20 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison index d83baeea9c..068a6fb92c 100644 --- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison +++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison @@ -77,25 +77,31 @@ that id. [\s\n] this.popState(); [^\s\n]* return 'click'; -"gantt" return 'gantt'; -"dateFormat"\s[^#\n;]+ return 'dateFormat'; -"inclusiveEndDates" return 'inclusiveEndDates'; -"topAxis" return 'topAxis'; -"axisFormat"\s[^#\n;]+ return 'axisFormat'; -"tickInterval"\s[^#\n;]+ return 'tickInterval'; -"includes"\s[^#\n;]+ return 'includes'; -"excludes"\s[^#\n;]+ return 'excludes'; -"todayMarker"\s[^\n;]+ return 'todayMarker'; -"weekday"\s[^#\n;]+ return 'weekday'; -\d\d\d\d"-"\d\d"-"\d\d return 'date'; -"title"\s[^#\n;]+ return 'title'; -"accDescription"\s[^#\n;]+ return 'accDescription' -"section"\s[^#:\n;]+ return 'section'; -[^#:\n;]+ return 'taskTxt'; -":"[^#\n;]+ return 'taskData'; -":" return ':'; -<> return 'EOF'; -. return 'INVALID'; +"gantt" return 'gantt'; +"dateFormat"\s[^#\n;]+ return 'dateFormat'; +"inclusiveEndDates" return 'inclusiveEndDates'; +"topAxis" return 'topAxis'; +"axisFormat"\s[^#\n;]+ return 'axisFormat'; +"tickInterval"\s[^#\n;]+ return 'tickInterval'; +"includes"\s[^#\n;]+ return 'includes'; +"excludes"\s[^#\n;]+ return 'excludes'; +"todayMarker"\s[^\n;]+ return 'todayMarker'; +.*weekday\s+monday[^\n]* return 'weekday_monday' +.*weekday\s+tuesday[^\n]* return 'weekday_tuesday' +.*weekday\s+wednesday[^\n]* return 'weekday_wednesday' +.*weekday\s+thursday[^\n]* return 'weekday_thursday' +.*weekday\s+friday[^\n]* return 'weekday_friday' +.*weekday\s+saturday[^\n]* return 'weekday_saturday' +.*weekday\s+sunday[^\n]* return 'weekday_sunday' +\d\d\d\d"-"\d\d"-"\d\d return 'date'; +"title"\s[^#\n;]+ return 'title'; +"accDescription"\s[^#\n;]+ return 'accDescription' +"section"\s[^#:\n;]+ return 'section'; +[^#:\n;]+ return 'taskTxt'; +":"[^#\n;]+ return 'taskData'; +":" return ':'; +<> return 'EOF'; +. return 'INVALID'; /lex @@ -122,6 +128,16 @@ line | EOF { $$=[];} ; +weekday + : weekday_monday { yy.setWeekday("monday");} + | weekday_tuesday { yy.setWeekday("tuesday");} + | weekday_wednesday { yy.setWeekday("wednesday");} + | weekday_thursday { yy.setWeekday("thursday");} + | weekday_friday { yy.setWeekday("friday");} + | weekday_saturday { yy.setWeekday("saturday");} + | weekday_sunday { yy.setWeekday("sunday");} + ; + statement : dateFormat {yy.setDateFormat($1.substr(11));$$=$1.substr(11);} | inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);} @@ -131,7 +147,7 @@ statement | excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);} | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);} | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);} - | weekday { yy.setWeekday($1.substr(8));$$=$1.substr(8);} + | weekday | title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);} | acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); } | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); } From 103321bf72ef48b0c81cc06cb25e36a159c01280 Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Sat, 15 Jul 2023 00:17:09 +0200 Subject: [PATCH 218/263] chore: return after scanning weekday in jison --- .../mermaid/src/diagrams/gantt/parser/gantt.jison | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison index 068a6fb92c..1d213834e1 100644 --- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison +++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison @@ -86,13 +86,13 @@ that id. "includes"\s[^#\n;]+ return 'includes'; "excludes"\s[^#\n;]+ return 'excludes'; "todayMarker"\s[^\n;]+ return 'todayMarker'; -.*weekday\s+monday[^\n]* return 'weekday_monday' -.*weekday\s+tuesday[^\n]* return 'weekday_tuesday' -.*weekday\s+wednesday[^\n]* return 'weekday_wednesday' -.*weekday\s+thursday[^\n]* return 'weekday_thursday' -.*weekday\s+friday[^\n]* return 'weekday_friday' -.*weekday\s+saturday[^\n]* return 'weekday_saturday' -.*weekday\s+sunday[^\n]* return 'weekday_sunday' +.*weekday\s+monday[^\n]+ return 'weekday_monday' +.*weekday\s+tuesday[^\n]+ return 'weekday_tuesday' +.*weekday\s+wednesday[^\n]+ return 'weekday_wednesday' +.*weekday\s+thursday[^\n]+ return 'weekday_thursday' +.*weekday\s+friday[^\n]+ return 'weekday_friday' +.*weekday\s+saturday[^\n]+ return 'weekday_saturday' +.*weekday\s+sunday[^\n]+ return 'weekday_sunday' \d\d\d\d"-"\d\d"-"\d\d return 'date'; "title"\s[^#\n;]+ return 'title'; "accDescription"\s[^#\n;]+ return 'accDescription' From 90c68f50695d2ccf278ef076debadbb5df8e961d Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Sat, 15 Jul 2023 00:17:09 +0200 Subject: [PATCH 219/263] chore: add tsType for weekday config --- packages/mermaid/src/schemas/config.schema.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 8bebd68cf4..71e7de4776 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -1549,6 +1549,7 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) description: | On which day a week-based interval should start type: string + tsType: 'string | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"' enum: - monday - tuesday @@ -1557,7 +1558,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) - friday - saturday - sunday - # the sane default is a monday, but it's set to sunday for legacy reasons default: sunday SequenceDiagramConfig: From 803cd826ed7606f45ff084b7f13921623ad67a4e Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Sat, 15 Jul 2023 00:17:10 +0200 Subject: [PATCH 220/263] chore: replace switch-case with map --- .../src/diagrams/gantt/ganttRenderer.js | 64 +++++-------------- 1 file changed, 16 insertions(+), 48 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index def988ed26..522f59e2c9 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -30,6 +30,20 @@ export const setConf = function () { log.debug('Something is calling, setConf, remove the call'); }; +/** + * This will map any day of the week that can be set in the `weekday` option to + * the corresponding d3-time function that is used to calculate the ticks. + */ +const mapWeekdayToTimeFunction = { + monday: timeMonday, + tuesday: timeTuesday, + wednesday: timeWednesday, + thursday: timeThursday, + friday: timeFriday, + saturday: timeSaturday, + sunday: timeSunday, +}; + /** * For this issue: * https://github.com/mermaid-js/mermaid/issues/1618 @@ -580,30 +594,7 @@ export const draw = function (text, id, version, diagObj) { bottomXAxis.ticks(timeDay.every(every)); break; case 'week': - switch (weekday) { - case 'monday': - bottomXAxis.ticks(timeMonday.every(every)); - break; - case 'tuesday': - bottomXAxis.ticks(timeTuesday.every(every)); - break; - case 'wednesday': - bottomXAxis.ticks(timeWednesday.every(every)); - break; - case 'thursday': - bottomXAxis.ticks(timeThursday.every(every)); - break; - case 'friday': - bottomXAxis.ticks(timeFriday.every(every)); - break; - case 'saturday': - bottomXAxis.ticks(timeSaturday.every(every)); - break; - case 'sunday': - default: - bottomXAxis.ticks(timeSunday.every(every)); - break; - } + bottomXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every)); break; case 'month': bottomXAxis.ticks(timeMonth.every(every)); @@ -644,30 +635,7 @@ export const draw = function (text, id, version, diagObj) { topXAxis.ticks(timeDay.every(every)); break; case 'week': - switch (weekday) { - case 'monday': - topXAxis.ticks(timeMonday.every(every)); - break; - case 'tuesday': - topXAxis.ticks(timeTuesday.every(every)); - break; - case 'wednesday': - topXAxis.ticks(timeWednesday.every(every)); - break; - case 'thursday': - topXAxis.ticks(timeThursday.every(every)); - break; - case 'friday': - topXAxis.ticks(timeFriday.every(every)); - break; - case 'saturday': - topXAxis.ticks(timeSaturday.every(every)); - break; - case 'sunday': - default: - topXAxis.ticks(timeSunday.every(every)); - break; - } + topXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every)); break; case 'month': topXAxis.ticks(timeMonth.every(every)); From eff9f7e5db28578ed534a1f7322a70d14f2589be Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Sat, 15 Jul 2023 00:24:02 +0200 Subject: [PATCH 221/263] chore: re-generate config --- packages/mermaid/src/config.type.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index df87e9c406..1163016aa4 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -1067,7 +1067,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig { * On which day a week-based interval should start * */ - weekday?: "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"; + weekday?: string | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"; } /** * The object containing configurations specific for sequence diagrams From 383bbefa9e34aa5da6f648ea158cce3c5ae11238 Mon Sep 17 00:00:00 2001 From: Sibin Thomas Date: Sat, 15 Jul 2023 18:27:42 +0530 Subject: [PATCH 222/263] Added code for Vertical branches for GitGraph and Added TB option in the parser file. --- .../src/diagrams/git/gitGraphRenderer.js | 173 ++++++++++++++---- .../src/diagrams/git/parser/gitGraph.jison | 1 + 2 files changed, 134 insertions(+), 40 deletions(-) diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js index 8d88c601dd..01b787ca33 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js @@ -19,12 +19,14 @@ let branchPos = {}; let commitPos = {}; let lanes = []; let maxPos = 0; +let dir = 'LR'; const clear = () => { branchPos = {}; commitPos = {}; allCommitsDict = {}; maxPos = 0; lanes = []; + dir = 'LR'; }; /** @@ -77,6 +79,10 @@ const drawCommits = (svg, commits, modifyGraph) => { const gLabels = svg.append('g').attr('class', 'commit-labels'); let pos = 0; + if (dir === 'TB') { + pos = 30; + } + const keys = Object.keys(commits); const sortedKeys = keys.sort((a, b) => { return commits[a].seq - commits[b].seq; @@ -84,8 +90,9 @@ const drawCommits = (svg, commits, modifyGraph) => { sortedKeys.forEach((key) => { const commit = commits[key]; - const y = branchPos[commit.branch].pos; - const x = pos + 10; + const y = dir === 'TB' ? pos + 10 : branchPos[commit.branch].pos; + const x = dir === 'TB' ? branchPos[commit.branch].pos : pos + 10; + // Don't draw the commits now but calculate the positioning which is used by the branch lines etc. if (modifyGraph) { let typeClass; @@ -208,7 +215,11 @@ const drawCommits = (svg, commits, modifyGraph) => { } } } - commitPos[commit.id] = { x: pos + 10, y: y }; + if (dir === 'TB') { + commitPos[commit.id] = { x: x, y: pos + 10 }; + } else { + commitPos[commit.id] = { x: pos + 10, y: y }; + } // The first iteration over the commits are for positioning purposes, this // is required for drawing the lines. The circles and labels is drawn after the labels @@ -240,8 +251,19 @@ const drawCommits = (svg, commits, modifyGraph) => { .attr('y', y + 13.5) .attr('width', bbox.width + 2 * py) .attr('height', bbox.height + 2 * py); - text.attr('x', pos + 10 - bbox.width / 2); - if (gitGraphConfig.rotateCommitLabel) { + + if (dir === 'TB') { + labelBkg + .attr('x', x - (bbox.width + 4 * px)) + .attr('y', y - 5); + text.attr('x', x - (bbox.width + 4 * px)); + text.attr('y', y + bbox.height - 5); + } + + if (dir !== 'TB') { + text.attr('x', pos + 10 - bbox.width / 2); + } + if (gitGraphConfig.rotateCommitLabel && dir !== 'TB') { let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5; let r_y = 10 + (bbox.width / 25) * 8.5; wrapper.attr( @@ -365,46 +387,94 @@ const drawArrow = (svg, commit1, commit2, allCommits) => { colorClassNum = branchPos[commit2.branch].index; const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y); + const lineX = p1.x < p2.x ? findLane(p1.x, p2.x) : findLane(p2.x, p1.x); - if (p1.y < p2.y) { - lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${p1.x + offset} ${lineY} L ${ - p2.x - radius - } ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`; + if (dir === 'TB') { + if (p1.x < p2.x) { + lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${p1.y + offset} L ${ + lineX + } ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`; + } else { + lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${ + lineX + } ${p1.y + offset} L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; + } } else { - lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${ - p1.x + offset - } ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`; + if (p1.y < p2.y) { + lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${p1.x + offset} ${lineY} L ${ + p2.x - radius + } ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`; + } else { + lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${ + p1.x + offset + } ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`; + } } } else { - if (p1.y < p2.y) { - arc = 'A 20 20, 0, 0, 0,'; - radius = 20; - offset = 20; + if (dir === 'TB') + { + if (p1.x < p2.x) { + arc = 'A 20 20, 0, 0, 0,'; + arc2 = 'A 20 20, 0, 0, 1,'; + radius = 20; + offset = 20; + + // Figure out the color of the arrow,arrows going down take the color from the destination branch + colorClassNum = branchPos[commit2.branch].index; + + lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${p1.y + offset} L ${ + p2.x + } ${p2.y}`; + } + if (p1.x > p2.x) { + arc = 'A 20 20, 0, 0, 0,'; + radius = 20; + offset = 20; + + // Arrows going up take the color from the source branch + colorClassNum = branchPos[commit1.branch].index; + lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${ + p2.x + } ${p2.y}`; + } - // Figure out the color of the arrow,arrows going down take the color from the destination branch - colorClassNum = branchPos[commit2.branch].index; + if (p1.x === p2.x) { + colorClassNum = branchPos[commit1.branch].index; + lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${ + p2.x + } ${p2.y}`; + } + } else { + if (p1.y < p2.y) { + arc = 'A 20 20, 0, 0, 0,'; + radius = 20; + offset = 20; - lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${ - p2.x - } ${p2.y}`; - } - if (p1.y > p2.y) { - arc = 'A 20 20, 0, 0, 0,'; - radius = 20; - offset = 20; - - // Arrows going up take the color from the source branch - colorClassNum = branchPos[commit1.branch].index; - lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${ - p2.x - } ${p2.y}`; - } + // Figure out the color of the arrow,arrows going down take the color from the destination branch + colorClassNum = branchPos[commit2.branch].index; + + lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${ + p2.x + } ${p2.y}`; + } + if (p1.y > p2.y) { + arc = 'A 20 20, 0, 0, 0,'; + radius = 20; + offset = 20; + + // Arrows going up take the color from the source branch + colorClassNum = branchPos[commit1.branch].index; + lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${ + p2.x + } ${p2.y}`; + } - if (p1.y === p2.y) { - colorClassNum = branchPos[commit1.branch].index; - lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${ - p2.x - } ${p2.y}`; + if (p1.y === p2.y) { + colorClassNum = branchPos[commit1.branch].index; + lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${ + p2.x + } ${p2.y}`; + } } } svg @@ -445,6 +515,13 @@ const drawBranches = (svg, branches) => { line.attr('y2', pos); line.attr('class', 'branch branch' + adjustIndexForTheme); + if (dir === 'TB') { + line.attr('y1', 30); + line.attr('x1', pos); + line.attr('y2', maxPos); + line.attr('x2', pos); + } + lanes.push(pos); let name = branch.name; @@ -467,7 +544,6 @@ const drawBranches = (svg, branches) => { .attr('y', -bbox.height / 2 + 8) .attr('width', bbox.width + 18) .attr('height', bbox.height + 4); - label.attr( 'transform', 'translate(' + @@ -476,7 +552,23 @@ const drawBranches = (svg, branches) => { (pos - bbox.height / 2 - 1) + ')' ); - bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')'); + if (dir === 'TB') { + bkg + .attr('x', pos - bbox.width/2 - 10) + .attr('y', 0); + label + .attr( + 'transform', + 'translate(' + + (pos - bbox.width/2 - 5) + + ', ' + + (0) + + ')' + ); + } + if (dir !== 'TB') { + bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')'); + } }); }; @@ -495,6 +587,7 @@ export const draw = function (txt, id, ver, diagObj) { allCommitsDict = diagObj.db.getCommits(); const branches = diagObj.db.getBranchesAsObjArray(); + dir = diagObj.db.getDirection(); // Position branches vertically let pos = 0; diff --git a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison index 1c87f3bf35..c0aa3d2d9a 100644 --- a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison +++ b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison @@ -52,6 +52,7 @@ cherry\-pick(?=\s|$) return 'CHERRY_PICK'; checkout(?=\s|$) return 'CHECKOUT'; "LR" return 'DIR'; "BT" return 'DIR'; +"TB" return 'DIR'; ":" return ':'; "^" return 'CARET' "options"\r?\n this.begin("options"); // From 85515bcf8d47717ba32884c8ec7981ae4ecc710b Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Sat, 15 Jul 2023 15:28:48 +0200 Subject: [PATCH 223/263] chore: leave the newLine out of the jison spec --- .../mermaid/src/diagrams/gantt/parser/gantt.jison | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison index 1d213834e1..f7fd40c1bc 100644 --- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison +++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison @@ -86,13 +86,13 @@ that id. "includes"\s[^#\n;]+ return 'includes'; "excludes"\s[^#\n;]+ return 'excludes'; "todayMarker"\s[^\n;]+ return 'todayMarker'; -.*weekday\s+monday[^\n]+ return 'weekday_monday' -.*weekday\s+tuesday[^\n]+ return 'weekday_tuesday' -.*weekday\s+wednesday[^\n]+ return 'weekday_wednesday' -.*weekday\s+thursday[^\n]+ return 'weekday_thursday' -.*weekday\s+friday[^\n]+ return 'weekday_friday' -.*weekday\s+saturday[^\n]+ return 'weekday_saturday' -.*weekday\s+sunday[^\n]+ return 'weekday_sunday' +weekday\s+monday return 'weekday_monday' +weekday\s+tuesday return 'weekday_tuesday' +weekday\s+wednesday return 'weekday_wednesday' +weekday\s+thursday return 'weekday_thursday' +weekday\s+friday return 'weekday_friday' +weekday\s+saturday return 'weekday_saturday' +weekday\s+sunday return 'weekday_sunday' \d\d\d\d"-"\d\d"-"\d\d return 'date'; "title"\s[^#\n;]+ return 'title'; "accDescription"\s[^#\n;]+ return 'accDescription' From 7e39c13836dce0d2401ca5f07364d0e7074e99e2 Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Sat, 15 Jul 2023 15:38:21 +0200 Subject: [PATCH 224/263] chore: narrow down tstype --- packages/mermaid/src/config.type.ts | 2 +- packages/mermaid/src/schemas/config.schema.yaml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 1163016aa4..df87e9c406 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -1067,7 +1067,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig { * On which day a week-based interval should start * */ - weekday?: string | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"; + weekday?: "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"; } /** * The object containing configurations specific for sequence diagrams diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 71e7de4776..6e5f48d95e 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -1549,7 +1549,7 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) description: | On which day a week-based interval should start type: string - tsType: 'string | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"' + tsType: '"monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"' enum: - monday - tuesday From 57ee181fad6cd3f6be162297e18ad25e37766162 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 13 Jul 2023 23:59:56 +0100 Subject: [PATCH 225/263] build(docs): add `editLink: ` to MD frontmatter Add a YAML front-matter entry called `editLink` to Markdown files in Vitepress, e.g. ```markdown --- editLink: "https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/schemas/config.schema.yaml" --- Here is my markdown file! ``` Although Vitepress doesn't officially support adding a URL as a `editLink:` YAML front-matter, we can add a custom `editLink` function to our Vitepress config that does allow it. --- packages/mermaid/src/docs.mts | 26 +++++++++++++++++++++++++- packages/mermaid/src/docs.spec.ts | 21 +++++++++++++++++++++ 2 files changed, 46 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts index b3f356f344..227449a0ab 100644 --- a/packages/mermaid/src/docs.mts +++ b/packages/mermaid/src/docs.mts @@ -34,7 +34,7 @@ import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync } import { exec } from 'child_process'; import { globby } from 'globby'; import { JSDOM } from 'jsdom'; -import type { Code, ListItem, Root, Text } from 'mdast'; +import type { Code, ListItem, Root, Text, YAML } from 'mdast'; import { posix, dirname, relative, join } from 'path'; import prettier from 'prettier'; import { remark } from 'remark'; @@ -209,6 +209,8 @@ interface TransformMarkdownAstOptions { originalFilename: string; /** If `true`, add a warning that the file is autogenerated */ addAutogeneratedWarning?: boolean; + /** If `true`, adds an `editLink: "https://..."` YAML frontmatter field */ + addEditLink?: boolean; /** * If `true`, remove the YAML metadata from the Markdown input. * Generally, YAML metadata is only used for Vitepress. @@ -231,6 +233,7 @@ interface TransformMarkdownAstOptions { export function transformMarkdownAst({ originalFilename, addAutogeneratedWarning, + addEditLink, removeYAML, }: TransformMarkdownAstOptions) { return (tree: Root, _file?: any): Root => { @@ -270,6 +273,25 @@ export function transformMarkdownAst({ } } + if (addEditLink) { + // add originalFilename as custom editLink in YAML frontmatter + let yamlFrontMatter: YAML; + if (astWithTransformedBlocks.children[0].type === 'yaml') { + yamlFrontMatter = astWithTransformedBlocks.children[0]; + } else { + yamlFrontMatter = { + type: 'yaml', + value: '', + }; + astWithTransformedBlocks.children.unshift(yamlFrontMatter); + } + const filePathFromRoot = posix.join('packages/mermaid', originalFilename); + // TODO, should we replace this with proper YAML parsing? + yamlFrontMatter.value += `\neditLink: ${JSON.stringify( + `https://github.com/mermaid-js/mermaid/edit/develop/${filePathFromRoot}` + )}`; + } + if (removeYAML) { const firstNode = astWithTransformedBlocks.children[0]; if (firstNode.type == 'yaml') { @@ -306,6 +328,7 @@ const transformMarkdown = (file: string) => { // mermaid project specific plugin originalFilename: file, addAutogeneratedWarning: !noHeader, + addEditLink: noHeader, removeYAML: !noHeader, }) .processSync(doc) @@ -427,6 +450,7 @@ async function transormJsonSchema(file: string) { // mermaid project specific plugin originalFilename: file, addAutogeneratedWarning: !noHeader, + addEditLink: noHeader, removeYAML: !noHeader, }); diff --git a/packages/mermaid/src/docs.spec.ts b/packages/mermaid/src/docs.spec.ts index 50feaee6ad..bea833fd97 100644 --- a/packages/mermaid/src/docs.spec.ts +++ b/packages/mermaid/src/docs.spec.ts @@ -105,6 +105,27 @@ This Markdown should be kept. }); }); + it('should add an editLink in the YAML frontmatter if `addEditLink: true`', async () => { + const contents = `--- +title: Flowcharts Syntax +--- + +This Markdown should be kept. +`; + const withYaml = ( + await remarkBuilder() + .use(transformMarkdownAst, { originalFilename, addEditLink: true }) + .process(contents) + ).toString(); + expect(withYaml).toEqual(`--- +title: Flowcharts Syntax +editLink: "https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/example-input-filename.md" +--- + +This Markdown should be kept. +`); + }); + describe('transformToBlockQuote', () => { // TODO Is there a way to test this with --vitepress given as a process argument? From af9b3f77cb38e7a51236f0b0cf600e0516e866f4 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sat, 15 Jul 2023 23:09:02 +0100 Subject: [PATCH 226/263] build(docs): allow using custom `editLink` In Vitepress, allow using a custom `editLink`, if specified in the YAML frontmatter. --- packages/mermaid/src/docs/.vitepress/config.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 330b088d93..2644fa088a 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -35,7 +35,12 @@ export default defineConfig({ themeConfig: { nav: nav(), editLink: { - pattern: 'https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/:path', + pattern: ({ filePath, frontmatter }) => { + if (typeof frontmatter.editLink === 'string') { + return frontmatter.editLink; + } + return `https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/${filePath}`; + }, text: 'Edit this page on GitHub', }, sidebar: { From a0a25ed7561c7420324be8a9e187f0b2c4b3d711 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sun, 16 Jul 2023 00:20:48 +0100 Subject: [PATCH 227/263] 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 b23c8bd980..9cbdcdb1e4 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 481eef8887..d04083baac 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 6d604e5246..f258400a6e 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 228/263] 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 dd5fa21b0d..34b3b392a4 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 78528f7b99..0b7b6e87dc 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 229/263] 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 21fe8c726c..21117e8a1c 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 230/263] 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 21117e8a1c..dd79303b8c 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 { From 662eb431ab867a3246458f412a2f349941addaa0 Mon Sep 17 00:00:00 2001 From: Yokozuna59 Date: Mon, 17 Jul 2023 15:53:26 +0300 Subject: [PATCH 231/263] allow ts extension imports in cypress ts files --- cypress/tsconfig.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json index e3351cebeb..baa9a72172 100644 --- a/cypress/tsconfig.json +++ b/cypress/tsconfig.json @@ -2,7 +2,9 @@ "compilerOptions": { "target": "es2020", "lib": ["es2020", "dom"], - "types": ["cypress", "node"] + "types": ["cypress", "node"], + "allowImportingTsExtensions": true, + "noEmit": true }, "include": ["**/*.ts"] } From d9314a869a40f382f06ee2e767fe6c6501a055c4 Mon Sep 17 00:00:00 2001 From: Yokozuna59 Date: Mon, 17 Jul 2023 15:58:58 +0300 Subject: [PATCH 232/263] change deprecated `btoa` into `Buffer.from` --- cypress/helpers/util.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts index 2e9254e6a4..b042c3ed4f 100644 --- a/cypress/helpers/util.ts +++ b/cypress/helpers/util.ts @@ -1,3 +1,5 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { Buffer } from 'buffer'; import type { MermaidConfig } from '../../packages/mermaid/src/config.type.js'; type CypressConfig = { @@ -13,7 +15,7 @@ interface CodeObject { } const utf8ToB64 = (str: string): string => { - return window.btoa(decodeURIComponent(encodeURIComponent(str))); + return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64'); }; const batchId: string = 'mermaid-batch-' + Cypress.env('CYPRESS_COMMIT') || Date.now().toString(); From fff3acd0648902f939a50cdb77871c213c264b76 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 18 Jul 2023 21:55:44 +0530 Subject: [PATCH 233/263] Verify release-version on push to release or master --- .github/workflows/build-docs.yml | 8 ++++++ .github/workflows/publish-docs.yml | 13 --------- packages/mermaid/package.json | 1 + .../scripts/update-release-version.mts | 27 ++++++++++++++++--- 4 files changed, 32 insertions(+), 17 deletions(-) diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml index b25ff89cc7..152b177ae9 100644 --- a/.github/workflows/build-docs.yml +++ b/.github/workflows/build-docs.yml @@ -1,6 +1,10 @@ name: Build Vitepress docs on: + push: + branches: + - master + - release/* pull_request: merge_group: @@ -25,5 +29,9 @@ jobs: - name: Install Packages run: pnpm install --frozen-lockfile + - name: Verify release verion + if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/heads/release')) }} + run: pnpm --filter mermaid run docs:verify-version + - name: Run Build run: pnpm --filter mermaid run docs:build:vitepress diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml index d66d61a26f..f63e587502 100644 --- a/.github/workflows/publish-docs.yml +++ b/.github/workflows/publish-docs.yml @@ -36,19 +36,6 @@ jobs: - name: Install Packages run: pnpm install --frozen-lockfile - - name: Update release verion - run: | - pnpm --filter mermaid run docs:release-version - pnpm --filter mermaid run docs:build - - - name: Commit changes - uses: EndBug/add-and-commit@v9 - with: - add: '["docs", "packages/mermaid/src/docs"]' - author_name: ${{ github.actor }} - author_email: ${{ github.actor }}@users.noreply.github.com - message: 'chore: Update MERMAID_RELEASE_VERSION in docs' - - name: Setup Pages uses: actions/configure-pages@v3 diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index fd5a459a02..cf0979d48f 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -34,6 +34,7 @@ "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress", "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"", "docs:release-version": "ts-node-esm scripts/update-release-version.mts", + "docs:verify-version": "ts-node-esm scripts/update-release-version.mts --verify", "types:build-config": "ts-node-esm --transpileOnly scripts/create-types-from-json-schema.mts", "types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify", "release": "pnpm build", diff --git a/packages/mermaid/scripts/update-release-version.mts b/packages/mermaid/scripts/update-release-version.mts index edd2017b92..82fa6442a7 100644 --- a/packages/mermaid/scripts/update-release-version.mts +++ b/packages/mermaid/scripts/update-release-version.mts @@ -15,20 +15,39 @@ import { } from '../src/docs.mjs'; import { writeFile } from 'fs/promises'; +const verifyOnly: boolean = process.argv.includes('--verify'); +const versionPlaceholder = ''; + const main = async () => { const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**'); const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]); mdFileGlobs.push('!**/community/development.md'); const mdFiles = await getFilesFromGlobs(mdFileGlobs); mdFiles.sort(); + const mdFilesWithPlaceholder: string[] = []; for (const mdFile of mdFiles) { const content = readSyncedUTF8file(mdFile); - const updatedContent = content.replace(//g, MERMAID_RELEASE_VERSION); - if (content !== updatedContent) { - await writeFile(mdFile, updatedContent); - console.log(`Updated MERMAID_RELEASE_VERSION in ${mdFile}`); + if (content.includes(versionPlaceholder)) { + mdFilesWithPlaceholder.push(mdFile); } } + + if (mdFilesWithPlaceholder.length === 0) { + return; + } + + if (verifyOnly) { + console.log( + `${mdFilesWithPlaceholder.length} file(s) were found with the placeholder ${versionPlaceholder}. Run \`pnpm --filter mermaid docs:release-version\` to update them.` + ); + process.exit(1); + } + + for (const mdFile of mdFilesWithPlaceholder) { + const content = readSyncedUTF8file(mdFile); + const newContent = content.replace(versionPlaceholder, MERMAID_RELEASE_VERSION); + await writeFile(mdFile, newContent); + } }; void main(); From 483385b2f680fff318f4c9e7c16d7b799917fffc Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 18 Jul 2023 21:59:00 +0530 Subject: [PATCH 234/263] Update PR template --- .github/pull_request_template.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 3574c35997..82ca5fd5c2 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -13,6 +13,6 @@ Describe the way your implementation works or what design decisions you made if Make sure you - [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) -- [ ] :computer: have added unit/e2e tests (if appropriate) -- [ ] :notebook: have added documentation (if appropriate) +- [ ] :computer: have added necessary unit/e2e tests. +- [ ] :notebook: have added documentation. Make sure `MERMAID_RELEASE_VERSION` is used for all new features. - [ ] :bookmark: targeted `develop` branch From 3fcb0715925860680eef34e874232567ffebaa45 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 18 Jul 2023 22:06:43 +0530 Subject: [PATCH 235/263] Move docs.cli to scripts --- .vscode/launch.json | 2 +- packages/mermaid/package.json | 10 +++++----- packages/mermaid/{src => scripts}/docs.cli.mts | 0 packages/mermaid/{src => scripts}/docs.mts | 0 packages/mermaid/{src => scripts}/docs.spec.ts | 0 packages/mermaid/scripts/update-release-version.mts | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) rename packages/mermaid/{src => scripts}/docs.cli.mts (100%) rename packages/mermaid/{src => scripts}/docs.mts (100%) rename packages/mermaid/{src => scripts}/docs.spec.ts (100%) diff --git a/.vscode/launch.json b/.vscode/launch.json index 01ed070465..dc5ec94a10 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -17,7 +17,7 @@ "name": "Docs generation", "type": "node", "request": "launch", - "args": ["src/docs.cli.mts"], + "args": ["scripts/docs.cli.mts"], "runtimeArgs": ["--loader", "ts-node/esm"], "cwd": "${workspaceRoot}/packages/mermaid", "skipFiles": ["/**", "**/node_modules/**"], diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index cf0979d48f..c2e0d98344 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -25,12 +25,12 @@ "scripts": { "clean": "rimraf dist", "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup", - "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.cli.mts", - "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.cli.mts --verify", - "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts", + "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm scripts/docs.cli.mts", + "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm scripts/docs.cli.mts --verify", + "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts", "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing", - "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.cli.mts --watch --vitepress\"", - "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.cli.mts --watch --vitepress\"", + "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm scripts/docs.cli.mts --watch --vitepress\"", + "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm scripts/docs.cli.mts --watch --vitepress\"", "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress", "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"", "docs:release-version": "ts-node-esm scripts/update-release-version.mts", diff --git a/packages/mermaid/src/docs.cli.mts b/packages/mermaid/scripts/docs.cli.mts similarity index 100% rename from packages/mermaid/src/docs.cli.mts rename to packages/mermaid/scripts/docs.cli.mts diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/scripts/docs.mts similarity index 100% rename from packages/mermaid/src/docs.mts rename to packages/mermaid/scripts/docs.mts diff --git a/packages/mermaid/src/docs.spec.ts b/packages/mermaid/scripts/docs.spec.ts similarity index 100% rename from packages/mermaid/src/docs.spec.ts rename to packages/mermaid/scripts/docs.spec.ts diff --git a/packages/mermaid/scripts/update-release-version.mts b/packages/mermaid/scripts/update-release-version.mts index 82fa6442a7..7f292f21b2 100644 --- a/packages/mermaid/scripts/update-release-version.mts +++ b/packages/mermaid/scripts/update-release-version.mts @@ -12,7 +12,7 @@ import { SOURCE_DOCS_DIR, readSyncedUTF8file, MERMAID_RELEASE_VERSION, -} from '../src/docs.mjs'; +} from './docs.mjs'; import { writeFile } from 'fs/promises'; const verifyOnly: boolean = process.argv.includes('--verify'); From 863d1bfd4d383a535a8f1504de4f54ce4610bbbb Mon Sep 17 00:00:00 2001 From: Sibin Thomas Date: Wed, 19 Jul 2023 20:21:15 +0530 Subject: [PATCH 236/263] removed BT and added TB --- packages/mermaid/src/diagrams/git/parser/gitGraph.jison | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison index c0aa3d2d9a..9ff5623f83 100644 --- a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison +++ b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison @@ -51,7 +51,6 @@ cherry\-pick(?=\s|$) return 'CHERRY_PICK'; // "reset" return 'RESET'; checkout(?=\s|$) return 'CHECKOUT'; "LR" return 'DIR'; -"BT" return 'DIR'; "TB" return 'DIR'; ":" return ':'; "^" return 'CARET' From d81e4fabd57e4ab2193ef12f70f25898a92189f8 Mon Sep 17 00:00:00 2001 From: Sibin Thomas Date: Wed, 19 Jul 2023 20:22:29 +0530 Subject: [PATCH 237/263] positioned tags, tilted commit labels and fixed some bugs --- .../src/diagrams/git/gitGraphRenderer.js | 81 +++++++++++++++---- 1 file changed, 65 insertions(+), 16 deletions(-) diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js index 01b787ca33..c50f11cefa 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js @@ -254,22 +254,35 @@ const drawCommits = (svg, commits, modifyGraph) => { if (dir === 'TB') { labelBkg + .attr('x', x - (bbox.width + 4 * px + 5)) + .attr('y', y - 12); + text .attr('x', x - (bbox.width + 4 * px)) - .attr('y', y - 5); - text.attr('x', x - (bbox.width + 4 * px)); - text.attr('y', y + bbox.height - 5); + .attr('y', y + bbox.height - 12); } if (dir !== 'TB') { text.attr('x', pos + 10 - bbox.width / 2); } - if (gitGraphConfig.rotateCommitLabel && dir !== 'TB') { - let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5; - let r_y = 10 + (bbox.width / 25) * 8.5; - wrapper.attr( - 'transform', - 'translate(' + r_x + ', ' + r_y + ') rotate(' + -45 + ', ' + pos + ', ' + y + ')' - ); + if (gitGraphConfig.rotateCommitLabel) { + if (dir === 'TB') + { + text.attr( + 'transform', + 'rotate(' + -45 + ', ' + x + ', ' + y + ')' + ); + labelBkg.attr( + 'transform', + 'rotate(' + -45 + ', ' + x + ', ' + y + ')' + ); + } else { + let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5; + let r_y = 10 + (bbox.width / 25) * 8.5; + wrapper.attr( + 'transform', + 'translate(' + r_x + ', ' + r_y + ') rotate(' + -45 + ', ' + pos + ', ' + y + ')' + ); + } } } if (commit.tag) { @@ -302,6 +315,31 @@ const drawCommits = (svg, commits, modifyGraph) => { .attr('cy', ly) .attr('r', 1.5) .attr('class', 'tag-hole'); + + if (dir === 'TB') + { + rect + .attr('class', 'tag-label-bkg') + .attr( + 'points', + ` + ${x},${pos + py} + ${x},${pos - py} + ${x + 10},${pos - h2 - py} + ${x + 10 + tagBbox.width + px},${pos - h2 - py} + ${x + 10 + tagBbox.width + px},${pos + h2 + py} + ${x + 10},${pos + h2 + py}` + ) + .attr('transform', 'translate(12,12) rotate(45, '+ x + ',' + pos +')'); + hole + .attr('cx', x + px/2) + .attr('cy', pos) + .attr('transform', 'translate(12,12) rotate(45, '+ x + ',' + pos +')'); + tag + .attr('x', x+5) + .attr('y', pos+3) + .attr('transform', 'translate(14,14) rotate(45, '+ x + ',' + pos +')'); + } } } pos += 50; @@ -428,19 +466,20 @@ const drawArrow = (svg, commit1, commit2, allCommits) => { } if (p1.x > p2.x) { arc = 'A 20 20, 0, 0, 0,'; + arc2 = 'A 20 20, 0, 0, 1,'; radius = 20; offset = 20; // Arrows going up take the color from the source branch colorClassNum = branchPos[commit1.branch].index; - lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${ + lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y-radius} ${arc2} ${p1.x-offset} ${p2.y} L ${ p2.x } ${p2.y}`; } if (p1.x === p2.x) { colorClassNum = branchPos[commit1.branch].index; - lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${ + lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${p2.y + radius} L ${ p2.x } ${p2.y}`; } @@ -588,15 +627,25 @@ export const draw = function (txt, id, ver, diagObj) { allCommitsDict = diagObj.db.getCommits(); const branches = diagObj.db.getBranchesAsObjArray(); dir = diagObj.db.getDirection(); - - // Position branches vertically + const diagram = select(`[id="${id}"]`); + // Position branches let pos = 0; branches.forEach((branch, index) => { + const labelElement = drawText(branch.name); + const g = diagram.append('g'); + const branchLabel = g.insert('g').attr('class', 'branchLabel'); + const label = branchLabel.insert('g').attr('class', 'label branch-label'); + label.node().appendChild(labelElement); + let bbox = labelElement.getBBox(); + branchPos[branch.name] = { pos, index }; - pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0); + pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0) + ((dir === 'TB') ? bbox.width/2 : 0); + label.remove(); + branchLabel.remove(); + g.remove(); }); - const diagram = select(`[id="${id}"]`); + drawCommits(diagram, allCommitsDict, false); if (gitGraphConfig.showBranches) { From 52a4f8f077852dee9415ed5d9566f2581d50eccb Mon Sep 17 00:00:00 2001 From: Sibin Thomas Date: Wed, 19 Jul 2023 20:22:59 +0530 Subject: [PATCH 238/263] added tests for vertical branches --- .../integration/rendering/gitGraph.spec.js | 332 ++++++++++++++++++ 1 file changed, 332 insertions(+) diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index 43f91a983e..58e827135f 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -329,6 +329,338 @@ title: simple gitGraph --- gitGraph commit id: "1-abcdefg" +`, + {} + ); + }); + it('15: should render a simple gitgraph with commit on main branch | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "1" + commit id: "2" + commit id: "3" + `, + {} + ); + }); + it('16: should render a simple gitgraph with commit on main branch with Id | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "One" + commit id: "Two" + commit id: "Three" + `, + {} + ); + }); + it('17: should render a simple gitgraph with different commitTypes on main branch | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "Normal Commit" + commit id: "Reverse Commit" type: REVERSE + commit id: "Hightlight Commit" type: HIGHLIGHT + `, + {} + ); + }); + it('18: should render a simple gitgraph with tags commitTypes on main branch | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "Normal Commit with tag" tag: "v1.0.0" + commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1" + commit id: "Hightlight Commit" type: HIGHLIGHT tag: "8.8.4" + `, + {} + ); + }); + it('19: should render a simple gitgraph with two branches | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "1" + commit id: "2" + branch develop + checkout develop + commit id: "3" + commit id: "4" + checkout main + commit id: "5" + commit id: "6" + `, + {} + ); + }); + it('20: should render a simple gitgraph with two branches and merge commit | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "1" + commit id: "2" + branch develop + checkout develop + commit id: "3" + commit id: "4" + checkout main + merge develop + commit id: "5" + commit id: "6" + `, + {} + ); + }); + it('21: should render a simple gitgraph with three branches and tagged merge commit | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "1" + commit id: "2" + branch nice_feature + checkout nice_feature + commit id: "3" + checkout main + commit id: "4" + checkout nice_feature + branch very_nice_feature + checkout very_nice_feature + commit id: "5" + checkout main + commit id: "6" + checkout nice_feature + commit id: "7" + checkout main + merge nice_feature id: "12345" tag: "my merge commit" + checkout very_nice_feature + commit id: "8" + checkout main + commit id: "9" + `, + {} + ); + }); + it('22: should render a simple gitgraph with more than 8 branchs & overriding variables | Vertical Branch', () => { + imgSnapshotTest( + `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { + 'gitBranchLabel0': '#ffffff', + 'gitBranchLabel1': '#ffffff', + 'gitBranchLabel2': '#ffffff', + 'gitBranchLabel3': '#ffffff', + 'gitBranchLabel4': '#ffffff', + 'gitBranchLabel5': '#ffffff', + 'gitBranchLabel6': '#ffffff', + 'gitBranchLabel7': '#ffffff', + } } }%% + gitGraph TB: + checkout main + branch branch1 + branch branch2 + branch branch3 + branch branch4 + branch branch5 + branch branch6 + branch branch7 + branch branch8 + branch branch9 + checkout branch1 + commit id: "1" + `, + {} + ); + }); + it('23: should render a simple gitgraph with rotated labels | Vertical Branch', () => { + imgSnapshotTest( + `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': { + 'rotateCommitLabel': true + } } }%% + gitGraph TB: + commit id: "75f7219e83b321cd3fdde7dcf83bc7c1000a6828" + commit id: "0db4784daf82736dec4569e0dc92980d328c1f2e" + commit id: "7067e9973f9eaa6cd4a4b723c506d1eab598e83e" + commit id: "66972321ad6c199013b5b31f03b3a86fa3f9817d" + `, + {} + ); + }); + it('24: should render a simple gitgraph with horizontal labels | Vertical Branch', () => { + imgSnapshotTest( + `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': { + 'rotateCommitLabel': false + } } }%% + gitGraph TB: + commit id: "Alpha" + commit id: "Beta" + commit id: "Gamma" + commit id: "Delta" + `, + {} + ); + }); + it('25: should render a simple gitgraph with cherry pick commit | Vertical Branch', () => { + imgSnapshotTest( + ` + gitGraph TB: + commit id: "ZERO" + branch develop + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + checkout main + commit id:"TWO" + cherry-pick id:"A" + commit id:"THREE" + checkout develop + commit id:"C" + `, + {} + ); + }); + it('26: should render a gitgraph with cherry pick commit with custom tag | Vertical Branch', () => { + imgSnapshotTest( + ` + gitGraph TB: + commit id: "ZERO" + branch develop + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + checkout main + commit id:"TWO" + cherry-pick id:"A" tag: "snapshot" + commit id:"THREE" + checkout develop + commit id:"C" + `, + {} + ); + }); + it('27: should render a gitgraph with cherry pick commit with no tag | Vertical Branch', () => { + imgSnapshotTest( + ` + gitGraph TB: + commit id: "ZERO" + branch develop + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + checkout main + commit id:"TWO" + cherry-pick id:"A" tag: "" + commit id:"THREE" + checkout develop + commit id:"C" + `, + {} + ); + }); + it('28: should render a simple gitgraph with two cherry pick commit | Vertical Branch', () => { + imgSnapshotTest( + ` + gitGraph TB: + commit id: "ZERO" + branch develop + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + branch featureA + commit id:"FIX" + commit id: "FIX-2" + checkout main + commit id:"TWO" + cherry-pick id:"A" + commit id:"THREE" + cherry-pick id:"FIX" + checkout develop + commit id:"C" + merge featureA + `, + {} + ); + }); + it('29: should render commits for more than 8 branches | Vertical Branch', () => { + imgSnapshotTest( + ` + gitGraph TB: + checkout main + %% Make sure to manually set the ID of all commits, for consistent visual tests + commit id: "1-abcdefg" + checkout main + branch branch1 + commit id: "2-abcdefg" + checkout main + merge branch1 + branch branch2 + commit id: "3-abcdefg" + checkout main + merge branch2 + branch branch3 + commit id: "4-abcdefg" + checkout main + merge branch3 + branch branch4 + commit id: "5-abcdefg" + checkout main + merge branch4 + branch branch5 + commit id: "6-abcdefg" + checkout main + merge branch5 + branch branch6 + commit id: "7-abcdefg" + checkout main + merge branch6 + branch branch7 + commit id: "8-abcdefg" + checkout main + merge branch7 + branch branch8 + commit id: "9-abcdefg" + checkout main + merge branch8 + branch branch9 + commit id: "10-abcdefg" + `, + {} + ); + }); + it('30: should render a simple gitgraph with three branches,custom merge commit id,tag,type | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "1" + commit id: "2" + branch nice_feature + checkout nice_feature + commit id: "3" + checkout main + commit id: "4" + checkout nice_feature + branch very_nice_feature + checkout very_nice_feature + commit id: "5" + checkout main + commit id: "6" + checkout nice_feature + commit id: "7" + checkout main + merge nice_feature id: "customID" tag: "customTag" type: REVERSE + checkout very_nice_feature + commit id: "8" + checkout main + commit id: "9" + `, + {} + ); + }); + it('31: should render a simple gitgraph with a title | Vertical Branch', () => { + imgSnapshotTest( + `--- +title: simple gitGraph +--- +gitGraph TB: + commit id: "1-abcdefg" `, {} ); From cba5b5a7e339ab91fc0a3a68da2a5184357a5acc Mon Sep 17 00:00:00 2001 From: Sibin Thomas Date: Wed, 19 Jul 2023 21:55:24 +0530 Subject: [PATCH 239/263] ran preetier --- .../src/diagrams/git/gitGraphRenderer.js | 97 +++++++------------ 1 file changed, 36 insertions(+), 61 deletions(-) diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js index c50f11cefa..2b88cfe7ef 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js @@ -253,28 +253,17 @@ const drawCommits = (svg, commits, modifyGraph) => { .attr('height', bbox.height + 2 * py); if (dir === 'TB') { - labelBkg - .attr('x', x - (bbox.width + 4 * px + 5)) - .attr('y', y - 12); - text - .attr('x', x - (bbox.width + 4 * px)) - .attr('y', y + bbox.height - 12); + labelBkg.attr('x', x - (bbox.width + 4 * px + 5)).attr('y', y - 12); + text.attr('x', x - (bbox.width + 4 * px)).attr('y', y + bbox.height - 12); } if (dir !== 'TB') { text.attr('x', pos + 10 - bbox.width / 2); } if (gitGraphConfig.rotateCommitLabel) { - if (dir === 'TB') - { - text.attr( - 'transform', - 'rotate(' + -45 + ', ' + x + ', ' + y + ')' - ); - labelBkg.attr( - 'transform', - 'rotate(' + -45 + ', ' + x + ', ' + y + ')' - ); + if (dir === 'TB') { + text.attr('transform', 'rotate(' + -45 + ', ' + x + ', ' + y + ')'); + labelBkg.attr('transform', 'rotate(' + -45 + ', ' + x + ', ' + y + ')'); } else { let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5; let r_y = 10 + (bbox.width / 25) * 8.5; @@ -316,13 +305,12 @@ const drawCommits = (svg, commits, modifyGraph) => { .attr('r', 1.5) .attr('class', 'tag-hole'); - if (dir === 'TB') - { + if (dir === 'TB') { rect .attr('class', 'tag-label-bkg') .attr( - 'points', - ` + 'points', + ` ${x},${pos + py} ${x},${pos - py} ${x + 10},${pos - h2 - py} @@ -330,15 +318,15 @@ const drawCommits = (svg, commits, modifyGraph) => { ${x + 10 + tagBbox.width + px},${pos + h2 + py} ${x + 10},${pos + h2 + py}` ) - .attr('transform', 'translate(12,12) rotate(45, '+ x + ',' + pos +')'); + .attr('transform', 'translate(12,12) rotate(45, ' + x + ',' + pos + ')'); hole - .attr('cx', x + px/2) + .attr('cx', x + px / 2) .attr('cy', pos) - .attr('transform', 'translate(12,12) rotate(45, '+ x + ',' + pos +')'); + .attr('transform', 'translate(12,12) rotate(45, ' + x + ',' + pos + ')'); tag - .attr('x', x+5) - .attr('y', pos+3) - .attr('transform', 'translate(14,14) rotate(45, '+ x + ',' + pos +')'); + .attr('x', x + 5) + .attr('y', pos + 3) + .attr('transform', 'translate(14,14) rotate(45, ' + x + ',' + pos + ')'); } } } @@ -429,19 +417,19 @@ const drawArrow = (svg, commit1, commit2, allCommits) => { if (dir === 'TB') { if (p1.x < p2.x) { - lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${p1.y + offset} L ${ - lineX - } ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${ + p1.y + offset + } L ${lineX} ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`; } else { - lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${ - lineX - } ${p1.y + offset} L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${ + p1.y + offset + } L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; } } else { if (p1.y < p2.y) { - lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${p1.x + offset} ${lineY} L ${ - p2.x - radius - } ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${ + p1.x + offset + } ${lineY} L ${p2.x - radius} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`; } else { lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${ p1.x + offset @@ -449,8 +437,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => { } } } else { - if (dir === 'TB') - { + if (dir === 'TB') { if (p1.x < p2.x) { arc = 'A 20 20, 0, 0, 0,'; arc2 = 'A 20 20, 0, 0, 1,'; @@ -460,9 +447,9 @@ const drawArrow = (svg, commit1, commit2, allCommits) => { // Figure out the color of the arrow,arrows going down take the color from the destination branch colorClassNum = branchPos[commit2.branch].index; - lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${p1.y + offset} L ${ - p2.x - } ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${ + p1.y + offset + } L ${p2.x} ${p2.y}`; } if (p1.x > p2.x) { arc = 'A 20 20, 0, 0, 0,'; @@ -472,16 +459,16 @@ const drawArrow = (svg, commit1, commit2, allCommits) => { // Arrows going up take the color from the source branch colorClassNum = branchPos[commit1.branch].index; - lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y-radius} ${arc2} ${p1.x-offset} ${p2.y} L ${ - p2.x - } ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${ + p2.y + } L ${p2.x} ${p2.y}`; } if (p1.x === p2.x) { colorClassNum = branchPos[commit1.branch].index; - lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${p2.y + radius} L ${ - p2.x - } ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${ + p2.y + radius + } L ${p2.x} ${p2.y}`; } } else { if (p1.y < p2.y) { @@ -592,18 +579,8 @@ const drawBranches = (svg, branches) => { ')' ); if (dir === 'TB') { - bkg - .attr('x', pos - bbox.width/2 - 10) - .attr('y', 0); - label - .attr( - 'transform', - 'translate(' + - (pos - bbox.width/2 - 5) + - ', ' + - (0) + - ')' - ); + bkg.attr('x', pos - bbox.width / 2 - 10).attr('y', 0); + label.attr('transform', 'translate(' + (pos - bbox.width / 2 - 5) + ', ' + 0 + ')'); } if (dir !== 'TB') { bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')'); @@ -639,14 +616,12 @@ export const draw = function (txt, id, ver, diagObj) { let bbox = labelElement.getBBox(); branchPos[branch.name] = { pos, index }; - pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0) + ((dir === 'TB') ? bbox.width/2 : 0); + pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0) + (dir === 'TB' ? bbox.width / 2 : 0); label.remove(); branchLabel.remove(); g.remove(); }); - - drawCommits(diagram, allCommitsDict, false); if (gitGraphConfig.showBranches) { drawBranches(diagram, branches); From e25faeee4c234e97b270f97467af8b78777dfeed Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 19 Jul 2023 22:36:55 +0530 Subject: [PATCH 240/263] Update cypress/helpers/util.ts --- cypress/helpers/util.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts index b042c3ed4f..170b3fc3ae 100644 --- a/cypress/helpers/util.ts +++ b/cypress/helpers/util.ts @@ -2,7 +2,7 @@ import { Buffer } from 'buffer'; import type { MermaidConfig } from '../../packages/mermaid/src/config.type.js'; -type CypressConfig = { +interface CypressConfig { listUrl?: boolean; listId?: string; name?: string; From 8cd8714aaf9c1b344ce3359fd192536525303df6 Mon Sep 17 00:00:00 2001 From: Yokozuna59 Date: Wed, 19 Jul 2023 23:45:02 +0300 Subject: [PATCH 241/263] run pnpm lint:fix --- cypress/helpers/util.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts index 170b3fc3ae..ea217b4fc2 100644 --- a/cypress/helpers/util.ts +++ b/cypress/helpers/util.ts @@ -6,7 +6,7 @@ interface CypressConfig { listUrl?: boolean; listId?: string; name?: string; -}; +} type CypressMermaidConfig = MermaidConfig & CypressConfig; interface CodeObject { From 4d2d790cc8de03adde3fb5b820e1da7f4fd29bae Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Wed, 19 Jul 2023 23:36:13 +0100 Subject: [PATCH 242/263] build(docs): handle YAML edgecases in markdown Our current method of adding a entry using `+=` is not safe in YAML, since it's valid to make a YAML object entirely in JSON, see https://github.com/mermaid-js/mermaid/pull/4640#discussion_r1265133463 We're already using `js-yaml` elsewhere in this file, so we may as well use it for parsing/stringifying. Reported-by: Remco Haszing --- packages/mermaid/src/docs.mts | 29 +++++++++++++++-------------- packages/mermaid/src/docs.spec.ts | 4 +++- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts index 227449a0ab..f62c44f075 100644 --- a/packages/mermaid/src/docs.mts +++ b/packages/mermaid/src/docs.mts @@ -30,10 +30,19 @@ * @todo Write a test file for this. (Will need to be able to deal .mts file. Jest has trouble with * it.) */ +// @ts-ignore: we're importing internal jsonschema2md functions +import { default as schemaLoader } from '@adobe/jsonschema2md/lib/schemaProxy.js'; +// @ts-ignore: we're importing internal jsonschema2md functions +import { default as traverseSchemas } from '@adobe/jsonschema2md/lib/traverseSchema.js'; +// @ts-ignore: we're importing internal jsonschema2md functions +import { default as buildMarkdownFromSchema } from '@adobe/jsonschema2md/lib/markdownBuilder.js'; +// @ts-ignore: we're importing internal jsonschema2md functions +import { default as jsonSchemaReadmeBuilder } from '@adobe/jsonschema2md/lib/readmeBuilder.js'; import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync } from 'fs'; import { exec } from 'child_process'; import { globby } from 'globby'; import { JSDOM } from 'jsdom'; +import { dump, load, JSON_SCHEMA } from 'js-yaml'; import type { Code, ListItem, Root, Text, YAML } from 'mdast'; import { posix, dirname, relative, join } from 'path'; import prettier from 'prettier'; @@ -286,10 +295,12 @@ export function transformMarkdownAst({ astWithTransformedBlocks.children.unshift(yamlFrontMatter); } const filePathFromRoot = posix.join('packages/mermaid', originalFilename); - // TODO, should we replace this with proper YAML parsing? - yamlFrontMatter.value += `\neditLink: ${JSON.stringify( - `https://github.com/mermaid-js/mermaid/edit/develop/${filePathFromRoot}` - )}`; + yamlFrontMatter.value = dump({ + ...(load(yamlFrontMatter.value, { schema: JSON_SCHEMA }) as + | Record + | undefined), + editLink: `https://github.com/mermaid-js/mermaid/edit/develop/${filePathFromRoot}`, + }); } if (removeYAML) { @@ -346,16 +357,6 @@ const transformMarkdown = (file: string) => { copyTransformedContents(file, !verifyOnly, formatted); }; -import { load, JSON_SCHEMA } from 'js-yaml'; -// @ts-ignore: we're importing internal jsonschema2md functions -import { default as schemaLoader } from '@adobe/jsonschema2md/lib/schemaProxy.js'; -// @ts-ignore: we're importing internal jsonschema2md functions -import { default as traverseSchemas } from '@adobe/jsonschema2md/lib/traverseSchema.js'; -// @ts-ignore: we're importing internal jsonschema2md functions -import { default as buildMarkdownFromSchema } from '@adobe/jsonschema2md/lib/markdownBuilder.js'; -// @ts-ignore: we're importing internal jsonschema2md functions -import { default as jsonSchemaReadmeBuilder } from '@adobe/jsonschema2md/lib/readmeBuilder.js'; - /** * Transforms the given JSON Schema into Markdown documentation */ diff --git a/packages/mermaid/src/docs.spec.ts b/packages/mermaid/src/docs.spec.ts index bea833fd97..c84bc1bac9 100644 --- a/packages/mermaid/src/docs.spec.ts +++ b/packages/mermaid/src/docs.spec.ts @@ -119,7 +119,9 @@ This Markdown should be kept. ).toString(); expect(withYaml).toEqual(`--- title: Flowcharts Syntax -editLink: "https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/example-input-filename.md" +editLink: >- + https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/example-input-filename.md + --- This Markdown should be kept. From a171903088b08c2d7748ce2b9b34f7805a5cf3ea Mon Sep 17 00:00:00 2001 From: Sibin Thomas Date: Thu, 20 Jul 2023 13:15:05 +0530 Subject: [PATCH 243/263] added tests for overlapping commits --- .../integration/rendering/gitGraph.spec.js | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index 58e827135f..f2d8f44b84 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -665,4 +665,40 @@ gitGraph TB: {} ); }); + it('32: should render a simple gitgraph overlapping commits | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id:"s1" + commit id:"s2" + branch branch1 + commit id:"s3" + commit id:"s4" + checkout main + commit id:"s5" + checkout branch1 + commit id:"s6" + commit id:"s7" + merge main + `, + {} + ); + }); + it('33: should render a simple gitgraph overlapping commits', () => { + imgSnapshotTest( + `gitGraph + commit id:"s1" + commit id:"s2" + branch branch1 + commit id:"s3" + commit id:"s4" + checkout main + commit id:"s5" + checkout branch1 + commit id:"s6" + commit id:"s7" + merge main + `, + {} + ); + }); }); From 478d3501889d5bc8d0ff9c1536c579ebd1453939 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 20 Jul 2023 20:48:12 +0530 Subject: [PATCH 244/263] Update .github/pull_request_template.md Co-authored-by: Alois Klink --- .github/pull_request_template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 82ca5fd5c2..ff34d24fd0 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -14,5 +14,5 @@ Make sure you - [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) - [ ] :computer: have added necessary unit/e2e tests. -- [ ] :notebook: have added documentation. Make sure `MERMAID_RELEASE_VERSION` is used for all new features. +- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/community/development.md#3-update-documentation) is used for all new features. - [ ] :bookmark: targeted `develop` branch From 8ae35c13823900cc66afee8e336f36ec797e48b2 Mon Sep 17 00:00:00 2001 From: Sibin Thomas Date: Thu, 20 Jul 2023 21:27:34 +0530 Subject: [PATCH 245/263] updated documentation for vertical branches --- packages/mermaid/src/docs/syntax/gitgraph.md | 44 ++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md index f1930bb275..a9b99e6847 100644 --- a/packages/mermaid/src/docs/syntax/gitgraph.md +++ b/packages/mermaid/src/docs/syntax/gitgraph.md @@ -511,6 +511,50 @@ NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch Here, we have changed the default main branch name to `MetroLine1`. +## Orientation + +In Mermaid, the default orientation is Left to Right. The branches are lined vertically. + +Usage example: + +```mermaid-example + gitGraph + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + +Sometimes we may want to change the orientation. Currently, Mermaid supports two orientations: **Left to Right**(default) and **Top to Bottom**. + +In order to change the orientation from top to bottom i.e. branches lined horizontally, you need to add `TB` along with `gitGraph`. + +Usage example: + +```mermaid-example + gitGraph TB: + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + ## Themes Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md). From df89b92e2c6d353357887dce7677a2315bad65f2 Mon Sep 17 00:00:00 2001 From: Sibin Thomas Date: Thu, 20 Jul 2023 21:45:47 +0530 Subject: [PATCH 246/263] ran docs:build for documentation --- docs/syntax/gitgraph.md | 76 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md index 964fe3886c..e93071851a 100644 --- a/docs/syntax/gitgraph.md +++ b/docs/syntax/gitgraph.md @@ -825,6 +825,82 @@ NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch Here, we have changed the default main branch name to `MetroLine1`. +## Orientation + +In Mermaid, the default orientation is Left to Right. The branches are lined vertically. + +Usage example: + +```mermaid-example + gitGraph + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + +```mermaid + gitGraph + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + +Sometimes we may want to change the orientation. Currently, Mermaid supports two orientations: **Left to Right**(default) and **Top to Bottom**. + +In order to change the orientation from top to bottom i.e. branches lined horizontally, you need to add `TB` along with `gitGraph`. + +Usage example: + +```mermaid-example + gitGraph TB: + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + +```mermaid + gitGraph TB: + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + ## Themes Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md). From cd0da4e060e376d389dac621352617f47dde639a Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 20 Jul 2023 17:44:05 +0000 Subject: [PATCH 247/263] build(deps-dev): bump word-wrap from 1.2.3 to 1.2.4 Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.4. - [Release notes](https://github.com/jonschlinkert/word-wrap/releases) - [Commits](https://github.com/jonschlinkert/word-wrap/compare/1.2.3...1.2.4) --- updated-dependencies: - dependency-name: word-wrap dependency-type: indirect ... Signed-off-by: dependabot[bot] --- pnpm-lock.yaml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f258400a6e..db8f628cff 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12469,7 +12469,7 @@ packages: levn: 0.3.0 prelude-ls: 1.1.2 type-check: 0.3.2 - word-wrap: 1.2.3 + word-wrap: 1.2.4 dev: true /optionator@0.9.1: @@ -12481,7 +12481,7 @@ packages: levn: 0.4.1 prelude-ls: 1.2.1 type-check: 0.4.0 - word-wrap: 1.2.3 + word-wrap: 1.2.4 dev: true /ospath@1.2.2: @@ -16073,8 +16073,8 @@ packages: resolution: {integrity: sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==} dev: true - /word-wrap@1.2.3: - resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==} + /word-wrap@1.2.4: + resolution: {integrity: sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==} engines: {node: '>=0.10.0'} dev: true From e4699ef02a4c2b7d6bc01ca8028d59d8018d357e Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 24 Jul 2023 00:18:49 +0000 Subject: [PATCH 248/263] chore(deps): update all patch dependencies --- docker-compose.yml | 2 +- package.json | 2 +- packages/mermaid/src/docs/package.json | 2 +- pnpm-lock.yaml | 84 +++++++++++++++++--------- 4 files changed, 57 insertions(+), 33 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 1037b51021..c6c6d88854 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -17,7 +17,7 @@ services: - 9000:9000 - 3333:3333 cypress: - image: cypress/included:12.17.1 + image: cypress/included:12.17.2 stdin_open: true tty: true working_dir: /mermaid diff --git a/package.json b/package.json index 9cbdcdb1e4..3b63628366 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.7", + "packageManager": "pnpm@8.6.10", "keywords": [ "diagram", "markdown", diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index 4529a76228..64f24fe506 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -31,7 +31,7 @@ "unplugin-vue-components": "^0.25.0", "vite": "^4.3.3", "vite-plugin-pwa": "^0.16.0", - "vitepress": "1.0.0-beta.5", + "vitepress": "1.0.0-beta.6", "workbox-window": "^7.0.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index db8f628cff..9f37261f6b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -466,8 +466,8 @@ importers: specifier: ^0.16.0 version: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0) vitepress: - specifier: 1.0.0-beta.5 - version: 1.0.0-beta.5(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0) + specifier: 1.0.0-beta.6 + version: 1.0.0-beta.6(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0) workbox-window: specifier: ^7.0.0 version: 7.0.0 @@ -3833,7 +3833,7 @@ packages: engines: {node: '>=6.0.0'} dependencies: '@jridgewell/set-array': 1.1.2 - '@jridgewell/sourcemap-codec': 1.4.14 + '@jridgewell/sourcemap-codec': 1.4.15 '@jridgewell/trace-mapping': 0.3.17 /@jridgewell/resolve-uri@3.1.0: @@ -3856,7 +3856,6 @@ packages: /@jridgewell/sourcemap-codec@1.4.15: resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} - dev: true /@jridgewell/trace-mapping@0.3.17: resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==} @@ -3868,7 +3867,7 @@ packages: resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==} dependencies: '@jridgewell/resolve-uri': 3.1.0 - '@jridgewell/sourcemap-codec': 1.4.14 + '@jridgewell/sourcemap-codec': 1.4.15 /@jsdevtools/ono@7.1.3: resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==} @@ -4981,7 +4980,7 @@ packages: colorette: 2.0.20 consola: 3.1.0 fast-glob: 3.2.12 - magic-string: 0.30.0 + magic-string: 0.30.1 pathe: 1.1.1 perfect-debounce: 1.0.0 transitivePeerDependencies: @@ -5023,7 +5022,7 @@ packages: '@unocss/core': 0.53.0 css-tree: 2.3.1 fast-glob: 3.2.12 - magic-string: 0.30.0 + magic-string: 0.30.1 postcss: 8.4.24 dev: true @@ -5138,7 +5137,7 @@ packages: '@unocss/transformer-directives': 0.53.0 chokidar: 3.5.3 fast-glob: 3.2.12 - magic-string: 0.30.0 + magic-string: 0.30.1 vite: 4.3.3(@types/node@18.16.0) transitivePeerDependencies: - rollup @@ -5174,14 +5173,14 @@ packages: vue: 3.3.4 dev: true - /@vitejs/plugin-vue@4.2.3(vite@4.4.0-beta.3)(vue@3.3.4): + /@vitejs/plugin-vue@4.2.3(vite@4.4.6)(vue@3.3.4): resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: vite: ^4.0.0 vue: ^3.2.25 dependencies: - vite: 4.4.0-beta.3(@types/node@18.16.0) + vite: 4.4.6(@types/node@18.16.0) vue: 3.3.4 dev: true @@ -5322,7 +5321,7 @@ packages: '@vue/reactivity-transform': 3.3.4 '@vue/shared': 3.3.4 estree-walker: 2.0.2 - magic-string: 0.30.0 + magic-string: 0.30.1 postcss: 8.4.24 source-map-js: 1.0.2 @@ -5357,7 +5356,7 @@ packages: '@vue/compiler-core': 3.3.4 '@vue/shared': 3.3.4 estree-walker: 2.0.2 - magic-string: 0.30.0 + magic-string: 0.30.1 /@vue/reactivity@3.2.47: resolution: {integrity: sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==} @@ -5455,7 +5454,7 @@ packages: - vue dev: true - /@vueuse/integrations@10.2.1(focus-trap@7.4.3)(vue@3.3.4): + /@vueuse/integrations@10.2.1(focus-trap@7.5.2)(vue@3.3.4): resolution: {integrity: sha512-FDP5lni+z9FjHE9H3xuvwSjoRV9U8jmDvJpmHPCBjUgPGYRynwb60eHWXCFJXLUtb4gSIHy0e+iaEbrKdalCkQ==} peerDependencies: async-validator: '*' @@ -5498,7 +5497,7 @@ packages: dependencies: '@vueuse/core': 10.2.1(vue@3.3.4) '@vueuse/shared': 10.2.1(vue@3.3.4) - focus-trap: 7.4.3 + focus-trap: 7.5.2 vue-demi: 0.14.5(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' @@ -5520,7 +5519,7 @@ packages: /@vueuse/shared@10.1.0(vue@3.2.47): resolution: {integrity: sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==} dependencies: - vue-demi: 0.14.0(vue@3.2.47) + vue-demi: 0.14.5(vue@3.2.47) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -5955,6 +5954,7 @@ packages: /amdefine@1.0.1: resolution: {integrity: sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==} engines: {node: '>=0.4.2'} + requiresBuild: true dev: true optional: true @@ -9173,10 +9173,10 @@ packages: resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==} dev: true - /focus-trap@7.4.3: - resolution: {integrity: sha512-BgSSbK4GPnS2VbtZ50VtOv1Sti6DIkj3+LkVjiWMNjLeAp1SH1UlLx3ULu/DCu4vq5R4/uvTm+zrvsMsuYmGLg==} + /focus-trap@7.5.2: + resolution: {integrity: sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==} dependencies: - tabbable: 6.1.2 + tabbable: 6.2.0 dev: true /follow-redirects@1.15.2(debug@4.3.4): @@ -11479,13 +11479,13 @@ packages: engines: {node: '>=12'} dependencies: '@jridgewell/sourcemap-codec': 1.4.14 + dev: true /magic-string@0.30.1: resolution: {integrity: sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==} engines: {node: '>=12'} dependencies: '@jridgewell/sourcemap-codec': 1.4.15 - dev: true /make-dir@3.1.0: resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==} @@ -12973,6 +12973,15 @@ packages: picocolors: 1.0.0 source-map-js: 1.0.2 + /postcss@8.4.27: + resolution: {integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.6 + picocolors: 1.0.0 + source-map-js: 1.0.2 + dev: true + /preact@10.11.0: resolution: {integrity: sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==} dev: true @@ -14394,8 +14403,8 @@ packages: tslib: 2.5.0 dev: true - /tabbable@6.1.2: - resolution: {integrity: sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ==} + /tabbable@6.2.0: + resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} dev: true /tailwindcss@3.3.2(ts-node@10.9.1): @@ -15405,8 +15414,8 @@ packages: fsevents: 2.3.2 dev: true - /vite@4.4.0-beta.3(@types/node@18.16.0): - resolution: {integrity: sha512-IC/thYTvArOFRJ4qvvudnu4KKZOVc+gduS3I9OfC5SbP/Rf4kkP7z6Of2QpKeOSVqwIK24khW6VOUmVD/0yzSQ==} + /vite@4.4.6(@types/node@18.16.0): + resolution: {integrity: sha512-EY6Mm8vJ++S3D4tNAckaZfw3JwG3wa794Vt70M6cNJ6NxT87yhq7EC8Rcap3ahyHdo8AhCmV9PTk+vG1HiYn1A==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true peerDependencies: @@ -15435,7 +15444,7 @@ packages: dependencies: '@types/node': 18.16.0 esbuild: 0.18.11 - postcss: 8.4.24 + postcss: 8.4.27 rollup: 3.26.0 optionalDependencies: fsevents: 2.3.2 @@ -15487,22 +15496,22 @@ packages: - terser dev: true - /vitepress@1.0.0-beta.5(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0): - resolution: {integrity: sha512-/RjqqRsSEKkzF6HhK5e5Ij+bZ7ETb9jNCRRgIMm10gJ+ZLC3D1OqkE465lEqCeJUgt2HZ6jmWjDqIBfrJSpv7w==} + /vitepress@1.0.0-beta.6(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0): + resolution: {integrity: sha512-xK/ulKgQpKZVbvlL4+/vW49VG7ySi5nmSoKUNH1G4kM+Cj9JwYM+PDJO7jSJROv8zW99G0ise+maDYnaLlbGBQ==} hasBin: true dependencies: '@docsearch/css': 3.5.1 '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0) - '@vitejs/plugin-vue': 4.2.3(vite@4.4.0-beta.3)(vue@3.3.4) + '@vitejs/plugin-vue': 4.2.3(vite@4.4.6)(vue@3.3.4) '@vue/devtools-api': 6.5.0 '@vueuse/core': 10.2.1(vue@3.3.4) - '@vueuse/integrations': 10.2.1(focus-trap@7.4.3)(vue@3.3.4) + '@vueuse/integrations': 10.2.1(focus-trap@7.5.2)(vue@3.3.4) body-scroll-lock: 4.0.0-beta.0 - focus-trap: 7.4.3 + focus-trap: 7.5.2 mark.js: 8.11.1 minisearch: 6.1.0 shiki: 0.14.3 - vite: 4.4.0-beta.3(@types/node@18.16.0) + vite: 4.4.6(@types/node@18.16.0) vue: 3.3.4 transitivePeerDependencies: - '@algolia/client-search' @@ -15654,6 +15663,21 @@ packages: vue: 3.2.47 dev: false + /vue-demi@0.14.5(vue@3.2.47): + resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + peerDependencies: + '@vue/composition-api': ^1.0.0-rc.1 + vue: ^3.0.0-0 || ^2.6.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + dependencies: + vue: 3.2.47 + dev: false + /vue-demi@0.14.5(vue@3.3.4): resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==} engines: {node: '>=12'} From 45400240d40198032775cf73eacfc622e5be2116 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 24 Jul 2023 00:19:12 +0000 Subject: [PATCH 249/263] chore(deps): update all minor dependencies --- docker-compose.yml | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 1037b51021..2d08e050e3 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,7 +1,7 @@ version: '3.9' services: mermaid: - image: node:18.16.1-alpine3.18 + image: node:18.17.0-alpine3.18 stdin_open: true tty: true working_dir: /mermaid diff --git a/package.json b/package.json index 9cbdcdb1e4..d6cd3cef6f 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "vitest": "^0.33.0" }, "volta": { - "node": "18.16.1" + "node": "18.17.0" }, "nyc": { "report-dir": "coverage/cypress" From 3e3e784fd90e807d32ae10cb0d9e472e26cb22c6 Mon Sep 17 00:00:00 2001 From: kgilbert78 Date: Mon, 24 Jul 2023 13:24:33 -0400 Subject: [PATCH 250/263] added Typora to integrations list --- cSpell.json | 1 + docs/ecosystem/integrations.md | 1 + packages/mermaid/src/docs/ecosystem/integrations.md | 1 + 3 files changed, 3 insertions(+) diff --git a/cSpell.json b/cSpell.json index abcfa03830..af7a9ca46f 100644 --- a/cSpell.json +++ b/cSpell.json @@ -136,6 +136,7 @@ "tsdoc", "tuleap", "tylerlong", + "typora", "ugge", "unist", "unocss", diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations.md index 896a23c56a..c0e8f96c85 100644 --- a/docs/ecosystem/integrations.md +++ b/docs/ecosystem/integrations.md @@ -187,6 +187,7 @@ They also serve as proof of concept, for the variety of things that can be built - [mdbook](https://rust-lang.github.io/mdBook/index.html) - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid) - [Quarto](https://quarto.org/) +- [Typora](https://typora.io/) ([Native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid)) ## Browser Extensions diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations.md index e64cf1a13b..4935fc96ad 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations.md +++ b/packages/mermaid/src/docs/ecosystem/integrations.md @@ -181,6 +181,7 @@ They also serve as proof of concept, for the variety of things that can be built - [mdbook](https://rust-lang.github.io/mdBook/index.html) - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid) - [Quarto](https://quarto.org/) +- [Typora](https://typora.io/) ([Native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid)) ## Browser Extensions From 68305fea9ecbba269e3fc94e24b2b52e8e0ae402 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 25 Jul 2023 18:56:58 +0530 Subject: [PATCH 251/263] Fix lint --- packages/mermaid/src/rendering-util/splitText.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/rendering-util/splitText.spec.ts b/packages/mermaid/src/rendering-util/splitText.spec.ts index 017fe9c6a8..bc7df08dd1 100644 --- a/packages/mermaid/src/rendering-util/splitText.spec.ts +++ b/packages/mermaid/src/rendering-util/splitText.spec.ts @@ -64,7 +64,7 @@ describe('when Intl.Segmenter is available', () => { /** * Intl.Segmenter is not supported in Firefox yet, - * see https://bugzilla.mozilla.org/show_bug.cgi?id=1423593 + * see https://bugzilla.mozilla.org/show_bug.cgi?id=1423593 */ describe('when Intl.Segmenter is not available', () => { beforeAll(() => { From 4ea1227e29a321eec0f8d1557b181fe756b3ddcc Mon Sep 17 00:00:00 2001 From: sidharthv96 Date: Tue, 25 Jul 2023 13:33:37 +0000 Subject: [PATCH 252/263] Update docs --- docs/config/usage.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/usage.md b/docs/config/usage.md index 4203e3a13a..7246fe318a 100644 --- a/docs/config/usage.md +++ b/docs/config/usage.md @@ -228,7 +228,7 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm The main idea of the API is to be able to call a render function with the graph definition as a string. The render function will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site. -The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console. +The example below shows an example of how this could be used. The example just logs the resulting SVG to the JavaScript console. ```html