chore(lib): update mermaid 8.5.1 -> 9.0.1

This commit is contained in:
Dillon
2022-05-07 15:36:44 +08:00
parent 7f5bcda006
commit 857047a7a1
24 changed files with 80 additions and 1074 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1,19 +0,0 @@
.page .mermaid {
width: 100%;
margin: 3% auto;
text-align: center;
& > svg {
max-width: 100%;
}
@import "themes/neutral/index";
[theme=dark] & {
@import "themes/dark/index";
}
div.mermaidTooltip {
z-index: 50;
}
}

View File

@@ -1,91 +0,0 @@
g.classGroup text {
fill: $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: $nodeBkg;
stroke: $nodeBorder;
}
g.classGroup line {
stroke: $nodeBorder;
stroke-width: 1;
}
.classLabel .box {
stroke: none;
stroke-width: 0;
fill: $nodeBkg;
opacity: 0.5;
}
.classLabel .label {
fill: $nodeBorder;
font-size: 10px;
}
.relation {
stroke: $nodeBorder;
stroke-width: 1;
fill: none;
}
.dashed-line{
stroke-dasharray: 3;
}
@mixin composition {
fill: $nodeBorder;
stroke: $nodeBorder;
stroke-width: 1;
}
#compositionStart {
@include composition;
}
#compositionEnd {
@include composition;
}
@mixin aggregation {
fill: $nodeBkg;
stroke: $nodeBorder;
stroke-width: 1;
}
#aggregationStart {
@include aggregation;
}
#aggregationEnd {
@include aggregation;
}
#dependencyStart {
@include composition;
}
#dependencyEnd {
@include composition;
}
#extensionStart {
@include composition;
}
#extensionEnd {
@include composition;
}

View File

@@ -1,62 +0,0 @@
$mainBkg: #BDD5EA;
$secondBkg: #6D6D65;
$mainContrastColor: lightgrey;
$darkTextColor: #323D47;
$lineColor: $mainContrastColor;
$border1: #81B1DB;
$border2: rgba(255, 255, 255, 0.25);
$arrowheadColor: $mainContrastColor;
/* Flowchart variables */
$nodeBkg: $mainBkg;
$nodeBorder: purple;
$clusterBkg: $secondBkg;
$clusterBorder: $border2;
$defaultLinkColor: $lineColor;
$titleColor: #F9FFFE;
$edgeLabelBackground: #e8e8e8;
/* Sequence Diagram variables */
$actorBorder: $border1;
$actorBkg: $mainBkg;
$actorTextColor: black;
$actorLineColor: $mainContrastColor;
$signalColor: $mainContrastColor;
$signalTextColor: $mainContrastColor;
$labelBoxBkgColor: $actorBkg;
$labelBoxBorderColor: $actorBorder;
$labelTextColor: $darkTextColor;
$loopTextColor: $mainContrastColor;
$noteBorderColor: $border2;
$noteBkgColor: #fff5ad;
$activationBorderColor: #666;
$activationBkgColor: #f4f4f4;
$sequenceNumberColor: white;
/* Gantt chart variables */
$sectionBkgColor: rgba(255, 255, 255, 0.3);
$altSectionBkgColor: white;
$sectionBkgColor2: #EAE8B9;
$taskBorderColor: rgba(255, 255, 255, 0.5);
$taskBkgColor: $mainBkg;
$taskTextColor: $darkTextColor;
$taskTextLightColor: $mainContrastColor;
$taskTextOutsideColor: $taskTextLightColor;
$taskTextClickableColor: #003163;
$activeTaskBorderColor: rgba(255, 255, 255, 0.5);
$activeTaskBkgColor: #81B1DB;
$gridColor: $mainContrastColor;
$doneTaskBkgColor: $mainContrastColor;
$doneTaskBorderColor: grey;
$critBorderColor: #E83737;
$critBkgColor: #E83737;
$taskTextDarkColor: $darkTextColor;
$todayLineColor: #DB5757;
/* state colors */
$labelColor: black;
@import '../mermaid';

View File

