Generated SVG works poorly outside web browsers about mermaid HOT 13 CLOSED

Instead of html labels we should try to use text elements with tspan elements inside for this. For instance, the generated code with html labels are:

<foreignObject width="104" height="72">
   <div style="display: inline-block; white-space: nowrap;">Really<br>
      long text <br>
      with linebreak<br>
      in an Odd shape
   </div>
</foreignObject>

Instead the text should be represented by something like this:

<text text-anchor="start" x="1" y="1">
    <tspan dy="1em" x="0">Really</tspan>
    <tspan dy="1em" x="0">long text</tspan>
    <tspan dy="1em" x="0">with linebreak</tspan>
    <tspan dy="1em" x="0">in an Odd shape</tspan>
</text>

from mermaid.

Yes, that seems to be the standard way in SVG. Will look into this when I am finished with the issue #24.

from mermaid.

foreignObject apperantly also breaks functionality of converting SVG -> Canvas -> PNG image
Was trying to add functionality of 'save as image' in browser but failed so far

from mermaid.

As another hopefully helpful reference, here is how d3plus handles the text wrapping http://d3plus.org/examples/utilities/a39f0c3fc52804ee859a/.

Thanks so much @knsv for such fine work. We are making it into an htmlwidget to make it easily available to R users.

from mermaid.

Thanks @timelyportfolio, that looks cool!
With the current model for text in mermaid, the user does not need to care about the width of individual nodes - instead they specify the linebreaks manually. It is a tempting alternative to be able to set a specific node width instead, and use something like d3plus to reformat the text to fit inside the node.

However, mermaid builds on dagre-d3 to generate the SVG content, including the text labels. It would be more natural to incorporate this kind of text wrapping support into dagre-d3 instead.

The work I have in progress on the labels is to support both label variants of dagre-d3 - HTML version and SVG version. If dagre-d3 is improved, we can then make use of that directly in mermaid.

from mermaid.

This has been included in release 0.3.3

from mermaid.

@knsv cool!
Wanted to check how it works now and integrate in to tool I am building on top of mermaid.
But is full browser 0.3.3 version available somewhere for download already?

from mermaid.

It is avaiable using npm/bower or from download (cdn) rihght now. If you are making a tool with user input you might want to take a look at the errorHandling/syntax check api in 0.3.3:

Error handling

When the parser encounters invalid syntax the mermaid.parseError function is called. It is possible to override this function in order to handle the error in an application specific way.

Parsing text without rendering

It is also possible to validate the syntax before rendering in order to streamline the user experience. The function mermaid.parse(txt) takes a text string as an argument and returns true if the text is syntactically correct and false if it is not. The parseError function will be called when the parse function returns false.

The code-example below in meta code illustrates how this could work:

mermaid.parseError = function(err,hash){
    displayErrorInGui(err);
};

var textFieldUpdated = function(){
    var textStr = getTextFromFormField('code');

    if(mermaid.parse(textStr)){
        reRender(textStr)
    }
};

bindEventHandler('change', 'code', textFieldUpdated);

from mermaid.

Played with 0.3.3
Firstly it seems syntax changed.
';' is not needed anymore and its more strict with spaces and may be other symbols.

Secondly lines reported in parseError are weird. Like in

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D 

It reports:

Parse error on line 9:
...ombus}
    C --> D 
----------------------^
Expecting 'SEMI', 'EOF', 'NEWLINE', '--', '-.', '==', 'ARROW_POINT', 'ARROW_CIRCLE', 'ARROW_CROSS', 'ARROW_OPEN', 'DOTTED_ARROW_POINT', 'DOTTED_ARROW_CIRCLE', 'DOTTED_ARROW_CROSS', 'DOTTED_ARROW_OPEN', 'THICK_ARROW_POINT', 'THICK_ARROW_CIRCLE', 'THICK_ARROW_CROSS', 'THICK_ARROW_OPEN', got 'SPACE'

So error on line 9 in file of 5 lines.

from mermaid.

Hello!

Are you sure that the actual character are not in fact > that is an escaped code for > and renders to > in the browser? When I copy the text from your email to my test page which is using 0.3.3 it renders fine so the syntax is ok.

I hope this gives you some help.

Knut Sveidqvist
Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Wednesday 28 January 2015 at 21:40, wonderwhy-er wrote:

Played with 0.3.3
Firstly it seems syntax changed.
';' is not needed anymore and its more strict with spaces and may be other symbols.
Secondly lines reported in parseError are weird. Like in
graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D
It reports:
Parse error on line 9: ...ombus} C --> D ----------------------^ Expecting 'SEMI', 'EOF', 'NEWLINE', '--', '-.', '==', 'ARROW_POINT', 'ARROW_CIRCLE', 'ARROW_CROSS', 'ARROW_OPEN', 'DOTTED_ARROW_POINT', 'DOTTED_ARROW_CIRCLE', 'DOTTED_ARROW_CROSS', 'DOTTED_ARROW_OPEN', 'THICK_ARROW_POINT', 'THICK_ARROW_CIRCLE', 'THICK_ARROW_CROSS', 'THICK_ARROW_OPEN', got 'SPACE'
So error on line 9 in file of 5 lines.

—
Reply to this email directly or view it on GitHub (#58 (comment)).

from mermaid.

Is this issue resolved? With v0.3.3 I observe foreignObject(s) in generated graphs, but not sequence diagrams. Graph layouts seems to be sensitive to css fonts a line heights settings. Some replacements of foreign objects is still going on here.

from mermaid.

For the flowChart graph type, a configuration setting is required to generate SVGs without foreignObject. Set htmlLabels to false in the mermaid config to enable that. Granted this need to get into the wiki.
The reason that htmlLabels are still enabled by default, is that the pure SVG labels provided by dagre-d3 are limited in styling. The plan was to improve the labels in dagre-d3 to mimic the style of the current html Labels, and then make text labels default. But as long as you can accept the slightly different style, you can use them already.

from mermaid.

I will try out the configuration setting. Thanks a lot for clarification.

from mermaid.