diff --git a/assets/js/lib/mermaid.js b/assets/js/lib/mermaid.js index e716fc0c..21d9fc97 100644 --- a/assets/js/lib/mermaid.js +++ b/assets/js/lib/mermaid.js @@ -1,4 +1,4 @@ -{{- $mermaid := .Param "mermaid" -}} +{{- $mermaid := .Site.Params.mermaid -}} {{- $mermaidCDN := $mermaid.cdn | default "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs" -}} import mermaid from "{{ $mermaidCDN }}" @@ -54,10 +54,10 @@ async function loadMermaid({ theme, darkMode, selector }) { startOnLoad: false, darkMode: isDarkMode, theme: currentTheme, - securityLevel: mermaidConfig.securityLevel, + securityLevel: mermaidConfig.securitylevel, look: mermaidConfig.look, - fontFamily: mermaidConfig.fontFamily, - altFontFamily: mermaidConfig.fontFamily + fontFamily: mermaidConfig.fontfamily, + altFontFamily: mermaidConfig.fontfamily }) // skip data-processed elements in Mermaid run function, so this won't re-render await mermaid.run({ diff --git a/layouts/_partials/init/index.html b/layouts/_partials/init/index.html index b807568c..bff7ddb8 100644 --- a/layouts/_partials/init/index.html +++ b/layouts/_partials/init/index.html @@ -1,4 +1,4 @@ -{{- hugo.Store.Set "version" "v0.4.0-alpha-20250819093712-cc2ef7bf" -}} +{{- hugo.Store.Set "version" "v0.4.0-alpha-20250820030120-93acf8ea" -}} {{- .Store.Set "this" dict -}} {{- partial "init/detection-env.html" . -}} diff --git a/test/content/posts/mermaid-diagrams-test.md b/test/content/posts/mermaid-diagrams-test.md new file mode 100644 index 00000000..83c0b9f6 --- /dev/null +++ b/test/content/posts/mermaid-diagrams-test.md @@ -0,0 +1,562 @@ +--- +title: Mermaid Diagrams Test +date: 2025-08-20T10:00:00+08:00 +collections: + - Tests +categories: + - Markdown + - Shortcodes +tags: + - Mermaid + - Diagrams +--- + + + +The FixIt theme supports two ways to use Mermaid: code block syntax and shortcode syntax. + +## Flowchart + +### Code Block Syntax + +```mermaid +flowchart TD + A[Start] --> B{Is it?} + B -->|Yes| C[OK] + C --> D[Rethink] + D --> B + B ---->|No| E[End] +``` + +### Shortcode Syntax + +{{< mermaid >}} +flowchart 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 +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
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
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,
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. diff --git a/test/hugo.toml b/test/hugo.toml index 861b250c..ae52c5f4 100644 --- a/test/hugo.toml +++ b/test/hugo.toml @@ -44,3 +44,6 @@ baseURL = "https://demo.fixit.lruihao.cn/test/" email = "" link = "https://lruihao.cn" avatar = "https://lruihao.cn/images/avatar.jpg" + + [params.mermaid] + zenuml = "https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml/dist/mermaid-zenuml.esm.min.mjs"