Block diagram group title should be rendered above of inner blocks

[rusinikita]

Description

I do application components diagram. Now it looks like this.

I use arrows because I can't use block titles.

Steps to reproduce

I try to use block group titles with this correct syntax (no errors)

First block title invisible because it placed in center.
Second block title visible because it has space in center.

Screenshots

No response

Code Sample

block-beta
    columns 1

    block:ui("UI Title"):1
        Component1 Component2 Component3
    end

    block:uc("UC Title"):1
        UseCase1 space UseCase2
    end

Setup

• Mermaid version: latest live editor
• Browser and Version: Chrome

Suggested Solutions

If block group has title then it should be rendered with top padding (for inner blocks) and title inside this top padding.

Additional Context

I can start working on PR if no one has plans for that

[sanjeevmurmu]

Hello, Have you found the cause of this problem in the codebase

[YesYouKenSpace]

Hello I encountered this issue too. This is my workaround.

Code sample.

block-beta
    block:uc:1
        columns 3
        uct("UC Title"):3
        UseCase1 Usecase2 UseCase3
        space:3
        UseCase4 Usecase5 UseCase6
    end

class uct BT
classDef BT stroke:transparent,fill:transparent

block-beta
    block:uc:1
        columns 3
        uct("UC Title"):3
        UseCase1 Usecase2 UseCase3
        space:3
        UseCase4 Usecase5 UseCase6
    end

class uct BT
classDef BT stroke:transparent,fill:transparent

Loading

[unawarez]

FWIW this issue is also the only place I could find the block:asdf("ASDF") syntax is even possible. I was pretty sure this could be done but couldn't remember how. +1 for fixing the layout issue. I think I would use block diagrams for many more things if they better supported nested blocks.