blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 15:28:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

⬆️ Chore(libs): update mermaid from 8.13.3 to 9.1.3

Browse Source
This commit is contained in:
Cell
2022-07-09 17:38:58 +08:00
parent 8836574f21
commit eea2b4f53f
26 changed files with 744 additions and 1461 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -22,6 +22,7 @@ All notable changes to this project will be documented in this file.
- Update Artalk from 2.2.12 to 2.3.4 ([#150](https://github.com/Lruihao/FixIt/issues/150))
- Update Waline from 1.5.2 to 2.6.1
- Update Valine from 1.4.18 to 1.5.0
- Update mermaid from 8.13.3 to 9.1.3
- **Full Changelog:** @Lruihao [`v0.2.14...v0.2.15`](https://github.com/Lruihao/FixIt/compare/v0.2.14...v0.2.15)
## v0.2.14 [2022.5.15]
assets/data/cdn/jsdelivr.yml
+2 -3
View File
@@ -57,9 +57,8 @@ libFiles:
# mapbox-gl@2.8.2 https://docs.mapbox.com/mapbox-gl-js
mapboxGLCSS: mapbox-gl@2.8.2/dist/mapbox-gl.min.css
mapboxGLJS: mapbox-gl@2.8.2/dist/mapbox-gl.min.js
# TODO update
# mermaid@8.13.3 https://github.com/knsv/mermaid
mermaidJS: mermaid@8.13.3/dist/mermaid.min.js
# mermaid@9.1.3 https://github.com/knsv/mermaid
mermaidJS: mermaid@9.1.3/dist/mermaid.min.js
# meting@2.0.1 https://github.com/metowolf/MetingJS
metingJS: meting@2.0.1/dist/Meting.min.js
# normalize.css@8.0.1 https://github.com/necolas/normalize.css
assets/data/cdn/unpkg.yml
+2 -3
View File
@@ -57,9 +57,8 @@ libFiles:
# mapbox-gl@2.8.2 https://docs.mapbox.com/mapbox-gl-js
mapboxGLCSS: mapbox-gl@2.8.2/dist/mapbox-gl.min.css
mapboxGLJS: mapbox-gl@2.8.2/dist/mapbox-gl.min.js
# TODO update
# mermaid@8.13.3 https://github.com/knsv/mermaid
mermaidJS: mermaid@8.13.3/dist/mermaid.min.js
# mermaid@9.1.3 https://github.com/knsv/mermaid
mermaidJS: mermaid@9.1.3/dist/mermaid.min.js
# meting@2.0.1 https://github.com/metowolf/MetingJS
metingJS: meting@2.0.1/dist/Meting.min.js
# normalize.css@8.0.1 https://github.com/necolas/normalize.css
assets/js/theme.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/js/theme.min.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/lib/mermaid/mermaid.min.js
Vendored
+1 -2
View File
File diff suppressed because one or more lines are too long
assets/lib/mermaid/mermaid.scss
-22
View File
@@ -1,22 +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";
}
[theme=black] & {
@import "themes/dark/index";
}
div.mermaidTooltip {
z-index: 50;
}
}
assets/lib/mermaid/themes/class.scss
-91
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;
}
assets/lib/mermaid/themes/dark/index.scss
-62
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';
assets/lib/mermaid/themes/default/index.scss
-60
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';
assets/lib/mermaid/themes/flowchart.scss
-68
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;
}
assets/lib/mermaid/themes/forest/index.scss
-61
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';
assets/lib/mermaid/themes/gantt.scss
-259
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);
}
assets/lib/mermaid/themes/git.scss
-8
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);
}
assets/lib/mermaid/themes/mermaid.scss
-19
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';
}
assets/lib/mermaid/themes/neutral/index.scss
-65
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';
assets/lib/mermaid/themes/pie.scss
-11
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);
}
assets/lib/mermaid/themes/sequence.scss
-97
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;
}
assets/lib/mermaid/themes/state.scss
-132
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;
}
exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md
+2 -240
View File
@@ -321,247 +321,9 @@ A **tip** banner
## 5 mermaid
[mermaid](https://mermaidjs.github.io/) is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.
The `mermaid` shortcode supports diagrams in Hugo with [Mermaid](https://mermaidjs.github.io/) library.
Just insert your mermaid code in the `mermaid` shortcode and that’s it.
### 5.1 Flowchart {#flowchart}
Example **flowchart** `mermaid` input:
```go-html-template
{{</* mermaid */>}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{< /mermaid >}}
### 5.2 Sequence Diagram {#sequence-diagram}
Example **sequence diagram** `mermaid` input:
```go-html-template
{{</* mermaid */>}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
{{< /mermaid >}}
### 5.3 GANTT {#gantt}
Example **GANTT** `mermaid` input:
```go-html-template
{{</* mermaid */>}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
{{< /mermaid >}}
### 5.4 Class Diagram {#class-diagram}
Example **class diagram** `mermaid` input:
```go-html-template
{{</* mermaid */>}}
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
{{< /mermaid >}}
### 5.5 State Diagram {#state-diagram}
Example **state diagram** `mermaid` input:
```go-html-template
{{</* mermaid */>}}
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
{{< /mermaid >}}
### 5.6 Git Graph {#git-graph}
Example **git graph** `mermaid` input:
```go-html-template
{{</* mermaid */>}}
gitGraph:
options
{
"nodeSpacing": 100,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
checkout master
commit
merge newbranch
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
gitGraph:
options
{
"nodeSpacing": 100,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
checkout master
commit
merge newbranch
{{< /mermaid >}}
### 5.7 Pie {#pie}
Example **pie** `mermaid` input:
```go-html-template
{{</* mermaid */>}}
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
{{< /mermaid >}}
The full documentation is provided in [Theme Documentation - mermaid Shortcode](../theme-documentation-mermaid-shortcode).
## 6 echarts
exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md
+2 -240
View File
@@ -323,247 +323,9 @@ This is a **right-aligned** paragraph.
## 5 mermaid
[mermaid](https://mermaidjs.github.io/) 是一个可以帮助你在文章中生成图表和流程图的库，类似 Markdown 的语法。
`mermaid` shortcode 使用 [Mermaid](https://mermaidjs.github.io/) 库提供绘制图表和流程图的功能.
只需将你的 mermaid 代码插入 `mermaid` shortcode 中即可。
### 5.1 流程图 {#flowchart}
一个 **流程图** `mermaid` 示例：
```go-html-template
{{</* mermaid */>}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{</* /mermaid */>}}
```
呈现的输出效果如下：
{{< mermaid >}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{< /mermaid >}}
### 5.2 时序图 {#sequence-diagram}
一个 **时序图** `mermaid` 示例：
```go-html-template
{{</* mermaid */>}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
{{</* /mermaid */>}}
```
呈现的输出效果如下：
{{< mermaid >}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
{{< /mermaid >}}
### 5.3 甘特图 {#gantt}
一个 **甘特图** `mermaid` 示例：
```go-html-template
{{</* mermaid */>}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
{{</* /mermaid */>}}
```
呈现的输出效果如下：
{{< mermaid >}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
{{< /mermaid >}}
### 5.4 类图 {#class-diagram}
一个 **类图** `mermaid` 示例：
```go-html-template
{{</* mermaid */>}}
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
{{</* /mermaid */>}}
```
呈现的输出效果如下：
{{< mermaid >}}
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
{{< /mermaid >}}
### 5.5 状态图 {#state-diagram}
一个 **状态图** `mermaid` 示例：
```go-html-template
{{</* mermaid */>}}
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
{{</* /mermaid */>}}
```
呈现的输出效果如下：
{{< mermaid >}}
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
{{< /mermaid >}}
### 5.6 Git 图 {#git-graph}
一个 **Git 图** `mermaid` 示例：
```go-html-template
{{</* mermaid */>}}
gitGraph:
options
{
"nodeSpacing": 100,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
checkout master
commit
merge newbranch
{{</* /mermaid */>}}
```
呈现的输出效果如下：
{{< mermaid >}}
gitGraph:
options
{
"nodeSpacing": 100,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
checkout master
commit
merge newbranch
{{< /mermaid >}}
### 5.7 饼图 {#pie}
一个 **饼图** `mermaid` 示例：
```go-html-template
{{</* mermaid */>}}
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
{{</* /mermaid */>}}
```
呈现的输出效果如下：
{{< mermaid >}}
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
{{< /mermaid >}}
完整文档请查看页面 [主题文档 - mermaid Shortcode](../theme-documentation-mermaid-shortcode).
## 6 echarts
exampleSite/content/posts/theme-documentation-mermaid-shortcode/featured-image.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md
+360
View File
@@ -0,0 +1,360 @@
---
title: "Theme Documentation - mermaid Shortcode"
date: 2022-07-09T17:20:15+08:00
draft: false
author: "Lruihao"
authorLink: "https://lruihao.cn"
description: "The mermaid shortcode supports diagrams in Hugo with Mermaid library."
images: []
resources:
- name: "featured-image"
src: "featured-image.png"
tags: ["shortcodes"]
categories: ["documentation"]
hiddenFromHomePage: true
repost: https://hugoloveit.com/theme-documentation-mermaid-shortcode/
---
{{< version 0.2.15 changed >}}
The `mermaid` shortcode supports diagrams in Hugo with [Mermaid](https://mermaidjs.github.io/) library.
<!--more-->
**Mermaid** is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.
Just insert your mermaid code in the `mermaid` shortcode and that’s it.
## Flowchart {#flowchart}
Example **flowchart** `mermaid` input:
```markdown
{{</* mermaid */>}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{< /mermaid >}}
## Sequence Diagram {#sequence-diagram}
Example **sequence diagram** `mermaid` input:
```markdown
{{</* mermaid */>}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
{{< /mermaid >}}
## Gantt {#gantt}
Example **Gantt** `mermaid` input:
```markdown
{{</* mermaid */>}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
{{< /mermaid >}}
## Class Diagram {#class-diagram}
Example **class diagram** `mermaid` input:
```markdown
{{</* mermaid */>}}
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
{{< /mermaid >}}
## State Diagram {#state-diagram}
Example **state diagram** `mermaid` input:
```markdown
{{</* mermaid */>}}
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
{{< /mermaid >}}
## Git Graph {#git-graph}
Example **git graph** `mermaid` input:
```markdown
{{</* mermaid */>}}
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
{{< /mermaid >}}
## Entity Relationship Diagram {#entity-relationship-diagram}
Example **entity-relationship diagram** `mermaid` input:
```markdown
{{</* mermaid */>}}
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
{{< /mermaid >}}
## User Journey {#user-journey}
Example **user journey** `mermaid` input:
```markdown
{{</* mermaid */>}}
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
{{< /mermaid >}}
## Pie Chart {#pie-chart}
Example **pie chart** `mermaid` input:
```markdown
{{</* mermaid */>}}
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
{{< /mermaid >}}
## Requirement Diagram {#requirement-diagram}
Example **requirement diagram** `mermaid` input:
```markdown
{{</* mermaid */>}}
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
{{< /mermaid >}}
exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.zh-cn.md
+359
View File
@@ -0,0 +1,359 @@
---
title: "主题文档 - mermaid Shortcode"
date: 2022-07-09T17:20:15+08:00
draft: false
author: "Lruihao"
authorLink: "https://lruihao.cn"
description: "mermaid shortcode 使用 Mermaid 库提供绘制图表和流程图的功能."
resources:
- name: "featured-image"
src: "featured-image.png"
tags: ["shortcodes"]
categories: ["documentation"]
hiddenFromHomePage: true
repost: https://hugoloveit.com/zh-cn/theme-documentation-mermaid-shortcode/
---
{{< version 0.2.15 changed >}}
`mermaid` shortcode 使用 [Mermaid](https://mermaidjs.github.io/) 库提供绘制图表和流程图的功能.
<!--more-->
[mermaid](https://mermaidjs.github.io/) 是一个可以帮助你在文章中绘制图表和流程图的库, 类似 Markdown 的语法.
只需将你的 mermaid 代码插入 `mermaid` shortcode 中即可.
## 流程图 {#flowchart}
一个 **流程图** `mermaid` 示例:
```markdown
{{</* mermaid */>}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{</* /mermaid */>}}
```
呈现的输出效果如下:
{{< mermaid >}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{< /mermaid >}}
## 时序图 {#sequence-diagram}
一个 **时序图** `mermaid` 示例:
```markdown
{{</* mermaid */>}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
{{</* /mermaid */>}}
```
呈现的输出效果如下:
{{< mermaid >}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
{{< /mermaid >}}
## 甘特图 {#gantt}
一个 **甘特图** `mermaid` 示例:
```markdown
{{</* mermaid */>}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
{{</* /mermaid */>}}
```
呈现的输出效果如下:
{{< mermaid >}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
{{< /mermaid >}}
## 类图 {#class-diagram}
一个 **类图** `mermaid` 示例:
```markdown
{{</* mermaid */>}}
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
{{</* /mermaid */>}}
```
呈现的输出效果如下:
{{< mermaid >}}
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
{{< /mermaid >}}
## 状态图 {#state-diagram}
一个 **状态图** `mermaid` 示例:
```markdown
{{</* mermaid */>}}
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
{{</* /mermaid */>}}
```
呈现的输出效果如下:
{{< mermaid >}}
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
{{< /mermaid >}}
## Git 图 {#git-graph}
一个 **Git 图** `mermaid` 示例:
```markdown
{{</* mermaid */>}}
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
{{</* /mermaid */>}}
```
呈现的输出效果如下:
{{< mermaid >}}
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
{{< /mermaid >}}
## 实体关系图 {#entity-relationship-diagram}
一个 **实体关系图** `mermaid` 示例:
```markdown
{{</* mermaid */>}}
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
{{</* /mermaid */>}}
```
呈现的输出效果如下:
{{< mermaid >}}
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
{{< /mermaid >}}
## 用户体验旅程图 {#user-journey}
一个 **用户体验旅程图** `mermaid` 示例:
```markdown
{{</* mermaid */>}}
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
{{</* /mermaid */>}}
```
呈现的输出效果如下:
{{< mermaid >}}
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
{{< /mermaid >}}
## 饼图 {#pie}
一个 **饼图** `mermaid` 示例:
```markdown
{{</* mermaid */>}}
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
{{</* /mermaid */>}}
```
呈现的输出效果如下:
{{< mermaid >}}
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
{{< /mermaid >}}
## 依赖图 {#requirement-diagram}
一个 **依赖图** `mermaid` 示例:
```markdown
{{</* mermaid */>}}
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
{{</* /mermaid */>}}
```
呈现的输出效果如下:
{{< mermaid >}}
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
{{< /mermaid >}}
layouts/partials/assets.html
-2
View File
@@ -120,8 +120,6 @@
{{- if (.Scratch.Get "this").mermaid -}}
{{- $source := $cdn.mermaidJS | default "lib/mermaid/mermaid.min.js" -}}
{{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
{{- $options := dict "targetPath" "lib/mermaid/mermaid.min.css" "enableSourceMap" true -}}
{{- dict "Source" "lib/mermaid/mermaid.scss" "ToCSS" $options "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}}
{{- end -}}
{{- /* ECharts */ -}}
src/js/theme.js
+13 -14
View File
@@ -583,20 +583,19 @@ class FixIt {
}
initMermaid() {
const $mermaidElements = document.getElementsByClassName('mermaid');
if ($mermaidElements.length) {
mermaid.initialize({ startOnLoad: false, theme: 'default' });
this.util.forEach($mermaidElements, ($mermaid) => {
mermaid.mermaidAPI.render(
'svg-' + $mermaid.id,
this.data[$mermaid.id],
(svgCode) => {
$mermaid.insertAdjacentHTML('afterbegin', svgCode);
},
$mermaid
);
});
}
this._mermaidOnSwitchTheme = this._mermaidOnSwitchTheme || (() => {
const $mermaidElements = document.getElementsByClassName('mermaid');
if ($mermaidElements.length) {
mermaid.initialize({startOnLoad: false, theme: this.isDark ? 'dark' : 'neutral', securityLevel: 'loose'});
this.util.forEach($mermaidElements, $mermaid => {
mermaid.render('svg-' + $mermaid.id, this.data[$mermaid.id], svgCode => {
$mermaid.innerHTML = svgCode;
}, $mermaid);
});
}
});
this.switchThemeEventSet.add(this._mermaidOnSwitchTheme);
this._mermaidOnSwitchTheme();
}
initEcharts() {