Inline css by "mermaid" #157

maxmeyer · 2015-04-20T08:53:08Z

Hi there,

I'm trying to integrate mermaid into middleman-presentation - a gem which wraps reveal.js.

I'm installed mermaid via bower. Everytime I added the mermaid/dist/mermaid.full.js file to a presentation, the following inline css-styles appear:

/* <![CDATA[ */
#mermaidChart0 .node { fill:#ffa; stroke:#666; stroke-width:3px; }
#mermaidChart0 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart0 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe, .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre, .reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code, .reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp, .reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var, .reveal b, .reveal u, .reveal center, .reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li, .reveal fieldset, .reveal form, .reveal label, .reveal legend, .reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td, .reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed, .reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary, .reveal time, .reveal mark, .reveal audio, video { margin: 0px; padding: 0px; border: 0px none; font: inherit; vertical-align: baseline; }
/* ]]> */

The last line of the inline css is a problem for me, because it overwrites my styles for H1, H2 etc.

html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe, .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre, .reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code, .reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp, .reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var, .reveal b, .reveal u, .reveal center, .reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li, .reveal fieldset, .reveal form, .reveal label, .reveal legend, .reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td, .reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed, .reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary, .reveal time, .reveal mark, .reveal audio, video { margin: 0px; padding: 0px; border: 0px none; font: inherit; vertical-align: baseline; }

I'm not sure if this done by mermaid, so maybe you @knsv can help with that? If it is mermaid which adds the line given above, what can I do to prevent that?

Thanks a lot.

The text was updated successfully, but these errors were encountered:

maxmeyer · 2015-04-20T11:17:12Z

Forget about this... The styles above are added by reveal.js itself.

maxmeyer · 2015-04-20T12:50:10Z

The problem is this:

Styles are cloned here
Styles are inserted here

The "insert"-operation overwrites each style which was applied later to H1 etc. Does it make sense to use the "computed" styles instead or use something else instead of insertBefore.

Please also see this

maxmeyer · 2015-04-20T12:50:42Z

Minimal failing example:

Please save the HTML-file to your disk and open it with a browser. I tested the file with Firefox 37.0.1, Chromium 41, Internet Explorer 11 and it's always the same. The first one will show "This is a H1 headline" with a font size of "5rem". The second one only with "1rem". There's only one difference between the files: The later makes use of some embedded stylesheet.

H1 with font-size 5rem

<html>
  <head>
    <style type="text/css">
      h1 {
        font-size: 5rem;
      }
    </style>
  </head>
  <body>
    <h1>This is a H1 headline</h1>
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="56.766983mm" height="34.995556mm" viewBox="0 0 201.14285 124" id="svg2" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="drawing.svg">
      <defs id="defs4" /> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="-180.14285" inkscape:cy="-78.000013" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" inkscape:window-width="796" inkscape:window-height="853" inkscape:window-x="800" inkscape:window-y="24" inkscape:window-maximized="0" /> <metadata id="metadata7"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(-226.57143,-336.07648)"> <ellipse style="fill:#ececec;fill-opacity:1;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" id="path3336" cx="327.14285" cy="398.07648" rx="98.571426" ry="60" /> </g>
    </svg>
  </body>
</html>

H1 with font-size 1rem

<html>
  <head>
    <style type="text/css">
      h1 {
        font-size: 5rem;
      }
    </style>
  </head>
  <body>
    <h1>This is a H1 headline</h1>
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="56.766983mm" height="34.995556mm" viewBox="0 0 201.14285 124" id="svg2" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="drawing.svg">
      <style type="text/css">
        h1 { font-size: 1rem; }
      </style>
      <defs id="defs4" /> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="-180.14285" inkscape:cy="-78.000013" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" inkscape:window-width="796" inkscape:window-height="853" inkscape:window-x="800" inkscape:window-y="24" inkscape:window-maximized="0" /> <metadata id="metadata7"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(-226.57143,-336.07648)"> <ellipse style="fill:#ececec;fill-opacity:1;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" id="path3336" cx="327.14285" cy="398.07648" rx="98.571426" ry="60" /> </g>
    </svg>
  </body>
</html>

maxmeyer · 2015-04-20T14:51:15Z

@knsv Do see any chance to make utils.cloneCssStyles optional?

maxmeyer · 2015-05-08T06:15:48Z

What about adding such an interface to mermaid.js?

Mermaid.initialize({
  cloneCssStyles: true | false
})

knsv · 2015-05-08T10:57:21Z

Good idea! Lets add it to the list.

ghost · 2015-05-08T11:03:12Z

Wonderful! 👍 Maybe this is helpful https://github.com/hakimel/reveal.js/blob/master/js/reveal.js. Reveal.js uses the same interface. Maybe you can "borrow" the factory-function from there.

ghost · 2015-05-08T11:19:37Z