@@ -1,60 +0,0 @@
$mainBkg: #ECECFF;
$secondBkg: #ffffde;
$lineColor: #333333;
$border1: #CCCCFF;
$border2: #aaaa33;
$arrowheadColor: #333333;
/* Flowchart variables */
$nodeBkg: $mainBkg;
$nodeBorder: #9370DB;
$clusterBkg: $secondBkg;
$clusterBorder: $border2;
$defaultLinkColor: $lineColor;
$titleColor: #333;
$edgeLabelBackground: #e8e8e8;
/* Sequence Diagram variables */
$actorBorder: $border1;
$actorBkg: $mainBkg;
$actorTextColor: black;
$actorLineColor: grey;
$signalColor: #333;
$signalTextColor: #333;
$labelBoxBkgColor: $actorBkg;
$labelBoxBorderColor: $actorBorder;
$labelTextColor: $actorTextColor;
$loopTextColor: $actorTextColor;
$noteBorderColor: $border2;
$noteBkgColor: #fff5ad;
$activationBorderColor: #666;
$activationBkgColor: #f4f4f4;
$sequenceNumberColor: white;
/* Gantt chart variables */
$sectionBkgColor: rgba(102, 102, 255, 0.49);
$altSectionBkgColor: white;
$sectionBkgColor2: #fff400;
$taskBorderColor: #534fbc;
$taskBkgColor: #8a90dd;
$taskTextLightColor: white;
$taskTextColor: $taskTextLightColor;
$taskTextDarkColor: black;
$taskTextOutsideColor: $taskTextDarkColor;
$taskTextClickableColor: #003163;
$activeTaskBorderColor: #534fbc;
$activeTaskBkgColor: #bfc7ff;
$gridColor: lightgrey;
$doneTaskBkgColor: lightgrey;
$doneTaskBorderColor: grey;
$critBorderColor: #ff8888;
$critBkgColor: red;
$todayLineColor: red;
/* state colors */
$labelColor: black;
@import '../mermaid';

View File

@@ -1,68 +0,0 @@
.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: $mainBkg;
stroke: $nodeBorder;
stroke-width: 1px;
}
.node .label {
text-align: center;
}
.node.clickable {
cursor: pointer;
}
.arrowheadPath {
fill: $arrowheadColor;
}
.edgePath .path {
stroke: $lineColor;
stroke-width: 1.5px;
}
.edgeLabel {
background-color: $edgeLabelBackground;
rect {
opacity: 0.5;
}
text-align: center;
}
.cluster rect {
fill: $secondBkg;
stroke: $clusterBorder;
stroke-width: 1px;
}
.cluster text {
fill: $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: $secondBkg;
border: 1px solid $border2;
border-radius: 2px;
pointer-events: none;
z-index: 100;
}

View File

@@ -1,61 +0,0 @@
$mainBkg: #cde498;
$secondBkg: #cdffb2;
$lineColor: #1a3318;
$lineColor: green;
$border1: #13540c;
$border2: #6eaa49;
$arrowheadColor: green;
/* Flowchart variables */
$nodeBkg: $mainBkg;
$nodeBorder: $border1;
$clusterBkg: $secondBkg;
$clusterBorder: $border2;
$defaultLinkColor: $lineColor;
$titleColor: #333;
$edgeLabelBackground: #e8e8e8;
/* Sequence Diagram variables */
$actorBorder: $border1;
$actorBkg: $mainBkg;
$actorTextColor: black;
$actorLineColor: grey;
$signalColor: #333;
$signalTextColor: #333;
$labelBoxBkgColor: $actorBkg;
$labelBoxBorderColor: #326932;
$labelTextColor: $actorTextColor;
$loopTextColor: $actorTextColor;
$noteBorderColor: $border2;
$noteBkgColor: #fff5ad;
$activationBorderColor: #666;
$activationBkgColor: #f4f4f4;
$sequenceNumberColor: white;
/* Gantt chart variables */
$sectionBkgColor: #6eaa49;
$altSectionBkgColor: white;
$sectionBkgColor2: #6eaa49;
$taskBorderColor: $border1;
$taskBkgColor: #487e3a;
$taskTextLightColor: white;
$taskTextColor: $taskTextLightColor;
$taskTextDarkColor: black;
$taskTextOutsideColor: $taskTextDarkColor;
$taskTextClickableColor: #003163;
$activeTaskBorderColor: $taskBorderColor;
$activeTaskBkgColor: $mainBkg;
$gridColor: lightgrey;
$doneTaskBkgColor: lightgrey;
$doneTaskBorderColor: grey;
$critBorderColor: #ff8888;
$critBkgColor: red;
$todayLineColor: red;
/* state colors */
$labelColor: black;
@import '../mermaid';

View File

