Use classes instead of inline style for easy styling

[totty90]

Would be nice to do:

.box {
    fill: #E1F0FF;
    stroke: #138BFF;
}

Or there is an easier way?

[knsv]

I had some idea of being able to paste the svg code and save it as an svg for use in en external program. Maybe you can use the class definiton and the default class for the styling.

[bjowes]

It seems to be allowed within the SVG standard to specify CSS classes inside the SVG. One example:
http://blogs.msdn.com/b/ie/archive/2011/10/27/best-practices-for-getting-started-with-svg.aspx

That way it should still fulfill the "copy&paste" scenario. I will look into if the d3 and dagre-d3 supports inserting a CSS header into the SVG.

[knsv]

Sounds great! Good luck.

I think the goal should be that one can take the svg code generated by mermaid, save it to a file and be able to open in svg editor of choice.

Good luck!

[bjowes]

Got it working! Have a look at my fork for a working example, I made the test page web_style.html for this purpose. This impact the syntax in the following ways:
style - is still used for inline styling of nodes
class - is used to assign a class to a node (nodes may have multiple classes)
classDef - is unused at the moment. Considering to push the styles from classDefs to the common style section for the SVG, but that is next step.
Once the graph is generated, the script will now check through all stylesheets and copy those that affect anything within the SVG into the SVG style section. The default styling (previously class default) is added at the top of the SVG style section.
What do you think of this approach?

I noticed that for the odd shape and the diamond, inline styles were set on the shape. Those were removed.
Also added a generated SVG file to the test folder, to simplify checking how well it carries the styles. The common styles work fine, but the text doesn't due to foreignObject - and it doesn't like
either. I'll create a separate issue on that.

[knsv]

This looks really good!

By fetching the styles you will know that the svg will look the same outside the browser context. I think we need to support the classDef statement needs to be included as well. That should be fairly easy as we get those from the parser. This for not breaking backwards compatability but we can deprecate the statement and remove it later.

Looking forward to the pull request.

[knsv]

Included in release 0.2.16