SVG output (almost) not correct

[priiduonu]

The sequenceDiagram and gantt graphs are rendered correctly, when SVG output is chosen.
All other graph types are either missing connector lines or text / labels (even if opened in browser).

I compared the output of correct and incorrect files and when I replaced all occurrences of <div with <div xmlns="http://www.w3.org/1999/xhtml" , it seemed to help.

There is also a foreignObject style missing in some graphs. I used foreignObject { font-family: sans-serif; font-size: 14px; } in the style section.

[whyzdev]

@priiduonu Thanks for raising the issue. It's because of recent changes related #422.

Does this happen to small sample, in cli or which browser? Could post example input and output? In Chrome and Firefox, I saw div xmlns was automatically added. The two div may not be optimal. Will find better ways.

Meanwhile, could you try to add "textPlacement":"tspan" in config (sequenceDiagram or sequenceConfig depending on how mermaid is configured).

Change to "textPlacement":"old" should revert to previous behavior before the changes.

[whyzdev]

in pending PR #435, the default is changed from 'fo' to 'tspan'

[priiduonu]

I made a simple test now with the following file g1.mmd:

graph TD
A--test-->B

Using CLI version:

mermaid --version
6.0.0

Configuration file test.cfg with content:

{
	"textPlacement":"tspan"
}

Command line:

mermaid -s --sequenceConfig test.cfg  g1.mmd 
Num files to execute : 1
ready to execute png: g1.mmd.png 
CONSOLE: [13:59:37 (083)]  Initializing mermaid (from line # in "")
CONSOLE: [13:59:37 (083)]  Initializing mermaidAPI (from line # in "")
CONSOLE: [13:59:37 (083)]  Setting conf  sequenceDiagram - textPlacement (from line # in "")
CONSOLE: [13:59:37 (083)]  Setting config: sequenceDiagram textPlacement to tspan (from line # in "")
CONSOLE: [13:59:37 (083)]  Starting rendering diagrams (from line # in "")
CONSOLE: [13:59:37 (083)]  Start On Load before: undefined (from line # in "")
CONSOLE: [13:59:37 (083)]  Initializing mermaidAPI (from line # in "")
CONSOLE: [13:59:37 (083)]  Setting conf  gantt - useWidth (from line # in "")
CONSOLE: [13:59:37 (083)]  Setting config: gantt useWidth to 1200 (from line # in "")
CONSOLE: [13:59:37 (085)]  Drawing flowchart (from line # in "")
CONSOLE: [13:59:37 (088)]  Got edge A B (from line # in "")
CONSOLE: [13:59:37 (143)]  Got edge A B (from line # in "")

The resulting SVG

• contains lowercase edgepath and edgelabel styles instead of edgePath and edgeLabel
• still contains foreignObject tags instead of tspan tags

If I change the textPlacement to old the resulting file is identical. The console output reports correct parameter value (Setting config: sequenceDiagram textPlacement to old).

So it seems the textPlacement is not working.

Look at the attached input, config and output files.

g1.zip

[whyzdev]

Thanks. This is flow chart, not related to the changes by recent issues and PRs for sequence diagram. The textPlacement config only apply to sequence digram at the moment. Once stable, we may consolidate text placement in other diagrams.

graph TD
A--test-->B

CONSOLE: [13:59:37 (085)] Drawing flowchart (from line # in "")

let me look into this problem in flow chart. Saw it happens in the output of some tests not some others.

[priiduonu]

Thanks! It seems that using tspan tags makes the file compatible for other viewers/editors besides browsers. Please let me know if more testing is needed, I'm very interested to make it work correctly.

[whyzdev]

Cool tspan is a way to go then. will do. Thanks!

[whyzdev]

before fixing text placement in flowchat, should fix css selector text issue, which is the cause of missing edges. this was also reported in #341.

This only happens to cli svg output when css rules in the document are copied to the svg node for output. But css selector text, .e.g .edgePath already becomes lowercase .edgepath in dom. So the css selector in svg output is not consistent with the style name on the elements.

This doesn't happen to cli png format.

So either cloneCssStyles in utils.js should write back the proper cases using a dictionary, or rename the css selector texts to lowercase, which may break compatibility. So will handle this in cloneCssStyles at least for known ones including .edgePath.

[knsv]

Closed by release 7.0.0, please reopen if issues remain.