Comments (14)
Hello there!
Could you please provide a little bit more information? I want to be able to reproduce your problem. Whats the url you use, in wha context to you use mermaid etc
Thanks!
from mermaid.
I have a Single Page app loading mermaid using requirejs. We have out own requirejs config and loading mermaid fails at line require("./dagre").layout;
where that require returns undefined and hence error out.
This happens after init
is called.
from mermaid.
This might be a conflict between the require in browserify and the one in requirejs. Have you tried loading mermaid outside of requirejs and if so before or after your requirejs script?
from mermaid.
@ankurp: Is still problem for you?
from mermaid.
@knsv I haven't tried but will let you know when I do next time.
from mermaid.
To recap from #127: the IPython/Jupyter notebook would be a wonderful place to use mermaid. Its frontend has markdown as a first-class citizen, so hand editing would already be very natural... and it would be easy to generate mermaid DSL from any number of the supported backends. Sadly, we encounter the dagre.layout issue: here are my explorations of the kinds of errors:
http://nbviewer.ipython.org/gist/bollwyvl/7b4729c21b3d1ad4c31e
Aside from the dagre error, some things appear to be broken around he
and lodash
.
There is no option to not have require, or change the order in which things load, and punting to an iframe is pretty much unacceptable. So let's solve this thing.
I'd love to pitch in trying to solve this. As i mention on the dupe, there could be some build options that might just solve this, or it may be appropriate to create a separate AMD build.
from mermaid.
@bollwyvl, thanks for your effort. Help is always welcome!
I tested loading mermaid using requirejs and could replicate the TypeError. After some reading I found that require creates a define method that confuses the package created by browserify. To handle that I have wrapped mermaid so that the requires define function remains undefined in mermaids context. For my test page this removed the error. I will commit the fix and would appreciate if you could try it in your context before release.
from mermaid.
I think we have a winner, at least for nbviewer:
http://nbviewer.ipython.org/gist/bollwyvl/d5a120156216797c7132
That will render two separate embedded mermaid figures. Great!
Thanks so much @knsv!
A few remaining issues:
- Looks like the IPython notebook (and likely many other sites) will claim many of the classes that are in use. The one that jumps out at me is
label
, which bootstrap claims.node
,path
is something else. - when editing, i am naively calling
mermaid.init()
every time now, which doesn't work very well... ids get reused, dogs and cats are living together. mass hysteria.- Some better access to what gets rendered would be fabulous: perhaps a second argument to init could be an element, node list or selector that would get used,
- ...as well as a persistent counter for indices that will never repeat:
var init = function (sequenceConfig, arr) {
arr = arr == null ? document.querySelectorAll('.mermaid')
: typeof arr === "string" ? document.querySelectorAll(arr)
: arr instanceof Node ? [arr]
: arr;
...
var id = 'mermaidChart' + mermaid.nextIdx++;
...
Looking good already, though!
from mermaid.
Actually just tried that hack out: works great!
https://gist.github.com/bollwyvl/53e64cdafba38461943b
(sorry, but I don't have a build environment handy... will happily raise a PR if you like)
Here is a notebook that uses it:
http://nbviewer.ipython.org/gist/bollwyvl/e51b4e724f0b82669c84
If you look at the source, you'll see that there are no dirty tricks, like embedding the output:
https://gist.github.com/bollwyvl/e51b4e724f0b82669c84
Note that you can try out the whole shebang by downloading the ipynb file up there, and dragging into the tree page you get when you hit http://tmpnb.org
I've added a touch of CSS to make it visible in the bootstrap environment.
Note that it is still breaking things, with the mismatched anonymous define
error. Perhaps in browserify, one of the deglobalify/deamdify filters would keep this from leaking out into the require scope.
from mermaid.
Ha, I didn't even circle back and try the original failing approaches. Mermaid as of f4b2211 can be directly loaded with require:
require(["./wherever/is/mermaid.full.js"], function(d3){ mermaid.init(); });
I would say that that closes the issue, as it works now, even if it is slightly outside what a requirejs user would expect: it still installs itself on window.mermaid
, as opposed to returning a reference to itself... weirdly, you get back the bundled d3, which is likely not the desired effect, but that's a different issue.
As to its integration into IPython (my original goal): here is a working notebook that uses require to both do an initial draw (as on nbviewer) as well as the live-editing:
http://nbviewer.ipython.org/gist/bollwyvl/e160958fdc8656dc8d3d
The only error now is because the actual editor scripts are not available in nbviewer, but this is fine!
I'll raise separate PRs for my hacks!
from mermaid.
Also #134.
from mermaid.
I am going though the issues and compiling a roadmap. Is this still an issue or can I close it? @ankurp @bollwyvl
from mermaid.
I think this is solved with the umd stuff.
On 13:22, Wed, May 13, 2015 Knut Sveidqvist [email protected]
wrote:
I am going though the issues and compiling a roadmap. Is this still an
issue or can I close it? @ankurp https://github.com/ankurp @bollwyvl
https://github.com/bollwyvl—
Reply to this email directly or view it on GitHub
#37 (comment).
from mermaid.
OK, will close then. Thx!
from mermaid.
Related Issues (20)
- Timeline Diagram Comment Inconsistencies
- Cannot customize theme through cli and json config file HOT 2
- vite build failure for 10.9.0 HOT 2
- Control brackets around loopText and friends
- gitGraph: support for displaying orphaned branches and unrelated histories HOT 1
- Proposal: Cloud Architecture Diagram HOT 7
- Lots of whitespace around C4 graph.
- Mermaid versions after v9.2.2 cannot be injected into Firefox addons HOT 10
- support for Block diagrams to merge row blocks
- .-> dotted arrows cause syntax error in newest Mermaid release HOT 3
- Allow to define the branch colour in the branch definition (`colour|color:` like `order:` )
- Mermaid v10.9.0 cannot be injected into Chrome browser extensions HOT 1
- Rendering Mermaid Diagram with errors on Webpage HOT 1
- Support plantuml sequence diagram syntax
- Mermaid doesn't have callback for syntax error
- Gantt: Create a hard border between section name and timeline
- erDiagram chinese HOT 1
- Let user see only on the interested terms
- using mermaid in vue3[svgElem.node(...).getBBox]
- Elk renderer not wokring on empty subgraph HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mermaid.