Missing relationships in diagram with format svg_inline

[jmezach]

I have an interesting issue with plantuml-markdown where it seems that only the first relationship is rendered for my diagram. Any subsequent relations are somehow removed. But this only happens when the format is svg_inline. Using format svg I get the expected diagram output. Running plantuml from the command line for the same diagram also generates the correct svg file. This leads me to believe that plantuml-markdown is somehow removing elements from the SVG when using the svg_inline format, but I have so far been unable to figure out what triggers it, because it doesn't seem to happen for all diagrams. Thought I'd file an issue to get some thoughts on what might be going on here.

[jmezach]

Okay, after some more investigation I think I've figured out how it is triggered. For example, let's consider the following diagram:

@startuml (id=overview)
class "A" as a
class "B" as b

a -- "1..*" b: "has"
b -- "1..*" a: "associated"
@enduml

This renders the following SVG when I use format: svg:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    contentStyleType="text/css" height="175px" preserveAspectRatio="none"
    style="width:126px;height:175px;background:#FFFFFF;" version="1.1" viewBox="0 0 126 175"
    width="126px" zoomAndPan="magnify">
    <defs />
    <g><!--class
        a-->
        <g id="elem_a">
            <rect codeLine="1" fill="#FFFFFF" height="42.2969" id="a" rx="2.5" ry="2.5"
                style="stroke:#000000;stroke-width:0.5;" width="15" x="40.76" y="7" />
            <text fill="#000000" font-family="Helvetica" font-size="14" lengthAdjust="spacing"
                textLength="9" x="43.76" y="24.9951">A</text>
            <line style="stroke:#000000;stroke-width:0.5;" x1="41.76" x2="54.76" y1="33.2969"
                y2="33.2969" />
            <line style="stroke:#000000;stroke-width:0.5;" x1="41.76" x2="54.76" y1="41.2969"
                y2="41.2969" />
        </g><!--class
        b-->
        <g id="elem_b">
            <rect codeLine="2" fill="#FFFFFF" height="42.2969" id="b" rx="2.5" ry="2.5"
                style="stroke:#000000;stroke-width:0.5;" width="16" x="40.26" y="126.29" />
            <text fill="#000000" font-family="Helvetica" font-size="14" lengthAdjust="spacing"
                textLength="10" x="43.26" y="144.2851">B</text>
            <line style="stroke:#000000;stroke-width:0.5;" x1="41.26" x2="55.26" y1="152.5869"
                y2="152.5869" />
            <line style="stroke:#000000;stroke-width:0.5;" x1="41.26" x2="55.26" y1="160.5869"
                y2="160.5869" />
        </g><!--link
        a to b-->
        <g id="link_a_b">
            <path codeLine="4"
                d="M40.28,37.15 C31.69,46.39 18.54,62.48 13.26,79.29 C6,102.37 27.26,126.96 39.79,138.97 "
                fill="none" id="a-b" style="stroke:#000000;stroke-width:1.0;" />
            <text fill="#000000" font-family="Helvetica" font-size="13" lengthAdjust="spacing"
                textLength="23" x="14.26" y="92.3569">has</text>
            <text fill="#000000" font-family="Helvetica" font-size="13" lengthAdjust="spacing"
                textLength="23" x="9.1764" y="129.9742">1..*</text>
        </g><!--link
        b to a-->
        <g id="link_b_a">
            <path codeLine="5" d="M48.26,125.85 C48.26,104.39 48.26,70.97 48.26,49.58 " fill="none"
                id="b-a" style="stroke:#000000;stroke-width:1.0;" />
            <text fill="#000000" font-family="Helvetica" font-size="13" lengthAdjust="spacing"
                textLength="69" x="49.26" y="92.3569">associated</text>
            <text fill="#000000" font-family="Helvetica" font-size="13" lengthAdjust="spacing"
                textLength="23" x="22.1694" y="69.4401">1..*</text>
        </g><!--SRC=[hTBDQyCW503mU_uAn-uZ7pHfO1HCIkXW6sFTsDdfQo8r6lne2QF_-qowGsXod2VHdy_tz3MS0Q9SKm51CyoD1GtAzXq4viXbHpHf4OC3SS9MIjfNqW92En0di9oI2J8DOUhCPOqEH9ZfyOxG8wbXRti1I0ErHDR-lecWWXY3VWBa1zPQdKibb4Q5y2V7nS9FQgsSPDUThuPRkEuepK1F_UtousFXMEtJbVLcW-whgi1fE4TxsW1pua-bUO7BTAu-kA__7Mfkh2QMApdWFCjME9xZDz9h9SH0aYIDocWXjvrhYVGHZNAQWXbi6IT5l10EVnkGT7vzLQLv6iszTqwCQWoRPTjjbYsayCmfI0FeXKZ_JIr8EnO5DAA7kNvY7d3Rt_0Avt6uyAoV1lGDZPBrEbmlr8V7brybgx0ABjF-aCh2VxN79RZZaWhdcrsTG9yud1ywrufV]-->
    </g>
