#1542 Styling for all diagram types

src/diagrams/class/styles.js

@@ -0,0 +1,63 @@
+const getStyles = options =>
+  `g.classGroup text {
+  fill: ${options.nodeBorder};
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+  font-size: 10px;
+
+  .title {
+    font-weight: bolder;
+  }
+}
+
+g.clickable {
+  cursor: pointer;
+}
+
+g.classGroup rect {
+  fill: ${options.nodeBkg};
+  stroke: ${options.nodeBorder};
+}
+
+g.classGroup line {
+  stroke: ${options.nodeBorder};
+  stroke-width: 1;
+}
+
+.classLabel .box {
+  stroke: none;
+  stroke-width: 0;
+  fill: ${options.nodeBkg};
+  opacity: 0.5;
+}
+
+.classLabel .label {
+  fill: ${options.nodeBorder};
+  font-size: 10px;
+}
+
+.relation {
+  stroke: ${options.nodeBorder};
+  stroke-width: 1;
+  fill: none;
+}
+
+.dashed-line{
+  stroke-dasharray: 3;
+}
+
+#compositionStart, #compositionEnd, #dependencyStart, #dependencyEnd, #extensionStart. #extensionEnd {
+  fill: ${options.nodeBorder};
+  stroke: ${options.nodeBorder};
+  stroke-width: 1;
+}
+
+#aggregationStart, #aggregationEnd  {
+    fill: ${options.nodeBkg};
+  stroke: ${options.nodeBorder};
+  stroke-width: 1;
+}
+`;
+
+export default getStyles;

src/diagrams/er/styles.js

@@ -0,0 +1,5 @@
+const getStyles = () =>
+  `
+`;
+
+export default getStyles;

src/diagrams/flowchart/styles.js

