&lt;?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Stan Wu 吳信典</title><link>https://blog.stanwu.org/tags/%E6%B8%AC%E8%A9%A6/</link><description>拆解被包裝過的東西、數位自主權實踐、非典型理財觀</description><language>zh-TW</language><lastBuildDate>Mon, 06 Apr 2026 11:45:49 +0800</lastBuildDate><atom:link href="https://blog.stanwu.org/tags/%E6%B8%AC%E8%A9%A6/feed.xml" rel="self" type="application/rss+xml"/><item><title>Mermaid Render 測試</title><link>https://blog.stanwu.org/posts/mermaid-render-test/</link><pubDate>Mon, 06 Apr 2026 00:02:00 +0800</pubDate><guid>https://blog.stanwu.org/posts/mermaid-render-test/</guid><description>&lt;p&gt;這篇文章只用來驗證 Mermaid 是否能在前端正確 render，包含流程圖、序列圖，以及手機版寬度縮放。&lt;/p&gt;
&lt;h2 id="flowchart"&gt;Flowchart&lt;/h2&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;graph TD
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; A[開始] --&amp;gt; B[Hugo Build]
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; B --&amp;gt; C{有載入 Mermaid JS?}
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; C --&amp;gt;|Yes| D[Render 成圖表]
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; C --&amp;gt;|No| E[只顯示程式碼]
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="sequence-diagram"&gt;Sequence Diagram&lt;/h2&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;sequenceDiagram
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; participant U as User
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; participant H as Hugo Page
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; participant M as Mermaid
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; U-&amp;gt;&amp;gt;H: 打開文章頁
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; H-&amp;gt;&amp;gt;M: 載入 mermaid.esm.min.mjs
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; M--&amp;gt;&amp;gt;H: 將 mermaid code block 轉為 SVG
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; H--&amp;gt;&amp;gt;U: 顯示圖表
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="檢查項目"&gt;檢查項目&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;這篇文章應該出現在文章列表最上面&lt;/li&gt;
&lt;li&gt;Mermaid 區塊應該顯示成圖，而不是純文字 code block&lt;/li&gt;
&lt;li&gt;圖表在手機版不應該超出內容寬度&lt;/li&gt;
&lt;/ol&gt;</description></item></channel></rss>