Backtick method of Text wrapping in flowchart elements causing: 1. Title of Subgraph word wrap to be overlayed by elements (in VS Code Markdown Preview) 2. Tick marks to show up in all labels, in Github Profile README.md user interface

[pmeaney]

Description

I am currently working on a MermaidJS flow chart which features somewhat lengthy text labels.

The problem I was facing was that without using a word-wrap functionality, the flowchart elements were becoming quite horizontally long.

I found this solution:
https://stackoverflow.com/a/75978908

Which discusses setting up labels like this-- using text wrapped in backticks wrapped double quotes (e.g. "`text`")

e.g.
A-->B["`Example of a long text string which can be word-wrapped with tick marks and doublequotes`"]

However there are two problems:

Problem 1: Subgraph title visually overlapped by elements, in VS Code markdown preview

1. The above Stackoverflow comment's solution works well regarding adding word wrap to flowchart elements: The regular elements labels are word wrapped perfectly.
2. Problem: However, if I attempt to use the "``" methodology of word wrapping on subgraph labels, the labels get placed behind elements-- the chart elements are overlayed on top of wordwrapped subgraph titles-- at least in VS Code Markdown Preview (using VSCode Extension: Markdown Preview Mermaid Support and VSCode Extension: Markdown All in One -- the latter which I use to open a markdown preview window within VS Code)

Example of the problem mentioned above the using wordwrapping on subchart title labels results in flowchart elements laying on top of the subgraph title label, in use case of: VS Code Markdown Preview

Notice: Word wrap works on main elements, but not in subgraph title's label due to an overlay problem

Problem 2: on Github profile page, backtick marks appear in flowchart element labels and wordwrap may or may not be working

On my github profile page (which is based on a README.md file), the "``" methodology results in the backticks showing up in the flowchart element labels-- which I do not prefer.

Example of backticks showing up flowchart element labels in use case of: Github profile use of MermaidJS :

Notice: Word wrap works, but the backticks are shown and wordwrap may or may not be working

Live Example:

User Interface (Scroll to bottom) of MermaidJS chart backticks issue: https://github.com/pmeaney/pmeaney

Code for the above live example: https://github.com/pmeaney/pmeaney/blob/main/README.md?plain=1#L64

Steps to reproduce

Code Sample

# Example with use of "``" word wrap methodology


  graph TD;
      subgraph one["`Example of how to Interweave three skillsets to enter a new career field`"]
        A["`Communication Campaign`"]-->D;
        B["`Event Marketing`"]-->D;
        C["`Self-study Frontend Development`"]-->D;
      end
      D["`Make web portfolio to demonstrate Digital Marketing-related Experience & skills`"]-->E["`Digital Marketing Job with Marketo CRM, at SolarWinds`"]


# Example without use of "``" word wrap methodology

```mermaid
  graph TD;
      subgraph one[Example of how to Interweave three skillsets to enter a new career field]
        A[Communication Campaign]-->D;
        B[Event Marketing]-->D;
        C[Self-study Frontend Development]-->D;
      end
      D[Make web portfolio to demonstrate Digital Marketing-related Experience & skills]-->E[Digital Marketing Job with Marketo CRM, at SolarWinds]

### Setup

- Mermaid version:
- Browser and Version: [Chrome, Edge, Firefox]

**VS CODE:**
Mermaid Markdown Preview

1.21.0 - December 6, 2023
Pick up Mermaid 10.6.1. 

Markdown All In One
3.6.0/3.6.1 (2024.01.08)

Github's version of Mermaid:
Unknown