image captions and Mermaid responsive styles, rewrite blog content for

clarity
2026-05-18 17:08:21 +08:00
parent 24c2545b13
commit 01d7d2ed2a
5 changed files with 237 additions and 2028 deletions
@@ -85,7 +85,8 @@ html.dark .theme-toggle-light {
    width: 0.6em;
    height: 1.1em;
    background: #999;
-    vertical-align: text-bottom; transform: translateY(-2px);
+    vertical-align: text-bottom;
+    transform: translateY(-2px);
    margin-left: 1px;
    animation: vim-blink 0.8s step-end infinite;
 }
@@ -106,10 +107,10 @@ html.dark .theme-toggle-light {

 /* Image caption */
 figcaption.post-caption {
-    font-size: .85em;
+    font-size: 0.85em;
    color: #888;
    text-align: center;
-    margin-top: -.25em;
+    margin-top: -0.25em;
    margin-bottom: 1em;
 }
 .dark figcaption.post-caption {
@@ -135,3 +136,10 @@ figcaption.post-caption {
    max-width: none !important;
    height: auto;
 }
+
+/*
+.content .mermaid svg {
+    max-width: 100%;
+    height: auto;
+}
+*/
@@ -0,0 +1,176 @@
+---
+title: "Mermaid 图表语法示例"
+date: 2026-05-19T10:00:00+08:00
+draft: false
+description: "Mermaid 官方语法示例合集：流程图、时序图、类图、状态图、甘特图、饼图、Git 图等全部图表示范。"
+tags:
+  - Mermaid
+  - 图表
+  - 语法
+poet: |
+  大音希声，大象无形。
+  ——老子，中国，约前571–约前471
+---
+
+> 原文：[Mermaid Examples](https://mermaid.js.org/syntax/examples.html)  
+
+# Examples
+
+This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
+
+**If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](../config/usage.md?id=usage).**
+
+**If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](../syntax/flowchart.md?id=flowcharts-basic-syntax) section.**
+
+## Basic Pie Chart
+
+```mermaid
+pie title NETFLIX
+         "Time spent looking for movie" : 90
+         "Time spent watching it" : 10
+```
+
+```mermaid
+pie title What Voldemort doesn't have?
+         "FRIENDS" : 2
+         "FAMILY" : 3
+         "NOSE" : 45
+```
+
+## Basic sequence diagram
+
+```mermaid
+sequenceDiagram
+    Alice ->> Bob: Hello Bob, how are you?
+    Bob-->>John: How about you John?
+    Bob--x Alice: I am good thanks!
+    Bob-x John: I am good thanks!
+    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+
+    Bob-->Alice: Checking with John...
+    Alice->John: Yes... John, how are you?
+```
+
+## Basic flowchart
+
+```mermaid
+graph LR
+    A[Square Rect] -- Link text --> B((Circle))
+    A --> C(Round Rect)
+    B --> D{Rhombus}
+    C --> D
+```
+
+## Larger flowchart with some styling
+
+```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
+```
+
+## SequenceDiagram: Loops, alt and opt
+
+```mermaid
+sequenceDiagram
+    loop Daily query
+        Alice->>Bob: Hello Bob, how are you?
+        alt is sick
+            Bob->>Alice: Not so good :(
+        else is well
+            Bob->>Alice: Feeling fresh like a daisy
+        end
+
+        opt Extra response
+            Bob->>Alice: Thanks for asking
+        end
+    end
+```
+
+## SequenceDiagram: Message to self in loop
+
+```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!
+```
+
+## Sequence Diagram: Blogging app service communication
+
+```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
+
+```
+
+## A commit flow diagram.
+
+```mermaid
+gitGraph:
+    commit "Ashish"
+    branch newbranch
+    checkout newbranch
+    commit id:"1111"
+    commit tag:"test"
+    checkout main
+    commit type: HIGHLIGHT
+    commit
+    merge newbranch
+    commit
+    branch b2
+    commit
+```
+
+<!--- cspell:ignore Ashish newbranch --->
@@ -138,7 +138,7 @@ params:

  # Mermaid 流程图（本地加载，避免 CDN 连接问题）
  mermaid:
-    js: js/mermaid.min.js
+    base: "https://cdn.jsdelivr.net/npm/mermaid@11.15.0/dist"

  # Open Graph / SEO 增强
  opengraph:
@@ -17,3 +17,52 @@
            });
    });
 </script>
+
+<!-- Mermaid config + viewBox fix -->
+<script>
+    (function () {
+        function patch() {
+            if (typeof mermaid === "undefined") return setTimeout(patch, 50);
+            var orig = mermaid.initialize;
+            mermaid.initialize = function (cfg) {
+                cfg = cfg || {};
+                cfg.flowchart = cfg.flowchart || {};
+                cfg.flowchart.useMaxWidth = true;
+                cfg.flowchart.wrappingWidth = 180;
+                cfg.theme = "neutral";
+                return orig.call(this, cfg);
+            };
+        }
+        patch();
+
+        // Fix oversized viewBox on flowcharts
+        function fixViewBox() {
+            document.querySelectorAll(".mermaid svg").forEach(function (svg) {
+                var vb = svg.getAttribute("viewBox");
+                if (!vb) return;
+                var p = vb.split(" ").map(Number);
+                if (p.length !== 4) return;
+                var h = p[3],
+                    w = p[2];
+                if (h < 600 && w < 800) return;
+                var g = svg.querySelector("g");
+                if (!g) return;
+                var bb = g.getBBox();
+                if (bb.width === 0 && bb.height === 0)
+                    return setTimeout(fixViewBox, 200);
+                var pad = 20;
+                svg.setAttribute(
+                    "viewBox",
+                    [
+                        bb.x - pad,
+                        bb.y - pad,
+                        bb.width + pad * 2,
+                        bb.height + pad * 2,
+                    ].join(" "),
+                );
+            });
+        }
+        setTimeout(fixViewBox, 600);
+        setTimeout(fixViewBox, 1200);
+    })();
+</script>