Skip to content

Resolve "Mermaid diagrams and charts are not visible in the login page"

What does this MR do and why?

Enables GitLab Flavoured Markdown - Diagrams and Flowcharts rendering in the login page.

This MR fixes the issue #425011 (closed).

Applied renderGFM(document.body) in the following pages:

  • sessions:new (/users/sign_in)
  • registrations:new (/users/sign_up)
  • passwords:new (/users/password/new)
  • groups:sso:saml (for example, /groups/flightjs/-/saml/sso)
  • admin:application_settings:appearances:preview_sign_in (/admin/application_settings/appearance/preview_sign_in)

Screenshots or screen recordings

Login Page

Before After
Before Recording_2023-10-08_at_20.02.45

Preview Sign-in Page

Before After
Before2 Recording_2023-10-08_at_20.06.18

SAML single sign-on

Before After
Screenshot_2023-10-10_at_23.45.22 Screenshot_2023-10-10_at_23.47.10

How to set up and validate locally

Run GDK locally and set the appearance of the sign-in pages:

  • [1] Admin > Settings > Appearance > Sign in/Sign up pages > Description
  • [2] Admin > Settings > Preferences > Sign-in and Help page > Additional text to show on the sign-in page
  • [3] Admin > Settings > General > Sign-in restriction > Sign-in text

Use the following content to fill the text fields:

Test MR 133524.

```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #425011 (closed).

Edited by Dannyel Cardoso da Fonseca

Merge request reports