marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

First take on JISON and parsing of the node shape data

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-07-19 11:16:02 +02:00
parent 15c85efd88
commit eae67a9696
5 changed files with 8249 additions and 10327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
cypress/platform/knsv2.html
View File

@@ -54,71 +54,49 @@
10px 10px;
background-repeat: repeat; */
}
.malware {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 150px;
background: red;
color: black;
display: flex;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
font-size: 72px;
}
/* tspan {
font-size: 6px !important;
} */
</style>
</head>
<body>
<pre id="diagram" class="mermaid">
flowchart
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
a_a --> c --> d_d --> c_c
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
class a_a apa;
click a_a "http://www.aftonbladet.se" "bookmark"
click c_c callback "new tooltip"
</pre
>
<pre id="diagram2" class="mermaid">
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
</pre>
<pre id="diagram3" class="mermaid">
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef ash color:red
class C ash
style C stroke:#00f, fill:black
</pre>
<pre id="diagram4" class="mermaid">
stateDiagram
A:::foo
B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
style C stroke:#00f, fill:black, color:white
flowchart
A --> D@{ shape: roundedRect
}@
</pre>
A --> D@{ shape: roundedRect, icon: car }@
D@{ shape: roundedRect }@ --> B
A@{
shape: hexagon,
icon: car
}@ --> B
</pre
>
<pre id="diagram4" class="mermaid">
flowchart
A{"This is a label"}@{
shape: document,
icon: car,
labelAlt: "This is another label
**bit**",
path: [1,2,3]
}@
D@{ shape: roundedRect, icon: car
}@
A --> B & D
A@{
label: "This is the final label {}"
icon: car
}@ --> B
A(This is a label)
</pre
>
<script type="module">
import mermaid from './mermaid.esm.mjs';
// import { layouts } from './mermaid-layout-elk.esm.mjs';
// mermaid.registerLayoutLoaders(layouts);
import { layouts } from './mermaid-layout-elk.esm.mjs';
mermaid.registerLayoutLoaders(layouts);
mermaid.parseError = function (err, hash) {
console.error('Mermaid error: ', err);
};
@@ -128,15 +106,18 @@ flowchart LR
mermaid.initialize({
// theme: 'base',
// handdrawnSeed: 12,
// look: 'handdrawn',
look: 'classic',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
'elk.nodePlacement.strategy': 'SIMPLE',
// 'elk.nodePlacement.strategy': 'LAYERED',
// 'elk.mergeEdges': true,
// layout: 'dagre',
// layout: 'elk',
layout: 'elk',
// layout: 'fixed',
// htmlLabels: false,
flowchart: { titleTopMargin: 10 },
flowchart: { titleTopMargin: 10, padding: 8 },
// fontFamily: 'Caveat',
// fontFamily: 'Kalam',
fontFamily: 'Kalam',
// fontFamily: 'courier',
sequence: {
actorFontFamily: 'courier',

12
packages/mermaid/src/diagrams/flowchart/flowDb.ts
View File

@@ -4,6 +4,7 @@ import { getConfig, defaultConfig } from '../../diagram-api/diagramAPI.js';
import common from '../common/common.js';
import type { Node, Edge } from '../../rendering-util/types.js';
import { log } from '../../logger.js';
import * as yaml from 'js-yaml';
import {
setAccTitle,
getAccTitle,
@@ -60,8 +61,10 @@ export const addVertex = function (
style: string[],
classes: string[],
dir: string,
props = {}
props = {},
shapeData: any
) {
console.log('addVertex', id, shapeData);
if (!id || id.trim().length === 0) {
return;
}
@@ -115,6 +118,13 @@ export const addVertex = function (
} else if (props !== undefined) {
Object.assign(vertex.props, props);
}
if (shapeData !== undefined) {
console.log('HERE - shapeData: ', shapeData);
// const doc = yaml.load(shapeData);
// console.log('doc', doc);
// vertex.type = shapeData?.shape || 'roundedRect';
}
};
/**

67
packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js Normal file
View File

@@ -0,0 +1,67 @@
import flowDb from '../flowDb.js';
import flow from './flow.jison';
import { setConfig } from '../../../config.js';
setConfig({
securityLevel: 'strict',
});
describe('when parsing directions', function () {
beforeEach(function () {
flow.parser.yy = flowDb;
flow.parser.yy.clear();
flow.parser.yy.setGen('gen-2');
});
it('should handle basic shape data statements', function () {
const res = flow.parser.parse(`flowchart TB
D@{ shape: rounded }@`);
const data4Layout = flow.parser.yy.getData();
console.log(data4Layout.nodes);
expect(data4Layout.nodes.length).toBe(1);
});
it('should be possible to link to a node with more data', function () {
const res = flow.parser.parse(`flowchart TB
A --> D@{
shape: circle,
icon: "clock"
}@
`);
const data4Layout = flow.parser.yy.getData();
console.log(data4Layout.nodes);
expect(data4Layout.nodes.length).toBe(2);
});
it('should use default direction from top level', function () {
const res = flow.parser.parse(`flowchart TB
A[hello]
B@{
shape: circle,
icon: "clock"
}@
C[Hello]@{
shape: circle,
icon: "clock"
}@
`);
const data4Layout = flow.parser.yy.getData();
console.log(data4Layout.nodes);
expect(data4Layout.nodes.length).toBe(3);
});
it('should use handle } character inside the shape data', function () {
const res = flow.parser.parse(`flowchart TB
A@{
label: "This is }",
icon: "clock"
}@
`);
const data4Layout = flow.parser.yy.getData();
console.log(data4Layout.nodes);
expect(data4Layout.nodes.length).toBe(1);
});
});

35
packages/mermaid/src/diagrams/flowchart/parser/flow.jison
View File

@@ -23,6 +23,8 @@
%x href
%x callbackname
%x callbackargs
%x shapeData
%x shapeDataEndBracket
%%
accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; }
@@ -34,6 +36,16 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multilin
<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value";
// <acc_descr_multiline>.*[^\n]* { return "acc_descr_line"}
[@\{] { this.pushState("shapeData"); }
// <shapeData>[\}][\@] { console.log('This is the end: ', yytext); this.popState(); }
<shapeData>[^}] { console.log('End bracket found: ', yytext); this.pushState("shapeDataEndBracket");}
<shapeDataEndBracket>[@] { console.log('This is the end: ', yytext); this.popState();this.popState(); }
<shapeDataEndBracket>[^@]* { console.log('something else: ', yytext); return 'SHAPE_DATA'; }
<shapeData>([^}^@])+ { console.log('Parsed data: ', yytext); }
// [@\{] {this.pushState("shapeData");}
// <shapeData>[\}][\@] { console.log('This is the end: ', yytext);this.popState(); }
// <shapeData>^(?!.*\}@).* { console.log('Parsed data: ', yytext); return 'SHAPE_DATA';}
/*
---interactivity command---
'call' adds a callback to the specified node. 'call' can only be specified when
@@ -62,6 +74,8 @@ Function arguments are optional: 'call <callbackname>()' simply executes 'callba
"classDef" return 'CLASSDEF';
"class" return 'CLASS';
/*
---interactivity command---
'href' adds a link to the specified node. 'href' can only be specified when the
@@ -357,24 +371,33 @@ statement
separator: NEWLINE | SEMI | EOF ;
vertexStatement: vertexStatement link node
{ /* console.warn('vs',$vertexStatement.stmt,$node); */ yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } }
vertexStatement: vertexStatement link node SHAPE_DATA
{ console.warn('vs SHAPE_DATA',$vertexStatement.stmt,$node); yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } }
| vertexStatement link node
{ console.warn('vs',$vertexStatement.stmt,$node); yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } }
| vertexStatement link node spaceList
{ /* console.warn('vs',$vertexStatement.stmt,$node); */ yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } }
|node spaceList {/*console.warn('noda', $node);*/ $$ = {stmt: $node, nodes:$node }}
|node { /*console.warn('noda', $node);*/ $$ = {stmt: $node, nodes:$node }}
|node spaceList {console.warn('vertexStatement: node spaceList', $node); $$ = {stmt: $node, nodes:$node }}
|node SHAPE_DATA {
console.warn('vertexStatement: node SHAPE_DATA', $node[0], $SHAPE_DATA);
yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$SHAPE_DATA+'\n}\n');
$$ = {stmt: $node, nodes:$node, shapeData: $SHAPE_DATA+'\n}'}
}
|node { console.warn('vertexStatement: single node', $node); $$ = {stmt: $node, nodes:$node }}
;
node: styledVertex
{ /* console.warn('nod', $styledVertex); */ $$ = [$styledVertex];}
{ /*console.warn('nod', $styledVertex);*/ $$ = [$styledVertex];}
| node spaceList AMP spaceList styledVertex
{ $$ = $node.concat($styledVertex); /* console.warn('pip', $node[0], $styledVertex, $$); */ }
;
styledVertex: vertex
{ /* console.warn('nod', $vertex); */ $$ = $vertex;}
{ /* console.warn('nodc', $vertex);*/ $$ = $vertex;}
| vertex STYLE_SEPARATOR idString
{$$ = $vertex;yy.setClass($vertex,$idString)}
| vertex idString
{ yy.setClass($vertex,$idString)}
;
vertex: idString SQS text SQE

18359
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff