Update Requirement diagram to unified renderer

docs/syntax/requirementDiagram.md

@@ -84,6 +84,37 @@ element user_defined_name {
 }
 ```
 
+### Markdown Formatting
+
+In places where user defined text is possible (like names, requirement text, element docref, etc.), you can:
+
+- Surround the text in quotes: `"example text"`
+- Use markdown formatting inside quotes: `"**bold text** and *italics*"`
+
+Example:
+
+```mermaid-example
+requirementDiagram
+
+requirement "__test_req__" {
+    id: 1
+    text: "*italicized text* **bold text**"
+    risk: high
+    verifymethod: test
+}
+```
+
+```mermaid
+requirementDiagram
+
+requirement "__test_req__" {
+    id: 1
+    text: "*italicized text* **bold text**"
+    risk: high
+    verifymethod: test
+}
+```
+
 ### Relationship
 
 Relationships are comprised of a source node, destination node, and relationship type.
@@ -250,4 +281,215 @@ This example uses all features of the diagram.
     test_req <- copies - test_entity2
 ```
 
+## Direction
+
+The diagram can be rendered in different directions using the `direction` statement. Valid values are:
+
+- `TB` - Top to Bottom (default)
+- `BT` - Bottom to Top
+- `LR` - Left to Right
+- `RL` - Right to Left
+
+Example:
+
+```mermaid-example
+requirementDiagram
+
+direction LR
+
+requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+}
+
+element test_entity {
+    type: simulation
+}
+
+test_entity - satisfies -> test_req
+```
+
+```mermaid
+requirementDiagram
+
+direction LR
+
+requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+}
+
+element test_entity {
+    type: simulation
+}
+
+test_entity - satisfies -> test_req
+```
+
+## Styling
+
+Requirements and elements can be styled using direct styling or classes. As a rule of thumb, when applying styles or classes, it accepts a list of requirement or element names and a list of class names allowing multiple assignments at a time (The only exception is the shorthand syntax `:::` which can assign multiple classes but only to one requirement or element at a time).
+
+### Direct Styling
+
+Use the `style` keyword to apply CSS styles directly:
+
+```mermaid-example
+requirementDiagram
+
+requirement test_req {
+    id: 1
+    text: styling example
+    risk: low
+    verifymethod: test
+}
+
+element test_entity {
+    type: simulation
+}
+
+style test_req fill:#ffa,stroke:#000, color: green
+style test_entity fill:#f9f,stroke:#333, color: blue
+```
+
+```mermaid
+requirementDiagram
+
+requirement test_req {
+    id: 1
+    text: styling example
+    risk: low
+    verifymethod: test
+}
+
+element test_entity {
+    type: simulation
+}
+
+style test_req fill:#ffa,stroke:#000, color: green
+style test_entity fill:#f9f,stroke:#333, color: blue
+```
+
+### Class Definitions
+
+Define reusable styles using `classDef`:
+
+```mermaid-example
+requirementDiagram
+
+requirement test_req {
+    id: 1
+    text: "class styling example"
+    risk: low
+    verifymethod: test
+}
+
+element test_entity {
+    type: simulation
+}
+
+classDef important fill:#f96,stroke:#333,stroke-width:4px
+classDef test fill:#ffa,stroke:#000
+```
+
+```mermaid
+requirementDiagram
+
+requirement test_req {
+    id: 1
+    text: "class styling example"
+    risk: low
+    verifymethod: test
+}
+
+element test_entity {
+    type: simulation
+}
+
+classDef important fill:#f96,stroke:#333,stroke-width:4px
+classDef test fill:#ffa,stroke:#000
+```
+
+### Default class
+
+If a class is named default it will be applied to all nodes. Specific styles and classes should be defined afterwards to override the applied default styling.
+
+```
+classDef default fill:#f9f,stroke:#333,stroke-width:4px;
+```
+
+### Applying Classes
+
+Classes can be applied in two ways:
+
+1. Using the `class` keyword:
+
+```
+class test_req,test_entity important
+```
+
+2. Using the shorthand syntax with `:::` either during the definition or afterwards:
+
+```
+requirement test_req:::important {
+    id: 1
+    text: class styling example
+    risk: low
+    verifymethod: test
+}
+```
+
+```
+element test_elem {
+}
+
+test_elem:::myClass
+```
+
+### Combined Example
+
+```mermaid-example
+requirementDiagram
+
+requirement test_req:::important {
+    id: 1
+    text: "class styling example"
+    risk: low
+    verifymethod: test
+}
+
+element test_entity {
+    type: simulation
+}
+
+classDef important font-weight:bold
+
+class test_entity important
+style test_entity fill:#f9f,stroke:#333
+```
+
+```mermaid
+requirementDiagram
+
+requirement test_req:::important {
+    id: 1
+    text: "class styling example"
+    risk: low
+    verifymethod: test
+}
+
+element test_entity {
+    type: simulation
+}
+
+classDef important font-weight:bold
+
+class test_entity important
+style test_entity fill:#f9f,stroke:#333
+```
+
 <!--- cspell:ignore reqs --->

packages/mermaid/src/diagrams/requirement/parser/requirementDiagram.jison

@@ -9,6 +9,7 @@
 %x string
 %x token
 %x unqString