@@ -1,259 +0,0 @@
/** Section styling */
.mermaid-main-font {
font-family: "trebuchet ms", verdana, arial;
font-family: var(--mermaid-font-family);
}
.section {
stroke: none;
opacity: 0.2;
}
.section0 {
fill: $sectionBkgColor;
}
.section2 {
fill: $sectionBkgColor2;
}
.section1,
.section3 {
fill: $altSectionBkgColor;
opacity: 0.2;
}
.sectionTitle0 {
fill: $titleColor;
}
.sectionTitle1 {
fill: $titleColor;
}
.sectionTitle2 {
fill: $titleColor;
}
.sectionTitle3 {
fill: $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: $gridColor;
opacity: 0.8;
shape-rendering: crispEdges;
text {
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
fill: $taskTextOutsideColor;
}
}
.grid path {
stroke-width: 0;
}
/* Today line */
.today {
fill: none;
stroke: $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: $taskTextDarkColor;
text-anchor: start;
font-size: 11px;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}
.taskTextOutsideLeft {
fill: $taskTextDarkColor;
text-anchor: end;
font-size: 11px;
}
/* Special case clickable */
.task.clickable {
cursor: pointer;
}
.taskText.clickable {
cursor: pointer;
fill: $taskTextClickableColor !important;
font-weight: bold;
}
.taskTextOutsideLeft.clickable {
cursor: pointer;
fill: $taskTextClickableColor !important;
font-weight: bold;
}
.taskTextOutsideRight.clickable {
cursor: pointer;
fill: $taskTextClickableColor !important;
font-weight: bold;
}
/* Specific task settings for the sections*/
.taskText0,
.taskText1,
.taskText2,
.taskText3 {
fill: $taskTextColor;
}
.task0,
.task1,
.task2,
.task3 {
fill: $taskBkgColor;
stroke: $taskBorderColor;
}
.taskTextOutside0,
.taskTextOutside2
{
fill: $taskTextOutsideColor !important;
}
.taskTextOutside1,
.taskTextOutside3 {
fill: $taskTextOutsideColor !important;
}
/* Active task */
.active0,
.active1,
.active2,
.active3 {
fill: $activeTaskBkgColor;
stroke: $activeTaskBorderColor;
}
.activeText0,
.activeText1,
.activeText2,
.activeText3 {
fill: $taskTextDarkColor;
}
/* Completed task */
.done0,
.done1,
.done2,
.done3 {
stroke: $doneTaskBorderColor;
fill: $doneTaskBkgColor;
stroke-width: 2;
}
.doneText0,
.doneText1,
.doneText2,
.doneText3 {
fill: $taskTextDarkColor;
}
/* Tasks on the critical line */
.crit0,
.crit1,
.crit2,
.crit3 {
stroke: $critBorderColor;
fill: $critBkgColor;
stroke-width: 2;
}
.activeCrit0,
.activeCrit1,
.activeCrit2,
.activeCrit3 {
stroke: $critBorderColor;
fill: $activeTaskBkgColor;
stroke-width: 2;
}
.doneCrit0,
.doneCrit1,
.doneCrit2,
.doneCrit3 {
stroke: $critBorderColor;
fill: $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: $taskTextDarkColor;
}
.activeCritText0,
.activeCritText1,
.activeCritText2,
.activeCritText3 {
fill: $taskTextDarkColor;
}
.titleText {
text-anchor: middle;
font-size: 18px;
fill: $taskTextOutsideColor;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}

View File

@@ -1,8 +0,0 @@
.commit-id,
.commit-msg,
.branch-label {
fill: lightgrey;
color: lightgrey;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}

View File

@@ -1,19 +0,0 @@
@import 'flowchart';
@import 'sequence';
@import 'gantt';
@import 'class';
@import 'git';
@import 'pie';
@import 'state';
// .composit {
// fill: white;
// border-bottom: 1px
// }
:root {
--mermaid-font-family: '"trebuchet ms", verdana, arial';
--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
// --mermaid-alt-font-family: '"Lucida Console", Monaco, monospace';
}

View File

