Skip to content

Commit

Permalink
fix: update mermaid (#569)
Browse files Browse the repository at this point in the history
* docs: update git graph demo

Signed-off-by: HEIGE-PCloud <heige.pcloud@outlook.com>

* fix: remove custom CSS for mermaid

Signed-off-by: HEIGE-PCloud <heige.pcloud@outlook.com>

* chore: use default theme for light theme

Signed-off-by: HEIGE-PCloud <heige.pcloud@outlook.com>
  • Loading branch information
HEIGE-PCloud committed Apr 11, 2022
1 parent 331716a commit a7c1943
Show file tree
Hide file tree
Showing 7 changed files with 373 additions and 135 deletions.
4 changes: 2 additions & 2 deletions assets/js/lib/mermaid.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import mermaid from 'mermaid'

const mermaidElements = document.getElementsByClassName('mermaid')
if (mermaidElements.length) {
mermaid.initialize({ startOnLoad: false, theme: 'default' })
const theme = window.isDark ? 'dark' : 'default'
mermaid.initialize({ startOnLoad: false, theme: theme })
console.log(mermaid)

Array.from(mermaidElements).forEach((e) => {
mermaid.mermaidAPI.render('svg-' + e.id, window.config.data[e.id], svgCode => {
e.insertAdjacentHTML('afterbegin', svgCode)
document.getElementById('svg-' + e.id).children[0].remove()
}, e)
})
}
14 changes: 7 additions & 7 deletions assets/lib/mermaid/mermaid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@
max-width: 100%;
}

@import "themes/neutral/index";
// @import "themes/neutral/index";

[theme=dark] & {
@import "themes/dark/index";
}
[theme=black] & {
@import "themes/dark/index";
}
// [theme=dark] & {
// @import "themes/dark/index";
// }
// [theme=black] & {
// @import "themes/dark/index";
// }

div.mermaidTooltip {
z-index: 50;
Expand Down
118 changes: 85 additions & 33 deletions exampleSite/content/posts/how-to-DoIt/create-diagrams/index.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -455,46 +455,98 @@ Class01 : int gorilla
Class08 <--> C2: Cool label
```

### Git graph - experimental
### Git graph

````markdown
```mermaid
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
````

```mermaid
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```

### Entity Relationship Diagram - experimental
Expand Down
118 changes: 85 additions & 33 deletions exampleSite/content/posts/how-to-DoIt/create-diagrams/index.zh-cn.md
Original file line number Diff line number Diff line change
Expand Up @@ -455,46 +455,98 @@ Class01 : int gorilla
Class08 <--> C2: Cool label
```

### Git 图 - 实验性
### Git 图

````markdown
```mermaid
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
````

```mermaid
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```

### 实体关系图 - 实验性
Expand Down
59 changes: 43 additions & 16 deletions exampleSite/content/posts/tests/mermaid-tests/index.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,22 +59,49 @@ Class01 : int gorilla
Class08 <--> C2: Cool label
{{< /mermaid >}}

{{< mermaid >}}gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
{{< mermaid >}}
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
{{< /mermaid >}}

{{< mermaid >}}erDiagram
Expand Down
Loading

1 comment on commit a7c1943

@vercel
Copy link

@vercel vercel bot commented on a7c1943 Apr 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.