mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 07:18:57 +00:00
Cell
658f03d1e5
* refactor(params)!: snake_case config + eliminate params.page + use .Param
BREAKING CHANGE: All params keys renamed from camelCase to snake_case,
[params.page] section eliminated (moved to [params] level), and users
must update their hugo.toml and front matter accordingly.
Key changes:
- All camelCase config keys → snake_case (e.g., defaultTheme → default_theme)
- [params.page] flat keys and sub-sections moved to [params] level
- Removed function/params.html (manual merge), replaced with Hugo .Param
- New function/param.html partial for page-level section params with
shorthand boolean support and site defaults merging
- New function/camel-case.html for string conversion
- snake2camel.html renamed to camel-case-keys.html
- New function/get-cover.html for cover image resolution
- Deprecation warnings in detection-deprecated.html for old config keys
- Front matter only params (subtitle, featured_image, password, repost,
weight, message) use .Params.xxx instead of .Param
- Page-level sections use param.html partial
- Simplified patch.html (siteTime only) and init/index.html
Refs: camel-case-keys.html#29 (planned v1.0 breaking change)
* refactor(params)!: move params.link to page-level, simplify link guard
- Move [params.link] and [params.link.guard] to page-level section
- link.html: .Page optional, use param.html when available for
page-level override, fall back to site config without .Page
- Remove $guardConfig variable, use $config.guard directly
- Remove unnecessary .Page from callers that don't need page override
- friends.html: use param.html for link guard instead of link_guard
* refactor(params)!: move image/codeblock/json_viewer/filetree to page-level
- Move [params.image], [params.codeblock], [params.json_viewer],
[params.filetree] to page-level sub-sections
- Templates use param.html for merged config (page override + site defaults)
- image.html: .Page optional, falls back to site config without .Page
- Add v1- prefix to all deprecation warnidf IDs
- Fix camelCase key access in image.html (blackList, cacheRemote)
- Fix Hugo-lowered camelCase keys in code-block-wrapper.html
- Add deprecation warnings for codeblock camelCase Markdown attributes
- Add deprecation warnings for file-tree camelCase Markdown attributes
- Update render-codeblock-toggle.html for snake_case attribute names
* style: standardize @param comment style across all HTML templates
- PascalCase types: {string} → {String}, {boolean} → {Boolean},
{int} → {Int}, {map} → {Map}, {array} → {Array}
- Add missing ` - ` separator between param name and description
- Remove extra alignment spaces between type and param name
* refactor(params)!: move params.mermaid to page-level, extract gen/ templates
- Move [params.mermaid] to page-level sub-sections
- Mermaid config injected into window.config (per-page override support)
- mermaid.ts reads config from window.config.mermaid instead of parameter
- Create _partials/gen/ directory for JS content generators
- Move mermaid-bootstrap.html from plugin/ to gen/
- Extract window.config JS generation into gen/config.html
- mermaid.html uses param.html for wrapper config
* refactor(params)!: consolidate link_to_* into params.post_link section
- Move link_to_markdown/source/edit/report/vscode into [params.post_link]
- Rename keys: markdown, source, edit, report (bool), editor (string)
- editor defaults to "vscode", supports "trae" etc. via protocol template
- footer.html uses .Param "post_link" for all link toggles
- Remove link_to_* from deprecated keys list
* fix: add fallback for deprecated camelCase attributes and expand deprecation warnings
- render-codeblock-file-tree.html: folderSlash attribute fallback
- render-codeblock-toggle.html: lineNosToggler/lineWrapToggler fallback + warnings
- code-block-wrapper.html: maxShownLines/wrapperClass fallback
- detection-deprecated.html: add nested key warnings for 13 sections
(header, breadcrumb, navigation, watermark, busuanzi, image, mermaid,
codeblock, filetree, math.katex, math.mathjax.options, post_summary, footer)
- detection-deprecated.html: add link_guard front matter deprecation warning
* fix(mermaid): fix rendering in hidden tab panels and neutral layer scheduling
- isRenderContextActive: check tab-panel visibility via getBoundingClientRect
instead of panel.hidden (tab-container uses slot-based hiding, not hidden attr)
- bindTabContainerChanged: render neutral layers when switching tabs so
print/fallback scenarios work correctly
562 lines
12 KiB
Markdown
562 lines
12 KiB
Markdown
---
|
|
title: Mermaid Diagrams Test
|
|
date: 2025-08-20T10:00:00+08:00
|
|
collections:
|
|
- Tests
|
|
categories:
|
|
- Markdown
|
|
- Shortcodes
|
|
tags:
|
|
- Mermaid
|
|
- Diagrams
|
|
mermaid:
|
|
zenuml: https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml/dist/mermaid-zenuml.esm.min.mjs
|
|
---
|
|
|
|
The FixIt theme supports two ways to use Mermaid: code block syntax and shortcode syntax.
|
|
|
|
```mermaid {wrapper=false}
|
|
---
|
|
config:
|
|
theme: 'forest'
|
|
---
|
|
graph TD
|
|
a --> b
|
|
```
|
|
|
|
<!--more-->
|
|
|
|
## Flowchart
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
A[Start] --> B{Is it?}
|
|
B -->|Yes| C[OK]
|
|
C --> D[Rethink]
|
|
D --> B
|
|
B ---->|No| E[End]
|
|
```
|
|
|
|
## Sequence Diagram
|
|
|
|
```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!
|
|
```
|
|
|
|
## Gantt Chart
|
|
|
|
{{< 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 sec :2014-01-12 , 12d
|
|
another task : 24d
|
|
{{< /mermaid >}}
|
|
|
|
## Class Diagram
|
|
|
|
```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()
|
|
}
|
|
```
|
|
|
|
## State Diagram
|
|
|
|
```mermaid
|
|
stateDiagram-v2
|
|
[_] --> Still
|
|
Still --> [_]
|
|
|
|
Still --> Moving
|
|
Moving --> Still
|
|
Moving --> Crash
|
|
Crash --> [*]
|
|
```
|
|
|
|
## Entity Relationship Diagram
|
|
|
|
```mermaid
|
|
erDiagram
|
|
CUSTOMER ||--o{ ORDER : places
|
|
ORDER ||--|{ LINE-ITEM : contains
|
|
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
|
|
|
CUSTOMER {
|
|
string name
|
|
string custNumber
|
|
string sector
|
|
}
|
|
ORDER {
|
|
int orderNumber
|
|
string deliveryAddress
|
|
}
|
|
LINE-ITEM {
|
|
string productCode
|
|
int quantity
|
|
float pricePerUnit
|
|
}
|
|
```
|
|
|
|
## User Journey
|
|
|
|
{{< 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 >}}
|
|
|
|
## Git Graph
|
|
|
|
```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
|
|
```
|
|
|
|
## Pie Chart
|
|
|
|
{{< mermaid >}}
|
|
pie title What Voldemort doesn't have?
|
|
"FRIENDS" : 2
|
|
"FAMILY" : 3
|
|
"NOSE" : 45
|
|
{{< /mermaid >}}
|
|
|
|
## Quadrant Chart
|
|
|
|
```mermaid
|
|
quadrantChart
|
|
title Reach and influence
|
|
x-axis Low Reach --> High Reach
|
|
y-axis Low Influence --> High Influence
|
|
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]
|
|
```
|
|
|
|
## Timeline
|
|
|
|
```mermaid
|
|
timeline
|
|
title History of Social Media Platform
|
|
|
|
2002 : LinkedIn
|
|
2003 : MySpace
|
|
: Skype
|
|
2004 : Facebook
|
|
: Gmail
|
|
2005 : Youtube
|
|
2006 : Twitter
|
|
2007 : FourSquare
|
|
2008 : Github
|
|
2010 : Instagram
|
|
2011 : Snapchat
|
|
2012 : Discord
|
|
```
|
|
|
|
## Mindmap
|
|
|
|
```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
|
|
```
|
|
|
|
## XY Chart
|
|
|
|
{{< 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]
|
|
{{< /mermaid >}}
|
|
|
|
## Requirement Diagram
|
|
|
|
```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
|
|
```
|
|
|
|
## C4 Architecture
|
|
|
|
```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")
|
|
```
|
|
|
|
## ZenUML
|
|
|
|
{{< mermaid >}}
|
|
zenuml
|
|
title Demo
|
|
Alice->John: Hello John, how are you?
|
|
John->Alice: Great!
|
|
Alice->John: See you later!
|
|
{{< /mermaid >}}
|
|
|
|
## Sankey Diagram
|
|
|
|
```mermaid
|
|
---
|
|
config:
|
|
sankey:
|
|
showValues: false
|
|
---
|
|
sankey-beta
|
|
|
|
Agricultural 'waste',Bio-conversion,124.729
|
|
Bio-conversion,Liquid,0.597
|
|
Bio-conversion,Losses,26.862
|
|
Bio-conversion,Solid,280.322
|
|
Bio-conversion,Gas,81.144
|
|
Biofuel imports,Liquid,35
|
|
Biomass imports,Solid,35
|
|
Coal imports,Coal,11.606
|
|
Coal reserves,Coal,63.965
|
|
Coal,Solid,75.571
|
|
District heating,Industry,10.639
|
|
District heating,Heating and cooling - commercial,22.505
|
|
District heating,Heating and cooling - homes,46.184
|
|
Electricity grid,Over generation / exports,104.453
|
|
Electricity grid,Heating and cooling - homes,113.726
|
|
Electricity grid,H2 conversion,27.14
|
|
Electricity grid,Industry,342.165
|
|
Electricity grid,Road transport,37.797
|
|
Electricity grid,Agriculture,4.412
|
|
Electricity grid,Heating and cooling - commercial,40.858
|
|
Electricity grid,Losses,56.691
|
|
Electricity grid,Rail transport,7.863
|
|
Electricity grid,Lighting & appliances - commercial,90.008
|
|
Electricity grid,Lighting & appliances - homes,93.494
|
|
Gas imports,Ngas,40.719
|
|
Gas reserves,Ngas,82.233
|
|
Gas,Heating and cooling - commercial,0.129
|
|
Gas,Losses,1.401
|
|
Gas,Thermal generation,151.891
|
|
Gas,Agriculture,2.096
|
|
Gas,Industry,48.58
|
|
Geothermal,Electricity grid,7.013
|
|
H2 conversion,H2,20.897
|
|
H2 conversion,Losses,6.242
|
|
H2,Road transport,20.897
|
|
Hydro,Electricity grid,6.995
|
|
Liquid,Industry,121.066
|
|
Liquid,International shipping,128.69
|
|
Liquid,Road transport,135.835
|
|
Liquid,Domestic aviation,14.458
|
|
Liquid,International aviation,206.267
|
|
Liquid,Agriculture,3.64
|
|
Liquid,National navigation,33.218
|
|
Liquid,Rail transport,4.413
|
|
Marine algae,Bio-conversion,4.375
|
|
Ngas,Gas,122.952
|
|
Nuclear,Thermal generation,839.978
|
|
Oil imports,Oil,504.287
|
|
Oil reserves,Oil,107.703
|
|
Oil,Liquid,611.99
|
|
Other waste,Solid,56.587
|
|
Other waste,Bio-conversion,77.81
|
|
Pumped heat,Heating and cooling - homes,193.026
|
|
Pumped heat,Heating and cooling - commercial,70.672
|
|
Solar PV,Electricity grid,59.901
|
|
Solar Thermal,Heating and cooling - homes,19.263
|
|
Solar,Solar Thermal,19.263
|
|
Solar,Solar PV,59.901
|
|
Solid,Agriculture,0.882
|
|
Solid,Thermal generation,400.12
|
|
Solid,Industry,46.477
|
|
Thermal generation,Electricity grid,525.531
|
|
Thermal generation,Losses,787.129
|
|
Thermal generation,District heating,79.329
|
|
Tidal,Electricity grid,9.452
|
|
UK land based bioenergy,Bio-conversion,182.01
|
|
Wave,Electricity grid,19.013
|
|
Wind,Electricity grid,289.366
|
|
```
|
|
|
|
## Block Diagram
|
|
|
|
{{< mermaid >}}
|
|
block-beta
|
|
columns 1
|
|
db(("DB"))
|
|
blockArrowId6<[" "]>(down)
|
|
block:ID
|
|
A
|
|
B["A wide one in the middle"]
|
|
C
|
|
end
|
|
space
|
|
D
|
|
ID --> D
|
|
C --> D
|
|
style B fill:#969,stroke:#333,stroke-width:4px
|
|
{{< /mermaid >}}
|
|
|
|
## Packet Diagram
|
|
|
|
```mermaid
|
|
packet-beta
|
|
title Sample packet
|
|
0-15: "Source Port"
|
|
16-31: "Destination Port"
|
|
32-63: "Sequence Number"
|
|
64-95: "Acknowledgment Number"
|
|
96-99: "Data Offset"
|
|
100-105: "Reserved"
|
|
106: "URG"
|
|
107: "ACK"
|
|
108: "PSH"
|
|
109: "RST"
|
|
110: "SYN"
|
|
111: "FIN"
|
|
112-127: "Window"
|
|
128-143: "Checksum"
|
|
144-159: "Urgent Pointer"
|
|
160-191: "Options and Padding"
|
|
192-223: "Data (variable length)"
|
|
```
|
|
|
|
## Kanban
|
|
|
|
```mermaid
|
|
kanban
|
|
Todo
|
|
[Create a git repository]
|
|
[Write some code]
|
|
[Commit the code]
|
|
|
|
In Progress
|
|
[Push to main]
|
|
|
|
Done
|
|
[Merge PR]
|
|
```
|
|
|
|
## Architecture Diagram
|
|
|
|
```mermaid
|
|
architecture-beta
|
|
group api(cloud)[API]
|
|
|
|
service db(database)[Database] in api
|
|
service disk1(disk)[Storage] in api
|
|
service disk2(disk)[Storage] in api
|
|
service server(server)[Server] in api
|
|
|
|
db:L -- R:server
|
|
disk1:T -- B:server
|
|
disk2:T -- B:db
|
|
```
|
|
|
|
## Radar Chart
|
|
|
|
```mermaid
|
|
---
|
|
title: "Grades"
|
|
---
|
|
radar-beta
|
|
axis m["Math"], s["Science"], e["English"]
|
|
axis h["History"], g["Geography"], a["Art"]
|
|
curve a["Alice"]{85, 90, 80, 70, 75, 90}
|
|
curve b["Bob"]{70, 75, 85, 80, 90, 85}
|
|
|
|
max 100
|
|
min 0
|
|
```
|
|
|
|
## Treemap
|
|
|
|
```mermaid
|
|
---
|
|
config:
|
|
treemap:
|
|
valueFormat: '$0,0'
|
|
---
|
|
treemap-beta
|
|
"Budget"
|
|
"Operations"
|
|
"Salaries": 700000
|
|
"Equipment": 200000
|
|
"Supplies": 100000
|
|
"Marketing"
|
|
"Advertising": 400000
|
|
"Events": 100000
|
|
```
|
|
|
|
---
|
|
|
|
The above test cases cover the main Mermaid diagram types, including:
|
|
|
|
**Core Diagrams:**
|
|
|
|
- Flowcharts, Sequence Diagrams, Gantt Charts
|
|
- Class Diagrams, State Diagrams, Entity Relationship Diagrams
|
|
- User Journey, Git Graph, Pie Charts
|
|
|
|
**Advanced Diagrams:**
|
|
|
|
- Quadrant Charts, Timeline, Mindmaps
|
|
- XY Charts, Requirement Diagrams, C4 Architecture
|
|
- ZenUML, Sankey, Block Diagrams
|
|
|
|
**Experimental Diagrams (🔥):**
|
|
|
|
- Packet, Kanban, Architecture
|
|
- Radar Charts, Treemap
|
|
|
|
Each diagram type provides examples using both code block and shortcode syntax.
|