Skip to content

Replace mermaid styles with a built-in theme

Sarah German requested to merge sarahg/1264-mermaid-theme into main

What does this MR do and why?

  • Replaces custom mermaid CSS styling with mermaid's built-in "neutral" theme
  • Moves logic for including mermaid to the backend
    • why: the way we were doing this previously was causing mermaid to not pick up the config object; I think we were running into the same thing as this guy

Closes #1264 (closed)

Screenshots, screen recordings, or links to review app

Before After
image image

Some pages with Mermaid charts:

Review app Live site
https://sarahg-1264-mermaid-theme.docs.gitlab-review.app/ee/tutorials/make_your_first_git_commit.html https://docs.gitlab.com/ee/tutorials/make_your_first_git_commit.html
https://sarahg-1264-mermaid-theme.docs.gitlab-review.app/ee/integration/mattermost/#oauth2-sequence-diagram https://docs.gitlab.com/ee/integration/mattermost/#oauth2-sequence-diagram
https://sarahg-1264-mermaid-theme.docs.gitlab-review.app/ee/ci/pipelines/pipeline_architectures.html https://docs.gitlab.com/ee/ci/pipelines/pipeline_architectures.html

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md.
  2. View pages with mermaid charts (see list above) and verify the charts render either better or as good as they do on docs.gitlab.com

Merge request acceptance checklist

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

Edited by Sarah German

Merge request reports