Merge remote-tracking branch 'origin/develop' into pr/emersonbottero/3678

* origin/develop:
  docs(git): Regenerate
  docs(git): Add a quoted branch name example
  fix(git): Support quoted branch names
  Ensure example code and rendered output are synced
  Fill inheritance arrow with background color

README.md

@@ -164,7 +164,6 @@ Class01 <|-- AveryLongClass : Cool
 Class09 --> C2 : Where am I?
 Class09 --* C3
 Class09 --|> Class07
-note "I love this diagram!\nDo you love it?"
 Class07 : equals()
 Class07 : Object[] elementData
 Class01 : size()
@@ -175,7 +174,6 @@ class Class10 {
   int id
   size()
 }
-note for Class10 "Cool class\nI said it's very cool class!"
 ```
 
 ### State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]

docs/syntax/gitgraph.md

@@ -169,7 +169,7 @@ In this example, we have given custom tags to the commits. Also, see how we have
 
 ### Create a new branch
 
-In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. Usage example: `branch develop`
+In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. A branch name that could be confused for a keyword must be quoted within `""`. Usage examples: `branch develop`, `branch "cherry-pick"`
 
 When Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a new branch and checking it out in Git world.
 

packages/mermaid/src/diagrams/class/styles.js

@@ -109,13 +109,13 @@ g.classGroup line {
 }
 
 #extensionStart, .extension {
-  fill: ${options.lineColor} !important;
+  fill: ${options.mainBkg} !important;
   stroke: ${options.lineColor} !important;
   stroke-width: 1;
 }
 
 #extensionEnd, .extension {
-  fill: ${options.lineColor} !important;
+  fill: ${options.mainBkg} !important;
   stroke: ${options.lineColor} !important;
   stroke-width: 1;
 }

packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js

@@ -334,6 +334,31 @@ describe('when parsing a gitGraph', function () {
     expect(Object.keys(parser.yy.getBranches()).length).toBe(2);
   });
 
+  it('should allow quoted branch names', function () {
+    const str = `gitGraph:
+    commit
+    branch "branch"
+    checkout "branch"
+    commit
+    checkout main
+    merge "branch"
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    expect(Object.keys(commits).length).toBe(3);
+    expect(parser.yy.getCurrentBranch()).toBe('main');
+    expect(parser.yy.getDirection()).toBe('LR');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(2);
+    const commit1 = Object.keys(commits)[0];
+    const commit2 = Object.keys(commits)[1];
+    const commit3 = Object.keys(commits)[2];
+    expect(commits[commit1].branch).toBe('main');
+    expect(commits[commit2].branch).toBe('branch');
+    expect(commits[commit3].branch).toBe('main');
+    expect(parser.yy.getBranchesAsObjArray()).toStrictEqual([{ name: 'main' }, { name: 'branch' }]);
+  });
+
   it('should allow _-./ characters in branch names', function () {
     const str = `gitGraph:
     commit

packages/mermaid/src/diagrams/git/parser/gitGraph.jison

@@ -109,12 +109,12 @@ statement
     | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
     | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }  | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
     | branchStatement
-    | CHECKOUT ID {yy.checkout($2)}
+    | CHECKOUT ref {yy.checkout($2)}
     // | RESET reset_arg {yy.reset($2)}
     ;
 branchStatement
-    : BRANCH ID {yy.branch($2)}
-    | BRANCH ID ORDER NUM {yy.branch($2, $4)}
+    : BRANCH ref {yy.branch($2)}
+    | BRANCH ref ORDER NUM {yy.branch($2, $4)}
     ;
 
 cherryPickStatement
@@ -126,22 +126,22 @@ cherryPickStatement
     ;
 
 mergeStatement
-    : MERGE ID {yy.merge($2,'','','')}
-    | MERGE ID COMMIT_ID STR {yy.merge($2, $4,'','')}
-    | MERGE ID COMMIT_TYPE commitType  {yy.merge($2,'', $4,'')}
-    | MERGE ID COMMIT_TAG STR {yy.merge($2, '','',$4)}
-    | MERGE ID COMMIT_TAG STR COMMIT_ID STR {yy.merge($2, $6,'', $4)}
-    | MERGE ID COMMIT_TAG STR COMMIT_TYPE commitType {yy.merge($2, '',$6, $4)}
-    | MERGE ID COMMIT_TYPE commitType COMMIT_TAG STR {yy.merge($2, '',$4, $6)}
-    | MERGE ID COMMIT_ID STR COMMIT_TYPE commitType {yy.merge($2, $4, $6, '')}
-    | MERGE ID COMMIT_ID STR COMMIT_TAG STR {yy.merge($2, $4, '', $6)}
-    | MERGE ID COMMIT_TYPE commitType COMMIT_ID STR {yy.merge($2, $6,$4, '')}
-    | MERGE ID COMMIT_ID STR COMMIT_TYPE commitType COMMIT_TAG STR {yy.merge($2, $4, $6, $8)}
-    | MERGE ID COMMIT_TYPE commitType COMMIT_TAG STR COMMIT_ID STR {yy.merge($2, $8, $4, $6)}
-    | MERGE ID COMMIT_ID STR COMMIT_TAG STR COMMIT_TYPE commitType {yy.merge($2, $4, $8, $6)}
-    | MERGE ID COMMIT_TYPE commitType COMMIT_ID STR COMMIT_TAG STR {yy.merge($2, $6, $4, $8)}
-    | MERGE ID COMMIT_TAG STR COMMIT_TYPE commitType COMMIT_ID STR {yy.merge($2, $8, $6, $4)}
-    | MERGE ID COMMIT_TAG STR COMMIT_ID STR COMMIT_TYPE commitType {yy.merge($2, $6, $8, $4)}
+    : MERGE ref {yy.merge($2,'','','')}
+    | MERGE ref COMMIT_ID STR {yy.merge($2, $4,'','')}
+    | MERGE ref COMMIT_TYPE commitType  {yy.merge($2,'', $4,'')}
+    | MERGE ref COMMIT_TAG STR {yy.merge($2, '','',$4)}
+    | MERGE ref COMMIT_TAG STR COMMIT_ID STR {yy.merge($2, $6,'', $4)}
+    | MERGE ref COMMIT_TAG STR COMMIT_TYPE commitType {yy.merge($2, '',$6, $4)}
+    | MERGE ref COMMIT_TYPE commitType COMMIT_TAG STR {yy.merge($2, '',$4, $6)}
+    | MERGE ref COMMIT_ID STR COMMIT_TYPE commitType {yy.merge($2, $4, $6, '')}
+    | MERGE ref COMMIT_ID STR COMMIT_TAG STR {yy.merge($2, $4, '', $6)}
+    | MERGE ref COMMIT_TYPE commitType COMMIT_ID STR {yy.merge($2, $6,$4, '')}
+    | MERGE ref COMMIT_ID STR COMMIT_TYPE commitType COMMIT_TAG STR {yy.merge($2, $4, $6, $8)}
+    | MERGE ref COMMIT_TYPE commitType COMMIT_TAG STR COMMIT_ID STR {yy.merge($2, $8, $4, $6)}
+    | MERGE ref COMMIT_ID STR COMMIT_TAG STR COMMIT_TYPE commitType {yy.merge($2, $4, $8, $6)}
+    | MERGE ref COMMIT_TYPE commitType COMMIT_ID STR COMMIT_TAG STR {yy.merge($2, $6, $4, $8)}
+    | MERGE ref COMMIT_TAG STR COMMIT_TYPE commitType COMMIT_ID STR {yy.merge($2, $8, $6, $4)}
+    | MERGE ref COMMIT_TAG STR COMMIT_ID STR COMMIT_TYPE commitType {yy.merge($2, $6, $8, $4)}
     ;
 
 commitStatement
@@ -261,6 +261,11 @@ closeDirective
   : close_directive { yy.parseDirective('}%%', 'close_directive', 'gitGraph'); }
   ;
 
+ref
+    : ID
+    | STR
+    ;
+
 eol
   : NL
   | ';'

packages/mermaid/src/docs/syntax/gitgraph.md

@@ -114,7 +114,7 @@ In this example, we have given custom tags to the commits. Also, see how we have
 
 ### Create a new branch
 
-In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. Usage example: `branch develop`
+In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. A branch name that could be confused for a keyword must be quoted within `""`. Usage examples: `branch develop`, `branch "cherry-pick"`
 
 When Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a new branch and checking it out in Git world.