Mermaid: Cannot center-justify text in nodes?

[RobertGoulding]

I'm trying to replicate part of the diagram found here:

http://echo.mpiwg-berlin.mpg.de/content/scientific_revolution/harriot/harriot_manuscripts/maps/9.2.3_colour.pt

(which I myself made with a graphical editor).

Here is how I started:

graph LR;
      189[Add MS<br/>6789<br/>f. 189];
      188[Add MS<br/>6789<br/>f. 188];
      189-->188;

classDef page text-align:center;
class 188,189 page;

But I cannot get the text in each box to align in the center. I've been able to pass on all kinds of other CSS attributes using this format; but none of the text-align attributes seem to have any effect.

[prtuson]

I centre all the text in my diagrams by adding a style to the svg using
.mermaid svg {
text-align: center;
}
in my style sheet.

[RobertGoulding]

Thank you! But how do I do that with the stand-alone mermaid? That is, I'm just running it from the command line to produce images.

[SimonCropp]

+1

[mlbernauer]

@RobertGoulding you can use <center> for example....
A[<center>My centered text</center>]-->B[<center>Some other text<br>with a line break</center>]

[tylerlong]

It seems that problem are solved.

Thank you! But how do I do that with the stand-alone mermaid? That is, I'm just running it from the command line to produce images.

Please read http://localhost:4000/faq.html How to specify custom CSS file?

[eduo]

Link should be https://mermaidjs.github.io/faq.html

[elenigen]

Not sure if this feature is broken or what, but when I tried the solution:

graph LR;

A[<center>My centered text</center>]-->B[<center>Some other text<br>with a line break</center>]

[IOrlandoni]

@elenigen Note that this is a years old issue so what's reflected here might not be in the current version.

I'm not sure if the center tag will actually work but if you want to use html tags you will have to set the security level to loose.

Check the readme for more information and feel free to create a new issue if you have any. Thanks!