Mermaid rendering but not appearing within Content Tabs

[mlevit]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

Rendered Mermaid diagrams are not appearing within content tabs. As you can see below, the diagram is rendered, but the content tab is not expanding to show the diagram itself:

Expected behaviour

Mermaid diagrams are able to be nested within content tabs.

Actual behaviour

Contents tabs do not resize to the nested Mermaid diagrams.

Steps to reproduce

1. Create content tab
2. Nest a Mermaid diagram within it

Package versions

• Python: 3.9.7
• MkDocs: 1.2.2
• Material: 8.12

Configuration

# Project information
site_name: Test

# Configuration
theme:
  name: material
  language: en
  palette:
    - scheme: default
      toggle:
        icon: material/toggle-switch-off-outline
        name: Switch to dark mode
    - scheme: slate
      toggle:
        icon: material/toggle-switch
        name: Switch to light mode
  font:
    text: Roboto
    code: Roboto Mono
  features:
    - navigation.indexes
    - navigation.tabs
    - navigation.tabs.sticky
    - navigation.top
  icon:
    logo: material/book-open-page-variant
    repo: material/gitlab
docs_dir: docs
site_dir: site
use_directory_urls: true

# Extensions
markdown_extensions:
  - admonition
  - attr_list
  - codehilite:
      guess_lang: false
  - pymdownx.details
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_div_format
  - pymdownx.tabbed:
      alternate_style: true
  - toc:
      permalink: true

plugins:
  - search:
      separator: '[\s\-\.\_]'

extra_javascript:
  - https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js

# Page tree
nav:
  index.md

System information

• Operating system: macOS 11.6
• Browser: Chrome 96.0.4664.110

[facelessuser]

Material doesn't use the fence_div_format if I recall correctly. I believe it uses fence_code_format. Additionally, I think it is still only for Insiders edition of Material and hasn't been released on the public Material repo yet. @squidfunk can correct me if I'm wrong.

[mlevit]

The fence_div_format was used prior to Mermaid being moved to the Insiders edition.

Mermaid still renders if you're importing the Mermaid JS directly etc etc

[mlevit]

OK, some updates. It looks like the content tab doesn't get resized to the size of the Mermaid graph. When I make the Mermaid content tab the first tab, it renders correctly.

[facelessuser]

The fence_div_format was used prior to Mermaid being moved to the Insiders edition.

Mermaid was never "moved" to Insiders, support was added in Insiders. I'll explain.

Yes, Mermaid should work without special support, but the Mermaid library is quite quirky. For instance, see this issue I created that still hasn't been addressed: mermaid-js/mermaid#1318.

The default Mermaid loader, frankly, isn't too great. Additionally, some of their approaches don't work well in hidden elements, like what content tabs employ.

This is why, even though Mermaid is supposed to "just work", Material has added "special" support.

In order to work around such issues, I devised a way that avoided using Mermaid's default loader and instead uses a loader that wraps the content in a shadow DOM to avoid many of the issues I found. I talk about it here: https://facelessuser.github.io/pymdown-extensions/extras/mermaid/. I also have a working example here: https://codepen.io/facelessuser/pen/oNeNydQ.

Material, to help make using UML "easy" for its users took a lot of what I did and created a solution that works with Material out of the box and styles the diagrams in a way that matches Material's style. You do not have to use Material's solution, but you will run into issues if you rely on Mermaid's loader and use things like content tabs.

You can look into the example I provided to solve such issues, or you can use Material's built-in solution, but currently, there is only pain using Mermaid's default loader.

[facelessuser]

Just an FYI, I don't use the insiders solution currently.

[mlevit]

@facelessuser that's worked perfectly. Thanks very much for your help.

Sorry to be a pain, but, any idea why Material CSS is no longer applied?

Before

After

[facelessuser]

I honestly don't know. Does Material provide special styling for Mermaid on non-insiders? From what I recall, it provides no actual styling to Mermaid elements, maybe the container, but I am pretty sure that is all. Insider's provides more in-depth styling.

I imagine anything you see can be controlled via the Mermaid config. Maybe that is due to HTML labels being enabled? I usually disable those. I guess I'd have to know more about your setup.

[facelessuser]

I guess it could be possible Material provides some basic styling that bled into diagrams. Maybe due to the way my solution wraps them, they aren't seen as well. They are now wrapped in a shadow DOM and should be isolated to some extent from external styling. Styling would mainly be controlled through the Mermaid config.