Centering text in Mermaid nodes in Preview pane

Things I have tried

  • Using custom CSS snippets
  • Messed around with Syntax (rewriting call text)
  • Read the Mermaid docs
  • Used Mermaid live editor (copy/paste)
  • Searched through Obsidian docs


graph TD
	a(start) --> b(stop)

What I’m trying to do

I would like to center the text inside my Mermaid nodes, however it seems to be having issues showing the correct result in the Preview pane. It seems to work just fine on mobile. Any advice? I’m using a Surface Pro 6.


It’s a minor gripe, but I’m picky about my Preview pane looking pretty, haha

You can center the figure using this CSS snippet.

div.mermaid {
    text-align: center;

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.