Text is not visible on Mermaid flowchart shapes with markdown string labels #11782

New Issue

GiteaMirror · 2025-11-02T09:47:36-06:00

GiteaMirror commented

2025-11-02 09:47:36 -06:00

Originally created by @cy-x on GitHub (Oct 4, 2023).

Description

When I use the markdown string feature to format mermaid flowchart labels, the label position is off by a few pixels, so that most of the text is hidden.

Example:
https://try.gitea.io/terius/MermaidTest/src/branch/main/README.md

flowchart LR
TEST{{"`**Rendering problem**`"}}

I guess this is due to mermaid uses <p> tag for markdown labels and gitea renders mermaid inside an <iframe>. Seems like chrome adds some default margin to <p>-tags inside iframes.

There is an iframeCss const in mermaid.js. Adding a style to set margin to 0 for the iframe might fix the issue?

p {margin: 0}

Gitea Version

1.22.0+dev-101-g112f37c54

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

No response

Git Version

No response

Operating System

No response

How are you running Gitea?

Tested with try.gitea.io

Database

None

Originally created by @cy-x on GitHub (Oct 4, 2023). ### Description When I use the [markdown string](https://mermaid.js.org/syntax/flowchart.html#markdown-strings) feature to format mermaid flowchart labels, the label position is off by a few pixels, so that most of the text is hidden. Example: https://try.gitea.io/terius/MermaidTest/src/branch/main/README.md ``` flowchart LR TEST{{"`**Rendering problem**`"}} ``` ![gitea-mermaid](https://github.com/go-gitea/gitea/assets/44112081/4a20744f-abbf-47d8-b02e-567608ac483f) I guess this is due to mermaid uses ``<p>`` tag for markdown labels and gitea renders mermaid inside an ``<iframe>``. Seems like chrome adds some default margin to ``<p>``-tags inside iframes. There is an ``iframeCss`` const in [mermaid.js](https://github.com/go-gitea/gitea/blob/main/web_src/js/markup/mermaid.js#L9). Adding a style to set margin to 0 for the iframe might fix the issue? ```css p {margin: 0} ``` ### Gitea Version 1.22.0+dev-101-g112f37c54 ### Can you reproduce the bug on the Gitea demo site? Yes ### Log Gist _No response_ ### Screenshots _No response_ ### Git Version _No response_ ### Operating System _No response_ ### How are you running Gitea? Tested with try.gitea.io ### Database None

GiteaMirror added the issue/confirmed type/bug labels 2025-11-02 09:47:36 -06:00

GiteaMirror closed this issue

2025-11-02 09:47:36 -06:00

GiteaMirror commented

2025-11-02 09:47:37 -06:00

@silverwind commented on GitHub (Oct 4, 2023):

It seems mermaid relies on some CSS which we do not load. Should investigate how to extract this CSS from the mermaid package and then apply it inside the iframe.

https://mermaid.live/edit#pako:eNoVyzsOgzAQRdGtWK-0WIHrpEsFlFMwwQNY8QdNjKLIYu8h3S3ObZiLFzgssXzmjbWaR095vA9ja4TJ2l6yFw15NbuWZ5Rk7UQ4T3RIoomDv-5G2RhC3SQJwV3pWV8Eyn_HRy3DN89wVQ_pcOyeq9wCr8oJbuH4lvMHtZIvOA

Example of missing CSS:

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
  margin: 0;
}

@silverwind commented on GitHub (Oct 4, 2023): It seems mermaid relies on some CSS which we do not load. Should investigate how to extract this CSS from the mermaid package and then apply it inside the iframe. https://mermaid.live/edit#pako:eNoVyzsOgzAQRdGtWK-0WIHrpEsFlFMwwQNY8QdNjKLIYu8h3S3ObZiLFzgssXzmjbWaR095vA9ja4TJ2l6yFw15NbuWZ5Rk7UQ4T3RIoomDv-5G2RhC3SQJwV3pWV8Eyn_HRy3DN89wVQ_pcOyeq9wCr8oJbuH4lvMHtZIvOA Example of missing CSS: ```css blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0; } ```

GiteaMirror commented

2025-11-02 09:47:37 -06:00

@silverwind commented on GitHub (Oct 4, 2023):

I could not find any CSS to load in the mermaid module, so I'd say it's a bug in Mermaid as their rendering depends on the "css reset" of tailwindcss, but it's not shipped as part of the npm module. I opened https://github.com/mermaid-js/mermaid/issues/4907.

If they don't solve it, we would have to workaround and add these styles manually, likely by adding the base styles of tailwindcss because at least their demo page has that so it would be least likely to break in the future.

@silverwind commented on GitHub (Oct 4, 2023): I could not find any CSS to load in the `mermaid` module, so I'd say it's a bug in Mermaid as their rendering depends on the "css reset" of tailwindcss, but it's not shipped as part of the npm module. I opened https://github.com/mermaid-js/mermaid/issues/4907. If they don't solve it, we would have to workaround and add these styles manually, likely by adding the base styles of tailwindcss because at least their demo page has that so it would be least likely to break in the future.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#11782