Text not fitting in the C4 models

[Minipada]

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

[github-actions[bot]]

Thank you for your contribution! This is very appreciated.

[fralau]

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.

[lofidevops]

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")
    }

[fralau]

Thanks a lot!