Support for compound blocks with id, title and type

packages/mermaid/src/diagrams/block/blockDB.ts

@@ -19,6 +19,7 @@ import { log } from '../../logger.js';
 let blockDatabase: Record<string, Block> = {};
 
 const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
+  const children = [];
   for (const block of blockList) {
     if (block.type === 'column-setting') {
       const columns = block.columns || -1;
@@ -32,8 +33,12 @@ const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
       if (block.children) {
         populateBlockDatabase(block.children, block);
       }
+      if (block.type !== 'column-setting') {
+        children.push(block);
+      }
     }
   }
+  parent.children = children;
 };
 
 let blocks: Block[] = [];
@@ -71,7 +76,7 @@ export const generateId = () => {
 type ISetHierarchy = (block: Block[]) => void;
 const setHierarchy = (block: Block[]): void => {
   populateBlockDatabase(block, rootBlock);
-  log.info('blockdb', JSON.stringify(blockDatabase, null, 2));
+  log.debug('The hierarchy', JSON.stringify(block, null, 2));
   blocks = block;
 };
 

packages/mermaid/src/diagrams/block/blockTypes.ts

@@ -5,6 +5,7 @@ export interface BlockConfig extends BaseDiagramConfig {
 }
 
 export type BlockType =
+  | 'column-setting'
   | 'round'
   | 'square'
   | 'diamond'
@@ -22,8 +23,7 @@ export type BlockType =
   | 'cylinder'
   | 'group'
   | 'doublecircle'
-  | 'composite'
-  | 'column-setting';
+  | 'composite';
 
 export interface Block {
   id: string;

packages/mermaid/src/diagrams/block/parser/block.jison

@@ -29,6 +29,7 @@ CRLF \u000D\u000A
 "block-beta"                                             { return 'BLOCK_DIAGRAM_KEY'; }
 "block"\s+            { yy.getLogger().info('Found space-block'); return 'block';}
 "block"\n+            { yy.getLogger().info('Found nl-block'); return 'block';}
+"block:"            { yy.getLogger().info('Found space-block'); return 'id-block';}
 // \s*\%\%.*                                                       { yy.getLogger().info('Found comment',yytext); }
 [\s]+                                                           { yy.getLogger().info('.', yytext); /* skip all whitespace */  }
 [\n]+ {yy.getLogger().info('_', yytext);                 /* skip all whitespace */   }
@@ -138,7 +139,7 @@ seperator
   ;
 
 start: BLOCK_DIAGRAM_KEY document EOF
-  {yy.getLogger().info('This is the hierarchy ', JSON.stringify($2, null, 2)); yy.setHierarchy($2); }
+  { yy.setHierarchy($2); }
   ;
 
 
@@ -189,7 +190,8 @@ columnsStatement
   ;
 
 blockStatement
-  : block document end { yy.getLogger().info('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:id, children: $2 }; }
+  : id-block nodeStatement document end { yy.getLogger().info('Rule: id-block statement : ', $2, $3); const id2 = yy.generateId(); $$ = { ...$2, children: $3 }; }
+  | block document end { yy.getLogger().info('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:id, children: $2 }; }
   ;
 
 

packages/mermaid/src/diagrams/block/parser/block.spec.ts

@@ -214,13 +214,28 @@ describe('Block diagram', function () {
     });
     it('compound blocks with title', async () => {
       const str = `block-beta
-          block compoundBlock["Compound block"]
+          block:compoundBlock["Compound block"]
             columns 1
-            block2["Block 1"]
+            block2["Block 2"]
           end
         `;
 
       block.parse(str);
+
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(1);
+
+      const compoundBlock = blocks[0];
+      const block2 = compoundBlock.children[0];
+
+      expect(compoundBlock.children.length).toBe(1);
+      expect(compoundBlock.id).toBe('compoundBlock');
+      expect(compoundBlock.label).toBe('Compound block');
+      expect(compoundBlock.type).toBe('square');
+
+      expect(block2.id).toBe('block2');
+      expect(block2.label).toBe('Block 2');
+      expect(block2.type).toBe('square');
     });
     it.skip('blocks mixed with compound blocks', async () => {
       const str = `block