1<!doctype html><html itemscope itemtype=http://schema.org/WebPage lang=zh-CN dir=ltr><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=2"><title>让 Mermaid å¾è¡¨èªå¨è·éç³»ç»æ·±æµ è² | è èç¾é·</title><meta name=author content="Lruihao"><meta name=description content="Mermaid æ¯ç®åææµè¡çãææ¬å³å¾è¡¨ã渲æåºï¼ä½å®å¯¹ãç³»ç»æ·±æµ è²èªå¨åæ¢ãçæ¯æä¸ç´æ§æ§ä¸æã宿¹ Roadmap éå¶ææåï¼å´å§ç»æ²¡æä¸ä¸ªç®åã稳å®ãææ¡£åç APIã 2ä¸è¿ç¤¾åºéå·²æå¤§éç«ç¹ï¼mermaid.liveãObsidianãNotion-like 产åçï¼å®ç°äºä¸æ»ç Light/Dark èªéåºãæ¬ææç®åè½è½å°ç䏿¡è·¯çº¿ä¸æ¬¡æ§æ¢³çåºæ¥ï¼å¹¶ç»åºæå°å¯è¿è¡ç¤ºä¾ï¼æ¹ä¾¿ä½ æéåç¨ã 3"><meta name=robots content="index, follow, max-image-preview:large"><meta name=keywords content='invert filter,Mermaid,prefers-color-scheme,FixIt'><meta itemprop=name content="让 Mermaid å¾è¡¨èªå¨è·éç³»ç»æ·±æµ è²"><meta itemprop=description content="Mermaid æ¯ç®åææµè¡çãææ¬å³å¾è¡¨ã渲æåºï¼ä½å®å¯¹ãç³»ç»æ·±æµ è²èªå¨åæ¢ãçæ¯æä¸ç´æ§æ§ä¸æã宿¹ Roadmap éå¶ææåï¼å´å§ç»æ²¡æä¸ä¸ªç®åã稳å®ãææ¡£åç APIã 4ä¸è¿ç¤¾åºéå·²æå¤§éç«ç¹ï¼mermaid.liveãObsidianãNotion-like 产åçï¼å®ç°äºä¸æ»ç Light/Dark èªéåºãæ¬ææç®åè½è½å°ç䏿¡è·¯çº¿ä¸æ¬¡æ§æ¢³çåºæ¥ï¼å¹¶ç»åºæå°å¯è¿è¡ç¤ºä¾ï¼æ¹ä¾¿ä½ æéåç¨ã"><meta itemprop=datePublished content="2025-08-16T12:37:49+08:00"><meta itemprop=dateModified content="2025-08-16T14:56:28+08:00"><meta itemprop=wordCount content="2516"><meta itemprop=image content="https://lruihao.cn/posts/mermaid-theming/featured-image.webp"><meta itemprop=keywords content="invert filter,Mermaid,prefers-color-scheme,FixIt"><meta property="og:url" content="https://lruihao.cn/posts/mermaid-theming/"><meta property="og:site_name" content="è èç¾é·"><meta property="og:title" content="让 Mermaid å¾è¡¨èªå¨è·éç³»ç»æ·±æµ è²"><meta property="og:description" content="Mermaid æ¯ç®åææµè¡çãææ¬å³å¾è¡¨ã渲æåºï¼ä½å®å¯¹ãç³»ç»æ·±æµ è²èªå¨åæ¢ãçæ¯æä¸ç´æ§æ§ä¸æã宿¹ Roadmap éå¶ææåï¼å´å§ç»æ²¡æä¸ä¸ªç®åã稳å®ãææ¡£åç APIã 5ä¸è¿ç¤¾åºéå·²æå¤§éç«ç¹ï¼mermaid.liveãObsidianãNotion-like 产åçï¼å®ç°äºä¸æ»ç Light/Dark èªéåºãæ¬ææç®åè½è½å°ç䏿¡è·¯çº¿ä¸æ¬¡æ§æ¢³çåºæ¥ï¼å¹¶ç»åºæå°å¯è¿è¡ç¤ºä¾ï¼æ¹ä¾¿ä½ æéåç¨ã"><meta property="og:locale" content="zh_CN"><meta property="og:type" content="article"><meta property="article:section" content="posts"><meta property="article:published_time" content="2025-08-16T12:37:49+08:00"><meta property="article:modified_time" content="2025-08-16T14:56:28+08:00"><meta property="article:tag" content="invert filter"><meta property="article:tag" content="Mermaid"><meta property="article:tag" content="prefers-color-scheme"><meta property="article:tag" content="FixIt"><meta property="og:image" content="https://lruihao.cn/posts/mermaid-theming/featured-image.webp"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://lruihao.cn/posts/mermaid-theming/featured-image.webp"><meta name=twitter:title content="让 Mermaid å¾è¡¨èªå¨è·éç³»ç»æ·±æµ è²"><meta name=twitter:description content="Mermaid æ¯ç®åææµè¡çãææ¬å³å¾è¡¨ã渲æåºï¼ä½å®å¯¹ãç³»ç»æ·±æµ è²èªå¨åæ¢ãçæ¯æä¸ç´æ§æ§ä¸æã宿¹ Roadmap éå¶ææåï¼å´å§ç»æ²¡æä¸ä¸ªç®åã稳å®ãææ¡£åç APIã 6ä¸è¿ç¤¾åºéå·²æå¤§éç«ç¹ï¼mermaid.liveãObsidianãNotion-like 产åçï¼å®ç°äºä¸æ»ç Light/Dark èªéåºãæ¬ææç®åè½è½å°ç䏿¡è·¯çº¿ä¸æ¬¡æ§æ¢³çåºæ¥ï¼å¹¶ç»åºæå°å¯è¿è¡ç¤ºä¾ï¼æ¹ä¾¿ä½ æéåç¨ã"><meta name=application-name content="è èç¾é·"><meta name=apple-mobile-web-app-title content="è èç¾é·"><meta name=theme-color data-light=#ffffff data-dark=#252627 content="#ffffff"><meta name=msapplication-TileColor content="#da532c"><link rel="shortcut icon" type=image/x-icon href=/favicon.ico><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link rel=canonical type=text/html href=https://lruihao.cn/posts/mermaid-theming/ title="让 Mermaid å¾è¡¨èªå¨è·éç³»ç»æ·±æµ è² | è èç¾é·"><link rel=prev type=text/html href=https://lruihao.cn/posts/wc-01-prologue/ t
6itle=é»çåºå
³ã»ä¸æé¥å宿±æ¹><link rel=next type=text/html href=https://lruihao.cn/projects/lruihao/auto-changelog-plus/ title="Command line tool for generating a changelog from git tags and commit history"><link rel=alternate type=text/markdown href=https://lruihao.cn/posts/mermaid-theming/index.md><link rel=stylesheet href=/css/unocss.min.css><link rel=stylesheet href=/css/main.min.css><link rel=stylesheet href=/css/pages/posts.min.css><link rel=stylesheet href=/css/custom.min.css><link rel=preload href=https://unpkg.com/@fortawesome/[email protected]/css/all.min.css as=style onload='this.removeAttribute("onload"),this.rel="stylesheet"'><noscript><link rel=stylesheet href=https://unpkg.com/@fortawesome/[email protected]/css/all.min.css></noscript><link rel=preload href=https://unpkg.com/[email protected]/animate.min.css as=style onload='this.removeAttribute("onload"),this.rel="stylesheet"'><noscript><link rel=stylesheet href=https://unpkg.com/[email protected]/animate.min.css></noscript><link rel=preload href=/js/main.min.js as=script>
6<script type=application/ld+json>{"@context":"http://schema.org","@type":"BlogPosting","headline":"让 Mermaid å¾è¡¨èªå¨è·éç³»ç»æ·±æµ
è²","inLanguage":"zh-CN","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/lruihao.cn\/posts\/mermaid-theming\/"},"image":[{"@type":"ImageObject","url":"https:\/\/lruihao.cn\/posts\/mermaid-theming\/featured-image.webp","width":1720,"height":722}],"genre":"posts","keywords":"invert filter, Mermaid, prefers-color-scheme, FixIt","wordcount":2516,"url":"https:\/\/lruihao.cn\/posts\/mermaid-theming\/","datePublished":"2025-08-16T12:37:49+08:00","dateModified":"2025-08-16T14:56:28+08:00","license":"æ¬ç«å
容éç¨ CC BY-NC-SA 4.0 å½é
许å¯åè®®ã","publisher":{"@type":"Organization","name":"Lruihao","logo":"https:\/\/lruihao.cn\/images\/avatar.jpg"},"author":{"@type":"Person","name":"Lruihao"},"description":""}</script>
6<script src=/js/head.min.js></script>
6</head><body data-instant-intensity=viewport data-header-desktop=sticky data-header-mobile=auto><div class=wrapper data-page-style=normal><header class="desktop animate__faster" id=header-desktop><div class=header-wrapper data-github-corner=end><div class=header-title><a href=/ title=è èç¾é· class=header-title-link><img class=logo src=/logo.webp alt=è èç¾é· height=32 width=32><span class=header-title-text>è èä¼é¿</span></a><span class=header-subtitle>æç豪çå客</span></div><nav><ul class=menu><li class="menu-item has-children"><a class=menu-link href=/archives/><i class="fa-solid fa-feather fa-sm" aria-hidden=true></i> æç« </a><i class="dropdown-icon fa-solid fa-chevron-down" aria-hidden=true></i><ul class=sub-menu><li class=menu-item><a class=menu-link href=/categories/><i class="fa-solid fa-folder-tree fa-sm" aria-hidden=true></i> åç±»</a></li><li class=menu-item><a class=menu-link href=/collections/><i class="fa-solid fa-layer-group fa-sm" aria-hidden=true></i> åé</a></li><li class=menu-item><a class=menu-link href=/tags/><i class="fa-solid fa-tags fa-sm" aria-hidden=true></i> æ ç¾</a></li><li class=menu-item-divider aria-hidden=true></li><li class=menu-item><a class=menu-link href=https://fixit.lruihao.cn/ title="FixIt å®ç½" rel="noopener noreferrer" target=_blank><img class=fixit-icon src=https://fixit.lruihao.cn/images/hugo-fixit.webp alt="FixIt logo"> FixIt <i class="fa-solid fa-external-link-alt fa-fw fa-xs text-secondary"></i></a></li></ul></li><li class=menu-item><a class=menu-link href=/projects/ title=弿ºé¡¹ç®><i class="fa-solid fa-lightbulb fa-shake fa-sm" aria-hidden=true></i> 弿º</a></li><li class=menu-item><a class=menu-link href=/friends/ title=åæ é¾æ¥><i class="fa-solid fa-users fa-sm" aria-hidden=true></i> åé¾</a></li><li class=menu-item><a class=menu-link href=/reward/><i class="fa-solid fa-hand-holding-dollar fa-sm" aria-hidden=true></i> èµèµ</a></li><li class=menu-item><a class=menu-link href=/guestbook/><i class="fa-solid fa-comment-dots fa-sm" aria-hidden=true></i> çè¨</a></li><li class=menu-item><a class=menu-link href=/index.xml title="éè¿ RSS 订é "><i class="fa-solid fa-rss fa-sm" aria-hidden=true></i> RSS</a></li><li class="menu-item has-children"><a class=menu-link href=/about/><i class="fa-solid fa-quote-left fa-sm" aria-hidden=true></i> å ³äº</a><i class="dropdown-icon fa-solid fa-chevron-down" aria-hidden=true></i><ul class=sub-menu><li class=menu-item><a class=menu-link href=/years/ title=æç年度æ»ç»><i class="fa-regular fa-newspaper fa-sm" aria-hidden=true></i> 年度æ»ç»</a></li></ul></li><li class="menu-item delimiter"></li><li class="menu-item search"><button type=button class="search-trigger desktop" aria-label=æç´¢ title=æç´¢> 7<i class="fa-solid fa-search" aria-hidden=true></i> 8æç´¢ 9<kbd></kbd></button></li><li class="menu-item delimiter"></li><li class="menu-item theme-switch-item"><button type=button class=theme-switch aria-label=åæ¢ä¸»é¢ title=忢䏻é¢><i class="fa-solid fa-adjust" aria-hidden=true></i></button></li><li class="menu-item language-switch auto hidden" aria-hidden=true><span role=button aria-label=éæ©è¯è¨ title=éæ©è¯è¨><i class="fa-solid fa-language fa-fw" aria-hidden=true></i></span><ul class=sub-menu><li class="menu-item active" data-type=artificial><a href=/posts/mermaid-theming/ data-lang=zh-CN class="menu-link text-secondary" title=ç®ä½ä¸æ><i class="fa-solid fa-person fa-fw fa-sm" aria-hidden=true></i> ç®ä½ä¸æ</a></li><li class=menu-item-divider aria-hidden=true></li><li class=menu-item data-type=machine><a data-lang=chinese_simplified class=menu-link title=ç®ä½ä¸æ><i class="fa-solid fa-robot fa-fw fa-sm" aria-hidden=true></i> ç®ä½ä¸æ</a></li><li class=menu-item data-type=machine><a data-lang=chinese_traditional class=menu-link title=ç¹é«ä¸æ><i class="fa-solid fa-robot fa-fw fa-sm" aria-hidden=true></i> ç¹é«ä¸æ</a></li></ul></li></ul></nav></div></header><header class="mobile animate__faster" id=header-mobile><div class=header-container><div class=header-wrapper><div class=header-title><a href=/ title=è èç¾é· class=header-title-link><img class=logo src=/logo.webp alt=è èç¾é· height=26 width=26><span class=header-title-text>è èä¼é¿</span></a><span class=header-subtitle>æç豪çå客</span></div><button type=button class="search-trigger mobile" aria-label=æç´¢><i class="fa-solid fa-search" aria-hidden=true></i></button><button type=button class=theme-switch aria-label=忢䏻é¢><i class="fa-solid fa-adjust" aria-hidden=true></i></button> 10<button type=button class=menu-toggle id=menu-toggle-mobile aria-controls=menu-mobile aria-expanded=false aria-labelledby=menu-mobile> 11<span></span><span></span><span></span></button></div><nav><ul class=menu id=menu-mobile><li class=menu-item><span class=nested-item><a class=menu-link href=/archives/><i class="fa-solid fa-feather fa-sm" aria-hidden=true></i> æç« </a> 12<i class="dropdown-icon fa-solid fa-chevron-right" aria-hidden=true></i></span><ul class=sub-menu><li class=menu-item><a class=menu-link href=/categories/><i class="fa-solid fa-folder-tree fa-sm" aria-hidden=true></i> åç±»</a></li><li class=menu-item><a class=menu-link href=/collections/><i class="fa-solid fa-layer-group fa-sm" aria-hidden=true></i> åé</a></li><li class=menu-item><a class=menu-link href=/tags/><i class="fa-solid fa-tags fa-sm" aria-hidden=true></i> æ ç¾</a></li><li class="menu-item menu-item-divider" aria-hidden=true></li><li class=menu-item><a class=menu-link href=https://fixit.lruihao.cn/ title="FixIt å®ç½" rel="noopener noreferrer" target=_blank><img class=fixit-icon src=https://fixit.lruihao.cn/images/hugo-fixit.webp alt="FixIt logo"> FixIt <i class="fa-solid fa-external-link-alt fa-fw fa-xs text-secondary"></i></a></li></ul></li><li class=menu-item><a class=menu-link href=/projects/ title=弿ºé¡¹ç®><i class="fa-solid fa-lightbulb fa-shake fa-sm" aria-hidden=true></i> 弿º</a></li><li class=menu-item><a class=menu-link href=/friends/ title=åæ é¾æ¥><i class="fa-solid fa-users fa-sm" aria-hidden=true></i> åé¾</a></li><li class=menu-item><a class=menu-link href=/reward/><i class="fa-solid fa-hand-holding-dollar fa-sm" aria-hidden=true></i> èµèµ</a></li><li class=menu-item><a class=menu-link href=/guestbook/><i class="fa-solid fa-comment-dots fa-sm" aria-hidden=true></i> çè¨</a></li><li class=menu-item><span class=nested-item><a class=menu-link href=/about/><i class="fa-solid fa-quote-left fa-sm" aria-hidden=true></i> å ³äº</a> 13<i class="dropdown-icon fa-solid fa-chevron-right" aria-hidden=true></i></span><ul class=sub-menu><li class=menu-item><a class=menu-link href=/years/ title=æç年度æ»ç»><i class="fa-regular fa-newspaper fa-sm" aria-hidden=true></i> 年度æ»ç»</a></li></ul></li><li class="menu-item text-center"><a class=menu-link href=https://github.com/Lruihao/ rel="noopener noreferrer" target=_blank><i class="fa-brands fa-github fa-lg fa-sm" aria-hidden=true></i> å ³æ³¨ Follow</a></li><li class="menu-item menu-system"><span id=translate class="menu-system-item language-switch auto hidden" aria-hidden=true><span role=button aria-label=éæ©è¯è¨ title=éæ©è¯è¨ data-current=ç®ä½ä¸æ>ç®ä½ä¸æ<i class="dropdown-icon fa-solid fa-chevron-down" aria-hidden=true></i></span></span></li></ul></nav></div></header><nav aria-label=breadcrumb class="breadcrumb-container sticky"><ol class=breadcrumb><li class=breadcrumb-item data-separator=/><a href=/posts/ title=Posts>æç« </a></li><li class="breadcrumb-item active" data-separator=/ aria-current=page>让 Mermaid å¾è¡¨èªå¨è·éç³»ç»æ·±æµ è²</li></ol></nav><main class=fi-container><aside class="aside-collection animate__animated animate__fadeIn animate__faster" aria-label=åé><div class=aside-custom><img src=/images/wxmp.webp alt=å¾®ä¿¡å ¬ä¼å· width=100%></div></aside><article class="page single"><div class=header><h1 class="single-title animate__animated animate__flipInX"><span>让 Mermaid å¾è¡¨èªå¨è·éç³»ç»æ·±æµ è²</span></h1><p class="single-subtitle animate__animated animate__fadeIn">ä¸ä»½ç°é¶æ®µå¯è¡æ¹æ¡å ¨æ¢³ç</p></div><div class=post-meta><div class=post-meta-line><span class=post-author><a href=https://github.com/Lruihao title=ä½è target=_blank rel="author external nofollow noopener noreferrer" class=author><img class=avatar src=/images/remote/fee47a2f4f2cc71f99a02b0a73ecfee0_13827746709750628118.jpg alt=Lruihao height=16 width=16> Lruihao</a></span><span class=post-included-in> æ¶å½äº <a href=/categories/javascript/ class=post-category title="åç±» - JavaScript"><i class="fa-regular fa-folder" aria-hidden=true></i> JavaScript</a> <a href=/categories/css/ class=post-category title="åç±» - CSS"><i class="fa-regular fa-folder" aria-hidden=true></i> CSS</a></span></div><div class=post-meta-line><span title="åå¸äº 2025-08-16 12:37:49"><i class="fa-solid fa-calendar-days me-1" aria-hidden=true></i><time datetime=2025-08-16>2025-08-16</time></span> <span title="æ´æ°äº 2025-08-16 14:56:28"><i class="fa-regular fa-calendar-check me-1" aria-hidden=true></i><time datetime=2025-08-16>2025-08-16</time></span> <span title="2516 å"><i class="fa-solid fa-pencil me-1" aria-hidden=true></i>
13约 2600 å</span> <span><i class="fa-regular fa-clock me-1" aria-hidden=true></i>é¢è®¡é 读 6 åé</span> <span id=busuanzi_container_page_pv class="busuanzi_visitors comment-visitors" data-flag-title="让 Mermaid å¾è¡¨èªå¨è·éç³»ç»æ·±æµ è²"><i class="fa-regular fa-eye me-1" aria-hidden=true></i><span id=busuanzi_value_page_pv>-</span> 次é 读 14</span> </div></div><div class=featured-image><img loading=eager src=/posts/mermaid-theming/featured-image.webp sizes="(max-width: 679.9px) 100vw, (max-width: 959.9px) 80vw, (max-width: 1439.9px) 56vw, 800px" alt=/posts/mermaid-theming/featured-image.webp height=722 width=1720></div><div class="details toc" id=toc-static data-kept=false><div class="details-summary toc-title"><span>ç®å½</span> 15<span><i class="details-icon fa-solid fa-angle-right" aria-hidden=true></i></span></div><div class="details-content toc-content" id=toc-content-static></div></div><template data-toc><nav id=TableOfContents><ul><li><a href=#èæ¯mermaid-䏻颿ºå¶ä¸çç¹>èæ¯ï¼Mermaid 䏻颿ºå¶ä¸çç¹</a></li><li><a href=#æ¹æ¡-1-reinitialize>æ¹æ¡ 1ï¸â£ Reinitialize</a></li><li><a href=#æ¹æ¡-2-css-滤é>æ¹æ¡ 2ï¸â£ CSS 滤é</a></li><li><a href=#æ¹æ¡-3-é ç½®çæ¿æ¢>æ¹æ¡ 3ï¸â£ é ç½®çæ¿æ¢</a></li><li><a href=#æ¹æ¡-4-reinitialize--css-ç»å>æ¹æ¡ 4ï¸â£ Reinitialize + CSS ç»å</a></li><li><a href=#å°ç»ä¸éå建议>å°ç»ä¸éå建议</a></li></ul></nav></template><div class=ai-summary></div><div class="expiration-reminder details admonition warning open"><div class="details-summary admonition-title"><i class="icon fa-solid fa-exclamation-triangle" aria-hidden=true></i>è¦å<i class="details-icon fa-solid fa-angle-right" aria-hidden=true></i></div><div class=details-content><div class=admonition-content>æ¬ææåæ´æ°äº 2025-08-16ï¼æä¸å 容å¯è½å·²è¿æ¶ã</div></div></div><div class=content id=content data-end-flag="ãæ¬æå®ï¼æ´å¤å å®¹æ±æ»å¨æç GitHubï¼æç»æ´æ°ï¼æ±å ³æ³¨ãæ± starãæ±è®¢é ï¼ã"><p>Mermaid æ¯ç®åææµè¡çãææ¬å³å¾è¡¨ã渲æåºï¼ä½å®å¯¹ãç³»ç»æ·±æµ è²èªå¨åæ¢ãçæ¯æä¸ç´æ§æ§ä¸æã宿¹ Roadmap éå¶ææåï¼å´å§ç»æ²¡æä¸ä¸ªç®åã稳å®ãææ¡£åç APIã<br>ä¸è¿ç¤¾åºéå·²æå¤§éç«ç¹ï¼mermaid.liveãObsidianãNotion-like 产åçï¼å®ç°äºä¸æ»ç Light/Dark èªéåºãæ¬ææç®åè½è½å°ç䏿¡è·¯çº¿ä¸æ¬¡æ§æ¢³çåºæ¥ï¼å¹¶ç»åºæå°å¯è¿è¡ç¤ºä¾ï¼æ¹ä¾¿ä½ æéåç¨ã</p><h2 class=heading-element id=èæ¯mermaid-䏻颿ºå¶ä¸çç¹><span>èæ¯ï¼Mermaid 䏻颿ºå¶ä¸çç¹</span> 16<a href=#%e8%83%8c%e6%99%afmermaid-%e4%b8%bb%e9%a2%98%e6%9c%ba%e5%88%b6%e4%b8%8e%e7%97%9b%e7%82%b9 class=heading-mark><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5.0 114.95 4.95l-2.5 2.5a3.5 3.5.0 01-4.95.0.751.751.0 01.018-1.042.751.751.0 011.042-.018 1.998 1.998.0 002.83.0l2.5-2.5a2.002 2.002.0 00-2.83-2.83l-1.25 1.25a.751.751.0 01-1.042-.018.751.751.0 01-.018-1.042zm-4.69 9.64a1.998 1.998.0 002.83.0l1.25-1.25a.751.751.0 011.042.018.751.751.0 01.018 1.042l-1.25 1.25a3.5 3.5.0 11-4.95-4.95l2.5-2.5a3.5 3.5.0 014.95.0.751.751.0 01-.018 1.042.751.751.0 01-1.042.018 1.998 1.998.0 00-2.83.0l-2.5 2.5a1.998 1.998.0 000 2.83z"/></svg></a></h2><div class="code-tabs diagram-tabs" data-diagram=mermaid><div class=tabs-header><div class=tabs-items><span class="tab-item active" data-tab=diagram title=å¾è¡¨>å¾è¡¨</span> 17<span class=tab-item data-tab=code title=代ç >代ç </span></div><div class=tabs-actions><button type=button class="action-btn diagram-zoom-out-btn" aria-label=ç¼©å° title=缩å°><i class="fa-solid fa-magnifying-glass-minus" aria-hidden=true></i></button> 18<button type=button class="action-btn diagram-zoom-in-btn" aria-label=æ¾å¤§ title=æ¾å¤§><i class="fa-solid fa-magnifying-glass-plus" aria-hidden=true></i></button> 19<button type=button class="action-btn diagram-reset-btn" aria-label=éç½® title=éç½®><i class="fa-solid fa-arrows-rotate" aria-hidden=true></i></button> 20<button type=button class="action-btn diagram-download-btn" aria-label="ä¸è½½ SVG" title="ä¸è½½ SVG"><i class="fa-solid fa-download" aria-hidden=true></i></button></div></div><div class=tabs-content><div class="code-block diagram-view active" data-filename=mermaid.mmd><div class=diagram-container><pre class=mermaid>flowchart LR 21 A(["Start"]) 22 A --> B{"Decision"} 23 B -->|Yes| C["Option A"] 24 B -->|No| D["Option B"]</pre><pre class=mermaid-dark>flowchart LR 25 A(["Start"]) 26 A --> B{"Decision"} 27 B -->|Yes| C["Option A"] 28 B -->|No| D["Option B"]</pre><pre class=mermaid-neutral>flowchart LR 29 A(["Start"]) 30 A --> B{"Decision"} 31 B -->|Yes| C["Option A"] 32 B -->|No| D["Option B"]</pre></div></div><div class="code-block highlight diagram-code" data-mode=classic data-copyable=true copyable=true fullscreen=true filename=mermaid.mmd><div class=chroma><div class="code-header language-text"><span class=code-title><i class="arrow fa-solid fa-chevron-down" aria-hidden=true></i></span><button type=button class=ellipses-btn aria-label="Show more options"><i class="fa-solid fa-ellipsis-h" aria-hidden=true></i></button><button type=button class="action-btn line-nos-btn" aria-label=忢è¡å· title=忢è¡å·><i class="fa-solid fa-list-ol" aria-hidden=true></i></button><button type=button class="action-btn line-wrap-btn" aria-label=忢èªå¨æ¢è¡ title=忢èªå¨æ¢è¡><i class="fa-solid fa-right-left" aria-hidden=true></i></button><button type=button class="action-btn copy-btn" aria-label=å¤å¶å°åªè´´æ¿ title=å¤å¶å°åªè´´æ¿ data-copied-text=å·²å¤å¶>
32<i class="fa-regular fa-clone" aria-hidden=true></i></button><button type=button class="action-btn fullscreen-btn" aria-label=å ¨å± title=å ¨å± data-exit-title=éåºå ¨å±><i class="fa-solid fa-expand" aria-hidden=true></i></button></div><div class=code-wrapper data-max=10 data-line-digit=1 style=--fi-max-shown-lines:10;--fi-line-digit:1;--fi-line-start:1><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1 33</span><span class=lnt>2 34</span><span class=lnt>3 35</span><span class=lnt>4 36</span><span class=lnt>5 37</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-text data-lang=text><span class=line><span class=cl>flowchart LR 38</span></span><span class=line><span class=cl> A(["Start"]) 39</span></span><span class=line><span class=cl> A --> B{"Decision"} 40</span></span><span class=line><span class=cl> B -->|Yes| C["Option A"] 41</span></span><span class=line><span class=cl> B -->|No| D["Option B"]</span></span></code></pre></td></tr></table></div></div></div></div></div><p>Mermaid å¨åå§åæ¶éè¿ <code>theme</code> åæ®µéå®é è²ï¼ä¾å¦ï¼</p><div class="code-block highlight" data-mode=classic data-copyable=true><div class=chroma><div class="code-header language-js"><span class=code-title><i class="arrow fa-solid fa-chevron-down" aria-hidden=true></i></span><button type=button class=ellipses-btn aria-label="Show more options"><i class="fa-solid fa-ellipsis-h" aria-hidden=true></i></button><button type=button class="action-btn line-nos-btn" aria-label=忢è¡å· title=忢è¡å·><i class="fa-solid fa-list-ol" aria-hidden=true></i></button><button type=button class="action-btn line-wrap-btn" aria-label=忢èªå¨æ¢è¡ title=忢èªå¨æ¢è¡><i class="fa-solid fa-right-left" aria-hidden=true></i></button><button type=button class="action-btn copy-btn" aria-label=å¤å¶å°åªè´´æ¿ title=å¤å¶å°åªè´´æ¿ data-copied-text=å·²å¤å¶><i class="fa-regular fa-clone" aria-hidden=true></i></button></div><div class=code-wrapper data-max=10 data-line-digit=1 style=--fi-max-shown-lines:10;--fi-line-digit:1;--fi-line-start:1><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1 42</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-js data-lang=js><span class=line><span class=cl><span class=nx>mermaid</span><span class=p>.</span><span class=nx>initialize</span><span class=p>({</span> <span class=nx>theme</span><span class=o>:</span> <span class=s1>'dark'</span> <span class=p>});</span></span></span></code></pre></td></tr></table></div></div></div><p>ä½è¿æ¡é ç½® <strong>åªå¨é¦æ¬¡æ¸²ææ¶çæ</strong>ãå½ç¨æ·å¨æä½ç³»ç»å±é¢åå° Light/Darkï¼æè ç½é¡µæ¬èº«æä¾æå¨å¼å ³æ¶ï¼Mermaid å¹¶ä¸ä¼èªå¨éç»ãè¿å°±å¯¼è´ï¼</p><ul><li>æé»ç³»ç» + æµ è²å¾è¡¨ â åºç¼</li><li>æµ è²ç³»ç» + æé»å¾è¡¨ â åæ ·åºç¼</li></ul><p>ç¤¾åº Issue <a href=https://github.com/mermaid-js/mermaid/issues/2644 target=_blank rel="external nofollow noopener noreferrer">#2644<i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden=true></i></a> æ©å¨ 2022 å¹´å°±æåºå¸æå®æ¹æ¯æ <code>prefers-color-scheme</code>ï¼ä½è³ä»ï¼2025-08ï¼ä»æªåå ¥ä¸»å¹²ã</p><p>顺便æä¸ä¸ï¼ä¸»é¢ç忢ä¸è¬é½æä¸¤ç§ä¸»æµæ¹å¼ï¼</p><ol><li>å©ç¨ <code>prefers-color-scheme</code> æç¥ç³»ç»çº§å«ä¸»é¢ååï¼<code>matchMedia('(prefers-color-scheme: dark)')</code> ç <code>change</code> äºä»¶ã</li><li>éè¿ <code>dark</code> class æå¨åæ¢ï¼è¿ç§æ¹å¼é常ä¼å¨ html/body ä¸è®¾ç½®ä¸ä¸ª <code>class</code> æè <code>data-theme="dark"</code> è¿æ ·ã</li></ol><h2 class=heading-element id=æ¹æ¡-1-reinitialize><span>æ¹æ¡ 1ï¸â£ Reinitialize</span> 43<a href=#%e6%96%b9%e6%a1%88-1-reinitialize class=heading-mark><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5.0 114.95 4.95l-2.5 2.5a3.5 3.5.0 01-4.95.0.751.751.0 01.018-1.042.751.751.0 011.042-.018 1.998 1.998.0 002.83.0l2.5-2.5a2.002 2.002.0 00-2.83-2.83l-1.25 1.25a.751.751.0 01-1.042-.018.751.751.0 01-.018-1.042zm-4.69 9.64a1.998 1.998.0 002.83.0l1.25-1.25a.751.751.0 011.042.018.751.751.0 01.018 1.042l-1.25 1.25a3.5 3.5.0 11-4.95-4.95l2.5-2.5a3.5 3.5.0 014.95.0.751.751.0 01-.018 1.042.751.751.0 01-1.042.018 1.998 1.998.0 00-2.83.0l-2.5 2.5a1.998 1.998.0 000 2.83z"/></svg></a></h2><p>忢䏻é¢ï¼éæ° <code>initialize</code> + éç»ï¼è¿æ¯ç®åæ¥ç大夿°äººçåæ³ã</p><p>æè·¯ï¼</p><ol><li>å¤ä»½åå§ç Mermaid code</li><li>设置 <code>startOnLoad: false</code> é¿å Mermaid èªå¨æ¸²æï¼ç¶åä½¿ç¨ <code>mermaid.initialize({ theme: theme })</code> + <code>mermaid.run()</code> 宿åå§åã</li><li>éæ°æ¸²ææ¶ç§»é¤ <code>data-processed</code>ï¼æ¿æ¢ <code>.mermaid</code> çå 容为åå§ Mermaid codeï¼ä½¿ç¨ <code>mermaid.initialize({ theme: newTheme })</code> + <code>mermaid.run()</code> éæ°æ¸²æ</li></ol><p>è¿ä»½åæ³å¨ Issue <a href=https://github.com/mermaid-js/mermaid/issues/1945#issuecomment-1661264708 target=_blank rel="external nofollow noopener noreferrer">#1945<i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden=true></i></a> éæå®æ´ä»£ç ï¼ä¸é¢ç»åºç²¾ç®çï¼</p><p>ä¼ç¹æ¯ï¼</p><ul><li>å©ç¨ç°æå®æ¹ API</li></ul><p>ç¼ºç¹æ¯ï¼</p><ul><li>æ¯æ¬¡åæ¢é½éè¦éæ°æ¸²æï¼å¤§å¾ä¼éªä¸ä¸</li><li>妿页é¢éå¾è¡¨å¾å¤ï¼æ§è½æèä¸å¯å¿½è§</li><li>è¿æå¼æ¥å¤ç带æ¥çä¸ç³»åé®é¢</li></ul><h2 class=heading-element id=æ¹æ¡-2-css-滤é><span>æ¹æ¡ 2ï¸â£ CSS 滤é</span> 44<a href=#%e6%96%b9%e6%a1%88-2-css-%e6%bb%a4%e9%95%9c class=heading-mark>
44<svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5.0 114.95 4.95l-2.5 2.5a3.5 3.5.0 01-4.95.0.751.751.0 01.018-1.042.751.751.0 011.042-.018 1.998 1.998.0 002.83.0l2.5-2.5a2.002 2.002.0 00-2.83-2.83l-1.25 1.25a.751.751.0 01-1.042-.018.751.751.0 01-.018-1.042zm-4.69 9.64a1.998 1.998.0 002.83.0l1.25-1.25a.751.751.0 011.042.018.751.751.0 01.018 1.042l-1.25 1.25a3.5 3.5.0 11-4.95-4.95l2.5-2.5a3.5 3.5.0 014.95.0.751.751.0 01-.018 1.042.751.751.0 01-1.042.018 1.998 1.998.0 00-2.83.0l-2.5 2.5a1.998 1.998.0 000 2.83z"/></svg></a></h2><p>ä½ä¸ºæ¯æ <code>prefers-color-scheme</code> åæå¨åæ¢çä¸ç§ç®åçè§£å³æ¹æ¡ï¼å¯ä»¥ä½¿ç¨ CSS å转滤éï¼<code>invert</code>ã<code>hue-rotate</code> çï¼æ¥å®ç°ã</p><p>ä¾å¦ï¼</p><div class="code-block highlight" data-mode=classic data-copyable=true><div class=chroma><div class="code-header language-css"><span class=code-title><i class="arrow fa-solid fa-chevron-down" aria-hidden=true></i></span><button type=button class=ellipses-btn aria-label="Show more options"><i class="fa-solid fa-ellipsis-h" aria-hidden=true></i></button><button type=button class="action-btn line-nos-btn" aria-label=忢è¡å· title=忢è¡å·><i class="fa-solid fa-list-ol" aria-hidden=true></i></button><button type=button class="action-btn line-wrap-btn" aria-label=忢èªå¨æ¢è¡ title=忢èªå¨æ¢è¡><i class="fa-solid fa-right-left" aria-hidden=true></i></button><button type=button class="action-btn copy-btn" aria-label=å¤å¶å°åªè´´æ¿ title=å¤å¶å°åªè´´æ¿ data-copied-text=å·²å¤å¶><i class="fa-regular fa-clone" aria-hidden=true></i></button></div><div class=code-wrapper data-max=10 data-line-digit=1 style=--fi-max-shown-lines:10;--fi-line-digit:1;--fi-line-start:1><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1 45</span><span class=lnt>2 46</span><span class=lnt>3 47</span><span class=lnt>4 48</span><span class=lnt>5 49</span><span class=lnt>6 50</span><span class=lnt>7 51</span><span class=lnt>8 52</span><span class=lnt>9 53</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-css data-lang=css><span class=line><span class=cl><span class=o>[</span><span class=nt>data-theme</span><span class=o>=</span><span class=s1>'dark'</span><span class=o>]</span> <span class=p>.</span><span class=nc>mermaid</span> <span class=p>{</span> 54</span></span><span class=line><span class=cl> <span class=k>filter</span><span class=p>:</span> <span class=nb>invert</span><span class=p>(</span><span class=mf>0.88</span><span class=p>);</span> 55</span></span><span class=line><span class=cl><span class=p>}</span> 56</span></span><span class=line><span class=cl> 57</span></span><span class=line><span class=cl><span class=p>@</span><span class=k>media</span> <span class=o>(</span><span class=nt>prefers-color-scheme</span><span class=o>:</span> <span class=nt>dark</span><span class=o>)</span> <span class=p>{</span> 58</span></span><span class=line><span class=cl> <span class=p>:</span><span class=nd>root</span><span class=p>:</span><span class=nd>not</span><span class=o>([</span><span class=nt>data-theme</span><span class=o>=</span><span class=s1>'light'</span><span class=o>])</span> <span class=p>.</span><span class=nc>mermaid</span> <span class=p>{</span> 59</span></span><span class=line><span class=cl> <span class=k>filter</span><span class=p>:</span> <span class=nb>invert</span><span class=p>(</span><span class=mf>0.88</span><span class=p>);</span> 60</span></span><span class=line><span class=cl> <span class=p>}</span> 61</span></span><span class=line><span class=cl><span class=p>}</span></span></span></code></pre></td></tr></table></div></div></div><p>è¿æ¡æå·§æ¯æå¨ Issue <a href=https://github.com/mermaid-js/mermaid/issues/2644#issuecomment-2313201033 target=_blank rel="external nofollow noopener noreferrer">#2644<i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden=true></i></a> ä¸çå°çã</p><p>ä¼ç¹æ¯ï¼</p><ul><li>ä¸è¡ CSSï¼æ JS</li><li>ä¸éæ°æ¸²æï¼é¶å»¶è¿</li></ul><p>ç¼ºç¹æ¯ï¼</p><ul><li>åªæ¯ãåè²ãï¼å¹¶é宿¹æé»ä¸»é¢</li><li>对äºçº¢è²ã绿è²çè¯ä¹è²ä¼å®å ¨å¤±ç</li><li>å¦æèæ¯ä¸æ¯çº¯é»çº¯ç½ï¼è§æä¼å¾å¥æª</li></ul><p>ç±äºå¤ªè¿ç®åï¼ææä¹å¾ç²ç³ï¼éåå Demo æå é¨å·¥å ·ï¼ä¸å»ºè®®é¢åç»ç«¯ç¨æ·ã</p><h2 class=heading-element id=æ¹æ¡-3-é ç½®çæ¿æ¢><span>æ¹æ¡ 3ï¸â£ é ç½®çæ¿æ¢</span> 62<a href=#%e6%96%b9%e6%a1%88-3-%e9%85%8d%e7%bd%ae%e7%83%ad%e6%9b%bf%e6%8d%a2 class=heading-mark>
62<svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5.0 114.95 4.95l-2.5 2.5a3.5 3.5.0 01-4.95.0.751.751.0 01.018-1.042.751.751.0 011.042-.018 1.998 1.998.0 002.83.0l2.5-2.5a2.002 2.002.0 00-2.83-2.83l-1.25 1.25a.751.751.0 01-1.042-.018.751.751.0 01-.018-1.042zm-4.69 9.64a1.998 1.998.0 002.83.0l1.25-1.25a.751.751.0 011.042.018.751.751.0 01.018 1.042l-1.25 1.25a3.5 3.5.0 11-4.95-4.95l2.5-2.5a3.5 3.5.0 014.95.0.751.751.0 01-.018 1.042.751.751.0 01-1.042.018 1.998 1.998.0 00-2.83.0l-2.5 2.5a1.998 1.998.0 000 2.83z"/></svg></a></h2><p>mermaid.live ç«ç¹è½å¨ç¨æ·å䏻颿¶ç¬é´å®æåæ¢ï¼ä¸é¢è²å®å ¨ä¸å®æ¹æé»ä¸»é¢å¯¹é½ãä» <a href=https://github.com/mermaid-js/mermaid-live-editor target=_blank rel="external nofollow noopener noreferrer">æºç <i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden=true></i></a> å DevTools æ¨æµï¼å®å¤§æ¦åäºä¸ä»¶äºï¼</p><ol><li>èªå·±ç»´æ¤ä¸ä»½ <code>themeCSS</code> å符串ï¼èéä» ç¨åå <code>'dark'</code>ï¼</li><li>å¨ <code>prefers-color-scheme</code> ååæ¶ï¼ç´æ¥ææ°ç CSS æ³¨å ¥å° <code><svg></code> éç <code><style></code> èç¹</li><li>éè¿ <code>mermaid.render('id', code)</code> æ¿å° SVG string åï¼ç¨æ£åæ¿æ¢ææ§ <code><style></code>ï¼å <code>DOMParser</code> å¡å页é¢</li></ol><p>Issue <a href=https://github.com/mermaid-js/mermaid/issues/2644#issuecomment-1029648289 target=_blank rel="external nofollow noopener noreferrer">#2644<i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden=true></i></a> 䏿æå°ï¼å¨ mermaid.live ä¸ï¼ç®åæ¯æ ¹æ®é è²æ¹æ¡å¨é ç½®ä¸åæ¢ä¸»é¢ã</p><p>ä¼ç¹ï¼</p><ul><li>æ éªç</li><li>å®å ¨å¤ç¨å®æ¹é è²</li></ul><p>缺ç¹ï¼</p><ul><li>éè¦å é¨ç»´æ¤ä¸»é¢ CSSï¼Mermaid æ¯åçº§ä¸æ¬¡é½è¦åæ¥</li><li>å®ç°ç»èä¾èµç§æ APIï¼å®æ¹ä¸æ¦æ¹å¨å°±ä¼å´©</li></ul><p>å¦æä½ æåº¦è¿½æ±ä½éªï¼å¯ä»¥ç §çæºç æä¸ä»½ï¼ä½è¦åå¥½é¿æç»´æ¤çå¿çåå¤ã</p><p><a href=https://github.com/mermaid-js/mermaid/issues/2644#issuecomment-1029648289 target=_blank rel="external nofollow noopener noreferrer">#2644<i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden=true></i></a> 䏿å°ï¼å¨ mermaid.live ä¸ï¼ç®åæ£å¨æ ¹æ®é è²æ¹æ¡å¨é ç½®ä¸åæ¢ä¸»é¢ãè¿ç§æ¹æ¡ææ¶æªæ¾å°æ´å¤çç»èæ«é²ãæåæå¾å»æ·±æ mermaid.live çå®ç°ç»èã</p><h2 class=heading-element id=æ¹æ¡-4-reinitialize--css-ç»å><span>æ¹æ¡ 4ï¸â£ Reinitialize + CSS ç»å</span> 63<a href=#%e6%96%b9%e6%a1%88-4-reinitialize--css-%e7%bb%93%e5%90%88 class=heading-mark><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5.0 114.95 4.95l-2.5 2.5a3.5 3.5.0 01-4.95.0.751.751.0 01.018-1.042.751.751.0 011.042-.018 1.998 1.998.0 002.83.0l2.5-2.5a2.002 2.002.0 00-2.83-2.83l-1.25 1.25a.751.751.0 01-1.042-.018.751.751.0 01-.018-1.042zm-4.69 9.64a1.998 1.998.0 002.83.0l1.25-1.25a.751.751.0 011.042.018.751.751.0 01.018 1.042l-1.25 1.25a3.5 3.5.0 11-4.95-4.95l2.5-2.5a3.5 3.5.0 014.95.0.751.751.0 01-.018 1.042.751.751.0 01-1.042.018 1.998 1.998.0 00-2.83.0l-2.5 2.5a1.998 1.998.0 000 2.83z"/></svg></a></h2><p>卿çå®è·µä¸ï¼<a href=https://github.com/hugo-fixit/FixIt target=_blank rel="external nofollow noopener noreferrer">FixIt 主é¢<i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden=true></i></a> æ¯éè¿ <code>data-theme</code> çæ¹å¼æå¨åæ¢ç½ç«ä¸»é¢çï¼æä¸å¼å§èµ°çæè·¯åæ¹æ¡ 1ï¸â£æ»ä½ä¸è´ï¼ä¸ºäºå¤çè¿ä¸ªæ¹æ¡ç缺ç¹ï¼æå¤æ¬¡è¿ä»£ï¼æäºæç»ççæ¬ï¼</p><p>é¦å éè¿ <code>type=module</code> å¼å ¥ Mermaidï¼</p><div class="code-block highlight" data-mode=classic data-copyable=true><div class=chroma><div class="code-header language-js"><span class=code-title><i class="arrow fa-solid fa-chevron-down" aria-hidden=true></i></span><button type=button class=ellipses-btn aria-label="Show more options"><i class="fa-solid fa-ellipsis-h" aria-hidden=true></i></button><button type=button class="action-btn line-nos-btn" aria-label=忢è¡å· title=忢è¡å·><i class="fa-solid fa-list-ol" aria-hidden=true></i></button><button type=button class="action-btn line-wrap-btn" aria-label=忢èªå¨æ¢è¡ title=忢èªå¨æ¢è¡><i class="fa-solid fa-right-left" aria-hidden=true></i></button><button type=button class="action-btn copy-btn" aria-label=å¤å¶å°åªè´´æ¿ title=å¤å¶å°åªè´´æ¿ data-copied-text=å·²å¤å¶>
63<i class="fa-regular fa-clone" aria-hidden=true></i></button></div><div class=code-wrapper data-max=10 data-line-digit=1 style=--fi-max-shown-lines:10;--fi-line-digit:1;--fi-line-start:1><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1 64</span><span class=lnt>2 65</span><span class=lnt>3 66</span><span class=lnt>4 67</span><span class=lnt>5 68</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-js data-lang=js><span class=line><span class=cl><span class=kr>import</span> <span class=nx>mermaid</span> <span class=nx>from</span> <span class=s1>'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.js'</span><span class=p>;</span> 69</span></span><span class=line><span class=cl><span class=kr>import</span> <span class=nx>zenuml</span> <span class=nx>from</span> <span class=s1>'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml/dist/mermaid-zenuml.esm.min.mjs'</span><span class=p>;</span> 70</span></span><span class=line><span class=cl><span class=kr>await</span> <span class=nx>mermaid</span><span class=p>.</span><span class=nx>registerExternalDiagrams</span><span class=p>([</span><span class=nx>zenuml</span><span class=p>]);</span> 71</span></span><span class=line><span class=cl><span class=nx>mermaid</span><span class=p>.</span><span class=nx>startOnLoad</span> <span class=o>=</span> <span class=kc>false</span><span class=p>;</span> 72</span></span><span class=line><span class=cl><span class=nb>window</span><span class=p>.</span><span class=nx>mermaid</span> <span class=o>=</span> <span class=nx>mermaid</span><span class=p>;</span></span></span></code></pre></td></tr></table></div></div></div><p>ç¶åå¨ä¸»é¢ç忢é»è¾ä¸å¤çï¼</p><div class="code-block highlight" data-mode=classic data-copyable=true><div class=chroma><div class="code-header language-js"><span class=code-title><i class="arrow fa-solid fa-chevron-down" aria-hidden=true></i></span><button type=button class=ellipses-btn aria-label="Show more options"><i class="fa-solid fa-ellipsis-h" aria-hidden=true></i></button><button type=button class="action-btn line-nos-btn" aria-label=忢è¡å· title=忢è¡å·><i class="fa-solid fa-list-ol" aria-hidden=true></i></button><button type=button class="action-btn line-wrap-btn" aria-label=忢èªå¨æ¢è¡ title=忢èªå¨æ¢è¡><i class="fa-solid fa-right-left" aria-hidden=true></i></button><button type=button class="action-btn copy-btn" aria-label=å¤å¶å°åªè´´æ¿ title=å¤å¶å°åªè´´æ¿ data-copied-text=å·²å¤å¶><i class="fa-regular fa-clone" aria-hidden=true></i></button></div><div class=code-wrapper data-max=10 data-line-digit=2 style=--fi-max-shown-lines:10;--fi-line-digit:2;--fi-line-start:1><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt> 1 73</span><span class=lnt> 2 74</span><span class=lnt> 3 75</span><span class=lnt> 4 76</span><span class=lnt> 5 77</span><span class=lnt> 6 78</span><span class=lnt> 7 79</span><span class=lnt> 8 80</span><span class=lnt> 9 81</span><span class=lnt>10 82</span><span class=lnt>11 83</span><span class=lnt>12 84</span><span class=lnt>13 85</span><span class=lnt>14 86</span><span class=lnt>15 87</span><span class=lnt>16 88</span><span class=lnt>17 89</span><span class=lnt>18 90</span><span class=lnt>19 91</span><span class=lnt>20 92</span><span class=lnt>21 93</span><span class=lnt>22 94</span><span class=lnt>23 95</span><span class=lnt>24 96</span><span class=lnt>25 97</span><span class=lnt>26 98</span><span class=lnt>27 99</span><span class=lnt>28 100</span><span class=lnt>29 101</span><span class=lnt>30 102</span><span class=lnt>31 103</span><span class=lnt>32 104</span><span class=lnt>33 105</span><span class=lnt>34 106</span><span class=lnt>35 107</span><span class=lnt>36 108</span><span class=lnt>37 109</span><span class=lnt>38 110</span><span class=lnt>39 111</span><span class=lnt>40 112</span><span class=lnt>41 113</span><span class=lnt>42 114</span><span class=lnt>43 115</span><span class=lnt>44 116</span><span class=lnt>45 117</span><span class=lnt>46 118</span><span class=lnt>47 119</span><span class=lnt>48 120</span><span class=lnt>49 121</span><span class=lnt>50 122</span><span class=lnt>51 123</span><span class=lnt>52 124</span><span class=lnt>53 125</span><span class=lnt>54 126</span><span class=lnt>55 127</span><span class=lnt>56 128</span><span class=lnt>57 129</span><span class=lnt>58 130</span><span class=lnt>59 131</span><span class=lnt>60 132</span><span class=lnt>61 133</span><span class=lnt>62 134</span><span class=lnt>63 135</span><span class=lnt>64 136</span><span class=lnt>65 137</span><span class=lnt>66 138</span><span class=lnt>67 139</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-js data-lang=js><span class=line><span class=cl><span class=nx>initMermaid</span><span class=p>()</span> <span class=p>{</span> 140</span></span><span class=line><span class=cl> <span class=k>if</span> <span class=p>(</span><span class=o>!</span><span class=k>this</span><span class=p>.</span><span class=nx>config</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>)</span> <span class=k>return</span><span class=p>;</span> 141</span></span><span class=line><span class=cl> 142</span></span><span class=line><span class=cl> <span class=kr>const</span> <span class=nx>themes</span> <span class=o>=</span> <span class=k>this</span><span class=p>.</span><span class=nx>config</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>.</span><span class=nx>themes</span> <span class=o>??</span> <span class=p>[</span><span class=s1>'default'</span><span class=p>,</span> <span class=s1>'dark'</span><span class=p>];</span> 143</span></span><span class=line><span class=cl> <span class=kd>let</span> <span class=nx>processing</span> <span class=o>=</span> <span class=kc>
143false</span><span class=p>;</span> 144</span></span><span class=line><span class=cl> <span class=kd>let</span> <span class=nx>delayTask</span> <span class=o>=</span> <span class=kc>null</span><span class=p>;</span> 145</span></span><span class=line><span class=cl> 146</span></span><span class=line><span class=cl> <span class=kr>const</span> <span class=nx>loadMermaid</span> <span class=o>=</span> <span class=kr>async</span> <span class=p>()</span> <span class=p>=></span> <span class=p>{</span> 147</span></span><span class=line><span class=cl> <span class=nx>processing</span> <span class=o>=</span> <span class=kc>true</span><span class=p>;</span> 148</span></span><span class=line><span class=cl> <span class=c1>// https://mermaid.js.org/config/schema-docs/config.html 149</span></span></span><span class=line><span class=cl> <span class=nb>window</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>.</span><span class=nx>initialize</span><span class=p>({</span> 150</span></span><span class=line><span class=cl> <span class=nx>startOnLoad</span><span class=o>:</span> <span class=kc>false</span><span class=p>,</span> 151</span></span><span class=line><span class=cl> <span class=nx>darkMode</span><span class=o>:</span> <span class=k>this</span><span class=p>.</span><span class=nx>isDark</span><span class=p>,</span> 152</span></span><span class=line><span class=cl> <span class=nx>theme</span><span class=o>:</span> <span class=k>this</span><span class=p>.</span><span class=nx>isDark</span> <span class=o>?</span> <span class=nx>themes</span><span class=p>[</span><span class=mi>1</span><span class=p>]</span> <span class=o>:</span> <span class=nx>themes</span><span class=p>[</span><span class=mi>0</span><span class=p>],</span> 153</span></span><span class=line><span class=cl> <span class=nx>securityLevel</span><span class=o>:</span> <span class=k>this</span><span class=p>.</span><span class=nx>config</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>.</span><span class=nx>securityLevel</span><span class=p>,</span> 154</span></span><span class=line><span class=cl> <span class=nx>look</span><span class=o>:</span> <span class=k>this</span><span class=p>.</span><span class=nx>config</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>.</span><span class=nx>look</span><span class=p>,</span> 155</span></span><span class=line><span class=cl> <span class=nx>fontFamily</span><span class=o>:</span> <span class=k>this</span><span class=p>.</span><span class=nx>config</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>.</span><span class=nx>fontFamily</span><span class=p>,</span> 156</span></span><span class=line><span class=cl> <span class=nx>altFontFamily</span><span class=o>:</span> <span class=k>this</span><span class=p>.</span><span class=nx>config</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>.</span><span class=nx>fontFamily</span> 157</span></span><span class=line><span class=cl> <span class=p>});</span> 158</span></span><span class=line><span class=cl> <span class=kr>await</span> <span class=nb>window</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>.</span><span class=nx>run</span><span class=p>({</span> 159</span></span><span class=line><span class=cl> <span class=nx>querySelector</span><span class=o>:</span> <span class=s1>'.mermaid'</span><span class=p>,</span> 160</span></span><span class=line><span class=cl> <span class=nx>suppressErrors</span><span class=o>:</span> <span class=kc>true</span><span class=p>,</span> 161</span></span><span class=line><span class=cl> <span class=p>});</span> 162</span></span><span class=line><span class=cl> <span class=nx>processing</span> <span class=o>=</span> <span class=kc>false</span><span class=p>;</span> 163</span></span><span class=line><span class=cl> <span class=k>if</span> <span class=p>(</span><span class=nx>delayTask</span> <span class=o>&&</span> <span class=k>typeof</span> <span class=nx>delayTask</span> <span class=o>===</span> <span class=s1>'function'</span><span class=p>)</span> <span class=p>{</span> 164</span></span><span class=line><span class=cl>
164 <span class=nx>delayTask</span><span class=p>();</span> 165</span></span><span class=line><span class=cl> <span class=nx>delayTask</span> <span class=o>=</span> <span class=kc>null</span><span class=p>;</span> 166</span></span><span class=line><span class=cl> <span class=c1>// console.log('Delayed task executed'); 167</span></span></span><span class=line><span class=cl> <span class=p>}</span> 168</span></span><span class=line><span class=cl> <span class=p>};</span> 169</span></span><span class=line><span class=cl> 170</span></span><span class=line><span class=cl> <span class=kr>const</span> <span class=nx>reloadMermaid</span> <span class=o>=</span> <span class=kr>async</span> <span class=p>()</span> <span class=p>=></span> <span class=p>{</span> 171</span></span><span class=line><span class=cl> <span class=kr>await</span> <span class=k>this</span><span class=p>.</span><span class=nx>util</span><span class=p>.</span><span class=nx>forEach</span><span class=p>(</span><span class=nb>document</span><span class=p>.</span><span class=nx>querySelectorAll</span><span class=p>(</span><span class=s1>'.mermaid[data-processed]'</span><span class=p>),</span> <span class=p>(</span><span class=nx>el</span><span class=p>)</span> <span class=p>=></span> <span class=p>{</span> 172</span></span><span class=line><span class=cl> <span class=nx>el</span><span class=p>.</span><span class=nx>removeAttribute</span><span class=p>(</span><span class=s1>'data-processed'</span><span class=p>);</span> 173</span></span><span class=line><span class=cl> <span class=nx>el</span><span class=p>.</span><span class=nx>parentElement</span><span class=p>.</span><span class=nx>replaceChild</span><span class=p>(</span><span class=nx>el</span><span class=p>.</span><span class=nx>nextElementSibling</span><span class=p>.</span><span class=nx>content</span><span class=p>.</span><span class=nx>cloneNode</span><span class=p>(</span><span class=kc>true</span><span class=p>),</span> <span class=nx>el</span><span class=p>);</span> 174</span></span><span class=line><span class=cl> <span class=p>});</span> 175</span></span><span class=line><span class=cl> <span class=kr>await</span> <span class=nx>loadMermaid</span><span class=p>();</span> 176</span></span><span class=line><span class=cl> <span class=p>};</span> 177</span></span><span class=line><span class=cl> 178</span></span><span class=line><span class=cl> <span class=kr>const</span> <span class=nx>waitForMermaid</span> <span class=o>=</span> <span class=p>()</span> <span class=p>=></span> <span class=p>{</span> 179</span></span><span class=line><span class=cl> <span class=k>return</span> <span class=k>new</span> <span class=nb>Promise</span><span class=p>((</span><span class=nx>resolve</span><span class=p>)</span> <span class=p>=></span> <span class=p>{</span> 180</span></span><span class=line><span class=cl> <span class=kr>const</span> <span class=nx>timer</span> <span class=o>=</span> <span class=nx>setInterval</span><span class=p>(()</span> <span class=p>=></span> <span class=p>{</span> 181</span></span><span class=line><span class=cl> <span class=k>if</span> <span class=p>(</span><span class=nb>window</span><span class=p>.</span><span class=nx>mermaid</span> <span class=o>&&</span> <span class=nb>window</span><span class=p>.</span><span class=nx>mermaid</span><span class=p>.</span><span class=nx>initialize</span><span class=p>)</span> <span class=p>{</span> 182</span></span><span class=line><span class=cl> <span class=nx>clearInterval</span><span class=p>(</span><span class=nx>timer</span><span class=p>);</span> 183</span></span><span class=line><span class=cl> <span class=nx>resolve</span><span class=p>();</span> 184</span></span><span class=line><span class=cl> <span class=p>}</span> 185</span></span><span class=line><span class=cl> <span class=p>},</span> <span class=mi>100</span><span class=p>);</span> 186</span></span><span class=line><span class=cl> <span class=p>});</span> 187</span></span><span class=line><span class=cl> <span class=p>};</span> 188</span></span><span class=line><span class=cl> 189</span></span><span class=line><span class=cl> <span class=nx>waitForMermaid</span><span class=p>().</span><span class=nx>then</span><span class=p>(()</span> <span class=p>=></span> <span class=p>{</span> 190</span></span><span class=line><span class=cl> <span class=nx>loadMermaid</span><span class=p>();</span> 191</span></span><span class=line><span class=cl> <span class=k>this</span><span class=p>.</span><span class=nx>switchThemeEventSet</span><span class=p>.</span><span class=nx>add</span><span class=p>(()</span> <span class=p>=></span> <span class=p>{</span> 192</span></span><span class=line><span class=cl>
192 <span class=k>if</span> <span class=p>(</span><span class=nx>processing</span><span class=p>)</span> <span class=p>{</span> 193</span></span><span class=line><span class=cl> <span class=nx>console</span><span class=p>.</span><span class=nx>warn</span><span class=p>(</span><span class=s1>'Mermaid is still processing, delaying the reload.'</span><span class=p>);</span> 194</span></span><span class=line><span class=cl> <span class=nx>delayTask</span> <span class=o>=</span> <span class=nx>reloadMermaid</span><span class=p>;</span> 195</span></span><span class=line><span class=cl> <span class=k>return</span><span class=p>;</span> 196</span></span><span class=line><span class=cl> <span class=p>}</span> 197</span></span><span class=line><span class=cl> <span class=c1>// console.log('reload immediately'); 198</span></span></span><span class=line><span class=cl> <span class=nx>reloadMermaid</span><span class=p>().</span><span class=k>catch</span><span class=p>(</span><span class=nx>console</span><span class=p>.</span><span class=nx>error</span><span class=p>);</span> 199</span></span><span class=line><span class=cl> <span class=p>});</span> 200</span></span><span class=line><span class=cl> 201</span></span><span class=line><span class=cl> <span class=k>this</span><span class=p>.</span><span class=nx>beforeprintEventSet</span><span class=p>.</span><span class=nx>add</span><span class=p>(()</span> <span class=p>=></span> <span class=p>{</span> 202</span></span><span class=line><span class=cl> <span class=c1>// Optionally set theme to 'neutral' for printing if required 203</span></span></span><span class=line><span class=cl> <span class=p>});</span> 204</span></span><span class=line><span class=cl> <span class=p>})</span> 205</span></span><span class=line><span class=cl><span class=p>}</span></span></span></code></pre></td></tr></table></div><button type=button class=code-expand-btn aria-label=å±å¼ææå 代ç å><i class="fa-solid fa-angles-down" aria-hidden=true></i></button></div></div><p>为äºç¼è§£éªå±é®é¢ï¼å©ç¨ CSS å¢å ä¸ä¸ª Loading ææï¼è¿åº¦ä¸ä¸ã</p><div class="code-block highlight" data-mode=classic data-copyable=true data-open=false><div class=chroma><div class="code-header language-scss"><span class=code-title><i class="arrow fa-solid fa-chevron-down" aria-hidden=true></i></span><button type=button class=ellipses-btn aria-label="Show more options"><i class="fa-solid fa-ellipsis-h" aria-hidden=true></i></button><button type=button class="action-btn line-nos-btn" aria-label=忢è¡å· title=忢è¡å·><i class="fa-solid fa-list-ol" aria-hidden=true></i></button><button type=button class="action-btn line-wrap-btn" aria-label=忢èªå¨æ¢è¡ title=忢èªå¨æ¢è¡><i class="fa-solid fa-right-left" aria-hidden=true></i></button><button type=button class="action-btn copy-btn" aria-label=å¤å¶å°åªè´´æ¿ title=å¤å¶å°åªè´´æ¿ data-copied-text=å·²å¤å¶><i class="fa-regular fa-clone" aria-hidden=true></i></button></div><div class=code-wrapper data-max=10 data-line-digit=2 style=--fi-max-shown-lines:10;--fi-line-digit:2;--fi-line-start:1><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt> 1 206</span><span class=lnt> 2 207</span><span class=lnt> 3 208</span><span class=lnt> 4 209</span><span class=lnt> 5 210</span><span class=lnt> 6 211</span><span class=lnt> 7 212</span><span class=lnt> 8 213</span><span class=lnt> 9 214</span><span class=lnt>10 215</span><span class=lnt>11 216</span><span class=lnt>12 217</span><span class=lnt>13 218</span><span class=lnt>14 219</span><span class=lnt>15 220</span><span class=lnt>16 221</span><span class=lnt>17 222</span><span class=lnt>18 223</span><span class=lnt>19 224</span><span class=lnt>20 225</span><span class=lnt>21 226</span><span class=lnt>22 227</span><span class=lnt>23 228</span><span class=lnt>24 229</span><span class=lnt>25 230</span><span class=lnt>26 231</span><span class=lnt>27 232</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-scss data-lang=scss><span class=line><span class=cl><span class=nc>.mermaid</span> <span class=p>{</span> 233</span></span><span class=line><span class=cl> <span class=na>position</span><span class=o>:</span> <span class=ni>relative</span><span class=p>;</span> 234</span></span><span class=line><span class=cl> <span class=na>overflow</span><span class=o>:</span> <span class=ni>hidden</span> <span class=k>!important</span><span class=p>;</span> 235</span></span><span class=line><span class=cl> 236</span></span><span class=line><span class=cl> <span class=k>&</span><span class=o>[</span><span class=nt>data-processed</span><span class=o>]</span> <span class=p>{</span> 237</span></span><span class=line><span class=cl> <span class=na>text-align</span><span class=o>:</span> <span class=ni>
237center</span><span class=p>;</span> 238</span></span><span class=line><span class=cl> <span class=p>}</span> 239</span></span><span class=line><span class=cl> 240</span></span><span class=line><span class=cl> <span class=k>&</span><span class=nd>:not</span><span class=o>([</span><span class=nt>data-processed</span><span class=o>])</span><span class=nd>::before</span> <span class=p>{</span> 241</span></span><span class=line><span class=cl> <span class=na>content</span><span class=o>:</span> <span class=s1>''</span><span class=p>;</span> 242</span></span><span class=line><span class=cl> <span class=na>position</span><span class=o>:</span> <span class=ni>absolute</span><span class=p>;</span> 243</span></span><span class=line><span class=cl> <span class=na>top</span><span class=o>:</span> <span class=mi>0</span><span class=p>;</span> 244</span></span><span class=line><span class=cl> <span class=na>left</span><span class=o>:</span> <span class=mi>0</span><span class=p>;</span> 245</span></span><span class=line><span class=cl> <span class=na>width</span><span class=o>:</span> <span class=mi>100</span><span class=kt>%</span><span class=p>;</span> 246</span></span><span class=line><span class=cl> <span class=na>height</span><span class=o>:</span> <span class=mi>100</span><span class=kt>%</span><span class=p>;</span> 247</span></span><span class=line><span class=cl> <span class=na>backdrop-filter</span><span class=o>:</span> <span class=nf>blur</span><span class=p>(</span><span class=mi>0</span><span class=mf>.5</span><span class=kt>rem</span><span class=p>);</span> 248</span></span><span class=line><span class=cl> <span class=na>background-position</span><span class=o>:</span> <span class=ni>center</span><span class=p>;</span> 249</span></span><span class=line><span class=cl> <span class=na>background-repeat</span><span class=o>:</span> <span class=ni>no-repeat</span><span class=p>;</span> 250</span></span><span class=line><span class=cl> <span class=na>background-image</span><span class=o>:</span> <span class=nf>var</span><span class=p>(</span><span class=si>#{</span><span class=nv>$rootPrefix</span><span class=si>}</span><span class=n>loading-img</span><span class=p>);</span> 251</span></span><span class=line><span class=cl> <span class=na>background-size</span><span class=o>:</span> <span class=mi>60</span><span class=kt>px</span><span class=p>;</span> 252</span></span><span class=line><span class=cl> <span class=p>}</span> 253</span></span><span class=line><span class=cl> 254</span></span><span class=line><span class=cl> <span class=nt>svg</span> <span class=p>{</span> 255</span></span><span class=line><span class=cl> <span class=na>max-width</span><span class=o>:</span> <span class=mi>100</span><span class=kt>%</span><span class=p>;</span> 256</span></span><span class=line><span class=cl> <span class=na>height</span><span class=o>:</span> <span class=ni>auto</span><span class=p>;</span> 257</span></span><span class=line><span class=cl> <span class=p>}</span> 258</span></span><span class=line><span class=cl><span class=p>}</span></span></span></code></pre></td></tr></table></div><button type=button class=code-expand-btn aria-label=å±å¼ææå 代ç å><i class="fa-solid fa-angles-down" aria-hidden=true></i></button></div></div><p>说å®è¯ï¼è½ç¶å强达å°äºç®çï¼è¿éç <code>delayTask</code> å <code>waitForMermaid()</code> ç®å¾ä¸å¦¥å¦¥ç Dirty Hackãä¹å±å®æ¯æ å¥ä¹ä¸¾ã</p><hr class=awesome-hr><p>ç¡è§åæçµå ä¹ç°ï¼ä¸ºäºé¿å æ¯æ¬¡åæ¢ä¸»é¢æ¶é½è¦éæ°æ¸²æ Mermaid å¾è¡¨ï¼æå°è¯ä¸å¼å§ç´æ¥æ Mermaid ç Light å Dark 主é¢ç两个å¾é½æ¸²æäºï¼ç¶åç± <code>data-theme</code> æ§å¶æ¾ç¤ºåªä¸ªå¾è¡¨ã</p><p>å°è¯ååç° Mermaid 卿¸²æå¾æ¶ï¼å¦æè¿ä¸ªå ç´ æ¯ <code>display: none;</code> å伿¥éã</p><p>äºæ¯ï¼ææ¹æåå§åæ¶åªæ¸²æ Light/Dark SVGï¼çå°ä¸»é¢åæ¢æ¶ææ¸²æ Dark/Light SVGï¼å¹¶éèå¦ä¸ä¸ª SVGã</p><p>è¿æ ·åä¸ä¸ªå¾åªéè¦æ¸²æä¸¤æ¬¡ï¼åç»å¤æ¬¡ä¸»é¢åæ¢ï¼å°±è½å¤éè¿ CSS é叏䏿»çæ§å¶åæ¢äºï¼<a href=https://lruihao.github.io/html-demo/mermaid.html target=_blank rel="external nofollow noopener noreferrer">ç ç æ³è¿éæ¥çææ<i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden=true></i></a>ã</p><div class="code-block highlight" data-mode=classic data-copyable=true><div class=chroma><div class="code-header language-html"><span class=code-title><i class="arrow fa-solid fa-chevron-down" aria-hidden=true></i></span><button type=button class=ellipses-btn aria-label="Show more options"><i class="fa-solid fa-ellipsis-h" aria-hidden=true></i></button><button type=button class="action-btn line-nos-btn" aria-label=忢è¡å· title=忢è¡å·><i class="fa-solid fa-list-ol" aria-hidden=true></i></button><button type=button class="action-btn line-wrap-btn" aria-label=忢èªå¨æ¢è¡ title=忢èªå¨æ¢è¡><i class="fa-solid fa-right-left" aria-hidden=true></i></button><button type=button class="action-btn copy-btn" aria-label=å¤å¶å°åªè´´æ¿ title=å¤å¶å°åªè´´æ¿ data-copied-text=å·²å¤å¶>
258<i class="fa-regular fa-clone" aria-hidden=true></i></button></div><div class=code-wrapper data-max=10 data-line-digit=2 style=--fi-max-shown-lines:10;--fi-line-digit:2;--fi-line-start:1><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt> 1 259</span><span class=lnt> 2 260</span><span class=lnt> 3 261</span><span class=lnt> 4 262</span><span class=lnt> 5 263</span><span class=lnt> 6 264</span><span class=lnt> 7 265</span><span class=lnt> 8 266</span><span class=lnt> 9 267</span><span class=lnt>10 268</span><span class=lnt>11 269</span><span class=lnt>12 270</span><span class=lnt>13 271</span><span class=lnt>14 272</span><span class=lnt>15 273</span><span class=lnt>16 274</span><span class=lnt>17 275</span><span class=lnt>18 276</span><span class=lnt>19 277</span><span class=lnt>20 278</span><span class=lnt>21 279</span><span class=lnt>22 280</span><span class=lnt>23 281</span><span class=lnt>24 282</span><span class=lnt>25 283</span><span class=lnt>26 284</span><span class=lnt>27 285</span><span class=lnt>28 286</span><span class=lnt>29 287</span><span class=lnt>30 288</span><span class=lnt>31 289</span><span class=lnt>32 290</span><span class=lnt>33 291</span><span class=lnt>34 292</span><span class=lnt>35 293</span><span class=lnt>36 294</span><span class=lnt>37 295</span><span class=lnt>38 296</span><span class=lnt>39 297</span><span class=lnt>40 298</span><span class=lnt>41 299</span><span class=lnt>42 300</span><span class=lnt>43 301</span><span class=lnt>44 302</span><span class=lnt>45 303</span><span class=lnt>46 304</span><span class=lnt>47 305</span><span class=lnt>48 306</span><span class=lnt>49 307</span><span class=lnt>50 308</span><span class=lnt>51 309</span><span class=lnt>52 310</span><span class=lnt>53 311</span><span class=lnt>54 312</span><span class=lnt>55 313</span><span class=lnt>56 314</span><span class=lnt>57 315</span><span class=lnt>58 316</span><span class=lnt>59 317</span><span class=lnt>60 318</span><span class=lnt>61 319</span><span class=lnt>62 320</span><span class=lnt>63 321</span><span class=lnt>64 322</span><span class=lnt>65 323</span><span class=lnt>66 324</span><span class=lnt>67 325</span><span class=lnt>68 326</span><span class=lnt>69 327</span><span class=lnt>70 328</span><span class=lnt>71 329</span><span class=lnt>72 330</span><span class=lnt>73 331</span><span class=lnt>74 332</span><span class=lnt>75 333</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-html data-lang=html><span class=line><span class=cl><span class=cp><!DOCTYPE html></span> 334</span></span><span class=line><span class=cl><span class=p><</span><span class=nt>html</span> <span class=na>lang</span><span class=o>=</span><span class=s>"en"</span><span class=p>></span> 335</span></span><span class=line><span class=cl><span class=p><</span><span class=nt>head</span><span class=p>></span> 336</span></span><span class=line><span class=cl> <span class=p><</span><span class=nt>meta</span> <span class=na>charset</span><span class=o>=</span><span class=s>"UTF-8"</span><span class=p>></span> 337</span></span><span class=line><span class=cl> <span class=p><</span><span class=nt>meta</span> <span class=na>name</span><span class=o>=</span><span class=s>"viewport"</span> <span class=na>content</span><span class=o>=</span><span class=s>"width=device-width, initial-scale=1.0"</span><span class=p>></span> 338</span></span><span class=line><span class=cl> <span class=p><</span><span class=nt>title</span><span class=p>></span>Mermaid Light/Dark Mode switching<span class=p></</span><span class=nt>title</span><span class=p>></span> 339</span></span><span class=line><span class=cl> <span class=p><</span><span class=nt>style</span><span class=p>></span> 340</span></span><span class=line><span class=cl> <span class=p>.</span><span class=nc>diagrams-container</span> <span class=p>{</span> 341</span></span><span class=line><span class=cl> <span class=k>display</span><span class=p>:</span> <span class=kc>flex</span><span class=p>;</span> 342</span></span><span class=line><span class=cl> <span class=k>justify-content</span><span class=p>:</span> <span class=kc>space</span><span class=o>-</span><span class=n>evenly</span><span class=p>;</span> 343</span></span><span class=line><span class=cl> <span class=p>}</span> 344</span></span><span class=line><span class=cl> <span class=p>.</span><span class=nc>mermaid-container</span> <span class=p>{</span> 345</span></span><span class=line><span class=cl>
345 <span class=err>.mermaid-dark</span> <span class=err>{</span> 346</span></span><span class=line><span class=cl> <span class=k>display</span><span class=p>:</span> <span class=kc>none</span><span class=p>;</span> 347</span></span><span class=line><span class=cl> <span class=p>}</span> 348</span></span><span class=line><span class=cl> 349</span></span><span class=line><span class=cl> <span class=o>[</span><span class=nt>data-theme</span><span class=o>=</span><span class=s2>"dark"</span><span class=o>]</span> <span class=o>&</span> <span class=p>{</span> 350</span></span><span class=line><span class=cl> <span class=err>.mermaid</span> <span class=err>{</span> 351</span></span><span class=line><span class=cl> <span class=k>display</span><span class=p>:</span> <span class=kc>none</span><span class=p>;</span> 352</span></span><span class=line><span class=cl> <span class=p>}</span> 353</span></span><span class=line><span class=cl> <span class=p>.</span><span class=nc>mermaid-dark</span> <span class=p>{</span> 354</span></span><span class=line><span class=cl> <span class=k>display</span><span class=p>:</span> <span class=kc>block</span><span class=p>;</span> 355</span></span><span class=line><span class=cl> <span class=p>}</span> 356</span></span><span class=line><span class=cl> <span class=err>}</span> 357</span></span><span class=line><span class=cl> <span class=err>}</span> 358</span></span><span class=line><span class=cl> <span class=p></</span><span class=nt>style</span><span class=p>></span> 359</span></span><span class=line><span class=cl><span class=p></</span><span class=nt>head</span><span class=p>></span> 360</span></span><span class=line><span class=cl><span class=p><</span><span class=nt>body</span><span class=p>></span> 361</span></span><span class=line><span class=cl> <span class=p><</span><span class=nt>script</span><span class=p>></span> 362</span></span><span class=line><span class=cl> <span class=kd>function</span> <span class=nx>toggleTheme</span><span class=p>()</span> <span class=p>{</span> 363</span></span><span class=line><span class=cl> <span class=kr>const</span> <span class=nx>currentTheme</span> <span class=o>=</span> <span class=nb>document</span><span class=p>.</span><span class=nx>body</span><span class=p>.</span><span class=nx>dataset</span><span class=p>.</span><span class=nx>theme</span><span class=p>;</span> 364</span></span><span class=line><span class=cl> <span class=kr>const</span> <span class=nx>newTheme</span> <span class=o>=</span> <span class=nx>currentTheme</span> <span class=o>===</span> <span class=s1>'dark'</span> <span class=o>?</span> <span class=s1>'default'</span> <span class=o>:</span> <span class=s1>'dark'</span><span class=p>;</span> 365</span></span><span class=line><span class=cl> <span class=nb>document</span><span class=p>.</span><span class=nx>body</span><span class=p>.</span><span class=nx>dataset</span><span class=p>.</span><span class=nx>theme</span> <span class=o>=</span> <span class=nx>newTheme</span><span class=p>;</span> 366</span></span><span class=line><span class=cl> <span class=p>}</span> 367</span></span><span class=line><span class=cl> <span class=p></</span><span class=nt>script</span><span class=p>></span> 368</span></span><span class=line><span class=cl> <span class=p><</span><span class=nt>button</span> <span class=na>id</span><span class=o>=</span><span class=s>"toggler"</span><span class=p>></span>忢䏻é¢<span class=p></</span><span class=nt>button</span><span class=p>></span> 369</span></span><span class=line><span class=cl> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"diagrams-container"</span><span class=p>></span> 370</span></span><span class=line><span class=cl> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"mermaid-container"</span><span class=p>></span> 371</span></span><span class=line><span class=cl> <span class=p><</span><span class=nt>pre</span> <span class=na>class</span><span class=o>=</span><span class=s>"mermaid"</span><span class=p>></span>graph TD; 372</span></span><span class=line><span class=cl> A[å¼å§] --> B{æ¯å¦å®æï¼}; 373</span></span><span class=line><span class=cl> B -- æ¯ --> C[ç»æ]; 374</span></span><span class=line><span class=cl> B -- å¦ --> D[ç»§ç»]; 375</span></span><span class=line><span class=cl> D --> B; 376</span></span><span class=line><span class=cl> <span class=p></</span><span class=nt>pre</span><span class=p>></span> 377</span></span><span class=line><span class=cl> <span class=p><</span><span class=nt>pre</span> <span class=na>class</span><span class=o>=</span><span class=s>"mermaid-dark"</span><span class=p>></span>graph TD; 378</span></span><span class=line><span class=cl> A[å¼å§] --> B{æ¯å¦å®æï¼}; 379</span></span><span class=line><span class=cl> B -- æ¯ --> C[ç»æ]; 380</span></span><span class=line><span class=cl> B -- å¦ --> D[ç»§ç»]; 381</span></span><span class=line><span class=cl> D --> B; 382</span></span><span class=line><span class=cl> <span class=p></</span><span class=nt>pre</span><span class=p>></span> 383</span></span><span class=line><span class=cl> <span class=p></</span><span class=nt>div</span><span class=p>></span> 384</span></span><span class=line><span class=cl> <span class=p></</span><span class=nt>div</span><span class=p>></span> 385</span></span><span class=line><span class=cl> 386</span></span><span class=line><span class=cl> <span class=p><</span><span class=nt>script</span> <span class=na>type</span><span class=o>=</span><span class=s>"module"</span><span class=p>></span> 387</span></span><span class=line><span class=cl> <span class=kr>
387import</span> <span class=nx>mermaid</span> <span class=nx>from</span> <span class=s1>'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs'</span><span class=p>;</span> 388</span></span><span class=line><span class=cl> 389</span></span><span class=line><span class=cl> <span class=kr>async</span> <span class=kd>function</span> <span class=nx>loadMermaid</span><span class=p>(</span><span class=nx>theme</span><span class=p>)</span> <span class=p>{</span> 390</span></span><span class=line><span class=cl> <span class=kr>const</span> <span class=nx>isDark</span> <span class=o>=</span> <span class=nx>theme</span> <span class=o>===</span> <span class=s1>'dark'</span><span class=p>;</span> 391</span></span><span class=line><span class=cl> <span class=kr>const</span> <span class=nx>querySelector</span> <span class=o>=</span> <span class=nx>isDark</span> <span class=o>?</span> <span class=s1>'.mermaid-dark'</span> <span class=o>:</span> <span class=s1>'.mermaid'</span><span class=p>;</span> 392</span></span><span class=line><span class=cl> <span class=nx>mermaid</span><span class=p>.</span><span class=nx>initialize</span><span class=p>({</span> <span class=nx>startOnLoad</span><span class=o>:</span> <span class=kc>false</span><span class=p>,</span> <span class=nx>darkMode</span><span class=o>:</span> <span class=nx>isDark</span><span class=p>,</span> <span class=nx>theme</span> <span class=p>});</span> 393</span></span><span class=line><span class=cl> <span class=c1>// Mermaid run 彿°å é¨ä¼è·³è¿ data-processed çå ç´ ï¼æä»¥è¿æ ·ä¸ä¼é夿¸²æ 394</span></span></span><span class=line><span class=cl> <span class=kr>await</span> <span class=nx>mermaid</span><span class=p>.</span><span class=nx>run</span><span class=p>({</span> <span class=nx>querySelector</span> <span class=p>});</span> 395</span></span><span class=line><span class=cl> <span class=p>}</span> 396</span></span><span class=line><span class=cl> 397</span></span><span class=line><span class=cl> <span class=kr>await</span> <span class=nx>loadMermaid</span><span class=p>(</span><span class=s1>'default'</span><span class=p>)</span> 398</span></span><span class=line><span class=cl> 399</span></span><span class=line><span class=cl> <span class=nb>document</span><span class=p>.</span><span class=nx>getElementById</span><span class=p>(</span><span class=s1>'toggler'</span><span class=p>).</span><span class=nx>addEventListener</span><span class=p>(</span><span class=s1>'click'</span><span class=p>,</span> <span class=p>()</span> <span class=p>=></span> <span class=p>{</span> 400</span></span><span class=line><span class=cl> <span class=kr>const</span> <span class=nx>currentTheme</span> <span class=o>=</span> <span class=nb>document</span><span class=p>.</span><span class=nx>body</span><span class=p>.</span><span class=nx>dataset</span><span class=p>.</span><span class=nx>theme</span> <span class=o>||</span> <span class=s1>'default'</span><span class=p>;</span> 401</span></span><span class=line><span class=cl> <span class=kr>const</span> <span class=nx>newTheme</span> <span class=o>=</span> <span class=nx>currentTheme</span> <span class=o>===</span> <span class=s1>'dark'</span> <span class=o>?</span> <span class=s1>'default'</span> <span class=o>:</span> <span class=s1>'dark'</span><span class=p>;</span> 402</span></span><span class=line><span class=cl> <span class=nb>document</span><span class=p>.</span><span class=nx>body</span><span class=p>.</span><span class=nx>dataset</span><span class=p>.</span><span class=nx>theme</span> <span class=o>=</span> <span class=nx>newTheme</span><span class=p>;</span> 403</span></span><span class=line><span class=cl> <span class=nx>loadMermaid</span><span class=p>(</span><span class=nx>newTheme</span><span class=p>);</span> 404</span></span><span class=line><span class=cl> <span class=p>});</span> 405</span></span><span class=line><span class=cl> <span class=p></</span><span class=nt>script</span><span class=p>></span> 406</span></span><span class=line><span class=cl><span class=p></</span><span class=nt>body</span><span class=p>></span> 407</span></span><span class=line><span class=cl><span class=p></</span><span class=nt>html</span><span class=p>></span></span></span></code></pre></td></tr></table></div><button type=button class=code-expand-btn aria-label=å±å¼ææå 代ç å><i class="fa-solid fa-angles-down" aria-hidden=true></i></button></div></div><h2 class=heading-element id=å°ç»ä¸éå建议><span>å°ç»ä¸éå建议</span> 408<a href=#%e5%b0%8f%e7%bb%93%e4%b8%8e%e9%80%89%e5%9e%8b%e5%bb%ba%e8%ae%ae class=heading-mark>
408<svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5.0 114.95 4.95l-2.5 2.5a3.5 3.5.0 01-4.95.0.751.751.0 01.018-1.042.751.751.0 011.042-.018 1.998 1.998.0 002.83.0l2.5-2.5a2.002 2.002.0 00-2.83-2.83l-1.25 1.25a.751.751.0 01-1.042-.018.751.751.0 01-.018-1.042zm-4.69 9.64a1.998 1.998.0 002.83.0l1.25-1.25a.751.751.0 011.042.018.751.751.0 01.018 1.042l-1.25 1.25a3.5 3.5.0 11-4.95-4.95l2.5-2.5a3.5 3.5.0 014.95.0.751.751.0 01-.018 1.042.751.751.0 01-1.042.018 1.998 1.998.0 00-2.83.0l-2.5 2.5a1.998 1.998.0 000 2.83z"/></svg></a></h2><p>æ¯åº¸ç½®çï¼æ³è¦å®ç¾çä½éªï¼<strong>æ¹æ¡ 3ï¸â£</strong> æ¯æä¼éæ©ï¼ <strong>æ¹æ¡ 4ï¸â£</strong> ä½ä¸ºæ¹æ¡ 1ï¸â£ çå级çï¼æ´ä½ä½éªä¹ç¸å¯¹è¾å¥½ã</p><div class=table-wrapper><table data-sortable><thead><tr><th>æ¹æ¡</th><th>å®ç°ææ¬</th><th>ä½éª</th><th>æ¯å¦å®æ¹å¯ç»´æ¤</th></tr></thead><tbody><tr><td>Reinitialize</td><td>ä½</td><td>ä¸çï¼éªå±ï¼</td><td>â </td></tr><tr><td>CSS invert</td><td>æä½</td><td>å·®</td><td>â </td></tr><tr><td>mermaid.live çæ¿æ¢</td><td>é«</td><td>æä½³</td><td>â</td></tr><tr><td>Reinitialize + CSS</td><td>ä¸</td><td>è¾å¥½</td><td>â </td></tr></tbody></table></div><ul><li><strong>å é¨ææ¡£ / å客 / å°å·¥å ·</strong> â æ¹æ¡ 4ï¸â£</li><li><strong>èµ¶æ¶é´ç MVP</strong> â æ¹æ¡ 2ï¸â£</li><li><strong>é¢å C 端ã对ä½éªæç«¯ææ</strong> â æ¹æ¡ 3ï¸â£ï¼ä½è¦åå¤é¿æè·è¿</li></ul></div><div class=post-reward><div class=comment>Buy me a coffee~</div><input type=checkbox class=reward-input name=reward id=fi-reward hidden> 409<label class=reward-button for=fi-reward><i class="fa-solid fa-qrcode" aria-hidden=true></i>èµèµ</label><div class=reward-ways data-mode=fixed><div><img src=/images/alipay.jpg alt="Lruihao æ¯ä»å®"><span data-animation>æ¯ä»å®</span></div><div><img src=/images/wechatpay.jpg alt="Lruihao 微信"><span data-animation>微信</span></div></div></div><div class=post-footer id=post-footer><div class=post-info><div class=post-info-line><div class=post-info-mod><span title="æ´æ°äº 2025-08-16 14:56:28">æ´æ°äº 2025-08-16 <a class=git-hash href=https://github.com/Lruihao/hugo-blog/commit/429eb0297752c7ee0f47c529cb6b835e8f6a0be0 rel="external nofollow noopener noreferrer" target=_blank title="Docs: 让 Mermaid å¾è¡¨èªå¨è·éç³»ç»æ·±æµ è²

Commit: 429eb0297752c7ee0f47c529cb6b835e8f6a0be0 [429eb02]
Author: Cell<[email protected]>
Date: 2025-08-16 14:56:28
Commit Date: 2025-08-17 14:36:08"><i class="fa-solid fa-hashtag" aria-hidden=true></i>429eb02</a></span></div><div class=post-info-license><span><a rel="license external nofollow noopener noreferrer" href=https://creativecommons.org/licenses/by-nc-sa/4.0/ target=_blank>CC BY-NC-SA 4.0</a></span></div></div><div class=post-info-line><div class=post-info-md><span><a href=/posts/mermaid-theming/index.md title=é 读åå§ææ¡£ class=link-to-markdown>é 读åå§ææ¡£</a></span><span><a href="https://github.com/Lruihao/hugo-blog/blob/docs/content/posts/_frontend/mermaid-theming/index.md?plain=1" title=æ¥çæºç target=_blank rel="external nofollow noopener noreferrer" class=link-to-source>æ¥çæºç </a></span><span><a href=https://github.com/Lruihao/hugo-blog/edit/docs/content/posts/_frontend/mermaid-theming/index.md title=ç¼è¾æ¤é¡µ target=_blank rel="external nofollow noopener noreferrer" class=link-to-edit>ç¼è¾æ¤é¡µ</a></span><span><a href="https://github.com/Lruihao/hugo-blog/issues/new?title=[BUG]%20%E8%AE%A9+Mermaid+%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E8%B7%9F%E9%9A%8F%E7%B3%BB%E7%BB%9F%E6%B7%B1%E6%B5%85%E8%89%B2&body=|Field|Value|%0A|-|-|%0A|Title|%E8%AE%A9+Mermaid+%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E8%B7%9F%E9%9A%8F%E7%B3%BB%E7%BB%9F%E6%B7%B1%E6%B5%85%E8%89%B2|%0A|URL|https://lruihao.cn/posts/mermaid-theming/|%0A|Filename|https://github.com/Lruihao/hugo-blog/blob/docs/content/posts/_frontend/mermaid-theming/index.md?plain=1|" title=æ¥åé®é¢ target=_blank rel="external nofollow noopener noreferrer" class=link-to-report>æ¥åé®é¢</a></span></div><div class=post-info-share><span><a href=javascript:void(0); title="åäº«å° X" data-sharer=twitter data-url=https://lruihao.cn/posts/mermaid-theming/ data-title="让 Mermaid å¾è¡¨èªå¨è·éç³»ç»æ·±æµ è²" data-hashtags="invert filter,Mermaid,prefers-color-scheme,FixIt"><i class="fa-brands fa-x-twitter" aria-hidden=true></i></a> 410<a href=javascript:void(0); title="åäº«å° Facebook" data-sharer=facebook data-url=https://lruihao.cn/posts/mermaid-theming/ data-hashtag="invert filter"><i class="fa-brands fa-facebook-square" aria-hidden=true></i></a> 411<a href=javascript:void(0); title="åäº«å° Linkedin" data-sharer=linkedin data-url=https://lruihao.cn/posts/mermaid-theming/><i class="fa-brands fa-linkedin" aria-hidden=true></i></a> 412<a href=javascript:void(0); title="åäº«å° å¾®å" data-sharer=weibo data-url=https://lruihao.cn/posts/mermaid-theming/ data-title="让 Mermaid å¾è¡¨èªå¨è·éç³»ç»æ·±æµ è²" data-image=/posts/mermaid-theming/featured-image.webp data-ralateuid=liahao><i class="fa-brands fa-weibo" aria-hidden=true></i></a> 413<a href=javascript:void(0); title="åäº«å° ç¾åº¦" data-sharer=baidu data-url=https://lruihao.cn/posts/mermaid-theming/ data-title="让 Mermaid å¾è¡¨èªå¨è·éç³»ç»æ·±æµ è²"><i data-svg-src=https://unpkg.com/[email protected]/icons/baidu.svg aria-hidden=true></i></a></span></div></div></div><div class=post-info-more><section class=post-tags><i class="fa-solid fa-tags me-1" aria-hidden=true></i><a href=/tags/invert-filter/ class=post-tag title="æ ç¾ - invert filter">invert filter</a><a href=/tags/mermaid/ class=post-tag title="æ ç¾ - Mermaid">Mermaid</a><a href=/tags/prefers-color-scheme/ class=post-tag title="æ ç¾ - prefers-color-scheme">prefers-color-scheme</a><a href=/tags/fixit/ class=post-tag title="æ ç¾ - FixIt">FixIt</a></section><section><span><a href=javascript:void(0); onclick=window.history.back()>è¿å</a></span> | <span><a href=/>主页</a></span></section></div><div class=post-nav><a href=/posts/wc-01-prologue/ class=post-nav-item rel=prev title=é»çåºå
413 ³ã»ä¸æé¥å宿±æ¹><i class="fa-solid fa-angle-left" aria-hidden=true></i>é»çåºå ³ã»ä¸æé¥å宿±æ¹</a><a href=/projects/lruihao/auto-changelog-plus/ class=post-nav-item rel=next title=Lruihao/auto-changelog-plus>Lruihao/auto-changelog-plus<i class="fa-solid fa-angle-right" aria-hidden=true></i></a></div></div><div class=post-footer__after><div class="sm:hidden text-center"><img src=/images/wxmp.webp alt=å¾®ä¿¡å ¬ä¼å· width=70%></div></div></article><aside class="toc animate__animated animate__fadeIn animate__faster" id=toc-auto aria-label=ç®å½><h2 class=toc-title><span>ç®å½<i class="toc-icon fa-solid fa-angle-down ms-1" aria-hidden=true></i></span> 414<button type=button class=toc-print-btn onclick=event.stopPropagation(),window.print() aria-label=æå°><i class="fa-solid fa-print" aria-hidden=true></i></button></h2><div class=toc-content id=toc-content-auto></div></aside></main><div id=comments><div id=giscus class=comment>
414<script src=https://giscus.app/client.js data-repo=Lruihao/hugo-blog data-repo-id data-category=General data-category-id data-mapping=title data-strict=0 data-theme=preferred_color_scheme data-reactions-enabled data-emit-metadata data-input-position data-lang=zh-CN data-loading=lazy crossorigin=anonymous async defer></script>
414</div><noscript>Please enable JavaScript to view the comments powered by <a href=https://giscus.app/ rel="external nofollow noopener noreferrer">giscus</a>.</noscript></div><footer class=footer><div class=footer-container><div class="footer-line powered order-1">ç± <a href="https://github.com/gohugoio/hugo?v=0.165.0" target=_blank rel="external nofollow noopener noreferrer" title="Hugo 0.165.0"><img class=hugo-icon src=/images/hugo.min.svg alt="Hugo logo"> Hugo</a> 强åé©±å¨ | ä¸»é¢ - <a href="https://github.com/hugo-fixit/FixIt?v=v1.0.0-alpha-mtcmp1fx" target=_blank rel=external title="FixIt v1.0.0-alpha-mtcmp1fx"><img class=fixit-icon src=/images/fixit.min.svg alt="FixIt logo"> FixIt</a></div><div class="footer-line copyright order-2" itemscope itemtype=http://schema.org/CreativeWork><i class="fa-regular fa-copyright" aria-hidden=true></i> 415<span itemprop=copyrightYear>2018 - 2026</span><span class=author itemprop=copyrightHolder> 416<a href=https://github.com/Lruihao target=_blank rel="external nofollow noopener noreferrer">Lruihao</a></span><span class="license footer-divider"><a rel="license external nofollow noopener noreferrer" href=https://creativecommons.org/licenses/by-nc-sa/4.0/ target=_blank>CC BY-NC-SA 4.0</a></span></div><div class="footer-line statistics order-3"><span class=site-time title=ç½ç«è¿è¡ä¸â¦â¦><i class="fa-solid fa-heartbeat animate-icon" aria-hidden=true></i><span class="ms-1 hidden">å客已è¿è¡</span><span class="run-times tabular-nums lining-nums ms-1">ç½ç«è¿è¡ä¸â¦â¦</span></span></div><div class="footer-line visitor order-4"><span id=busuanzi_container_site_uv title=æ»è®¿å®¢æ°><i class="fa-regular fa-user me-1" aria-hidden=true></i><span id=busuanzi_value_site_uv><i class="fa-solid fa-spinner fa-spin" aria-hidden=true></i></span></span><span id=busuanzi_container_site_pv class=footer-divider title=æ»è®¿é®é><i class="fa-regular fa-eye me-1" aria-hidden=true></i><span id=busuanzi_value_site_pv><i class="fa-solid fa-spinner fa-spin" aria-hidden=true></i></span></span></div></div></footer></div><div class=widgets><a href=https://github.com/Lruihao/hugo-blog title="å¨ GitHub 䏿¥çæºç ï¼è®¢é è¯·ç¹ Watch~" target=_blank rel="external nofollow" class="github-corner end max-sm:hidden"><svg viewBox="0 0 250 250" aria-hidden="true" width="56" height="56"><path d="M0 0 115 115h15l12 27L250 250V0z"/><path d="M128.3 109C113.8 99.7 119 89.6 119 89.6 122 82.7 120.5 78.6 120.5 78.6 119.2 72 123.4 76.3 123.4 76.3 127.3 80.9 125.5 87.3 125.5 87.3 122.9 97.6 130.6 101.9 134.4 103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"/><path d="M115 115C114.9 115.1 118.7 116.5 119.8 115.4l13.9-13.8C136.9 99.2 139.9 98.4 142.2 98.6 133.8 88 127.5 74.4 143.8 58 148.5 53.4 154 51.2 159.7 51 160.3 49.4 163.2 43.6 171.4 40.1 171.4 40.1 176.1 42.5 178.8 56.2 183.1 58.6 187.2 61.8 190.9 65.4 194.5 69 197.7 73.2 200.1 77.6 213.8 80.2 216.3 84.9 216.3 84.9 212.7 93.1 206.9 96 205.4 96.6 205.1 102.4 203 107.8 198.3 112.5 181.9 128.9 168.3 122.5 157.7 114.1 157.9 116.9 156.7 120.9 152.7 124.9L141 136.5C139.8 137.7 141.6 141.9 141.8 141.8z" fill="currentColor" class="octo-body"/></svg></a><div id=mask></div><dialog id=nav-dialog aria-labelledby=nav-dialog-title closedby=any><button type=button class=nav-close-btn aria-label="Close 导èª"><i class="fa-solid fa-xmark fa-lg" aria-hidden=true></i></button><div class=toc><h2 class=toc-title id=nav-dialog-title>导èª</h2><div class=toc-content id=toc-content-drawer></div></div></dialog><dialog id=search-dialog class=search-dialog aria-label=æç´¢ closedby=any><div class=search-modal><div class=search-modal-header><span class=search-delimiter></span> 417<button type=button class=search-close-btn aria-label="Close Search Dialog"><i class="fa-solid fa-xmark" aria-hidden=true></i></button></div><div class=search-source-footer><div class=search-shortcuts><span class=search-shortcut><kbd><i class=lucide-arrow-up aria-hidden=true></i></kbd> 418<kbd><i class=lucide-arrow-down aria-hidden=true></i></kbd> 419忢 420</span><span class=search-shortcut><kbd><i class=lucide-corner-down-left aria-hidden=true></i></kbd> 421éæ© 422</span><span class=search-shortcut><kbd>ESC</kbd> 423å ³é</span></div><span class=search-engine>æç´¢å¼æ <a href=https://www.algolia.com/ target=_blank rel="external nofollow noopener noreferrer"><i class="fa-brands fa-algolia" aria-hidden=true></i> 424algolia</a></span></div></div></dialog><div class=reading-progress-bar style=inset-inline-start:0;top:0;--fi-bg-progress:#8581dd;--fi-bg-progress-dark:#fff></div><div class=sw-update-notification><div class=sw-update-content><p class=sw-update-title>åç°æ°çæ¬</p><p class=sw-update-text>å½åç«ç¹ææ°çæ¬å¯ç¨ã</p></div><button type=button class=sw-update-btn>å·æ°</button></div><div class=fixed-buttons><button type=button class="fixed-button back-to-top animate__faster hidden" aria-label=åå°é¡¶é¨><i class="fa-solid fa-arrow-up" aria-hidden=true></i><svg viewBox="0 0 100 100"><circle class="bg" cx="50" cy="50" r="50"/><circle class="progress" cx="50" cy="50" r="50"/></svg></button>
424<button type=button id=nav-drawer-button class="fixed-button nav-drawer-button hidden" aria-label=å¯¼èª aria-controls=nav-dialog aria-expanded=false><i class="fa-solid fa-bars" aria-hidden=true></i></button><button type=button class="fixed-button view-comments hidden" aria-label=æ¥çè¯è®º><i class="fa-solid fa-comment" aria-hidden=true></i></button></div><noscript><div class="noscript-warning bg-danger text-white text-base font-bold fixed text-center inset-x-0 bottom-0 w-full z-fixed">该ç½ç«å¨å¯ç¨ JavaScript çæ
åµä¸æææä½³ã</div></noscript></div><link rel=stylesheet href=/css/santa-hat.fixit.min.min.css><link rel=stylesheet href=https://unpkg.com/[email protected]/css/lightgallery-bundle.min.css><link rel=stylesheet href=https://unpkg.com/[email protected]/build/cookieconsent.min.css><link rel=stylesheet href=https://unpkg.com/[email protected]/themes/blue/pace-theme-minimal.css><link rel=stylesheet href=https://ai.zhheo.com/static/public/postChatUser_summary.min.css>
424<script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.js?features=Array.prototype.fill%2CArray.prototype.find%2CArray.from%2CIntersectionObserver%2CMath.sign%2CObject.assign%2CPromise%2CObject.entries%2Chtml5shiv%2CObject.values%2Cfetch%2CElement.prototype.after"></script>
424<script src=/js/lib/giscus.min.js defer></script>
424<script src=https://unpkg.com/@algolia/[email protected]/dist/umd/index.production.js defer></script>
424<script src=https://unpkg.com/[email protected]/dist/lite/builds/browser.umd.js defer></script>
424<script src=https://unpkg.com/[email protected]/instantpage.js async defer type=module></script>
424<script src=https://unpkg.com/@panzoom/[email protected]/dist/panzoom.min.js defer></script>
424<script src=https://unpkg.com/[email protected]/lightgallery.min.js defer></script>
424<script src=https://unpkg.com/[email protected]/plugins/thumbnail/lg-thumbnail.min.js defer></script>
424<script src=https://unpkg.com/[email protected]/plugins/zoom/lg-zoom.min.js defer></script>
424<script src=/js/lib/lightgallery.min.js defer></script>
424<script src=https://unpkg.com/[email protected]/sharer.min.js async defer></script>
424<script src=https://unpkg.com/[email protected]/build/cookieconsent.min.js defer></script>
424<script src=/js/lib/cookieconsent.min.js defer></script>
424<script src=https://unpkg.com/[email protected]/dist/browser/pangu.min.js defer></script>
424<script src=/js/lib/pangu.min.js defer></script>
424<script src=https://unpkg.com/[email protected]/dist/cell-tooltip.umd.js defer></script>
424<script src=https://unpkg.com/[email protected]/src/watermark.js defer></script>
424<script src=/js/lib/watermark.min.js defer></script>
424<script src=/js/lib/table-sort.min.js defer></script>
424<script src=https://vercount.one/js async defer></script>
424<script src=https://unpkg.com/[email protected]/pace.min.js async defer></script>
424<script src=/js/config/post-chat/f4a09c8a767f701b81df89c1ef7b3512.js defer></script>
424<script src=https://ai.zhheo.com/static/public/tianli_gpt.min.js defer></script>
424<script src=/js/config/f4a09c8a767f701b81df89c1ef7b3512.min.js defer></script>
424<script src=/js/lib/file-tree.min.js defer></script>
424<script src=/js/lib/mermaid-bootstrap.min.js defer type=module></script>
424<script src=/js/main.min.js defer></script>
424<script src=/js/flyfish.min.min.js defer></script>
424<script src=/js/santa-hat.fixit.min.min.js async defer></script>
424<script src=/lib/translate.min.js defer></script>
424<script src=/js/config/auto-translate/f4a09c8a767f701b81df89c1ef7b3512.js defer></script>
424<script src=/js/translate.fixit.min.js defer></script>
424<script src=/js/custom.min.js defer></script>
424<script async defer data-website-id=4049c0b0-87c9-4573-8ae5-d84449e40e05 src=https://cloud.umami.is/script.js></script>
424</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.