@@ -1,65 +0,0 @@
$mainBkg: #eee;
$contrast: #26a;
$secondBkg: lighten($contrast, 55%);
$lineColor: #666;
$border1: #999;
$border2: $contrast;
$note: #ffa;
$text: #333;
$critical: #d42;
$done: #bbb;
$arrowheadColor: #333333;
/* Flowchart variables */
$nodeBkg: $mainBkg;
$nodeBorder: $border1;
$clusterBkg: $secondBkg;
$clusterBorder: $border2;
$defaultLinkColor: $lineColor;
$titleColor: $text;
$edgeLabelBackground: white;
/* Sequence Diagram variables */
$actorBorder: $border1;
$actorBkg: $mainBkg;
$actorTextColor: $text;
$actorLineColor: $lineColor;
$signalColor: $text;
$signalTextColor: $text;
$labelBoxBkgColor: $actorBkg;
$labelBoxBorderColor: $actorBorder;
$labelTextColor: $text;
$loopTextColor: $text;
$noteBorderColor: darken($note, 60%);
$noteBkgColor: $note;
$activationBorderColor: #666;
$activationBkgColor: #f4f4f4;
$sequenceNumberColor: white;
/* Gantt chart variables */
$sectionBkgColor: lighten($contrast, 30%);
$altSectionBkgColor: white;
$sectionBkgColor2: lighten($contrast, 30%);
$taskBorderColor: darken($contrast, 10%);
$taskBkgColor: $contrast;
$taskTextLightColor: white;
$taskTextColor: $taskTextLightColor;
$taskTextDarkColor: $text;
$taskTextOutsideColor: $taskTextDarkColor;
$taskTextClickableColor: #003163;
$activeTaskBorderColor: $taskBorderColor;
$activeTaskBkgColor: $mainBkg;
$gridColor: lighten($border1, 30%);
$doneTaskBkgColor: $done;
$doneTaskBorderColor: $lineColor;
$critBkgColor: $critical;
$critBorderColor: darken($critBkgColor, 10%);
$todayLineColor: $critBkgColor;
/* state colors */
$labelColor: black;
@import '../mermaid';

View File

@@ -1,11 +0,0 @@
.pieTitleText {
text-anchor: middle;
font-size: 25px;
fill: $taskTextDarkColor;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}
.slice {
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}

View File

@@ -1,97 +0,0 @@
.actor {
stroke: $actorBorder;
fill: $actorBkg;
}
text.actor {
fill: $actorTextColor;
stroke: none;
}
.actor-line {
stroke: $actorLineColor;
}
.messageLine0 {
stroke-width: 1.5;
stroke-dasharray: '2 2';
stroke: $signalColor;
}
.messageLine1 {
stroke-width: 1.5;
stroke-dasharray: '2 2';
stroke: $signalColor;
}
#arrowhead {
fill: $signalColor;
}
.sequenceNumber {
fill: $sequenceNumberColor;
}
#sequencenumber {
fill: $signalColor;
}
#crosshead path {
fill: $signalColor !important;
stroke: $signalColor !important;
}
.messageText {
fill: $signalTextColor;
stroke: none;
}
.labelBox {
stroke: $labelBoxBorderColor;
fill: $labelBoxBkgColor;
}
.labelText {
fill: $labelTextColor;
stroke: none;
}
.loopText {
fill: $loopTextColor;
stroke: none;
}
.loopLine {
stroke-width: 2;
stroke-dasharray: '2 2';
stroke: $labelBoxBorderColor;
}
.note {
//stroke: #decc93;
stroke: $noteBorderColor;
fill: $noteBkgColor;
}
.noteText {
fill: black;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
font-size: 14px;
}
.activation0 {
fill: $activationBkgColor;
stroke: $activationBorderColor;
}
.activation1 {
fill: $activationBkgColor;
stroke: $activationBorderColor;
}
.activation2 {
fill: $activationBkgColor;
stroke: $activationBorderColor;
}

View File

@@ -1,132 +0,0 @@
g.stateGroup text {
fill: $nodeBorder;
stroke: none;
font-size: 10px;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}
g.stateGroup text {
fill: $nodeBorder;
stroke: none;
font-size: 10px;
}
g.stateGroup .state-title {
font-weight: bolder;
fill: $labelColor;
}
g.stateGroup rect {
fill: $nodeBkg;
stroke: $nodeBorder;
}
g.stateGroup line {
stroke: $nodeBorder;
stroke-width: 1;
}
.transition {
stroke: $nodeBorder;
stroke-width: 1;
fill: none;
}
.stateGroup .composit {
fill: white;
border-bottom: 1px
}
.stateGroup .alt-composit {
fill: #e0e0e0;
border-bottom: 1px
}
.state-note {
stroke: $noteBorderColor;
fill: $noteBkgColor;
text {
fill: black;
stroke: none;
font-size: 10px;
}
}
.stateLabel .box {
stroke: none;
stroke-width: 0;
fill: $nodeBkg;
opacity: 0.5;
}
.stateLabel text {
fill: $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
}
#statediagram-barbEnd {
fill: $nodeBorder
}
.statediagram-cluster rect {
fill: $nodeBkg;
stroke: $nodeBorder;
stroke-width: 1px;
}
.statediagram-cluster rect.outer {
rx: 5px;
ry: 5px;
}
.statediagram-state .divider {
stroke: $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: $noteBkgColor;
stroke: $noteBorderColor;
stroke-width: 1px;
rx: 0;
ry: 0;
}