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.

Sign up for GitHub

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

Jump to bottom

Using fontawesome (fa) icons clips text or icon from the end #539

Closed
asimjalis opened this issue May 14, 2023 · 0 comments · Fixed by #660
Closed

Using fontawesome (fa) icons clips text or icon from the end #539

asimjalis opened this issue May 14, 2023 · 0 comments · Fixed by #660

Comments

@asimjalis
Copy link

asimjalis commented May 14, 2023 •
edited
Loading

Describe the bug
Using fontawesome (fa) icons clips text or icon from the end

To Reproduce
Steps to reproduce the behavior:

1/ Paste this graph on https://mermaid.live and it renders perfectly.

graph LR
App[fa:fa-server App]
DB[fa:fa-database DB]
LLM[fa:fa-language LLM]
App --> |Schema + Query| LLM --> |SQL| App
App --> |SQL| DB
DB  --> |Data| App

2/ Save this to a file called fa-examples.mmd and then run mmdc:

mmdc --theme dark --backgroundColor transparent --scale 8 -i fa-examples.mmd -o fa-examples.png

3/ Look at fa-examples.png and it has the icons clipped.

Expected behavior
mmdc should produce the same image as https://mermaid.live without the icons clipped.

Screenshots
What the FA icons look like on mermaid.live
image

What the FA icons look like in mmdc generated PNG file.
image

See attached screenshots.

Desktop (please complete the following information):

  • OS: MacOS 13.3.1
  • Chrome version 112.0.5615.137
@dschrempf dschrempf mentioned this issue May 22, 2023
Open
@aloisklink aloisklink mentioned this issue May 30, 2023
Closed
@JackuB JackuB mentioned this issue Feb 9, 2024
Closed
remcohaszing added a commit to remcohaszing/mermaid-cli that referenced this issue Mar 7, 2024
@remcohaszing
Load all fonts before rendering
6df424a 
Whether or not the used fonts have been loaded, affects the layout of
the boxes that Mermaid renders. For consistent results, fonts must be
loaded before the diagrams are rendered.

Closes mermaid-js#539
@remcohaszing remcohaszing mentioned this issue Mar 7, 2024
Merged
3 tasks
aloisklink pushed a commit that referenced this issue Mar 8, 2024
@remcohaszing @aloisklink
Load all fonts before rendering
c179bc1 
Whether or not the used fonts have been loaded, affects the layout of
the boxes that Mermaid renders. For consistent results, fonts must be
loaded before the diagrams are rendered.

Closes #539
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Load all fonts before rendering remcohaszing/mermaid-cli
1 participant
@asimjalis