marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-03 14:19:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Parsing of block arrows with directions, creating a dedicated new node for this.

Browse Source
This commit is contained in:
Knut Sveidqvist
2023-10-26 22:01:44 +02:00
parent f3f25c7874
commit 7198fe55a9
6 changed files with 84 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
cypress/platform/knsv2.html
View File

@@ -62,24 +62,23 @@
</style> </style>
</head> </head>
<body> <body>
<pre id="diagram" class="mermaid2">
block-beta
block
id3("Wider then")
end
</pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta
blockArrowId<["Label"]>(right, down)
</pre>
<pre id="diagram" class="mermaid2">
block-beta block-beta
columns 3 columns 3
space:2 space:3
id1("Wider then") ida idb idc
space:9 id1 id2
space blockArrowId<["Label"]>(right)
id2{{"Wider then"}} blockArrowId2<["Label"]>(left)
space blockArrowId3<["Label"]>(up)
id3("Wider then") blockArrowId4<["Label"]>(down)
space blockArrowId5<["Label"]>(x)
space blockArrowId6<["Label"]>(y)
blockArrowId6<["Label"]>(x, down)
</pre> </pre>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
block-beta block-beta

27
packages/mermaid/src/dagre-wrapper/nodes.js
View File

@@ -95,6 +95,32 @@ const hexagon = async (parent, node) => {
return shapeSvg; return shapeSvg;
}; };
const block_arrow = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const f = 2;
const h = bbox.height + node.padding;
const m = h / f;
const w = bbox.width + 2 * m + node.padding;
const points = [
{ x: m, y: 0 },
{ x: w - m, y: 0 },
{ x: w, y: -h / 2 },
{ x: w - m, y: -h },
{ x: m, y: -h },
{ x: 0, y: -h / 2 },
];
const hex = insertPolygonShape(shapeSvg, w, h, points);
hex.attr('style', node.style);
updateNodeBounds(node, hex);
node.intersect = function (point) {
return intersect.polygon(node, points, point);
};
return shapeSvg;
};
const rect_left_inv_arrow = async (parent, node) => { const rect_left_inv_arrow = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true); const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
@@ -1016,6 +1042,7 @@ const shapes = {
doublecircle, doublecircle,
stadium, stadium,
hexagon, hexagon,
block_arrow,
rect_left_inv_arrow, rect_left_inv_arrow,
lean_right, lean_right,
lean_left, lean_left,

2
packages/mermaid/src/diagrams/block/blockDB.ts
View File

@@ -99,6 +99,8 @@ export function typeStr2Type(typeStr: string) {
return 'trapezoid'; return 'trapezoid';
case '[\\/]': case '[\\/]':
return 'inv_trapezoid'; return 'inv_trapezoid';
case '<[]>':
return 'block_arrow';
default: default:
return 'square'; return 'square';
} }

3
packages/mermaid/src/diagrams/block/blockTypes.ts
View File

@@ -7,6 +7,8 @@ export interface BlockConfig extends BaseDiagramConfig {
export type BlockType = export type BlockType =
| 'column-setting' | 'column-setting'
| 'round' | 'round'
| 'block_arrow'
| 'space'
| 'square' | 'square'
| 'diamond' | 'diamond'
| 'hexagon' | 'hexagon'
@@ -40,6 +42,7 @@ export interface Block {
node?: any; node?: any;
columns?: number; // | TBlockColumnsDefaultValue; columns?: number; // | TBlockColumnsDefaultValue;
classes?: string[]; classes?: string[];
directions?: string[];
} }
export interface Link { export interface Link {

61
packages/mermaid/src/diagrams/block/parser/block.jison
View File

@@ -16,6 +16,8 @@
%x space %x space
%x md_string %x md_string
%x NODE %x NODE
%x BLOCK_ARROW
%x ARROW_DIR
// as per section 6.1 of RFC 2234 [2] // as per section 6.1 of RFC 2234 [2]
@@ -42,11 +44,10 @@ CRLF \u000D\u000A
<md_string>[^`"]+ { return "MD_STR";} <md_string>[^`"]+ { return "MD_STR";}
<md_string>[`]["] { this.popState();} <md_string>[`]["] { this.popState();}
["] this.pushState("string"); ["] this.pushState("string");
<string>["] this.popState(); <string>["] { log.debug('LEX: POPPING STR:', yytext);this.popState();}
<string>[^"]* return "STR"; <string>[^"]* { log.debug('LEX: STR ebd:', yytext); return "STR";}
space[:]\d+ { yytext = yytext.replace(/space\:/,'');yy.getLogger().info('SPACE NUM (LEX)', yytext); return 'SPACE_BLOCK'; } space[:]\d+ { yytext = yytext.replace(/space\:/,'');yy.getLogger().info('SPACE NUM (LEX)', yytext); return 'SPACE_BLOCK'; }
space { yytext = '1'; yy.getLogger().info('COLUMNS (LEX)', yytext); return 'SPACE_BLOCK'; } space { yytext = '1'; yy.getLogger().info('COLUMNS (LEX)', yytext); return 'SPACE_BLOCK'; }
<string>[^"]* return "STR";
"style" return 'STYLE'; "style" return 'STYLE';
"default" return 'DEFAULT'; "default" return 'DEFAULT';
"linkStyle" return 'LINKSTYLE'; "linkStyle" return 'LINKSTYLE';
@@ -68,15 +69,15 @@ accDescr\s*"{"\s* { this.pushState("acc_descr_mul
.*direction\s+LR[^\n]* return 'direction_lr'; .*direction\s+LR[^\n]* return 'direction_lr';
// Start of nodes with shapes and description // Start of nodes with shapes and description
"-)" { yy.getLogger().info('Lex: -)'); this.pushState('NODE');return 'NODE_DSTART'; } "-)" { yy.getLogger().info('Lexa: -)'); this.pushState('NODE');return 'NODE_DSTART'; }
"(-" { yy.getLogger().info('Lex: (-'); this.pushState('NODE');return 'NODE_DSTART'; } "(-" { yy.getLogger().info('Lexa: (-'); this.pushState('NODE');return 'NODE_DSTART'; }
"))" { yy.getLogger().info('Lex: ))'); this.pushState('NODE');return 'NODE_DSTART'; } "))" { yy.getLogger().info('Lexa: ))'); this.pushState('NODE');return 'NODE_DSTART'; }
")" { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; } ")" { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
"((" { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; } "((" { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
"{{" { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; } "{{" { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
"(" { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; } "(" { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
"[" { yy.getLogger().info('Lex: ['); this.pushState('NODE');return 'NODE_DSTART'; } "[" { yy.getLogger().info('Lexa: ['); this.pushState('NODE');return 'NODE_DSTART'; }
"([" { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; } "([" { yy.getLogger().info('Lexa: (['); this.pushState('NODE');return 'NODE_DSTART'; }
"[[" { this.pushState('NODE');return 'NODE_DSTART'; } "[[" { this.pushState('NODE');return 'NODE_DSTART'; }
"[|" { this.pushState('NODE');return 'NODE_DSTART'; } "[|" { this.pushState('NODE');return 'NODE_DSTART'; }
"[(" { this.pushState('NODE');return 'NODE_DSTART'; } "[(" { this.pushState('NODE');return 'NODE_DSTART'; }
@@ -85,19 +86,23 @@ accDescr\s*"{"\s* { this.pushState("acc_descr_mul
"[/" { this.pushState('NODE');return 'NODE_DSTART'; } "[/" { this.pushState('NODE');return 'NODE_DSTART'; }
"[\\" { this.pushState('NODE');return 'NODE_DSTART'; } "[\\" { this.pushState('NODE');return 'NODE_DSTART'; }
"<[" { this.pushState('BLOCK_ARROW');log.debug('LEX ARR START');return 'BLOCK_ARROW_START'; }
[^\(\[\n\-\)\{\}]+ { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; } [^\(\[\n\-\)\{\}\s\<]+ { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
<<EOF>> { yy.getLogger().info('Lex: EOF', yytext);return 'EOF'; } <<EOF>> { yy.getLogger().info('Lex: EOF', yytext);return 'EOF'; }
// Handling of strings in node // Handling of strings in node
<BLOCK_ARROW>["][`] { this.pushState("md_string");}
<NODE>["][`] { this.pushState("md_string");} <NODE>["][`] { this.pushState("md_string");}
<md_string>[^`"]+ { return "NODE_DESCR";} <md_string>[^`"]+ { return "NODE_DESCR";}
<md_string>[`]["] { this.popState();} <md_string>[`]["] { this.popState();}
<NODE>["] { yy.getLogger().info('Lex: Starting string');this.pushState("string");} <NODE>["] { yy.getLogger().info('Lex: Starting string');this.pushState("string");}
<string>[^"]+ { yy.getLogger().info('Lex: NODE_DESCR:', yytext); return "NODE_DESCR";} <BLOCK_ARROW>["] { yy.getLogger().info('LEX ARR: Starting string');this.pushState("string");}
<string>["] {this.popState();} <string>[^"]+ { log.debug('LEX: NODE_DESCR:', yytext); return "NODE_DESCR";}
<string>["] {log.debug('LEX POPPING');this.popState();}
// Node end of shape // Node end of shape
<NODE>\]\> { this.popState();yy.getLogger().info('Lex: ]>'); return "NODE_DEND"; }
<NODE>[\)]\) { this.popState();yy.getLogger().info('Lex: ))'); return "NODE_DEND"; } <NODE>[\)]\) { this.popState();yy.getLogger().info('Lex: ))'); return "NODE_DEND"; }
<NODE>[\)] { this.popState();yy.getLogger().info('Lex: )'); return "NODE_DEND"; } <NODE>[\)] { this.popState();yy.getLogger().info('Lex: )'); return "NODE_DEND"; }
<NODE>[\]] { this.popState();yy.getLogger().info('Lex: ]'); return "NODE_DEND"; } <NODE>[\]] { this.popState();yy.getLogger().info('Lex: ]'); return "NODE_DEND"; }
@@ -111,6 +116,15 @@ accDescr\s*"{"\s* { this.pushState("acc_descr_mul
<NODE>"/]" { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; } <NODE>"/]" { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
<NODE>")]" { this.popState();yy.getLogger().info('Lex: )]'); return "NODE_DEND"; } <NODE>")]" { this.popState();yy.getLogger().info('Lex: )]'); return "NODE_DEND"; }
<BLOCK_ARROW>"]>"\s*"(" { log.debug('Lex: =>BAE'); this.pushState('ARROW_DIR'); }
<ARROW_DIR>","?right\s* { log.debug('Lex (right): dir:',yytext);return "DIR"; }
<ARROW_DIR>","?left\s* { log.debug('Lex (left):',yytext);return "DIR"; }
<ARROW_DIR>","?x\s* { log.debug('Lex (x):',yytext); return "DIR"; }
<ARROW_DIR>","?y\s* { log.debug('Lex (y):',yytext); return "DIR"; }
<ARROW_DIR>","?up\s* { log.debug('Lex (up):',yytext); return "DIR"; }
<ARROW_DIR>","?\s*down\s* { yytext = yytext.replace(/^,\s*/, ''); log.debug('Lex (down):',yytext); return "DIR"; }
<ARROW_DIR>")"\s* { yytext=']>';log.debug('Lex (ARROW_DIR end):',yytext);this.popState();this.popState();return "BLOCK_ARROW_END"; }
// Edges // Edges
\s*[xo<]?\-\-+[-xo>]\s* { yy.getLogger().info('Lex: LINK', '#'+yytext+'#'); return 'LINK'; } \s*[xo<]?\-\-+[-xo>]\s* { yy.getLogger().info('Lex: LINK', '#'+yytext+'#'); return 'LINK'; }
\s*[xo<]?\=\=+[=xo>]\s* { yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; } \s*[xo<]?\=\=+[=xo>]\s* { yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
@@ -174,16 +188,6 @@ statement
| SPACE_BLOCK | SPACE_BLOCK
{ const num=parseInt($1); const spaceId = yy.generateId(); $$ = { id: spaceId, type:'space', label:'', width: num, children: [] }} { const num=parseInt($1); const spaceId = yy.generateId(); $$ = { id: spaceId, type:'space', label:'', width: num, children: [] }}
| blockStatement | blockStatement
// SPACELIST node { yy.getLogger().info('Node: ',$2.id);yy.addNode($1.length, $2.id, $2.descr, $2.type); }
// | SPACELIST ICON { yy.getLogger().info('Icon: ',$2);yy.decorateNode({icon: $2}); }
// | SPACELIST CLASS { yy.decorateNode({class: $2}); }
// | SPACELINE { yy.getLogger().info('SPACELIST');}
// |
// node { yy.getLogger().info('Node: ',$1.id);yy.addNode(0, $1.id, $1.descr, $1.type); }
// | ICON { yy.decorateNode({icon: $1}); }
// | CLASS { yy.decorateNode({class: $1}); }
// // | SPACELIST
; ;
nodeStatement nodeStatement
@@ -200,7 +204,6 @@ blockStatement
| block document end { yy.getLogger().info('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:'', children: $2 }; } | block document end { yy.getLogger().info('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:'', children: $2 }; }
; ;
node node
: NODE_ID : NODE_ID
{ yy.getLogger().info("Rule: node (NODE_ID seperator): ", $1); $$ = { id: $1 }; } { yy.getLogger().info("Rule: node (NODE_ID seperator): ", $1); $$ = { id: $1 }; }
@@ -210,9 +213,15 @@ node
// { yy.getLogger().info("Rule: node (nodeShapeNLabel seperator): ", $1, $2, $3); } // { yy.getLogger().info("Rule: node (nodeShapeNLabel seperator): ", $1, $2, $3); }
; ;
dirList: DIR { yy.getLogger().info("Rule: dirList: ", $1); $$ = [$1]; }
| DIR dirList { yy.getLogger().info("Rule: dirList: ", $1, $2); $$ = [$1].concat($2); }
;
nodeShapeNLabel nodeShapeNLabel
: NODE_DSTART STR NODE_DEND : NODE_DSTART STR NODE_DEND
{ yy.getLogger().info("Rule: nodeShapeNLabel: ", $1, $2, $3); $$ = { typeStr: $1 + $3, label: $2 }; } { yy.getLogger().info("Rule: nodeShapeNLabel: ", $1, $2, $3); $$ = { typeStr: $1 + $3, label: $2 }; }
| BLOCK_ARROW_START STR dirList BLOCK_ARROW_END
{ yy.getLogger().info("Rule: BLOCK_ARROW nodeShapeNLabel: ", $1, $2, $3, $4); $$ = { typeStr: $1 + $4, label: $2, directions: $3}; }
; ;
%% %%

3
packages/mermaid/src/diagrams/block/renderHelpers.ts
View File

@@ -50,6 +50,9 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
case 'hexagon': case 'hexagon':
_shape = 'hexagon'; _shape = 'hexagon';
break; break;
case 'block_arrow':
_shape = 'block_arrow';
break;
case 'odd': case 'odd':
_shape = 'rect_left_inv_arrow'; _shape = 'rect_left_inv_arrow';
break; break;