@@ -1,7 +1,6 @@
 const getStyles = options =>
   `.label {
-    font-family: 'trebuchet ms', verdana, arial;
-    font-family: var(--mermaid-font-family);
+    font-family: ${options.fontFamily};
     color: #333;
   }
 
@@ -63,8 +62,7 @@ const getStyles = options =>
     text-align: center;
     max-width: 200px;
     padding: 2px;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-family: var(--mermaid-font-family);
+    font-family: ${options.fontFamily};
     font-size: 12px;
     background: ${options.secondBkg};
     border: 1px solid ${options.border2};

src/diagrams/gantt/styles.js

@@ -0,0 +1,261 @@
+const getStyles = options =>
+  `
+  .mermaid-main-font {
+    font-family: "trebuchet ms", verdana, arial;
+    font-family: var(--mermaid-font-family);
+  }
+
+  .section {
+    stroke: none;
+    opacity: 0.2;
+  }
+
+  .section0 {
+    fill: ${options.sectionBkgColor};
+  }
+
+  .section2 {
+    fill: ${options.sectionBkgColor2};
+  }
+
+  .section1,
+  .section3 {
+    fill: ${options.altSectionBkgColor};
+    opacity: 0.2;
+  }
+
+  .sectionTitle0 {
+    fill: ${options.titleColor};
+  }
+
+  .sectionTitle1 {
+    fill: ${options.titleColor};
+  }
+
+  .sectionTitle2 {
+    fill: ${options.titleColor};
+  }
+
+  .sectionTitle3 {
+    fill: ${options.titleColor};
+  }
+
+  .sectionTitle {
+    text-anchor: start;
+    font-size: 11px;
+    text-height: 14px;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+
+  }
+
+
+  /* Grid and axis */
+
+  .grid .tick {
+    stroke: ${options.gridColor};
+    opacity: 0.8;
+    shape-rendering: crispEdges;
+    text {
+      font-family: 'trebuchet ms', verdana, arial;
+      font-family: var(--mermaid-font-family);
+    }
+  }
+
+  .grid path {
+    stroke-width: 0;
+  }
+
+
+  /* Today line */
+
+  .today {
+    fill: none;
+    stroke: ${options.todayLineColor};
+    stroke-width: 2px;
+  }
+
+
+  /* Task styling */
+
+  /* Default task */
+
+  .task {
+    stroke-width: 2;
+  }
+
+  .taskText {
+    text-anchor: middle;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+  }
+
+  .taskText:not([font-size]) {
+    font-size: 11px;
+  }
+
+  .taskTextOutsideRight {
+    fill: ${options.taskTextDarkColor};
+    text-anchor: start;
+    font-size: 11px;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+
+  }
+
+  .taskTextOutsideLeft {
+    fill: ${options.taskTextDarkColor};
+    text-anchor: end;
+    font-size: 11px;
+  }
+
+  /* Special case clickable */
+  .task.clickable {
+    cursor: pointer;
+  }
+  .taskText.clickable {
+    cursor: pointer;
+    fill: ${options.taskTextClickableColor} !important;
+    font-weight: bold;
+  }
+
+  .taskTextOutsideLeft.clickable {
+    cursor: pointer;
+    fill: ${options.taskTextClickableColor} !important;
+    font-weight: bold;
+  }
+
+  .taskTextOutsideRight.clickable {
+    cursor: pointer;
+    fill: ${options.taskTextClickableColor} !important;
+    font-weight: bold;
+  }
+
+  /* Specific task settings for the sections*/
+
+  .taskText0,
+  .taskText1,
+  .taskText2,
+  .taskText3 {
+    fill: ${options.taskTextColor};
+  }
+
+  .task0,
+  .task1,
+  .task2,
+  .task3 {
+    fill: ${options.taskBkgColor};
+    stroke: ${options.taskBorderColor};
+  }
+
+  .taskTextOutside0,
+  .taskTextOutside2
+  {
+    fill: ${options.taskTextOutsideColor};
+  }
+
+  .taskTextOutside1,
+  .taskTextOutside3 {
+    fill: ${options.taskTextOutsideColor};
+  }
+
+
+  /* Active task */
+
+  .active0,
+  .active1,
+  .active2,
+  .active3 {
+    fill: ${options.activeTaskBkgColor};
+    stroke: ${options.activeTaskBorderColor};
+  }
+
+  .activeText0,
+  .activeText1,
+  .activeText2,
+  .activeText3 {
+    fill: ${options.taskTextDarkColor} !important;
+  }
+
+
+  /* Completed task */
+
+  .done0,
+  .done1,
+  .done2,
+  .done3 {
+    stroke: ${options.doneTaskBorderColor};
+    fill: ${options.doneTaskBkgColor};
+    stroke-width: 2;
+  }
+
+  .doneText0,
+  .doneText1,
+  .doneText2,
+  .doneText3 {
+    fill: ${options.taskTextDarkColor} !important;
+  }
+
+
+  /* Tasks on the critical line */
+
+  .crit0,
+  .crit1,
+  .crit2,
+  .crit3 {
+    stroke: ${options.critBorderColor};
+    fill: ${options.critBkgColor};
+    stroke-width: 2;
+  }
+
+  .activeCrit0,
+  .activeCrit1,
+  .activeCrit2,
+  .activeCrit3 {
+    stroke: ${options.critBorderColor};
+    fill: ${options.activeTaskBkgColor};
+    stroke-width: 2;
+  }
+
+  .doneCrit0,
+  .doneCrit1,
+  .doneCrit2,
+  .doneCrit3 {
+    stroke: ${options.critBorderColor};
+    fill: ${options.doneTaskBkgColor};
+    stroke-width: 2;
+    cursor: pointer;
+    shape-rendering: crispEdges;
+  }
+
+  .milestone {
+    transform: rotate(45deg) scale(0.8,0.8);
+  }
+
+  .milestoneText {
+    font-style: italic;
+  }
+  .doneCritText0,
+  .doneCritText1,
+  .doneCritText2,
+  .doneCritText3 {
+    fill: ${options.taskTextDarkColor} !important;
+  }
+
+  .activeCritText0,
+  .activeCritText1,
+  .activeCritText2,
+  .activeCritText3 {
+    fill: ${options.taskTextDarkColor} !important;
+  }
+
+  .titleText {
+    text-anchor: middle;
+    font-size: 18px;
+    fill: ${options.taskTextDarkColor}    ;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+  }
+`;
+
+export default getStyles;

src/diagrams/git/styles.js

@@ -0,0 +1,13 @@
+const getStyles = () =>
+  `
+  .commit-id,
+  .commit-msg,
+  .branch-label {
+    fill: lightgrey;
+    color: lightgrey;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+  }
+`;
+
+export default getStyles;

src/diagrams/info/styles.js

@@ -0,0 +1,3 @@
+const getStyles = () => ``;
+
+export default getStyles;

src/diagrams/pie/styles.js

@@ -0,0 +1,17 @@
+const getStyles = options =>
+  `.pieTitleText {
+    text-anchor: middle;
+    font-size: 25px;
+    fill: ${options.taskTextDarkColor};
+    font-family: ${options.fontFamily};
+  }
+  .slice {
+    font-family: ${options.fontFamily};
+  }
+  .legend text {
+    font-family: ${options.fontFamily};
+    font-size: 17px;
+  }
+`;
+
+export default getStyles;

src/diagrams/sequence/styles.js

@@ -0,0 +1,100 @@
+const getStyles = options =>
+  `.actor {
+    stroke: ${options.actorBorder};
+    fill: ${options.actorBkg};
+  }
+
+  text.actor > tspan {
+    fill: ${options.actorTextColor};
+    stroke: none;
+  }
+
+  .actor-line {
+    stroke: ${options.actorLineColor};
+  }
+
+  .messageLine0 {
+    stroke-width: 1.5;
+    stroke-dasharray: none;
+    stroke: ${options.signalColor};
+  }
+
+  .messageLine1 {
+    stroke-width: 1.5;
+    stroke-dasharray: 2, 2;
+    stroke: ${options.signalColor};
+  }
+
+  #arrowhead path {
+    fill: ${options.signalColor};
+    stroke: ${options.signalColor};
+  }
+
+  .sequenceNumber {
+    fill: ${options.sequenceNumberColor};
+  }
+
+  #sequencenumber {
+    fill: ${options.signalColor};
+  }
+
+  #crosshead path {
+    fill: ${options.signalColor};
+    stroke: ${options.signalColor};
+  }
+
+  .messageText {
+    fill: ${options.signalTextColor};
+    stroke: ${options.signalTextColor};
+  }
+
+  .labelBox {
+    stroke: ${options.labelBoxBorderColor};
+    fill: ${options.labelBoxBkgColor};
+  }
+
+  .labelText, .labelText > tspan {
+    fill: ${options.labelTextColor};
+    stroke: none;
+  }
+
+  .loopText, .loopText > tspan {
+    fill: ${options.loopTextColor};
+    stroke: none;
+  }
+
+  .loopLine {
+    stroke-width: 2px;
+    stroke-dasharray: 2, 2;
+    stroke: ${options.labelBoxBorderColor};
+    fill: ${options.labelBoxBorderColor};
+  }
+
+  .note {
+    //stroke: #decc93;
+    stroke: ${options.noteBorderColor};
+    fill: ${options.noteBkgColor};
+  }
+
+  .noteText, .noteText > tspan {
+    fill: ${options.noteTextColor};
+    stroke: none;
+  }
+
+  .activation0 {
+    fill: ${options.activationBkgColor};
+    stroke: ${options.activationBorderColor};
+  }
+
+  .activation1 {
+    fill: ${options.activationBkgColor};
+    stroke: ${options.activationBorderColor};
+  }
+
+  .activation2 {
+    fill: ${options.activationBkgColor};
+    stroke: ${options.activationBorderColor};
+  }
+`;
+
+export default getStyles;

src/diagrams/state/styles.js

@@ -0,0 +1,143 @@
+const getStyles = options =>
+  `g.stateGroup text {
+  fill: ${options.nodeBorder};
+  stroke: none;
+  font-size: 10px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+}
+g.stateGroup text {
+  fill: ${options.nodeBorder};
+  stroke: none;
+  font-size: 10px;
+
+}
+g.stateGroup .state-title {
+  font-weight: bolder;
+  fill: ${options.labelColor};
+}
+
+g.stateGroup rect {
+  fill: ${options.nodeBkg};
+  stroke: ${options.nodeBorder};
+}
+
+g.stateGroup line {
+  stroke: ${options.nodeBorder};
+  stroke-width: 1;
+}
+
+.transition {
+  stroke: ${options.nodeBorder};
+  stroke-width: 1;
+  fill: none;
+}
+
+.stateGroup .composit {
+  fill: white;
+  border-bottom: 1px
+}
+
+.stateGroup .alt-composit {
+  fill: #e0e0e0;
+  border-bottom: 1px
+}
+
+.state-note {
+  stroke: ${options.noteBorderColor};
+  fill: ${options.noteBkgColor};
+
+  text {
+    fill: black;
+    stroke: none;
+    font-size: 10px;
+  }
+}
+
+.stateLabel .box {
+  stroke: none;
+  stroke-width: 0;
+  fill: ${options.nodeBkg};
+  opacity: 0.5;
+}
+
+.stateLabel text {
+  fill: ${options.labelColor};
+  font-size: 10px;
+  font-weight: bold;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+}
+
+.node circle.state-start {
+  fill: black;
+  stroke: black;
+}
+.node circle.state-end {
+  fill: black;
+  stroke: white;
+  stroke-width: 1.5
+}
+
+.node rect {
+  fill: ${options.mainBkg};
+  stroke: ${options.nodeBorder};
+  stroke-width: 1px;
+}
+#statediagram-barbEnd {
+  fill: ${options.nodeBorder};
+}
+
+.statediagram-cluster rect {
+  fill: ${options.nodeBkg};
+  stroke: ${options.nodeBorder};
+  stroke-width: 1px;
+}
+.statediagram-cluster rect.outer {
+  rx: 5px;
+  ry: 5px;
+}
+.statediagram-state .divider {
+  stroke: ${options.nodeBorder};
+}
+
+.statediagram-state .title-state {
+  rx: 5px;
+  ry: 5px;
+}
+.statediagram-cluster.statediagram-cluster .inner {
+  fill: white;
+}
+.statediagram-cluster.statediagram-cluster-alt .inner {
+  fill: #e0e0e0;
+}
+
+.statediagram-cluster .inner {
+  rx:0;
+  ry:0;
+}
+
+.statediagram-state rect.basic {
+  rx: 5px;
+  ry: 5px;
+}
+.statediagram-state rect.divider {
+  stroke-dasharray: 10,10;
+  fill: #efefef;
+}
+
+.note-edge {
+  stroke-dasharray: 5;
+}
+
+.statediagram-note rect {
+  fill: ${options.noteBkgColor};
+  stroke: ${options.noteBorderColor};
+  stroke-width: 1px;
+  rx: 0;
+  ry: 0;
+}
+
+`;
+
+export default getStyles;

src/diagrams/user-journey/styles.js

@@ -0,0 +1,77 @@
+const getStyles = options =>
+  `.label {
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+    color: #333;
+  }
+
+  .label text {
+    fill: #333;
+  }
+
+  .node rect,
+  .node circle,
+  .node ellipse,
+  .node polygon,
+  .node path {
+    fill: ${options.mainBkg};
+    stroke: ${options.nodeBorder};
+    stroke-width: 1px;
+  }
+
+  .node .label {
+    text-align: center;
+  }
+  .node.clickable {
+    cursor: pointer;
+  }
+
+  .arrowheadPath {
+    fill: ${options.arrowheadColor};
+  }
+
+  .edgePath .path {
+    stroke: ${options.lineColor};
+    stroke-width: 1.5px;
+  }
+
+  .flowchart-link {
+    stroke: ${options.lineColor};
+    fill: none;
+  }
+
+  .edgeLabel {
+    background-color: ${options.edgeLabelBackground};
+    rect {
+      opacity: 0.5;
+    }
+    text-align: center;
+  }
+
+  .cluster rect {
+    fill: ${options.secondBkg};
+    stroke: ${options.clusterBorder};
+    stroke-width: 1px;
+  }
+
+  .cluster text {
+    fill: ${options.titleColor};
+  }
+
+  div.mermaidTooltip {
+    position: absolute;
+    text-align: center;
+    max-width: 200px;
+    padding: 2px;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+    font-size: 12px;
+    background: ${options.secondBkg};
+    border: 1px solid ${options.border2};
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 100;
+  }
+`;
+
+export default getStyles;

src/styles.js

@@ -1,15 +1,33 @@
-import getFlowchartStyles from './diagrams/flowchart/styles';
+import classDiagram from './diagrams/class/styles';
+import er from './diagrams/flowchart/styles';
+import flowchart from './diagrams/flowchart/styles';
+import gantt from './diagrams/gantt/styles';
+import git from './diagrams/git/styles';
+import info from './diagrams/info/styles';
+import pie from './diagrams/pie/styles';
+import sequence from './diagrams/sequence/styles';
+import stateDiagram from './diagrams/state/styles';
+import journey from './diagrams/user-journey/styles';
 
 const themes = {
-  flowchart: getFlowchartStyles
+  flowchart,
+  'flowchart-v2': flowchart,
+  sequence,
+  gantt,
+  class: classDiagram,
+  stateDiagram,
+  state: stateDiagram,
+  git,
+  info,
+  pie,
+  er,
+  journey
 };
 
 const getStyles = (type, userStyles, options) =>
-  `:root {
-    --mermaid-font-family: '"trebuchet ms", verdana, arial';
-    font-family: '"trebuchet ms", verdana, arial';
-    font-family: var(--mermaid-font-family);
-    font-size: 16px;
+  ` {
+    font-family: ${options.fontFamily};
+    font-size: ${options.fontSize};
   }
 
   /* Classes common for multiple diagrams */
@@ -23,11 +41,9 @@ const getStyles = (type, userStyles, options) =>
   }
 
   .edge-thickness-normal {
-    // stroke: ${options.lineColor};
     stroke-width: 2px;
   }
   .edge-thickness-thick {
-    // stroke: ${options.lineColor};
     stroke-width: 3.5px
   }
   .edge-pattern-solid {
@@ -49,7 +65,8 @@ const getStyles = (type, userStyles, options) =>
   }
 
   svg {
-    font-family: var(--mermaid-font-family);
+    font-family: ${options.fontFamily};
+    font-size: ${options.fontSize};
   }
 
   ${themes[type](options)}

src/theme-dark.js

@@ -6,7 +6,8 @@ export const lineColor = mainContrastColor;
 export const border1 = '#81B1DB';
 export const border2 = 'rgba(255; 255; 255; 0.25)';
 export const arrowheadColor = mainContrastColor;
-
+export const fontFamily = '"trebuchet ms", verdana, arial';
+export const fontSize = '16px';
 /* Flowchart variables */
 
 export const nodeBkg = mainBkg;

src/theme-default.js

@@ -4,6 +4,8 @@ export const lineColor = '#333333';
 export const border1 = '#CCCCFF';
 export const border2 = '#aaaa33';
 export const arrowheadColor = '#333333';
+export const fontFamily = '"trebuchet ms", verdana, arial';
+export const fontSize = '16px';
 
 /* Flowchart variables */
 

src/theme-forest.js

@@ -4,6 +4,8 @@ export const lineColor = 'green';
 export const border1 = '#13540c';
 export const border2 = '#6eaa49';
 export const arrowheadColor = 'green';
+export const fontFamily = '"trebuchet ms", verdana, arial';
+export const fontSize = '16px';
 
 /* Flowchart variables */
 

src/theme-neutral.js

@@ -9,6 +9,8 @@ export const text = '#333';
 export const critical = '#d42';
 export const done = '#bbb';
 export const arrowheadColor = '#333333';
+export const fontFamily = '"trebuchet ms", verdana, arial';
+export const fontSize = '16px';
 
 /* Flowchart variables */