Support for dotted links about mermaid HOT 16 CLOSED

In order to create dotted lines, you can try this:

linkStyle 0 stroke:#000,fill:none,stroke-width:2px,stroke-dasharray:3;

This turns the first link into a dotted line (it targets links using linkStyle: counting starts from 0): I have not been able to attach a class to a linkStyle yet.

from mermaid.

I like the idea and I like the syntax!

from mermaid.

What is the intent for this content? sounds like fun :)

from mermaid.

For example a class hirarchy which shows abstract classes which inherit from their "real" parents.

Or a Workflow where one path is temporary unused. (Business logic could be changing or defect)

How about a organisation diagram which shows temporary workers as weak links?

There are so many use cases.

from mermaid.

I've got a proposed solution for this. Funny thing is I figured out how to add the requisite lexer/linkStatement definitions, get passing tests for A-.->B, A-.-B, A-.-xB etc.

For the life of me, I cannot figure out how to add the stroke-dasharray property to the <path> in <edgePath... It has to be a property, can't do it using style alone (according to w3 schools svg stroke).

If you can let me know where to put that in main.js or in sequenceRenderer.js functions like setClass etc. I will submit a PR for review.

from mermaid.

look in main.js in the addEdges function (row 110+). There some styles are applied. Perhaps you could apply the styles for the dotted line there.
Good luck.

from mermaid.

Hey I'm new here

from mermaid.

Hello @peacemaker1995 welcome.

from mermaid.

@knsv - I tried that one actually - the issue is that it needs to have the the property stroke-dasharray - added (not modify the property style or class) so I think this requires something with the d3dagre methods - I just am not sure how or where to implement.

from mermaid.

Thats a good point. You can create dotted lines today by using code like the one provided by @Mercurius3. The dot notation would be a shortcut. simpler notation for a similar rendering.

@Anachron, you could apply styling as the one above when rendering the dotted links found during parsing.

from mermaid.

@cerdman How are things progressing? Still stuck? If you want I could fix the style if you commit the grammar update. If you want to continue that is fine too!

from mermaid.

Will look at this now

from mermaid.

An implementation for this is in place and will be included in next release. The solution uses the following syntax:

dotted link: 
-.->

dotted link with text: 
-. text .-> 

thick link: 
==>

think link with text: 
== text ==> 

from mermaid.

hey @knsv - yep sorry just saw this - that is as far as I got (grammar/syntax) and was pretty much the same - how did you get the style figured out?

from mermaid.

Fixed with release 0.3.2

from mermaid.

Awesome, thanks! @knsv

from mermaid.