inoperable in an AMD/requirejs environment: IPython Notebook

[bollwyvl]

Great project!

I desperately want to use mermaid in the IPython notebook. It would be beautiful and painless to flip between a markdown cell with a tiny bit of html wrapping.

Right now, there are some misbehaved files inside both the slim and full builds when used in the requirejs enviornment. While I hate the dependency-management infighting as much as the next guy, big projects like the notebook end up needing a solution to dependency management more robust than globals.

Here is a collection of notebooks that show various attempts I have made at running it:
http://nbviewer.ipython.org/gist/bollwyvl/7b4729c21b3d1ad4c31e

There are a few other approaches, such as shim, that I tried, but it basically all ended up the same way.

Please consider adding requirejs support... very possibly, it could be a one-liner modification to the build process, or a tiny wrapper. I'm happy to help, if PRs to solve this would be welcome.

[bollwyvl]

Just noticed that this is a duplicate (maybe) of #37. Will pitch in over there.

[bollwyvl]

Shucks, I figured we'd fixed this, and I could come back after a release, and make a nice little wrapper for the notebook. Waited a little too long, as I see the tool churn fairy has come, with no mention of standalone or umd to save me.

I tried a number of thing in gulp with the various builds, and never got anything that I could shim back out. There is a a gulp-umd, which I tried, but to no avail.

Here's a minimal example:
http://nbviewer.org/8e413b6a33a8019f6db8

Error occurs around line 25104, the first time it tries to talk about d3 (which is undefined).

For now, I'm still an old full build, but would really like to just integrate it and move on.

Any thoughts? Do you have any pure browser-side tests? I'd like very much to make a requirejs test so that this can stay on the radar.

[knsv]

Yes that would be a good idea. Meanwhile I'l make a requirejs testpage and to reproduce this.

[bollwyvl]

Thanks, sir!

Let me know how I can pitch in! Really looking forward to where adding live-editing mermaid is a one-click experience in the Notebook, either as an authoring tool (pure js, with the output svg stored in data-url img), or as a visualization layer (js + python/networkx).

[knsv]

A simple way to mermaid in a requirejs environment without the shim is to move the script tag that includes mermaid to load before requirejs. Then mermaid initialization is not confused by the require from requirejs.

I tried this on your example and managed to replicate the error and then to see it gone.

I hope that helps.

[bollwyvl]

Thanks for the feedback!

The specific use case I am targeting is an nbextension in the IPython environment, which actually uses the asynchronous nature of un-optimized requirejs to load scripts at runtime based on what the user does.

The extension can be loaded several ways: installed in the user's environment, or run as a bookmarklet. Either way, I don't control the HTML, and requirejs is going to be there before my code gets to run.

The $.getScript("mermaid.js", function(){}) and $("body").append("<script/>", {src: "mermaid.js"}) approaches both fail in the same way as the example above.

[knsv]

ok ... and I assume that the shim you setup for the browser the test is not an option either...

When i test now with a copy of the setup in http://nbviewer.org/8e413b6a33a8019f6db8, I get

Uncaught Error: Mismatched anonymous define() module

[bollwyvl]

I didn't commit the build with standalone... and didn't get around to
testing it in place yesterday. Will update!

On Wed, Jul 22, 2015 at 9:43 AM Knut Sveidqvist notifications@github.com
wrote:

ok ... and I assume that the shim you setup for the browser the test is
not an option either...

When i test now with a copy of the setup in
http://nbviewer.org/8e413b6a33a8019f6db8, I get

Uncaught Error: Mismatched anonymous define() module

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

[bollwyvl]

Here's the minified build (whatever it's worth):
https://gist.github.com/bollwyvl/4981cacfd330a92ea767

I guess I figured you'd rather run the build yourself, rather than having the PR get bloated with 25k lines.

Also, I went ahead and launched the evolution of my notebook hack:
https://bollwyvl.github.io/nb-mermaid/

Hopefully I'll get some more time to work on it: the publishing story is not great right now.

I guess close this once the standalone build ships?

[knsv]

Thanks! Your notebook tool looks really cool!

So I read this as that the build with the standalone option solves your problem and that I can close this issue once this is released!

[bollwyvl]

Thanks! There are some remaining questions on how best to publish notebooks
with diagrams... Base64 encoded img tags are the most robust, but have css
issues (apparently).

Yes this issue is good to go after a release, only question is whether you
want to have amd/standalone be a separate build target. Also i didn't touch
the api build...

On 05:15, Sat, Jul 25, 2015 Knut Sveidqvist notifications@github.com
wrote:

Thanks! Your notebook tool looks really cool!

So I read this as that the build with the standalone option solves your
problem and that I can close this issue once this is released!

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

[knsv]

Fix for this issue was released in mermaid 0.5.2. Will close this now, let me know if you issues still remain.

[bollwyvl]

Huzzah! I'll check it out!

On Sun, Oct 4, 2015 at 5:15 PM Knut Sveidqvist notifications@github.com
wrote:

Fix for this issue was released in mermaid 0.5.2. Will close this now, let
me know if you issues still remain.

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

[fredbalves]

Hi, I'm still having problems when trying to load mermaid with requireJS. What tweaks can be done for this to work?

If I use this minified build everything works great. How can I build from the latest version? I need it built for requirejs but unminified.

Here's the minified build (whatever it's worth):
https://gist.github.com/bollwyvl/4981cacfd330a92ea767

I guess I figured you'd rather run the build yourself, rather than having the PR get bloated with 25k lines.

Also, I went ahead and launched the evolution of my notebook hack:
https://bollwyvl.github.io/nb-mermaid/

Hopefully I'll get some more time to work on it: the publishing story is not great right now.

I guess close this once the standalone build ships?