using mermaid with laravel

[barttt]

Not sure how to address this problem
I am trying to use mermaid with a laravel view page. It seems to be trying to work but I cannot get rid of an error that causes the rendering to fail. I used bower to install mermaid and use this div:

graph TD;
sq[Square shape]-->di{Diamond};
di-->A;
C-->di;
A-->C;
B-->C;
C-->ro2(Rounded square shape);

The stack looks like this:

[105]</module.exports.cloneCssStyles()mermaid.js (line 32075)
[104]</</render(id="mermaidChart0", txt="graph TD; \n sq[Squar...(Rounded square shape);", cb=function(svgCode), container=div.mermaid)mermaid.js (line 31907)
[104]</</exports.render(id="mermaidChart0", text="graph TD; \n sq[Squar...(Rounded square shape);", cb=function(svgCode), containerElement=div.mermaid)mermaid.js (line 31959)
[103]</</init()mermaid.js (line 31635)
[103]</</global.mermaid.init(sequenceConfig=undefined, nodes=undefined)mermaid.js (line 31670)
[103]</</exports.contentLoaded()mermaid.js (line 31712)
[103]</</<()mermaid.js (line 31732)

And the error reads "rule is undefined" on the line in question.
Can anyone help me out with a solution?
Thanks

[knsv]

The problem comes when trying to close the css rules it seems. Try
disabling the css cloning and see if that helps. With the 0.5.x version of
mermaid that can be done.

ex:
mermaid.initialize({mermaid:{cloneCssStyles: false}});

On Fri, Jul 10, 2015 at 1:33 AM, barttt [email protected] wrote:

Not sure how to address this problem
I am trying to use mermaid with a laravel view page. It seems to be trying
to work but I cannot get rid of an error that causes the rendering to fail.
I used bower to install mermaid and use this div:

graph TD;
sq[Square shape]-->di{Diamond};
di-->A;
C-->di;
A-->C;
B-->C;
C-->ro2(Rounded square shape);

The stack looks like this:

[105]</module.exports.cloneCssStyles()mermaid.js (line 32075)
[104]</</render(id="mermaidChart0", txt="graph TD; \n sq[Squar...(Rounded
square shape);", cb=function(svgCode), container=div.mermaid)mermaid.js
(line 31907)
[104]</</exports.render(id="mermaidChart0", text="graph TD; \n
sq[Squar...(Rounded square shape);", cb=function(svgCode),
containerElement=div.mermaid)mermaid.js (line 31959)
[103]</</init()mermaid.js (line 31635)
[103]</</global.mermaid.init(sequenceConfig=undefined,
nodes=undefined)mermaid.js (line 31670)
[103]</</exports.contentLoaded()mermaid.js (line 31712)
[103]</</<()mermaid.js (line 31732)

And the error reads "rule is undefined" on the line in question.
Can anyone help me out with a solution?
Thanks

—
Reply to this email directly or view it on GitHub
#185.

[barttt]

THank you for the quick reply.
I just did as you suggested (hopefully this is correct):.
[code]
mermaid.initialize({mermaid:{cloneCssStyles: false}});
mermaid.initialize({startOnLoad:true});

[/code]
The result is the text is displayed above the rendering area,
and the rendering is as before:
black filled boxes, arrows missing, no text in the diagram
and the same error..

This is trying to work, but it seems that something is interfering with the process.

[barttt]

Oops did not mean to close this issue..

[barttt]

Hi Knut-
Thanks for the reply..
I tried your suggestion. But the results were the same.
It occurred to me that perhaps the blade engine in laravel was causing some grief, so I renamed the file from welcome.blade.php to welcome.php, but that is not helping either. I have attached the web page text in case it can shed any light on this..

Thanks for any help

---

Bart Thompson
Software Engineer

Alpha Research & Technology

From: Knut Sveidqvist [mailto:[email protected]]
Sent: Friday, July 10, 2015 1:47 AM
To: knsv/mermaid
Cc: Bart Thompson
Subject: Re: [mermaid] using mermaid with laravel (#185)

The problem comes when trying to close the css rules it seems. Try
disabling the css cloning and see if that helps. With the 0.5.x version of
mermaid that can be done.

ex:
mermaid.initialize({mermaid:{cloneCssStyles: false}});

On Fri, Jul 10, 2015 at 1:33 AM, barttt [email protected] wrote:

Not sure how to address this problem
I am trying to use mermaid with a laravel view page. It seems to be trying
to work but I cannot get rid of an error that causes the rendering to fail.
I used bower to install mermaid and use this div:

graph TD;
sq[Square shape]-->di{Diamond};
di-->A;
C-->di;
A-->C;
B-->C;
C-->ro2(Rounded square shape);

The stack looks like this:

[105]</module.exports.cloneCssStyles()mermaid.js (line 32075)
[104]</</render(id="mermaidChart0", txt="graph TD; \n sq[Squar...(Rounded
square shape);", cb=function(svgCode), container=div.mermaid)mermaid.js
(line 31907)
[104]</</exports.render(id="mermaidChart0", text="graph TD; \n
sq[Squar...(Rounded square shape);", cb=function(svgCode),
containerElement=div.mermaid)mermaid.js (line 31959)
[103]</</init()mermaid.js (line 31635)
[103]</</global.mermaid.init(sequenceConfig=undefined,
nodes=undefined)mermaid.js (line 31670)
[103]</</exports.contentLoaded()mermaid.js (line 31712)
[103]</</<()mermaid.js (line 31732)

And the error reads "rule is undefined" on the line in question.
Can anyone help me out with a solution?
Thanks

—
Reply to this email directly or view it on GitHub
#185.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/185#issuecomment-120303145.

WARNING – This email may contain Privileged, Proprietary and/or Competition-Sensitive Data, intended for the sole use of the intended recipient of this email. This communication may also contain data subject to U.S. export laws, and which may not be releasable to Foreign Persons unless authorized by 22 CFR 120-130 or 15.CFR 730-774. If so, that data may also be subject to the International Traffic in Arms Regulation and cannot be disseminated, distributed or copied to foreign nationals, residing in the U.S. or abroad, absent the express prior approval of the U.S. Department of State. If you are not the intended recipient of this email, or have received this email in error, please notify the sender by reply e-mail and destroy the e-mail message and any physical copies made of the communication. If you are not the intended recipient, dissemination, distribution or copying of this communication may be strictly prohibited by other applicable laws. Thank you.

[barttt]

I found that I was not including the mermaid.css file. That solved the rendering issue.
I still have the text of the mermaid div getting displayed. Any idea on how to stop that??
Thanks in advance