</svg>

Note that this includes two <g> elements with links, one between class A and B and one the other way around. But when I change format to svg_inline I get the following:

<svg title="" alt="uml diagram" class="uml" zoomAndPan="magnify" width="100%" viewBox="0 0 126 175"
    version="1.1" style="width:126px;height:175px;background:#FFFFFF"
    preserveAspectRatio="xMaxYMax meet">
    <defs></defs>
    <g>
        <g id="elem_a">
            <rect y="7" x="40.76" width="15" style="stroke:#000000;stroke-width:0.5;" ry="2.5"
                rx="2.5" id="a" height="42.2969" fill="#FFFFFF"></rect>
            <text y="24.9951" x="43.76" textLength="9" lengthAdjust="spacing" font-size="14"
                font-family="Helvetica" fill="#000000">A</text>
            <line y2="33.2969" y1="33.2969" x2="54.76" x1="41.76"
                style="stroke:#000000;stroke-width:0.5;"></line>
            <line y2="41.2969" y1="41.2969" x2="54.76" x1="41.76"
                style="stroke:#000000;stroke-width:0.5;"></line>
        </g>
        <g id="elem_b">
            <rect y="126.29" x="40.26" width="16" style="stroke:#000000;stroke-width:0.5;" ry="2.5"
                rx="2.5" id="b" height="42.2969" fill="#FFFFFF"></rect>
            <text y="144.2851" x="43.26" textLength="10" lengthAdjust="spacing" font-size="14"
                font-family="Helvetica" fill="#000000">B</text>
            <line y2="152.5869" y1="152.5869" x2="55.26" x1="41.26"
                style="stroke:#000000;stroke-width:0.5;"></line>
            <line y2="160.5869" y1="160.5869" x2="55.26" x1="41.26"
                style="stroke:#000000;stroke-width:0.5;"></line>
        </g>
        <g id="link_a_b">
            <path style="stroke:#000000;stroke-width:1.0;" id="a-b" fill="none"
                d="M40.28,37.15 C31.69,46.39 18.54,62.48 13.26,79.29 C6,102.37 27.26,126.96 39.79,138.97"></path>
            <text y="92.3569" x="14.26" textLength="23" lengthAdjust="spacing" font-size="13"
                font-family="Helvetica" fill="#000000">has</text>
            <text y="129.9742" x="9.1764" textLength="23" lengthAdjust="spacing" font-size="13"
                font-family="Helvetica" fill="#000000">1..</text>
        </g>
    </g>
</svg>

Note that in this SVG there is only a single <g> element with an ID of link_a_b and link_b_a is missing entirely. Also note that the final * is missing in the text element. Interestingly if I change the diagram to not include a *, then both my links show up, even with format svg_inline so I guess the * is breaking something here.

[jmezach]

After debugging this for a bit I've come to the conclusion that this might not actually be an issue in plantuml-markdown as it returns the correct output, so I'm guessing that Python Markdown is actually breaking it. Not sure why though.

[mikitex70]

Hi @jmezach , sorry for the delay. I can confirm that the svg is changed after the plantuml_markdown plugin has generated it. I've saved the SVG just before exiting the plugin and it is correct. The HTML produced instead have the * replaced with an <em>... so it seems there is something that tries to interpret the resulting SVG as Markdown. I will try to fix it.

[mikitex70]

I've found a way to inform Markdown not to touch the generated code. I've released the 3.9.2 version, it should solve your issues.

[jmezach]

@mikitex70 Thanks, I just tried it and it works like a charm now.