Maybe anouther use case for such an interface hakimel/reveal.js#1082

@fehmer

#157.

knsv · 2015-06-07T15:38:37Z

A fix for this has been released in version 0.5.0

maxmeyer · 2015-06-07T20:06:03Z

Great! Thanks a lot! 😄 Will integrate mermaid into https://github.com/fedux-org/middleman-presentation then.

velvia · 2016-03-17T07:30:20Z

@knsv so I tried this fix (using latest mermaid.js in dist/ from a few days ago, or using mermaid.min.js 0.5.1), and it doesn't seem to work for me.

When I set cloneCssStyles: true, the <svg> element appears, but does not seem to render. What's more the raw mermaid graph text does not get replaced. Some errors appear in JS console:

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create mermaid.js:556:5
Unexpected value 0 0 -Infinity -Infinity parsing viewBox attribute. mermaid.js:668:6
Unexpected value 0 0 -Infinity -Infinity parsing viewBox attribute.

When I set cloneCssStyles: false, then the <div class="mermaid"> does not get rendered into at all. What am I missing?

To reproduce:

git clone http://github.com/velvia/presentations; check out branch mermaid-0.5.1
npm install / grunt serve
browse to http://localhost:8000/2014-filodb/#/1

Mermaid integration: reveal/plugin/markdown/markdown.js, see line 391, where mermaid.initialize() is called with cloneCssStyles; and also lines 23-32, which is the marked.js integration per your docs.

Any help would be greatly appreciated, thanks.

knsv · 2016-03-17T17:51:27Z

Changing the initialization solved the first startup issue:

        if(typeof mermaid !== 'undefined' ) {
            mermaid.initialize({ 
                cloneCssStyles: true,
                logLevel:1   
            });
        }

There is a subsequent syntax error when trying to render the next graph so I suspect then reveal is doing stuff with the DOM during the presentation. Perhaps the more advanced integration path using the mermaid render function would be a better fit for the plugin. See example below:

var res =  mermaidAPI.render('id1','graph TB;\na-->b',function(){console.log('done');});

I hope that helped.

/Knut

velvia · 2016-03-17T19:00:53Z

Thanks. Changing the init got rid of the errors, but the svg element no longer shows up….

Would you be able to help a bit with the mermaidAPI.render and how it would integrate? I tried entering this into the Firefox JS console:

mermaidAPI.render('id1','graph TB;\na-->b',function(){console.log('done');})

and it returned “undefined”. Sorry I’m not really a JS developer…

thanks again!

On Mar 17, 2016, at 10:51 AM, Knut Sveidqvist notifications@github.com wrote:

mermaidAPI.render('id1','graph TB;\na-->b',function(){console.log('done');})

velvia · 2016-03-17T19:04:28Z

also shouldn’t the config have the mermaid: in it? e.g.
mermaid.initialize( { mermaid: { cloneCssStyles: true }, logLevel: 1 });

On Mar 17, 2016, at 10:51 AM, Knut Sveidqvist notifications@github.com wrote:

Changing the initialization solved the first startup issue:
    if(typeof mermaid !== 'undefined' ) {
        mermaid.initialize({ 
            cloneCssStyles: true,
            logLevel:1   
        });
    }
There is a subsequent syntax error when trying to render the next graph so I suspect then reveal is doing stuff with the DOM during the presentation. Perhaps the more advanced integration path using the mermaid render function would be a better fit for the plugin. See example below:

var res = mermaidAPI.render('id1','graph TB;\na-->b',function(){console.log('done');});
I hope that helped.

/Knut

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub #157 (comment)

knsv · 2016-03-17T20:20:31Z

1st, make sure you are using a later version of mermaid. The one in you repos was 0.5.1 use 0.5.8 instead. If you don't it will not work in recent Chrome browsers.

And, no intialization should not be with in the mermaid section. More info here:
http://knsv.github.io/mermaid/#initialization

Glad to help!

velvia · 2016-03-21T07:48:09Z

Sorry, could you please explain the mermaidAPI.render() call a bit?

mermaidAPI.render('id1','graph TB;\na-->b',function(){console.log('done');})

Is this supposed to return DOM, HTML text, or what? Or does it automagically insert into the DOM element ‘id1’, which must exist already? Any examples would be great, thanks.

On Mar 17, 2016, at 1:20 PM, Knut Sveidqvist notifications@github.com wrote:

1st, make sure you are using a later version of mermaid. The one in you repos was 0.5.1 use 0.5.8 instead. If you don't it will not work in recent Chrome browsers.

And, no intialization should not be with in the mermaid section. More info here:
http://knsv.github.io/mermaid/#initialization http://knsv.github.io/mermaid/#initialization
Glad to help!

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub #157 (comment)

knsv · 2016-03-22T18:56:27Z

He he!

I can see how this can be unclear. Dont heistate to add a better description in the docs md files when it works (if you feel inspired) :)

