From 86e1bb38eecfd4179fe9b296f111d8e53d586fb6 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 5 Jul 2023 12:01:37 +0200 Subject: [PATCH] #3358 First commit with basic grammar and 1st test --- packages/mermaid/src/config.type.ts | 4 + .../src/diagrams/blockDiagram/blockDB.ts | 35 ++++ .../src/diagrams/blockDiagram/blockDiagram.ts | 15 ++ .../blockDiagram/blockDiagramDetector.ts | 20 ++ .../blockDiagram/blockDiagramRenderer.ts | 63 ++++++ .../blockDiagram/blockDiagramUtils.ts | 8 + .../blockDiagram/parser/blockDiagram.jison | 195 ++++++++++++++++++ .../blockDiagram/parser/blockDiagram.spec.ts | 85 ++++++++ .../mermaid/src/docs/.vitepress/block.mmd | 33 +++ 9 files changed, 458 insertions(+) create mode 100644 packages/mermaid/src/diagrams/blockDiagram/blockDB.ts create mode 100644 packages/mermaid/src/diagrams/blockDiagram/blockDiagram.ts create mode 100644 packages/mermaid/src/diagrams/blockDiagram/blockDiagramDetector.ts create mode 100644 packages/mermaid/src/diagrams/blockDiagram/blockDiagramRenderer.ts create mode 100644 packages/mermaid/src/diagrams/blockDiagram/blockDiagramUtils.ts create mode 100644 packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.jison create mode 100644 packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.spec.ts create mode 100644 packages/mermaid/src/docs/.vitepress/block.mmd diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 138eee44f..a784b9d30 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -33,6 +33,7 @@ export interface MermaidConfig { gitGraph?: GitGraphDiagramConfig; c4?: C4DiagramConfig; sankey?: SankeyDiagramConfig; + blockDiagram?: BlockDiagramConfig; dompurifyConfig?: DOMPurify.Config; wrap?: boolean; fontSize?: number; @@ -421,6 +422,9 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig { linkColor?: SankeyLinkColor | string; nodeAlignment?: SankeyNodeAlignment; } +export interface BlockDiagramConfig extends BaseDiagramConfig { + padding?: number; +} export interface FontConfig { fontSize?: string | number; diff --git a/packages/mermaid/src/diagrams/blockDiagram/blockDB.ts b/packages/mermaid/src/diagrams/blockDiagram/blockDB.ts new file mode 100644 index 000000000..265835cd7 --- /dev/null +++ b/packages/mermaid/src/diagrams/blockDiagram/blockDB.ts @@ -0,0 +1,35 @@ +import * as configApi from '../../config.js'; +import common from '../common/common.js'; +import { + setAccTitle, + getAccTitle, + getAccDescription, + setAccDescription, + setDiagramTitle, + getDiagramTitle, + clear as commonClear, +} from '../../commonDb.js'; + +type Block = { + ID: string; +}; + +// Array of nodes guarantees their order +let blocks: Block[] = []; + +const clear = (): void => { + blocks = []; + commonClear(); +}; + +export default { + getConfig: () => configApi.getConfig().blockDiagram, + + getAccTitle, + setAccTitle, + getAccDescription, + setAccDescription, + getDiagramTitle, + setDiagramTitle, + clear, +}; diff --git a/packages/mermaid/src/diagrams/blockDiagram/blockDiagram.ts b/packages/mermaid/src/diagrams/blockDiagram/blockDiagram.ts new file mode 100644 index 000000000..c3913a7f2 --- /dev/null +++ b/packages/mermaid/src/diagrams/blockDiagram/blockDiagram.ts @@ -0,0 +1,15 @@ +import { DiagramDefinition } from '../../diagram-api/types.js'; +// @ts-ignore: jison doesn't export types +import parser from './parser/sankey.jison'; +import db from './blockDB.js'; +import renderer from './blockDiagramRenderer.js'; +import { prepareTextForParsing } from './blockDiagramUtils.js'; + +const originalParse = parser.parse.bind(parser); +parser.parse = (text: string) => originalParse(prepareTextForParsing(text)); + +export const diagram: DiagramDefinition = { + parser, + db, + renderer, +}; diff --git a/packages/mermaid/src/diagrams/blockDiagram/blockDiagramDetector.ts b/packages/mermaid/src/diagrams/blockDiagram/blockDiagramDetector.ts new file mode 100644 index 000000000..41dc91127 --- /dev/null +++ b/packages/mermaid/src/diagrams/blockDiagram/blockDiagramDetector.ts @@ -0,0 +1,20 @@ +import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; + +const id = 'sankey'; + +const detector: DiagramDetector = (txt) => { + return /^\s*blockDiagram-beta/.test(txt); +}; + +const loader = async () => { + const { diagram } = await import('./blockDiagram.js'); + return { id, diagram }; +}; + +const plugin: ExternalDiagramDefinition = { + id, + detector, + loader, +}; + +export default plugin; diff --git a/packages/mermaid/src/diagrams/blockDiagram/blockDiagramRenderer.ts b/packages/mermaid/src/diagrams/blockDiagram/blockDiagramRenderer.ts new file mode 100644 index 000000000..5a2f595bc --- /dev/null +++ b/packages/mermaid/src/diagrams/blockDiagram/blockDiagramRenderer.ts @@ -0,0 +1,63 @@ +import { Diagram } from '../../Diagram.js'; +import * as configApi from '../../config.js'; + +import { + select as d3select, + scaleOrdinal as d3scaleOrdinal, + schemeTableau10 as d3schemeTableau10, +} from 'd3'; + +import { configureSvgSize } from '../../setupGraphViewbox.js'; +import { Uid } from '../../rendering-util/uid.js'; +import type { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js'; + +export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void { + // Get the config + const { securityLevel, sankey: conf } = configApi.getConfig(); + const defaultSankeyConfig = configApi!.defaultConfig!.blockDiagram!; + + // 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 + // + let sandboxElement: any; + if (securityLevel === 'sandbox') { + sandboxElement = d3select('#i' + id); + } + 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 + // + + // 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 + // This must be a mutable object with `nodes` and `links` properties: + // + // { + // "nodes": [ { "id": "Alice" }, { "id": "Bob" }, { "id": "Carol" } ], + // "links": [ { "source": "Alice", "target": "Bob", "value": 23 }, { "source": "Bob", "target": "Carol", "value": 43 } ] + // } + // + // @ts-ignore TODO: db type + const graph = diagObj.db.getGraph(); + + const nodeWidth = 10; + + // Get color scheme for the graph + const colorScheme = d3scaleOrdinal(d3schemeTableau10); +}; + +export default { + draw, +}; diff --git a/packages/mermaid/src/diagrams/blockDiagram/blockDiagramUtils.ts b/packages/mermaid/src/diagrams/blockDiagram/blockDiagramUtils.ts new file mode 100644 index 000000000..45ecf21dd --- /dev/null +++ b/packages/mermaid/src/diagrams/blockDiagram/blockDiagramUtils.ts @@ -0,0 +1,8 @@ +export const prepareTextForParsing = (text: string): string => { + const textToParse = text + .replaceAll(/^[^\S\n\r]+|[^\S\n\r]+$/g, '') // remove all trailing spaces for each row + .replaceAll(/([\n\r])+/g, '\n') // remove empty lines duplicated + .trim(); + + return textToParse; +}; diff --git a/packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.jison b/packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.jison new file mode 100644 index 000000000..aced2c023 --- /dev/null +++ b/packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.jison @@ -0,0 +1,195 @@ +/** mermaid */ + +//--------------------------------------------------------- +// 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 +%x acc_title +%x acc_descr +%x acc_descr_multiline +%x string +%x md_string +%x NODE +%options easy_keword_rules + + +// as per section 6.1 of RFC 2234 [2] +COMMA \u002C +CR \u000D +LF \u000A +CRLF \u000D\u000A + + +%% + +"blockDiagram-beta" { return 'BLOCK_DIAGRAM_KEY'; } +// \s*\%\%.* { yy.getLogger().info('Found comment',yytext); } +[\s]+ { yy.getLogger().info('.', yytext); /* skip all whitespace */ } +[\n]+ {yy.getLogger().info('_', yytext); /* skip all whitespace */ } +// [\n] return 'NL'; +({CRLF}|{LF}) { return 'NL' } +["][`] { this.begin("md_string");} +[^`"]+ { return "MD_STR";} +[`]["] { this.popState();} +["] this.begin("string"); +["] this.popState(); +[^"]* return "STR"; +"style" return 'STYLE'; +"default" return 'DEFAULT'; +"linkStyle" return 'LINKSTYLE'; +"interpolate" return 'INTERPOLATE'; +"classDef" return 'CLASSDEF'; +"class" return 'CLASS'; +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"; +"subgraph" return 'subgraph'; +"end"\b\s* return 'end'; +.*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'; + +// Start of nodes with shapes and description +"-)" { yy.getLogger().info('Lex: -)'); this.begin('NODE');return 'NODE_D START'; } +"(-" { yy.getLogger().info('Lex: (-'); this.begin('NODE');return 'NODE_DSTART'; } +"))" { yy.getLogger().info('Lex: ))'); this.begin('NODE');return 'NODE_DSTART'; } +")" { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; } +"((" { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; } +"{{" { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; } +"(" { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; } +"[" { yy.getLogger().info('Lex: ['); this.begin('NODE');return 'NODE_DSTART'; } +"([" { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; } +"[[" { this.begin('NODE');return 'NODE_DSTART'; } +"[|" { this.begin('NODE');return 'NODE_DSTART'; } +"[(" { this.begin('NODE');return 'NODE_DSTART'; } +"(((" { this.begin('NODE');return 'NODE_DSTART'; } +")))" { this.begin('NODE');return 'NODE_DSTART'; } +"[/" { this.begin('NODE');return 'NODE_DSTART'; } +"[\\" { this.begin('NODE');return 'NODE_DSTART'; } + + +[^\(\[\n\-\)\{\}]+ { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; } +<> { yy.getLogger().info('Lex: EOF', yytext);return 'EOF'; } + +// Handling of strings in node +["][`] { this.begin("md_string");} +[^`"]+ { return "NODE_DESCR";} +[`]["] { this.popState();} +["] { yy.getLogger().info('Lex: Starting string');this.begin("string");} +[^"]+ { yy.getLogger().info('Lex: NODE_DESCR:', yytext); return "NODE_DESCR";} +["] {this.popState();} + +// Node end of shape +[\)]\) { this.popState();yy.getLogger().info('Lex: ))'); return "NODE_DEND"; } +[\)] { this.popState();yy.getLogger().info('Lex: )'); return "NODE_DEND"; } +[\]] { this.popState();yy.getLogger().info('Lex: ]'); return "NODE_DEND"; } +"}}" { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; } +"(-" { this.popState();yy.getLogger().info('Lex: (-'); return "NODE_DEND"; } +"-)" { this.popState();yy.getLogger().info('Lex: -)'); return "NODE_DEND"; } +"((" { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; } +"(" { this.popState();yy.getLogger().info('Lex: ('); return "NODE_DEND"; } +"])" { this.popState();yy.getLogger().info('Lex: ])'); return "NODE_DEND"; } +"]]" { this.popState();yy.getLogger().info('Lex: ]]'); return "NODE_DEND"; } +"/]" { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; } +")]" { this.popState();yy.getLogger().info('Lex: )]'); return "NODE_DEND"; } + +// 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*\~\~[\~]+\s* { yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; } +\s*[xo<]?\-\-\s* { yy.getLogger().info('Lex: START_LINK', yytext); return 'START_LINK'; } +\s*[xo<]?\=\=\s* { yy.getLogger().info('Lex: START_LINK', yytext); return 'START_LINK'; } +\s*[xo<]?\-\.\s* { yy.getLogger().info('Lex: START_LINK', yytext); return 'START_LINK'; } + +/lex + +%start start + +%% // language grammar + +spaceLines + : SPACELINE + | spaceLines SPACELINE + | spaceLines NL + ; + +seperator + : NL + {yy.getLogger().info('Rule: seperator (NL) ');} + | SPACE + {yy.getLogger().info('Rule: seperator (Space) ');} + | EOF + {yy.getLogger().info('Rule: seperator (EOF) ');} + ; + +start: BLOCK_DIAGRAM_KEY document; + +blockDiagram + : blockDiagram document { return yy; } + | blockDiagram NL document { return yy; } + ; + +stop + : NL {yy.getLogger().info('Stop NL ');} + | EOF {yy.getLogger().info('Stop EOF ');} + // | SPACELINE + | stop NL {yy.getLogger().info('Stop NL2 ');} + | stop EOF {yy.getLogger().info('Stop EOF2 ');} + ; + +document + : document statement + | statement + ; + +link + : LINK + { yy.getLogger().info("Rule: link: ", $1); } + | START_LINK + { yy.getLogger().info("Rule: link: ", $1); } + ; + +statement + : nodeStatement +// 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 + | EOF + ; + +nodeStatement: nodeStatement link node { yy.getLogger().info('Rule: nodeStatement (nodeStatement link node) ');} + |node { yy.getLogger().info('Rule: nodeStatement (node) ');} + ; + +node + : NODE_ID + { yy.getLogger().info("Rule: node (NODE_ID seperator): ", $1); } + |NODE_ID nodeShapeNLabel + { yy.getLogger().info("Rule: node (NODE_ID nodeShapeNLabel seperator): ", $1, $2); } + // |nodeShapeNLabel seperator + // { yy.getLogger().info("Rule: node (nodeShapeNLabel seperator): ", $1, $2, $3); } + ; + +nodeShapeNLabel + : NODE_DSTART STR NODE_DEND + { yy.getLogger().info("Rule: nodeShapeNLabel: ", $1, $2, $3); $$ = { type: $1 + $3, descr: $2 }; } + ; + +%% diff --git a/packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.spec.ts b/packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.spec.ts new file mode 100644 index 000000000..3c076c04f --- /dev/null +++ b/packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.spec.ts @@ -0,0 +1,85 @@ +// @ts-ignore: jison doesn't export types +import blockDiagram from './blockDiagram.jison'; +import db from '../blockDB.js'; +import { cleanupComments } from '../../../diagram-api/comments.js'; +import { prepareTextForParsing } from '../blockDiagramUtils.js'; +import * as fs from 'fs'; +import * as path from 'path'; + +describe('Sankey diagram', function () { + describe('when parsing an block diagram graph it should handle > ', function () { + beforeEach(function () { + blockDiagram.parser.yy = db; + blockDiagram.parser.yy.clear(); + blockDiagram.parser.yy.getLogger = () => console; + }); + + it('a diagram with a node', async () => { + const str = `blockDiagram-beta + id + `; + + blockDiagram.parse(str); + }); + it('a diagram with multiple nodes', async () => { + const str = `blockDiagram-beta + id1 + id2 + `; + + blockDiagram.parse(str); + }); + it('a node with a square shape and a label', async () => { + const str = `blockDiagram-beta + id["A label"] + id2`; + + blockDiagram.parse(str); + }); + it('a diagram with multiple nodes with edges', async () => { + const str = `blockDiagram-beta + id1["first"] --> id2["second"] + `; + + blockDiagram.parse(str); + }); + // it('a diagram with column statements', async () => { + // const str = `blockDiagram-beta + // columns 1 + // block1["Block 1"] + // `; + + // blockDiagram.parse(str); + // }); + // it('a diagram with block hierarchies', async () => { + // const str = `blockDiagram-beta + // columns 1 + // block1[Block 1] + + // block + // columns 2 + // block2[Block 2] + // block3[Block 3] + // end %% End the compound block + // `; + + // blockDiagram.parse(str); + // }); + // it('a diagram with differernt column values in different blocks', async () => { + // const str = `blockDiagram-beta + // columns 1 + // block1[Block 1] + + // block + // columns 2 + // block2[Block 2] + // block3[Block 3] + // end %% End the compound block + // `; + + // blockDiagram.parse(str); + + // // Todo check that the different blocks have different column values + // }); + }); +}); diff --git a/packages/mermaid/src/docs/.vitepress/block.mmd b/packages/mermaid/src/docs/.vitepress/block.mmd new file mode 100644 index 000000000..7ce628f44 --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/block.mmd @@ -0,0 +1,33 @@ +block + columns 3 + Block1 + Block2["Block 2"] + block + columns 2 + Block2.1 + Block2.2 + end + Block3 + + +---- + +block + columns 2 + Block[Frontend]:vertical + + block "Document management System" + columns 3 + MO[Manager Operation]:vertical + block + columns 2 + block "Security and User Manager" + end + + +---- +block frontend:vertical +move right +block "Document Management System" +move down +