Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
    HI all, guess no InternetRelayChat?
    Anyway, Im trying to get a 'U' shaped flowchart in mermaid. Wondering if it possible through subgraphs? Cant seem to set but one layout direction at the beggining.
    Hello, I have installed mermaid and am using it in a basic javascript html5 app to display ERD diagrams. My problem is the graphs are cutting off after approximately 200 vertical pixels. Adjusting markup and config values has not alleviated the problem. How do I control or extend the viewport size that the sag draws in so that the graph does not cutoff? Thanks.
    clarification: running Safari 10.0.3
    Martin Sarosi
    has anyone considered % done for the gantt chart by any chance?
    Tyler Long
    I am currently working on the mermaid project. I am trying my best to release a major new version. Stay tuned.
    Nickolas O'Malley
    Hello, I'm having a bit of trouble getting mermaid to run. I have virtually zero experience working with JavaScript, so I'm not entirely sure what I could be doing wrong. What could the cause of this error be? Is it common? https://pastebin.ca/3876896
    Could this have something to do with the version of nodejs I have on my machine?
    (Maybe using '{' immediately after 'let' on the same line is acceptable with a newer version of nodejs, but not in an older one?)
    Dan Keith

    This line:

    let { theme, width, height, input, output } = commander;

    is using two features of modern JS: The let keyword, and the destructuring syntax. You will need at least NodeJS 4.8.4 for the former, and 6.4.0 for the destructuring. This matrix might help:

    Depending upon your OS, this nvm tool may be useful to manage multiple NodeJS versions, and it makes installing new versions very easy.

    If you want to rewrite this as old school JS:

    var theme = commander.theme;
    var width = commander.width;
    var height = commander.height;
    var input = commander.input;
    var output = commander.output;
    Nickolas O'Malley
    @DoctorBud this is great, thank you! I'll report back if I encounter any more issues after applying your fix.
    Tyler Long
    Yes, please update your node.js. We don't want to maintain compatibility with Node version < 6.9.0 due to lack of manpower. Node 6.9.0 is the first LTS version of all the 6.x versions.
    Dan Keith
    @tylerlong I'm glad that you are working on Mermaid. I've been using it for a while and recently added dynamic Mermaid to my Smartdown tech. If you are curious, here're some classic Mermaid examples rendered with Smartdown... https://smartdown.site/?url=lib/gallery/Mermaid.md
    Pulkit Singhal

    @tylerlong From what I understand, the live-editor has 4 themes and if I want to style a sequenceDiagram differently then I need to provide CSS which there's no way to do in the live-editor.

    So if I clone and run mermaid locally then where exactly should I go to add the CSS that I want a sequenceDiagram to use?

    Tyler Long
    @DoctorBud nice examples! and smartdown is a cool project. :+1:
    @pulkitsinghal I've never applied customized css to mermaid. If I was going to try, I would define my external CSS to override inline CSS: https://stackoverflow.com/questions/16813220/how-can-i-override-inline-styles-with-external-css
    The default themes are here: https://github.com/knsv/mermaid/tree/master/src/less you can read the code and decide what CSS to override.
    Frank Hofmann
    Hi there :) I installed mermaid-cli on both a Debian 8, and a 9. The rendered graphs look different from the images rendered via the Live Editor. E.g I miss description of edges. Which is the recommended production environment to run Mermaid on the commandline?
    how to runtime change color the arrow line?
    hello. is it possible to do a line wrap or line break inside a participant box for a sequence diagram
    Is it possible to achieve something like this? https://www.dropbox.com/s/sfu98f93yonjn2w/mermaid.js.png?dl=0
    Nick Römer
    Can I install mermaid on a Windows PC?
    Is it possible to 1) force hyperlinks to open in current tab or 2) spread a large diagram out vertically so people can actually read what's in it?
    Renan LE CARO
    Hey guys, just wanted to let you know, i've created a wrapper for mermaid in google docs, it's pending approval for now
    Sreehari B S
    I just wanted to bind events on links(edgepaths). How can I achieve that ?
    It is even okay, if i can add some data params to generated edges. (sat data-fromnode and data-tonode)
    OR is there any workaround ??
    Dominick Peluso
    Hey guys, is there anyway to link an item to a subgraph?
    Also, an item within a subgraph back to the same subgraph?
    I am getting errors and I'm wondering if there's another way to achieve this
    By "item", I mean "node"
    Dominick Peluso
    I wish I could link a node to a subgraph
    Or make a sub-node
    hi guys im a beginner coder
    and i wish i would get some answer regarding mermaid and visual studio code
    Please give me some idea of how i could
    Generate a flowchart for my ionic 4 Application ( editor :vscode)
    hi, can mermaid support swimlane diagram sooner or later?
    Matthew Feickert
    Hi All. I made a mermaid cli Docker image to help people in my group start using mermaid . However, I'm pretty new to using JS tools in general, so I was wondering if there is a way for gantt charts to use the scale parameters in axisFormat to be able to get tick marks for each quarter: So like axisFormat %Y-%Q if Q was quarter and not "milliseconds since UNIX epoch". At the moment I have axisFormat %Y-%m but the project I'm making a gantt chart for is over the course of 2+ years and the time-axis is start to look cluttered.
    Matthew Feickert
    I now realize that D3 kinda takes care of this by itself, as when the date rage gets long enough it starts to change the tick spacing
    Yann Boisclair-Roy

    Hi All. I'm probably doing something wrong but I can't apply custom CSS when I'm rendering a Sequence Diagram.
    I have those files in the same folder:

    • sequence.mmd
      • styles.css (I've overwrite the .actor and test.actor with crazy colors to test)
      • config.json
        When I run:
        $ mmdc -i sequence.mmd -C styles.css -c config.json -o sequence.pdf
        The generate diagram is using the default colors.

    Anyone got that problem?

    Yann Boisclair-Roy
    Morning people

    I've an issue with Mermaid where it keeps spitting an error <rect> attribute width: A negative value is not valid

    I'm trying to make a gantt image ... Any one with any pointers?

    @vancheese Can you provide a link to the live editor that reproduces the issue?
    Bharath Kumar Ballipongala
    @here can i add comments to sequence diagram #47 say we can use %% sometext will leave the comment but it is creating another node
    Marco Labarile
    Hi everyone,
    I've recently had a look at the mermaid.cli repo so I saw that the code there is actually using Puppetteer to access a web browser API from Javascript.
    I'm wondering, does the core mermaid library need to depend on a web browser API?
    I'm looking at generating an ERD diagram to visualize a database schema using Mermaid. Is there a way to draw arrows not just between the "classes" but between specific fields in those classes? Thanks!