mermaidAPI.initialize({
     startOnLoad:false
 });
 $(function(){
     var graphDefinition = 'graph TB\na-->b';
     var cb = function(svgGraph){
         console.log(svgGraph);
     };
     mermaidAPI.render('id1',graphDefinition,cb);
 });

In the example above the code in the $(function, function is run after the page has been loaded. Then the render function is called with a unique id, hardcoded graph string and a callback function.

The id is used for graph generation, the hardcoded graph should be replaced with the graph you want to render and the callback is called after the graph rendering is done with the svg code as as string. This string is also returned from the function.

The reason for the callback is that is required when attaching events like click/on hover to the generated graph. If you are not interested in that you can just as well use the returned string.

Hop that sheds light on thins. Good luck.

velvia · 2016-03-23T16:47:02Z

Thanks for the explanation!

So I integrated the mermaidAPI.render as you suggested, in line 30. Something now renders, but it seems the styles are messed up such that you can’t read it. Any ideas?

https://github.com/velvia/presentations/blob/mermaid-0.5.1/reveal/plugin/markdown/markdown.js https://github.com/velvia/presentations/blob/mermaid-0.5.1/reveal/plugin/markdown/markdown.js

Not sure if I can paste the rendering jpg here….

thanks again

On Mar 22, 2016, at 11:56 AM, Knut Sveidqvist notifications@github.com wrote:

He he!

I can see how this can be unclear. Dont heistate to add a better description in the docs md files when it works (if you feel inspired) :)

mermaidAPI.initialize({
startOnLoad:false
});
$(function(){
var graphDefinition = 'graph TB\na-->b';
var cb = function(svgGraph){
console.log(svgGraph);
};
mermaidAPI.render('id1',graphDefinition,cb);
});
In the example above the code in the $(function, function is run after the page has been loaded. Then the render function is called with a unique id, hardcoded graph string and a callback function.

The id is used for graph generation, the hardcoded graph should be replaced with the graph you want to render and the callback is called after the graph rendering is done with the svg code as as string. This string is also returned from the function.

The reason for the callback is that is required when attaching events like click/on hover to the generated graph. If you are not interested in that you can just as well use the returned string.

Hop that sheds light on thins. Good luck.

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub #157 (comment)

QuidamAzerty · 2023-07-10T09:37:55Z

For info, the cloneCssStyles option has been removed with d430019.
The only issue related I found was #482

maxmeyer mentioned this issue Apr 20, 2015

Integrating Mermaid diagrams into Markdown slides hakimel/reveal.js#1082

Closed

maxmeyer closed this as completed Apr 20, 2015

maxmeyer reopened this Apr 20, 2015

maxmeyer mentioned this issue May 28, 2015

using svg in reveal.js hakimel/reveal.js#1239

Closed

knsv added a commit that referenced this issue May 30, 2015

Added option for whether or not to cloneCssStyles as mentioned in issue

45f34d8

#157.

knsv closed this as completed Jun 7, 2015

mniinio mentioned this issue Jan 2, 2016

The need for mermaid.css should be mentioned explicitly in the intro docs... #273

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Inline css by "mermaid" #157

Inline css by "mermaid" #157

maxmeyer commented Apr 20, 2015

maxmeyer commented Apr 20, 2015

maxmeyer commented Apr 20, 2015

maxmeyer commented Apr 20, 2015

maxmeyer commented Apr 20, 2015

maxmeyer commented May 8, 2015

knsv commented May 8, 2015

ghost commented May 8, 2015

ghost commented May 8, 2015

knsv commented Jun 7, 2015

maxmeyer commented Jun 7, 2015

velvia commented Mar 17, 2016

knsv commented Mar 17, 2016

velvia commented Mar 17, 2016

velvia commented Mar 17, 2016

knsv commented Mar 17, 2016

velvia commented Mar 21, 2016

knsv commented Mar 22, 2016

velvia commented Mar 23, 2016

QuidamAzerty commented Jul 10, 2023

Inline css by "mermaid" #157

Inline css by "mermaid" #157

Comments

maxmeyer commented Apr 20, 2015

maxmeyer commented Apr 20, 2015

maxmeyer commented Apr 20, 2015

maxmeyer commented Apr 20, 2015

maxmeyer commented Apr 20, 2015

maxmeyer commented May 8, 2015

knsv commented May 8, 2015

ghost commented May 8, 2015

ghost commented May 8, 2015

knsv commented Jun 7, 2015

maxmeyer commented Jun 7, 2015

velvia commented Mar 17, 2016

knsv commented Mar 17, 2016

velvia commented Mar 17, 2016

velvia commented Mar 17, 2016

knsv commented Mar 17, 2016

velvia commented Mar 21, 2016

knsv commented Mar 22, 2016

velvia commented Mar 23, 2016

QuidamAzerty commented Jul 10, 2023