search

mermaidjs / mermaid-gitbook

Documentation has been moved to docs in https://github.com/mermaid-js/mermaid
https://mermaidjs.github.io
554 stars 223 forks source link

Sample Stylesheet for Gantt vs Sequence Diagram #13

Closed banjavi closed 6 years ago

banjavi commented 6 years ago

I noticed the "Sample Stylesheets" for the Gantt and Sequence Diagram pages are different on the gitbook site, but that the "Classes used" are the same. Does the section "Classes used" on https://mermaidjs.github.io/gantt.html need to be updated? I'm trying to style a Gantt diagram (fix margin issues on the rects, move elements, etc.), but have been unsuccessful so far.

tylerlong commented 6 years ago

Here is the latest SCSS: https://github.com/knsv/mermaid/blob/master/src/themes/gantt.scss

The doc is quite dated. It is appreciate if you could contribute a PR.

tylerlong commented 6 years ago

And CSS is not the only way to change margin. Please refer to the following code:

mermaid.initialize({gantt: {
  titleTopMargin: 25,
  barHeight: 20,
  barGap: 4,
  topPadding: 50,
  rightPadding: 75,
  leftPadding: 75,
  gridLineStartPadding: 35,
  fontSize: 11,
  fontFamily: '"Open-Sans", "sans-serif"'
}})