10

How to style the title in a Mermaid subgraph? I would like to make the font larger and add some blank space between the title and the first node beneath it.

I tried adding some <br/>'s after the title but that pushed the title above the boundary of the subgraph.

graph TB

subgraph someID[Some Title]
    direction TB
    ....
end
Tony_Henrich
  • 42,411
  • 75
  • 239
  • 374

4 Answers4

9

Styling a subgraph title seem to work like this:

graph TB
subgraph ED[Every Day]
   A <--> B
end

style ED color:#f66

Caveat: I'm using Microsoft Github's in-browser Mermaid markdown preview and I'm not sure to what degree their implementation is conformant.

lmat - Reinstate Monica
  • 7,289
  • 6
  • 48
  • 62
2

If you are looking for styling that do not include coloring, you may try something like this:

someID:::someClass

subgraph someID[Some Title]
    someItem(The subgraph title has some style)
end 

classdef someClass padding-left:5em;

Reference: Mermaid classes

LucianoBAF
  • 189
  • 2
  • 6
0

Unfortunately, there is no possibility to style the title at the moment (see this pull request).

Note that given how subgraph SVG tags are built up, there is no (current) way to style the title text.

cyc8
  • 13
  • 5
0

I use an additional 'blank' subgraph using styles (classDef) to add space for larger fonts in the parent subgraph.

subgraph main[mainTitle]

    %% single space in [ ] to not display text
    subgraph padding[ ]

        subgraph child[childTitle]

            %% child nodes

        end

    end

    %% main nodes

end

classDef title font-size:14px
classDef padding stroke:none,fill:none

class main title
class padding padding
Tom
  • 1