Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot center-justify text in nodes? #397

Closed
RobertGoulding opened this issue Oct 7, 2016 · 8 comments
Closed

Cannot center-justify text in nodes? #397

RobertGoulding opened this issue Oct 7, 2016 · 8 comments

Comments

@RobertGoulding
Copy link

RobertGoulding commented Oct 7, 2016

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
Copy link

prtuson commented Oct 18, 2016

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
Copy link
Author

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
Copy link

+1

@mlbernauer
Copy link

@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
Copy link
Collaborator

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
Copy link

eduo commented Aug 1, 2018

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

@elenigen
Copy link

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>]

image

@IOrlandoni
Copy link
Member

IOrlandoni commented Sep 27, 2019

@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!

@mermaid-js mermaid-js locked as resolved and limited conversation to collaborators Sep 27, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants