Client utility for mermaid #6

kentcdodds · 2014-12-01T03:28:28Z

Would be sweet if I could just $ npm install -g mermaid and then $ mermaid flowchart.md and it would save a png of the output. Is this in scope for this project?

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

knsv · 2014-12-01T06:34:56Z

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

cyberglot · 2014-12-01T09:07:21Z

👍

DevinClark · 2014-12-01T21:52:45Z

👍

lyuehh · 2014-12-02T01:27:40Z

👍

mauris · 2014-12-02T08:09:24Z

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

knsv · 2014-12-02T08:24:58Z

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.

mauris · 2014-12-02T08:45:11Z

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

knsv · 2014-12-02T08:46:52Z

Sounds good!

mauris · 2014-12-02T09:24:04Z

@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.

schmurfy · 2014-12-10T11:15:48Z

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.

knsv · 2014-12-10T11:45:22Z

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

schmurfy · 2014-12-10T15:21:59Z

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 ?

knsv · 2014-12-12T20:49:22Z

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?

schmurfy · 2014-12-12T21:23:29Z

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

knsv · 2014-12-12T22:58:47Z

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() {

fardog · 2014-12-15T04:11:25Z

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!).

knsv · 2014-12-15T08:58:43Z

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.

schmurfy · 2014-12-15T13:10:58Z

nice !

fardog · 2014-12-16T02:59:02Z

@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!

fardog · 2014-12-16T07:50:01Z

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.

knsv · 2014-12-16T11:59:17Z

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.

fardog · 2014-12-20T02:57:42Z

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

knsv · 2014-12-20T20:14:16Z

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

knsv · 2014-12-22T13:05:42Z

Closed as of version 0.3.0

Merge

sync fork

Bumps [webpack-cli](https://github.com/webpack/webpack-cli) from 3.3.12 to 4.7.2. - [Release notes](https://github.com/webpack/webpack-cli/releases) - [Changelog](https://github.com/webpack/webpack-cli/blob/master/CHANGELOG.md) - [Commits](https://github.com/webpack/webpack-cli/compare/v3.3.12...webpack-cli@4.7.2) --- updated-dependencies: - dependency-name: webpack-cli dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Copy Markdown

knsv mentioned this issue Dec 1, 2014

Publish to NPM #7

Closed

knsv added Type: Enhancement New feature or request Contributor needed and removed Contributor needed labels Dec 1, 2014

knsv added the Contributor needed label Dec 2, 2014

knsv changed the title ~~node module and cli?~~ Client utility for mermaid Dec 2, 2014

knsv mentioned this issue Dec 13, 2014

Create image file via CLI? #48

Closed

knsv added Status: Approved Is ready to be worked on and removed Status: Approved Is ready to be worked on labels Dec 13, 2014

knsv mentioned this issue Dec 16, 2014

Consider shipping a standalone executable #65

Closed

fardog mentioned this issue Dec 21, 2014

Adds Command Line Interface for generating PNGs from mermaid description files #69

Merged

knsv closed this as completed Dec 22, 2014

knsv pushed a commit that referenced this issue Dec 11, 2019

Merge pull request #6 from mermaid-js/develop

cf5d747

Merge

knsv pushed a commit that referenced this issue Dec 23, 2019

Merge pull request #6 from mermaid-js/develop

061d31a

sync fork

mgenereu referenced this issue in mgenereu/mermaid Jun 25, 2022

Merge pull request #6 from WeeJeWel/master

9314505

Copy Markdown

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Client utility for mermaid #6

Client utility for mermaid #6

kentcdodds commented Dec 1, 2014

knsv commented Dec 1, 2014

cyberglot commented Dec 1, 2014

DevinClark commented Dec 1, 2014

lyuehh commented Dec 2, 2014

mauris commented Dec 2, 2014

knsv commented Dec 2, 2014

mauris commented Dec 2, 2014

knsv commented Dec 2, 2014

mauris commented Dec 2, 2014

schmurfy commented Dec 10, 2014

knsv commented Dec 10, 2014

schmurfy commented Dec 10, 2014

knsv commented Dec 12, 2014

schmurfy commented Dec 12, 2014

knsv commented Dec 12, 2014

fardog commented Dec 15, 2014

knsv commented Dec 15, 2014

schmurfy commented Dec 15, 2014

fardog commented Dec 16, 2014

fardog commented Dec 16, 2014

knsv commented Dec 16, 2014

fardog commented Dec 20, 2014

knsv commented Dec 20, 2014

knsv commented Dec 22, 2014

Client utility for mermaid #6

Client utility for mermaid #6

Comments

kentcdodds commented Dec 1, 2014

knsv commented Dec 1, 2014

cyberglot commented Dec 1, 2014

DevinClark commented Dec 1, 2014

lyuehh commented Dec 2, 2014

mauris commented Dec 2, 2014

knsv commented Dec 2, 2014

mauris commented Dec 2, 2014

knsv commented Dec 2, 2014

mauris commented Dec 2, 2014

schmurfy commented Dec 10, 2014

knsv commented Dec 10, 2014

schmurfy commented Dec 10, 2014

knsv commented Dec 12, 2014

schmurfy commented Dec 12, 2014

knsv commented Dec 12, 2014

fardog commented Dec 15, 2014

knsv commented Dec 15, 2014

schmurfy commented Dec 15, 2014

fardog commented Dec 16, 2014

fardog commented Dec 16, 2014

knsv commented Dec 16, 2014

fardog commented Dec 20, 2014

knsv commented Dec 20, 2014

knsv commented Dec 22, 2014