search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
71.8k stars 6.52k forks source link

C4 - Inconsistent behaviour of `descr` and `techn` in Component/Container and Relationship #3329

Open tjcuddihy opened 2 years ago

tjcuddihy commented 2 years ago

Describe the bug techn fails to display for Components and Containers, descr fails to display for Relationships.

element techn descr
Component :x: :white_check_mark:
Container :x: :white_check_mark:
Relationship :white_check_mark: :x:

To Reproduce

Expected behavior I expect to see the techn text display in the element. See here, and notice that on Single Page App there is a text section [Container: JavaScript and Angular].

Note that the mermaid documentation lists techn as implemented for Component, Container and Relationship. In addition, the tutorial/example section for Containers shows techn being used but the resulting diagrams fail to display the text (i.e. it also shows the bugged behaviour).

Investigation Playing with the online editor link below, I noticed that the resulting image is different between the following two:

Container(con, "label", "techn", "descr")

and

Container(con, "label", "", "descr")

The latter code produces a smaller box. So the mermaid engine is reacting to a non-empty string in the techn position but it doesn't show anything.

Using inspect element on the live editor, I get the following HTML:

Container(con, "label", "techn", "descr")

<g class="person-man">
    <rect ry="2.5" rx="2.5" height="110" width="216" stroke="#666" fill="#438DD5" y="168" x="782"></rect><text y="188"
        x="851.5" textLength="77" lengthAdjust="spacing" font-style="italic" font-size="12"
        font-family="&quot;Open Sans&quot;, sans-serif" fill="#FFFFFF">&lt;&lt;container&gt;&gt;</text><text
        style="text-anchor: middle; font-size: 16px; font-weight: bold; font-family: &quot;Open Sans&quot;, sans-serif;"
        fill="#FFFFFF" dominant-baseline="middle" y="206" x="890">
        <tspan alignment-baseline="mathematical" dy="0">label</tspan>
    </text><text
        style="text-anchor: middle; font-size: 14px; font-weight: normal; font-family: &quot;Open Sans&quot;, sans-serif;"
        fill="#FFFFFF" dominant-baseline="middle" y="267" x="890">
        <tspan alignment-baseline="mathematical" dy="0">descr</tspan>
    </text>
</g>

Container(con, "label", "", "descr")

<g class="person-man">
    <rect ry="2.5" rx="2.5" height="87" width="216" stroke="#666" fill="#438DD5" y="168" x="782"></rect><text y="188"
        x="851.5" textLength="77" lengthAdjust="spacing" font-style="italic" font-size="12"
        font-family="&quot;Open Sans&quot;, sans-serif" fill="#FFFFFF">&lt;&lt;container&gt;&gt;</text><text
        style="text-anchor: middle; font-size: 16px; font-weight: bold; font-family: &quot;Open Sans&quot;, sans-serif;"
        fill="#FFFFFF" dominant-baseline="middle" y="206" x="890">
        <tspan alignment-baseline="mathematical" dy="0">label</tspan>
    </text><text
        style="text-anchor: middle; font-size: 14px; font-weight: normal; font-family: &quot;Open Sans&quot;, sans-serif;"
        fill="#FFFFFF" dominant-baseline="middle" y="244" x="890">
        <tspan alignment-baseline="mathematical" dy="0">descr</tspan>
    </text>
</g>

Here is a screen show of the diff between the 2: image

So the difference is just in sizing of the outer element and positioning of elements drawn below where techn should go, as opposed to any extra HTML code being added. I suspect that we are successfully arriving at this line which is updating the total Y and hence the rectHeight.

After updating the rectHeight, the next action is to draw the elements. I suspect that there is a typo here of thchn instead of techn which means the actual text doesn't get drawn.

The drawing of the rels doesn't even consider descr, only techn.

Code Sample Example on live editor.

Desktop (please complete the following information):

The behaviour is consistent across the 2 setups above.

Additional context nil

CarsonSlovoka commented 1 year ago

I'm also looking for a way to display techn, can it be done through UpdateElementStyle? (Currently there is no example in the document)