+%x style
 %x acc_title
 %x acc_descr
 %x acc_descr_multiline
@@ -22,6 +23,10 @@ accDescr\s*":"\s*                                               { this.begin("ac
 accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
 <acc_descr_multiline>[\}]                       { this.popState(); }
 <acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
+.*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';
 (\r?\n)+                               return 'NEWLINE';
 \s+                                    /* skip all whitespace */
 \#[^\n]*                               /* skip comments */
@@ -32,6 +37,7 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 
 "{"                         return 'STRUCT_START';
 "}"                         return 'STRUCT_STOP';
+":"{3}                       return 'STYLE_SEPARATOR';
 ":"                         return 'COLONSEP';
 
 "id"                        return 'ID';
@@ -68,6 +74,20 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 "type"          return 'TYPE';
 "docref"        return 'DOCREF';
 
+"style"                         { this.begin("style"); return 'STYLE'; }
+<style>\w+                          return 'ALPHA';
+<style>":" return 'COLON';
+<style>";" return 'SEMICOLON';
+<style>"%" return 'PERCENT';
+<style>"-" return 'MINUS';
+<style>"#" return 'BRKT';
+<style>" "                             /* skip spaces */
+<style>["] { this.begin("string"); }
+<style>\n { this.popState(); }
+
+"classDef" { this.begin("style"); return 'CLASSDEF'; }
+"class" { this.begin("style"); return 'CLASS'; }
+
 "<-"        return 'END_ARROW_L';
 "->"        {return 'END_ARROW_R';}
 "-"         {return 'LINE';}
@@ -76,7 +96,11 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <string>["]         { this.popState(); }
 <string>[^"]*       { return "qString"; }
 
-[\w][^\r\n\{\<\>\-\=]*                { yytext = yytext.trim(); return 'unqString';}
+[\w][^:,\r\n\{\<\>\-\=]*                { yytext = yytext.trim(); return 'unqString';}
+
+<*>\w+                          return 'ALPHA';
+<*>[0-9]+                       return 'NUM';
+<*>","                             return 'COMMA';
 
 /lex
 
@@ -101,11 +125,28 @@ diagram
   | elementDef diagram
   | relationshipDef diagram
   | directive diagram
-  | NEWLINE diagram;
+  | direction diagram
+  | styleStatement diagram
+  | classDefStatement diagram
+  | classStatement diagram
+  | NEWLINE diagram
+  ;
+
+direction
+    : direction_tb
+    { yy.setDirection('TB');}
+    | direction_bt
+    { yy.setDirection('BT');}
+    | direction_rl
+    { yy.setDirection('RL');}
+    | direction_lr
+    { yy.setDirection('LR');}
+    ;
 
 requirementDef
-  : requirementType requirementName STRUCT_START NEWLINE requirementBody
-    { yy.addRequirement($2, $1) };
+  : requirementType requirementName STRUCT_START NEWLINE requirementBody { yy.addRequirement($2, $1) }
+  | requirementType requirementName STYLE_SEPARATOR idList STRUCT_START NEWLINE requirementBody { yy.addRequirement($2, $1); yy.setClass([$2], $4); }
+  ;
 
 requirementBody
   : ID COLONSEP id NEWLINE requirementBody
@@ -149,8 +190,9 @@ verifyType
     { $$=yy.VerifyType.VERIFY_TEST;};
 
 elementDef
-  : ELEMENT elementName STRUCT_START NEWLINE elementBody
-    { yy.addElement($2) };
+  : ELEMENT elementName STRUCT_START NEWLINE elementBody { yy.addElement($2) }
+  | ELEMENT elementName STYLE_SEPARATOR idList STRUCT_START NEWLINE elementBody { yy.addElement($2); yy.setClass([$2], $4); }
+  ;
 
 elementBody
   : TYPE COLONSEP type NEWLINE elementBody
@@ -182,6 +224,38 @@ relationship
   | TRACES
       { $$=yy.Relationships.TRACES;};
 
+classDefStatement
+  : CLASSDEF idList stylesOpt {$$ = $CLASSDEF;yy.defineClass($idList,$stylesOpt);}
+  ;
+
+classStatement
+    : CLASS idList idList                            {yy.setClass($2, $3);}
+    | id STYLE_SEPARATOR idList {yy.setClass([$1], $3);}
+    ;
+
+idList
+    : ALPHA { $$ = [$ALPHA]; }
+    | idList COMMA ALPHA = { $$ = $idList.concat([$ALPHA]); }
+    | id { $$ = [$id]; }
+    | idList COMMA id = { $$ = $idList.concat([$id]); }
+    ;
+
+styleStatement
+  : STYLE idList stylesOpt                              {$$ = $STYLE;yy.setCssStyle($2,$stylesOpt);}
+  ;
+
+stylesOpt
+    : style {$$ = [$style]}
+    | stylesOpt COMMA style {$stylesOpt.push($style);$$ = $stylesOpt;}
+    ;
+
+style
+    : styleComponent
+    | style styleComponent  {$$ = $style + $styleComponent;}
+    ;
+
+styleComponent: ALPHA | NUM | COLON | UNIT | SPACE | BRKT | PCT | MINUS | LABEL | SEMICOLON;
+
 
 requirementName: unqString | qString;
 id : unqString | qString;