mirror of
https://github.com/tylernguyen/wiki.git
synced 2025-02-05 08:23:14 -06:00
refactor: deprecate Mermaid
This commit is contained in:
parent
7e1b601be3
commit
c76da73dec
2 changed files with 0 additions and 613 deletions
|
|
@ -1,609 +0,0 @@
|
||||||
---
|
|
||||||
date:
|
|
||||||
created: 2024-01-01
|
|
||||||
updated: 2024-11-05
|
|
||||||
---
|
|
||||||
|
|
||||||
# Mermaid
|
|
||||||
|
|
||||||
Samples of [Mermaid](https://mermaid.js.org/) in :simple-materialformkdocs:{ .materialformkdocs } Material for MkDocs.
|
|
||||||
|
|
||||||
Inherits <https://squidfunk.github.io/mkdocs-material/reference/diagrams/?h=mermaid>
|
|
||||||
|
|
||||||
<!-- more -->
|
|
||||||
|
|
||||||
## Flowchart
|
|
||||||
|
|
||||||
```` title="Flowchart"
|
|
||||||
``` mermaid
|
|
||||||
graph TB
|
|
||||||
sq[Square shape] --> ci((Circle shape))
|
|
||||||
|
|
||||||
subgraph A
|
|
||||||
od>Odd shape]-- Two line<br/>edge comment --> ro
|
|
||||||
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
|
|
||||||
di==>ro2(Rounded square shape)
|
|
||||||
end
|
|
||||||
|
|
||||||
%% Notice that no text in shape are added here instead that is appended further down
|
|
||||||
e --> od3>Really long text with linebreak<br>in an Odd shape]
|
|
||||||
|
|
||||||
%% Comments after double percent signs
|
|
||||||
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
|
|
||||||
|
|
||||||
cyr[Cyrillic]-->cyr2((Circle shape Начало));
|
|
||||||
|
|
||||||
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
|
|
||||||
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
|
|
||||||
class sq,e green
|
|
||||||
class di orange
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
<div class="result" markdown>
|
|
||||||
|
|
||||||
``` mermaid
|
|
||||||
graph TB
|
|
||||||
sq[Square shape] --> ci((Circle shape))
|
|
||||||
|
|
||||||
subgraph A
|
|
||||||
od>Odd shape]-- Two line<br/>edge comment --> ro
|
|
||||||
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
|
|
||||||
di==>ro2(Rounded square shape)
|
|
||||||
end
|
|
||||||
|
|
||||||
%% Notice that no text in shape are added here instead that is appended further down
|
|
||||||
e --> od3>Really long text with linebreak<br>in an Odd shape]
|
|
||||||
|
|
||||||
%% Comments after double percent signs
|
|
||||||
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
|
|
||||||
|
|
||||||
cyr[Cyrillic]-->cyr2((Circle shape Начало));
|
|
||||||
|
|
||||||
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
|
|
||||||
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
|
|
||||||
class sq,e green
|
|
||||||
class di orange
|
|
||||||
```
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Sequence
|
|
||||||
|
|
||||||
```` title="Sequence"
|
|
||||||
``` mermaid
|
|
||||||
sequenceDiagram
|
|
||||||
participant web as Web Browser
|
|
||||||
participant blog as Blog Service
|
|
||||||
participant account as Account Service
|
|
||||||
participant mail as Mail Service
|
|
||||||
participant db as Storage
|
|
||||||
|
|
||||||
Note over web,db: The user must be logged in to submit blog posts
|
|
||||||
web->>+account: Logs in using credentials
|
|
||||||
account->>db: Query stored accounts
|
|
||||||
db->>account: Respond with query result
|
|
||||||
|
|
||||||
alt Credentials not found
|
|
||||||
account->>web: Invalid credentials
|
|
||||||
else Credentials found
|
|
||||||
account->>-web: Successfully logged in
|
|
||||||
|
|
||||||
Note over web,db: When the user is authenticated, they can now submit new posts
|
|
||||||
web->>+blog: Submit new post
|
|
||||||
blog->>db: Store post data
|
|
||||||
|
|
||||||
par Notifications
|
|
||||||
blog--)mail: Send mail to blog subscribers
|
|
||||||
blog--)db: Store in-site notifications
|
|
||||||
and Response
|
|
||||||
blog-->>-web: Successfully posted
|
|
||||||
end
|
|
||||||
end
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
<div class="result" markdown>
|
|
||||||
|
|
||||||
``` mermaid
|
|
||||||
sequenceDiagram
|
|
||||||
participant web as Web Browser
|
|
||||||
participant blog as Blog Service
|
|
||||||
participant account as Account Service
|
|
||||||
participant mail as Mail Service
|
|
||||||
participant db as Storage
|
|
||||||
|
|
||||||
Note over web,db: The user must be logged in to submit blog posts
|
|
||||||
web->>+account: Logs in using credentials
|
|
||||||
account->>db: Query stored accounts
|
|
||||||
db->>account: Respond with query result
|
|
||||||
|
|
||||||
alt Credentials not found
|
|
||||||
account->>web: Invalid credentials
|
|
||||||
else Credentials found
|
|
||||||
account->>-web: Successfully logged in
|
|
||||||
|
|
||||||
Note over web,db: When the user is authenticated, they can now submit new posts
|
|
||||||
web->>+blog: Submit new post
|
|
||||||
blog->>db: Store post data
|
|
||||||
|
|
||||||
par Notifications
|
|
||||||
blog--)mail: Send mail to blog subscribers
|
|
||||||
blog--)db: Store in-site notifications
|
|
||||||
and Response
|
|
||||||
blog-->>-web: Successfully posted
|
|
||||||
end
|
|
||||||
end
|
|
||||||
```
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Class
|
|
||||||
|
|
||||||
```` title="Flowchart"
|
|
||||||
``` mermaid
|
|
||||||
---
|
|
||||||
title: Animal example
|
|
||||||
---
|
|
||||||
classDiagram
|
|
||||||
note "From Duck till Zebra"
|
|
||||||
Animal <|-- Duck
|
|
||||||
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
|
|
||||||
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()
|
|
||||||
}
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
<div class="result" markdown>
|
|
||||||
|
|
||||||
``` mermaid
|
|
||||||
---
|
|
||||||
title: Animal example
|
|
||||||
---
|
|
||||||
classDiagram
|
|
||||||
note "From Duck till Zebra"
|
|
||||||
Animal <|-- Duck
|
|
||||||
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
|
|
||||||
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()
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## State
|
|
||||||
|
|
||||||
```` title="State"
|
|
||||||
``` mermaid
|
|
||||||
stateDiagram-v2
|
|
||||||
[*] --> Active
|
|
||||||
|
|
||||||
state Active {
|
|
||||||
[*] --> NumLockOff
|
|
||||||
NumLockOff --> NumLockOn : EvNumLockPressed
|
|
||||||
NumLockOn --> NumLockOff : EvNumLockPressed
|
|
||||||
--
|
|
||||||
[*] --> CapsLockOff
|
|
||||||
CapsLockOff --> CapsLockOn : EvCapsLockPressed
|
|
||||||
CapsLockOn --> CapsLockOff : EvCapsLockPressed
|
|
||||||
--
|
|
||||||
[*] --> ScrollLockOff
|
|
||||||
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
|
|
||||||
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
|
|
||||||
}
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
<div class="result" markdown>
|
|
||||||
|
|
||||||
``` mermaid
|
|
||||||
stateDiagram-v2
|
|
||||||
[*] --> Active
|
|
||||||
|
|
||||||
state Active {
|
|
||||||
[*] --> NumLockOff
|
|
||||||
NumLockOff --> NumLockOn : EvNumLockPressed
|
|
||||||
NumLockOn --> NumLockOff : EvNumLockPressed
|
|
||||||
--
|
|
||||||
[*] --> CapsLockOff
|
|
||||||
CapsLockOff --> CapsLockOn : EvCapsLockPressed
|
|
||||||
CapsLockOn --> CapsLockOff : EvCapsLockPressed
|
|
||||||
--
|
|
||||||
[*] --> ScrollLockOff
|
|
||||||
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
|
|
||||||
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Entity Relationship
|
|
||||||
|
|
||||||
````markdown
|
|
||||||
``` mermaid
|
|
||||||
erDiagram
|
|
||||||
CAR ||--o{ NAMED-DRIVER : allows
|
|
||||||
CAR {
|
|
||||||
string registrationNumber
|
|
||||||
string make
|
|
||||||
string model
|
|
||||||
}
|
|
||||||
PERSON ||--o{ NAMED-DRIVER : is
|
|
||||||
PERSON {
|
|
||||||
string firstName
|
|
||||||
string lastName
|
|
||||||
int age
|
|
||||||
}
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
<div class="result" markdown>
|
|
||||||
|
|
||||||
``` mermaid
|
|
||||||
erDiagram
|
|
||||||
CAR ||--o{ NAMED-DRIVER : allows
|
|
||||||
CAR {
|
|
||||||
string registrationNumber
|
|
||||||
string make
|
|
||||||
string model
|
|
||||||
}
|
|
||||||
PERSON ||--o{ NAMED-DRIVER : is
|
|
||||||
PERSON {
|
|
||||||
string firstName
|
|
||||||
string lastName
|
|
||||||
int age
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## User Journey
|
|
||||||
|
|
||||||
````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
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
<div class="result" 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
|
|
||||||
```
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Gantt
|
|
||||||
|
|
||||||
````markdown
|
|
||||||
``` mermaid
|
|
||||||
gantt
|
|
||||||
title A Gantt Diagram
|
|
||||||
dateFormat YYYY-MM-DD
|
|
||||||
section Section
|
|
||||||
A task :a1, 2014-01-01, 30d
|
|
||||||
Another task :after a1, 20d
|
|
||||||
section Another
|
|
||||||
Task in Another :2014-01-12, 12d
|
|
||||||
another task :24d
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
<div class="result" markdown>
|
|
||||||
|
|
||||||
``` mermaid
|
|
||||||
gantt
|
|
||||||
title A Gantt Diagram
|
|
||||||
dateFormat YYYY-MM-DD
|
|
||||||
section Section
|
|
||||||
A task :a1, 2014-01-01, 30d
|
|
||||||
Another task :after a1, 20d
|
|
||||||
section Another
|
|
||||||
Task in Another :2014-01-12, 12d
|
|
||||||
another task :24d
|
|
||||||
```
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
/// bug
|
|
||||||
"Gantt charts usually are too big to render properly in a page. If the element is big enough to hold it, and the chart is large, they render too small to see. If the element is not wide enough, the chart can sometimes render squished and hard to read." [^1]
|
|
||||||
///
|
|
||||||
|
|
||||||
[^1]: [PyMdown Extensions Documentation: Advanced Mermaid Notes](https://facelessuser.github.io/pymdown-extensions/extras/mermaid/#practical-diagrams-gantt)
|
|
||||||
|
|
||||||
## Pie Chart
|
|
||||||
|
|
||||||
```` title="Pie Chart"
|
|
||||||
``` mermaid
|
|
||||||
pie showData
|
|
||||||
title Key elements in Product X
|
|
||||||
"Calcium" : 42.96
|
|
||||||
"Potassium" : 50.05
|
|
||||||
"Magnesium" : 10.01
|
|
||||||
"Iron" : 5
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
<div class="result" markdown>
|
|
||||||
|
|
||||||
``` mermaid
|
|
||||||
pie showData
|
|
||||||
title Key elements in Product X
|
|
||||||
"Calcium" : 42.96
|
|
||||||
"Potassium" : 50.05
|
|
||||||
"Magnesium" : 10.01
|
|
||||||
"Iron" : 5
|
|
||||||
```
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Quadrant Chart
|
|
||||||
|
|
||||||
``` mermaid
|
|
||||||
quadrantChart
|
|
||||||
title Reach and engagement of campaigns
|
|
||||||
x-axis Low Reach --> High Reach
|
|
||||||
y-axis Low Engagement --> High Engagement
|
|
||||||
quadrant-1 We should expand
|
|
||||||
quadrant-2 Need to promote
|
|
||||||
quadrant-3 Re-evaluate
|
|
||||||
quadrant-4 May be improved
|
|
||||||
Campaign A: [0.3, 0.6]
|
|
||||||
Campaign B: [0.45, 0.23]
|
|
||||||
Campaign C: [0.57, 0.69]
|
|
||||||
Campaign D: [0.78, 0.34]
|
|
||||||
Campaign E: [0.40, 0.34]
|
|
||||||
Campaign F: [0.35, 0.78]
|
|
||||||
```
|
|
||||||
|
|
||||||
## Git
|
|
||||||
|
|
||||||
```` title="Git"
|
|
||||||
``` 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
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
<div class="result" markdown>
|
|
||||||
|
|
||||||
``` 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
|
|
||||||
```
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## C4
|
|
||||||
|
|
||||||
``` mermaid
|
|
||||||
C4Context
|
|
||||||
title System Context diagram for Internet Banking System
|
|
||||||
Enterprise_Boundary(b0, "BankBoundary0") {
|
|
||||||
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
|
|
||||||
Person(customerB, "Banking Customer B")
|
|
||||||
Person_Ext(customerC, "Banking Customer C", "desc")
|
|
||||||
|
|
||||||
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
|
|
||||||
|
|
||||||
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
|
||||||
|
|
||||||
Enterprise_Boundary(b1, "BankBoundary") {
|
|
||||||
|
|
||||||
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
|
||||||
|
|
||||||
System_Boundary(b2, "BankBoundary2") {
|
|
||||||
System(SystemA, "Banking System A")
|
|
||||||
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
|
|
||||||
}
|
|
||||||
|
|
||||||
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
|
||||||
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
|
|
||||||
|
|
||||||
Boundary(b3, "BankBoundary3", "boundary") {
|
|
||||||
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
|
|
||||||
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
BiRel(customerA, SystemAA, "Uses")
|
|
||||||
BiRel(SystemAA, SystemE, "Uses")
|
|
||||||
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
|
|
||||||
Rel(SystemC, customerA, "Sends e-mails to")
|
|
||||||
|
|
||||||
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
|
|
||||||
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
|
|
||||||
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
|
|
||||||
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
|
|
||||||
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
|
|
||||||
|
|
||||||
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
|
|
||||||
```
|
|
||||||
|
|
||||||
## Mindmaps
|
|
||||||
|
|
||||||
``` mermaid
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
Origins
|
|
||||||
Long history
|
|
||||||
::icon(fa fa-book)
|
|
||||||
Popularisation
|
|
||||||
British popular psychology author Tony Buzan
|
|
||||||
Research
|
|
||||||
On effectiveness<br/>and features
|
|
||||||
On Automatic creation
|
|
||||||
Uses
|
|
||||||
Creative techniques
|
|
||||||
Strategic planning
|
|
||||||
Argument mapping
|
|
||||||
Tools
|
|
||||||
Pen and paper
|
|
||||||
Mermaid
|
|
||||||
```
|
|
||||||
|
|
||||||
## Timeline
|
|
||||||
|
|
||||||
``` mermaid
|
|
||||||
timeline
|
|
||||||
title Timeline of Industrial Revolution
|
|
||||||
section 17th-20th century
|
|
||||||
Industry 1.0 : Machinery, Water power, Steam <br>power
|
|
||||||
Industry 2.0 : Electricity, Internal combustion engine, Mass production
|
|
||||||
Industry 3.0 : Electronics, Computers, Automation
|
|
||||||
section 21st century
|
|
||||||
Industry 4.0 : Internet, Robotics, Internet of Things
|
|
||||||
Industry 5.0 : Artificial intelligence, Big data,3D printing
|
|
||||||
```
|
|
||||||
|
|
||||||
## ZenUML
|
|
||||||
|
|
||||||
## Sankey
|
|
||||||
|
|
||||||
``` mermaid
|
|
||||||
sankey-beta
|
|
||||||
|
|
||||||
Pumped heat,"Heating and cooling, ""homes""",193.026
|
|
||||||
Pumped heat,"Heating and cooling, ""commercial""",70.672
|
|
||||||
```
|
|
||||||
|
|
||||||
## XYChart
|
|
||||||
|
|
||||||
``` mermaid
|
|
||||||
xychart-beta
|
|
||||||
title "Sales Revenue"
|
|
||||||
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
|
||||||
y-axis "Revenue (in $)" 4000 --> 11000
|
|
||||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
|
||||||
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
|
||||||
```
|
|
||||||
|
|
@ -135,7 +135,6 @@ extra_javascript:
|
||||||
- https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js
|
- https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js
|
||||||
- javascripts/tablesort.js
|
- javascripts/tablesort.js
|
||||||
- javascripts/katex.js
|
- javascripts/katex.js
|
||||||
- https://unpkg.com/mermaid@11/dist/mermaid.min.js
|
|
||||||
- https://unpkg.com/katex@0/dist/katex.min.js
|
- https://unpkg.com/katex@0/dist/katex.min.js
|
||||||
- https://unpkg.com/katex@0/dist/contrib/auto-render.min.js
|
- https://unpkg.com/katex@0/dist/contrib/auto-render.min.js
|
||||||
|
|
||||||
|
|
@ -280,9 +279,6 @@ markdown_extensions:
|
||||||
- overrides/.icons
|
- overrides/.icons
|
||||||
- pymdownx.superfences: # NOTE Admoniton, Annotations, MermaidJS
|
- pymdownx.superfences: # NOTE Admoniton, Annotations, MermaidJS
|
||||||
custom_fences:
|
custom_fences:
|
||||||
- name: mermaid
|
|
||||||
class: mermaid
|
|
||||||
format: !!python/name:pymdownx.superfences.fence_code_format
|
|
||||||
- name: md-render
|
- name: md-render
|
||||||
class: md-render
|
class: md-render
|
||||||
format: !!python/name:tools.pymdownx_md_render.md_sub_render
|
format: !!python/name:tools.pymdownx_md_render.md_sub_render
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue