Questions about Mermaid

[stundentin]

Hey everyone!

I need help about Mermaid..

-How can I increase or decrease the headling size?
-Is it possible to change die direction/structure of arrows?
-Can you hide the classes?

Thank you!!

[weedySeaDragon]

If you're using the live editor to create your diagram:
You can change how the diagram looks with theme variables.

• you can edit font size. see @dwhelan 's answer font size: Unfortunately, I don't think there's a way to change the font size for individual nodes (shapes). You could definitely open an issue to request that as a new feature. (You can use the <b>...</b> and <i>...</i> html tags to at least make the text stand out more.)
• arrow direction You can't change the arrow direction, but there is an issue filed to add that as a feature: [Backwards arrow direction #3208]. You could add a +1 to via a thumbs up response as a way to vote for it

If you're creating your diagram within a webpage:
You can apply a css class to any of the nodes. You can then hide a class by setting the css with display: none or set the font size.

[kcfnmi]

Not specific to this context but I would like to ask, could you point me to some references on how to do the second point, creating your diagram within a webpage? I know how to use mermaid on SublimeText with MarkdownPreview, but not how to use it directly in a web page.

[weedySeaDragon]

@kcfnmi There's a section in the documentation: in the Deploying Mermaid section, look at the "Mermaid API" paragraph.

[dwhelan]

You can use class and classDef to add custom styling to individual nodes like this:

graph LR
A
subgraph Title
  B
end

A --> B

classDef heading font-size:24
class Title heading

graph LR
A
subgraph Title
  B
end

A --> B

classDef heading font-size:24
class Title heading

Loading

The above class however seems to be overridden by the live editor and GitHub Preview. If you view it natively in a browser it will look like this:

You mentioned you want to hide classes ... can you explain more what you are looking to achieve?

[DSDmark]

Sorry for asking here.

which version of mermaid, GitHub use.

Because of some code (example code) like:-

     checkout nice_feature
     commit id: "7"
     checkout main
     merge nice_feature id: "customID" tag: "customTag" type: REVERSE

It's not supported by GitHub. Particularly that line merge nice_feature id: "customID" tag: "customTag" type: REVERSE

[weedySeaDragon]

@DSDmark - 2 features were added to the latest version (9.17) of Mermaid:

• 3238 gitgraph merge commits (3238 gitgraph merge commits #3379) @ashishjain0512
• feat(git): allow custom merge commit ids (feat(git): allow custom merge commit ids #3361) @aloisklink

That was released on September 13.
I bet that Github is not using that version Mermaid yet. You could ask GitHub about that and maybe suggest that they update.

And it's best to post a new question like yours as a new discussion in the Q&A section instead of a follow on to an existing question. :-) (I know that the button is labeled "Discussion" instead of "New Question" and that is not very clear.)

[DSDmark]

Thanks 👍 i get it