#1542 Styling for all diagram types
This commit is contained in:
parent
f9667cd80f
commit
8d076efd71
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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;
|
|
@ -0,0 +1,5 @@
|
||||||
|
const getStyles = () =>
|
||||||
|
`
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default getStyles;
|
|
@ -1,7 +1,6 @@
|
||||||
const getStyles = options =>
|
const getStyles = options =>
|
||||||
`.label {
|
`.label {
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: ${options.fontFamily};
|
||||||
font-family: var(--mermaid-font-family);
|
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -63,8 +62,7 @@ const getStyles = options =>
|
||||||
text-align: center;
|
text-align: center;
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: ${options.fontFamily};
|
||||||
font-family: var(--mermaid-font-family);
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
background: ${options.secondBkg};
|
background: ${options.secondBkg};
|
||||||
border: 1px solid ${options.border2};
|
border: 1px solid ${options.border2};
|
||||||
|
|
|
@ -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;
|
|
@ -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;
|
|
@ -0,0 +1,3 @@
|
||||||
|
const getStyles = () => ``;
|
||||||
|
|
||||||
|
export default getStyles;
|
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
|
@ -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 = {
|
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) =>
|
const getStyles = (type, userStyles, options) =>
|
||||||
`:root {
|
` {
|
||||||
--mermaid-font-family: '"trebuchet ms", verdana, arial';
|
font-family: ${options.fontFamily};
|
||||||
font-family: '"trebuchet ms", verdana, arial';
|
font-size: ${options.fontSize};
|
||||||
font-family: var(--mermaid-font-family);
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Classes common for multiple diagrams */
|
/* Classes common for multiple diagrams */
|
||||||
|
@ -23,11 +41,9 @@ const getStyles = (type, userStyles, options) =>
|
||||||
}
|
}
|
||||||
|
|
||||||
.edge-thickness-normal {
|
.edge-thickness-normal {
|
||||||
// stroke: ${options.lineColor};
|
|
||||||
stroke-width: 2px;
|
stroke-width: 2px;
|
||||||
}
|
}
|
||||||
.edge-thickness-thick {
|
.edge-thickness-thick {
|
||||||
// stroke: ${options.lineColor};
|
|
||||||
stroke-width: 3.5px
|
stroke-width: 3.5px
|
||||||
}
|
}
|
||||||
.edge-pattern-solid {
|
.edge-pattern-solid {
|
||||||
|
@ -49,7 +65,8 @@ const getStyles = (type, userStyles, options) =>
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
font-family: var(--mermaid-font-family);
|
font-family: ${options.fontFamily};
|
||||||
|
font-size: ${options.fontSize};
|
||||||
}
|
}
|
||||||
|
|
||||||
${themes[type](options)}
|
${themes[type](options)}
|
||||||
|
|
|
@ -6,7 +6,8 @@ export const lineColor = mainContrastColor;
|
||||||
export const border1 = '#81B1DB';
|
export const border1 = '#81B1DB';
|
||||||
export const border2 = 'rgba(255; 255; 255; 0.25)';
|
export const border2 = 'rgba(255; 255; 255; 0.25)';
|
||||||
export const arrowheadColor = mainContrastColor;
|
export const arrowheadColor = mainContrastColor;
|
||||||
|
export const fontFamily = '"trebuchet ms", verdana, arial';
|
||||||
|
export const fontSize = '16px';
|
||||||
/* Flowchart variables */
|
/* Flowchart variables */
|
||||||
|
|
||||||
export const nodeBkg = mainBkg;
|
export const nodeBkg = mainBkg;
|
||||||
|
|
|
@ -4,6 +4,8 @@ export const lineColor = '#333333';
|
||||||
export const border1 = '#CCCCFF';
|
export const border1 = '#CCCCFF';
|
||||||
export const border2 = '#aaaa33';
|
export const border2 = '#aaaa33';
|
||||||
export const arrowheadColor = '#333333';
|
export const arrowheadColor = '#333333';
|
||||||
|
export const fontFamily = '"trebuchet ms", verdana, arial';
|
||||||
|
export const fontSize = '16px';
|
||||||
|
|
||||||
/* Flowchart variables */
|
/* Flowchart variables */
|
||||||
|
|
||||||
|
|
|
@ -4,6 +4,8 @@ export const lineColor = 'green';
|
||||||
export const border1 = '#13540c';
|
export const border1 = '#13540c';
|
||||||
export const border2 = '#6eaa49';
|
export const border2 = '#6eaa49';
|
||||||
export const arrowheadColor = 'green';
|
export const arrowheadColor = 'green';
|
||||||
|
export const fontFamily = '"trebuchet ms", verdana, arial';
|
||||||
|
export const fontSize = '16px';
|
||||||
|
|
||||||
/* Flowchart variables */
|
/* Flowchart variables */
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,8 @@ export const text = '#333';
|
||||||
export const critical = '#d42';
|
export const critical = '#d42';
|
||||||
export const done = '#bbb';
|
export const done = '#bbb';
|
||||||
export const arrowheadColor = '#333333';
|
export const arrowheadColor = '#333333';
|
||||||
|
export const fontFamily = '"trebuchet ms", verdana, arial';
|
||||||
|
export const fontSize = '16px';
|
||||||
|
|
||||||
/* Flowchart variables */
|
/* Flowchart variables */
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue