search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
68.79k stars 6.08k forks source link

Block diagram group title should be rendered above of inner blocks #5423

Open rusinikita opened 3 months ago

rusinikita commented 3 months ago

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

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 commented 3 months ago

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

kennethtxytqw commented 1 month ago

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