Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flowchart: Not able to set style for dotted/Thick links through themes or themeCSS #935

Closed
sulabh-msft opened this issue Sep 17, 2019 · 1 comment · Fixed by #1126
Closed
Assignees
Labels
Area: Development Graph: Flow Retained Nonperishable Type: Bug / Error Something isn't working or is incorrect

Comments

@sulabh-msft
Copy link

sulabh-msft commented Sep 17, 2019

Describe the bug
FlowChart: Not able to set style the styles for dotted/think links through themes or by specifying styles though themeCSS initialize option

Mermaid version 8.2.3

Dotted link

graph LR;
   A-.->B;

image

Thick link

graph LR
   A ==> B

image

To Reproduce

  1. Go to the Mermaid editor
    Code:
graph TD;
A[Christmas] -.->|Get money| B(Go shopping)

Theme: default
or Go to the Mermaid Editor default theme

image

Now change the theme to dark
Theme: dark

Mermaid editor dark theme

Observe the color of dotted link. It is not changing across themes. This is resulting in issue where back-ground is also dark ( dark theme)

image

Expected behavior
The style for dotted/thick links IMO we should have different style for these links in dark theme We should also have it exposed as a separate css class name to that it is customizable through themeCSS option.

Desktop (please complete the following information):

  • OS: [Window]
  • Browser [chrome]
  • Version 76.0.3809.132

Additional context
Looks like the styles are hard coded for dotted/thick links.

Snippet
/// https://github.com/knsv/mermaid/blob/master/src/diagrams/flowchart/flowRenderer.js (line: 193)

    if (typeof edge.style !== 'undefined') {
      edge.style.forEach(function(s) {
        style = style + s + ';';
      });
    } else {
      switch (edge.stroke) {
        case 'normal':
          style = 'fill:none';
          if (typeof defaultStyle !== 'undefined') {
            style = defaultStyle;
          }
          break;
        case 'dotted':
         // ISSUE:  HARD CODED STYLE for dottted
          style = 'stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;';  
          break;
        case 'thick':
         // ISSUE:  HARD CODED STYLE for thick
          style = 'stroke: #333; stroke-width: 3.5px;fill:none';   
          break;
      }
    }
@knsv
Copy link
Collaborator

knsv commented Dec 8, 2019

@sulabh-msft Thanks for your the issues you have reported on mermaid. They are all good ideas, valid and excellently reported. I have been looking at UML diagrams during autumn but will give flowcharts more focus now.

@knsv knsv self-assigned this Dec 8, 2019
knsv added a commit that referenced this issue Dec 8, 2019
knsv added a commit that referenced this issue Dec 8, 2019
…ink_links

#935 Fix for stylink of links. Default theme colors are picked up and…
@knsv knsv closed this as completed Dec 14, 2019
@github-actions github-actions bot locked and limited conversation to collaborators Dec 14, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Area: Development Graph: Flow Retained Nonperishable Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants