Current setup

python 3.10.5

kdocs-git-authors-plugin 0.6.4 Mkdocs plugin to display git authors of a page mkdocs-git-committers-plugin-2 0.4.3 An MkDocs plugin to create a list of contributors on the page mkdocs-git-revision-date-localized-plugin 1.0.1 Mkdocs plugin that enables displaying the localized date of the last git modification of a markdown file. mkdocs-markdownextradata-plugin 0.2.5 A MkDocs plugin that injects the mkdocs.yml extra variables into the markdown template mkdocs-material 8.3.8 Documentation that simply works mkdocs-material-extensions 1.0.3 Extension pack for Python Markdown. mkdocs-mermaid2-plugin 0.5.2 A MkDocs plugin for including mermaid graphs in markdown sources mkdocs-minify-plugin 0.5.0 pymdown-extensions 9.5 Extension pack for Python Markdown.

mkdocs extensions

theme:
  name: material
...
markdown_extensions:
  - toc:
      permalink: true
  - mdx_include:
      base_path: docs
  - admonition
  - codehilite
  - extra
  - meta
  - attr_list
  - md_in_html
  - pymdownx.details
  - pymdownx.tabbed:
      alternate_style: true
  - def_list
  - footnotes
  - tables
  - pymdownx.tasklist:
      custom_checkbox: true
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:mermaid2.fence_mermaid_custom
  - pymdownx.tabbed
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg

...
extra_javascript:
  - https://unpkg.com/mermaid/dist/mermaid.min.js

I am not sure this is the right place to ask about this, it may be an issue with mkdocs-material directly.

I am trying to show a C4 container

```mermaid
C4Container
    title Container diagram for Dashboard System
    Container_Boundary(a "System") {
        Container(API, "API", "FastAPI", "Provides functionalities to execute operations with HTTP requests")
        Container(Frontend, "Frontend", "HTML/CSS/Js", "Provides functionalities to execute operations with visual aid")
        ContainerDb_Ext(time_serie_db, "Robot collected data", "AWS", "Store data")
    }

And this is what is show

As you can see, the text does not fit in the box. On a bigger monitor, it's a bit better for some reasons...

Is there an easy way to add some space between the text and box? or another workaround? Thanks

Thank you for your contribution! This is very appreciated.

Sorry for the delay in answering. mkdocs-mermaid2 is the python wrapper. I believe the question would be more for the team who designed the mermaid javascript library.

FWIW this problem can be replicated on https://mermaid.live and here on GitHub which I think confirms it's an upstream issue.

C4Container
    title Container diagram for Dashboard System
    Container_Boundary("System") {
        Container(API, "API", "FastAPI", "Provides functionalities to execute operations with HTTP requests")
        Container(Frontend, "Frontend", "HTML/CSS/Js", "Provides functionalities to execute operations with visual aid")
        ContainerDb_Ext(time_serie_db, "Robot collected data", "AWS", "Store data")
    }

One workaround might be to enter <br /> line breaks in the description:

C4Container
    title Container diagram for Dashboard System
    Container_Boundary("System") {
        Container(API, "API", "FastAPI", "Provides functionalities<br />to execute operations<br />with HTTP requests")
        Container(Frontend, "Frontend", "HTML/CSS/Js", "Provides functionalities<br />to execute operations<br />with visual aid")
        ContainerDb_Ext(time_serie_db, "Robot collected data", "AWS", "Store data")
    }

Thanks a lot!