Would be sweet if I could just $ npm install -g mermaid</cod

Will start with the node module today is in <a class="issue-link js-issue-link" data-e

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Client utility for mermaid about mermaid HOT 24 CLOSED

mermaid-js commented on April 28, 2024

Client utility for mermaid

from mermaid.

Comments (24)

knsv commented on April 28, 2024

Thats a good idea! It is in the scope now :)

from mermaid.

cyberglot commented on April 28, 2024

👍

from mermaid.

DevinClark commented on April 28, 2024

👍

from mermaid.

lyuehh commented on April 28, 2024

👍

from mermaid.

mauris commented on April 28, 2024

👍 .. really need it as a tool to generate diagrams quickly (:

from mermaid.

knsv commented on April 28, 2024

Will start with the node module today is in #7, consider this issue the mermaid utility. This one I would not mind help with if someone is interested.

from mermaid.

mauris commented on April 28, 2024

@knsv I'll take a look in a short while (:

from mermaid.

knsv commented on April 28, 2024

Sounds good!

from mermaid.

mauris commented on April 28, 2024

@knsv I've tried npm install on Windows, but there's some Python error coming out from browserify or some package.

Doing development on Mac works fine.

from mermaid.

schmurfy commented on April 28, 2024

in the same spirit I made an attempt to generate a graph using phantomjs but so far I failed, it seems like mermaid is not properly run inside phantomjs and I don't undestand why :(
All I managed to get is to get the text source rendered.

from mermaid.

knsv commented on April 28, 2024

Check if the execution mermaid.init has triggered. If not you can try to run in manually and see if svg rendering is done.

from mermaid.

schmurfy commented on April 28, 2024

My issue is that I can't find where the mermaid "class" is, in a browser I can find it at window.mermaid but as it looks mermaid do not do the same thing under phantomjs and window.mermaidis null.
is it possible that the library detects that it is not running in a browser and try something funny ?

from mermaid.

knsv commented on April 28, 2024

Just did a naïve test. I ran the script below which opens the test page using phantomjs and saved the result as a png:

var page = require('webpage').create();
page.open('http://www.sveido.com/mermaid/demo/html/web.html', function() {
    page.render('example.png');
    phantom.exit();
});

When looking at the result, it is clear that mermaid started and rendered. That is good as it means there are not principal blockers for what we are trying to do. Whats your setup?

from mermaid.

schmurfy commented on April 28, 2024

Yes it looks likes the library itself have no issue with phantomjs, at least that's a start ^^

I tried to make my test simpler to find the problem seems to be with local files vs remote, here it is:

page = require('webpage').create()
page.open 'file://test.html', () ->
    page.render('/tmp/out.png')
    phantom.exit()

with this simple test:

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.rawgit.com/knsv/mermaid/master/dist/mermaid.full.min.js"></script>
  <meta charset="utf-8">
</head>

<body>
  <div class="mermaid">
    graph TD;
    S[Start]-->L[Login];
    L-->C{Connected};
    C-->|No|W[Wait 5s];
    W-->L;
    C-->|Yes|G[Get Folders List];
    G-->GE{Empty List};
    GE-->|Yes|EN[End];
    GE-->|No|LF[For each folder];

    C-->|Toto|GE(tott);
  </div>
</body>

For me it renders the graph definition test itself xD

from mermaid.

knsv commented on April 28, 2024

Yeah. Also got into problems with a local file.

After some meddling I found that my 1st issue was with the path. Using the full path is worked.

Then some more meddling I had your exact symptoms replicated. The png as saved but with the text. In my case, not saying your setup had the same issue, but in my case I had moved files around and the path to mermaid was wrong from the directory where I tested. After a fix of the relative paths it worked.

As a side note, could not get it work with file://web.html when the file was in the cwd but with ./web.html as in below it worked.

page.open('./web.html', function() {

from mermaid.

fardog commented on April 28, 2024

I put together a rudimentary implementation of mermaid-cli this weekend: https://github.com/fardog/mermaid-cli, sorry as I did this before I read the issues here! @knsv if you take a look at my implementation, we might see if it's something worth pulling into mermaid itself; however I can imagine the inclusion of some of the dependencies (such as phantomjs) is not desirable.

Also, it's a bit of a mess as the implementation was hasty (so please ask if there are parts that don't follow!), but hopefully it gives a good idea of how this could be implemented; I'm performing everything within phantom itself, not loading any externally generated HTML files or the like, which seems ideal to me (no temporary files to clean up!).

from mermaid.

knsv commented on April 28, 2024

Hi fardog!

I like what you have done and I think it should be in mermaid. The inclusion of phantomjs as a dependency is ok. We will want it for more automated tests anyway. If you do a pull request I will gladly merge this. It also goes hand in hand with other work that is ongoing to get the generated svgs to be browser independent so they can be opened in editor of choice.

from mermaid.

schmurfy commented on April 28, 2024

nice !

from mermaid.

fardog commented on April 28, 2024

@knsv: sounds good; I'd like to finish cleaning things up and get some tests written and then I'll get this into a PR, however I'd like to discuss the inclusion of phantom a bit; I've been thinking about this on and off through the day:

Since this'll be installed globally, phantom will have to be in dependencies and not devDependencies, meaning that if someone pulls in mermaid just for use in the frontend, they'll still be pulling in phantom. On my machine, this is about 42M extracted, which is quite large if you're putting this into something like a heroku buildpack; my solution would be one of the following:

Don't include phantom, but instead look for phantom in the environment on run, and suggest its installation if it isn't found in the PATH. Concerns with this approach include user-side complexity, and possibility of dependency issues if they have an old version of phantom installed (I'd have to check for a minimu version, most likely).
Keep the CLI as a separate package. This way depdendencies can be updated as necessary, and the CLI doesn't have to get in the way of the codebase. Concerns with this approach are that a user has to be instructed to install a separate package, which is maybe less than ideal.
Say "too bad" and include phantomjs anyway. Concerns are as above.

I think that (1) is a manageable option, although it's side-stepping the nice dependency resolution that npm does, which is less than ideal, and (2) is also good, so long as there's a maintainer for the mermaid-cli package--I'm happy to maintain it, and would also transfer it to an organization when it hits 1.0.0 (test are written and such) if that's preferable. I'm hesitant toward (3) just because as a personal preference, I have a distaste for packages that download extra options that I don't need, when I'm only using npm as a frontend package manager (say, for a browserify environment). Especially since I tend to handle build as part of the deployment; in something like a heroku environment, this bloats the built slug that gets deployed.

Let me know what you think, I'm happy to take whatever approach you think works best, and will PR appropriately; I'll be working on this and hope to have tests written and be stable by this weekend; seeing that you're making improvements to the SVG text (#58) I won't concern myself with handling that CLI-side--I was writing code to replace the <foreignObject> nodes with <text> after generation, but it looks like you're working on handling that during the generation. Awesome!

from mermaid.

fardog commented on April 28, 2024

sorry, going to comment on my own message here, but I did some research this evening, and am going to recommend completely against (3): on some platforms (such as Solaris and Joyent SmartOS), installing phantomjs isn't supported and will fail completely; including it as a main dependency will cause npm install mermaid to fail on those platforms, even if someone's only installing it as a browserify dependency (see ariya/phantomjs#10521). (1) and (2) are the best options, and I'm happy to help (1) merge or (2) maintain.

from mermaid.

knsv commented on April 28, 2024

Agree with you, 3 is out. I think 1 sounds like the best solution.

Then the users that want to use the client utility can add phantomjs themselves.

from mermaid.

fardog commented on April 28, 2024

@knsv sounds good, and that's the implementation i'll be working on this weekend. hope to send you a PR by Sunday

from mermaid.

knsv commented on April 28, 2024

Great!
Then we can bundle this functionality with support for sequence diagrams and do a 0.3.0!

from mermaid.

knsv commented on April 28, 2024

Closed as of version 0.3.0

from mermaid.

Client utility for mermaid about mermaid HOT 24 CLOSED

Comments (24)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent