mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-26 11:38:15 +08:00
370 lines
219 KiB
HTML
370 lines
219 KiB
HTML
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" /><meta name="generator" content="VuePress 2.0.0-rc.28" /><meta name="theme" content="VuePress Theme Plume 1.0.0-rc.195" /><script id="check-mac-os">document.documentElement.classList.toggle('mac', /Mac|iPhone|iPod|iPad/i.test(navigator.platform))</script><script id="check-dark-mode">;(function () {const um= localStorage.getItem('vuepress-theme-appearance') || 'auto';const sm = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = um === 'dark' || (um !== 'light' && sm);document.documentElement.dataset.theme = isDark ? 'dark' : 'light';})();</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","headline":"mermaid","image":[""],"dateModified":"2025-10-07T15:13:09.000Z","author":[]}</script><meta property="og:url" content="https://theme-plume.vuejs.press/guide/chart/mermaid/"><meta property="og:site_name" content="Plume 主题"><meta property="og:title" content="mermaid"><meta property="og:description" content="概述 主题支持在 文章中 嵌入由 Mermaid 。 该功能由 @vuepress/plugin-markdown-chart 提供支持。 配置 主题默认不启用该功能。 你需要在你的项目中安装 mermaid 库。 然后在 .vuepress/config.ts 配置文件中,启用该功能: .vuepress/config.ts 注 以下文档 Fork ..."><meta property="og:type" content="article"><meta property="og:locale" content="zh-CN"><meta property="og:locale:alternate" content="en-US"><meta property="og:updated_time" content="2025-10-07T15:13:09.000Z"><meta property="article:modified_time" content="2025-10-07T15:13:09.000Z"><link rel="alternate" hreflang="en-us" href="https://theme-plume.vuejs.press/en/guide/chart/mermaid/"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><meta name="google-site-verification" content="AaTP7bapCAcoO9ZGE67ilpy99GL6tYqtD30tRHjO9Ps"><title>mermaid | 指南 | Plume 主题</title><meta name="description" content="概述 主题支持在 文章中 嵌入由 Mermaid 。 该功能由 @vuepress/plugin-markdown-chart 提供支持。 配置 主题默认不启用该功能。 你需要在你的项目中安装 mermaid 库。 然后在 .vuepress/config.ts 配置文件中,启用该功能: .vuepress/config.ts 注 以下文档 Fork ..."><link rel="preload" href="/assets/style-DnsiUdcZ.css" as="style"><link rel="stylesheet" href="/assets/style-DnsiUdcZ.css"><link rel="modulepreload" href="/assets/app-B2DsuqVi.js"><link rel="modulepreload" href="/assets/plugin-vue_export-helper-CxTVcLa7.js"><link rel="modulepreload" href="/assets/chunk-DseTPa7n.js"><link rel="modulepreload" href="/assets/preload-helper-ca-nBW7U.js"><link rel="modulepreload" href="/assets/composables-DsGBjQEX.js"><link rel="modulepreload" href="/assets/VPHomeHero-D17FBc21.js"><link rel="modulepreload" href="/assets/composables-3J5ZwNFM.js"><link rel="modulepreload" href="/assets/client-C5e5tgZO.js"><link rel="modulepreload" href="/assets/theme-colors-bZHGy5AR.js"><link rel="modulepreload" href="/assets/VPButton-CjpnmuwG.js"><link rel="modulepreload" href="/assets/runtime-core.esm-bundler-CZvn3YaB.js"><link rel="modulepreload" href="/assets/runtime-dom.esm-bundler-DTRCDnrc.js"><link rel="modulepreload" href="/assets/dist-CMy7OcvW.js"><link rel="modulepreload" href="/assets/codeRepl-BV_0qCs3.js"><link rel="modulepreload" href="/assets/VPCopyright-DQT4wCul.js"><link rel="modulepreload" href="/assets/mermaid-D_F3usC0.js"></head><body><div id="app"><!--[--><!--[--><div class="theme-plume vp-layout" vp-container data-v-a5aadcf6><!--[--><!--[--><!--]--><!--[--><span tabindex="-1" data-v-26bc9d93></span><a href="#VPContent" class="vp-skip-link visually-hidden" data-v-26bc9d93> Skip to content </a><!--]--><!----><header class="vp-nav" data-v-a5aadcf6 data-v-f81e37e9><div class="vp-navbar" vp-navbar data-v-f81e37e9 data-v-b90976a4><div class="wrapper" data-v-b90976a4><div class="container" data-v-b90976a4><div class="title" data-v-b90976a4><div class="vp-navbar-title has-sidebar" data-v-b90976a4 data-v-f77fe1b1><a class="vp-link link no-icon title" href="/" data-v-f77fe1b1><!--[--><!--[--><!--]--><!--[--><!--[--><!--[--><img class="vp-image dark logo" style="" src="/plume.png" alt data-v-414baac9><!--]--><!--[--><img class="vp-image light logo" style="" src="/plume.png" alt data-v-414baac9><!--]--><!--]--><!--]--><span data-v-f77fe1b1>Plume 主题</span><!--[--><!--]--><!--]--><!--[--><!--]--><!----></a></div></div><div class="content" data-v-b90976a4><div class="content-body" data-v-b90976a4><!--[--><!--]--><div class="vp-navbar-search search" data-v-b90976a4><div class="search-wrapper" data-v-62419745><!----><div id="local-search" data-v-62419745><button type="button" class="mini-search mini-search-button" aria-label="搜索文档" data-v-62419745><span class="mini-search-button-container"><span class="mini-search-search-icon vpi-mini-search" aria-label="search icon"></span><span class="mini-search-button-placeholder">搜索文档</span></span><span class="mini-search-button-keys"><kbd class="mini-search-button-key"></kbd><kbd class="mini-search-button-key">K</kbd></span></button></div></div></div><!--[--><!--]--><nav aria-labelledby="main-nav-aria-label" class="vp-navbar-menu menu" data-v-b90976a4 data-v-b42927e7><span id="main-nav-aria-label" class="visually-hidden" data-v-b42927e7>Main Navigation</span><!--[--><!--[--><a class="vp-link link navbar-menu-link active" href="/guide/intro/" tabindex="0" data-v-b42927e7 data-v-29cf8989><!--[--><span class="vp-icon vpi-icon-park-outline-guide-board" style="" aria-hidden data-provider="iconify" data-v-29cf8989></span><span data-v-29cf8989>指南</span><!----><!--]--><!--[--><!--]--><!----></a><!--]--><!--[--><a class="vp-link link navbar-menu-link" href="/config/intro/" tabindex="0" data-v-b42927e7 data-v-29cf8989><!--[--><span class="vp-icon vpi-icon-park-outline-setting-two" style="" aria-hidden data-provider="iconify" data-v-29cf8989></span><span data-v-29cf8989>配置</span><!----><!--]--><!--[--><!--]--><!----></a><!--]--><!--[--><a class="vp-link link navbar-menu-link" href="/blog/" tabindex="0" data-v-b42927e7 data-v-29cf8989><!--[--><span class="vp-icon vpi-material-symbols-article-outline" style="" aria-hidden data-provider="iconify" data-v-29cf8989></span><span data-v-29cf8989>博客</span><!----><!--]--><!--[--><!--]--><!----></a><!--]--><!--[--><a class="vp-link link navbar-menu-link" href="/demos/" tabindex="0" data-v-b42927e7 data-v-29cf8989><!--[--><span class="vp-icon vpi-map-wind-surfing" style="" aria-hidden data-provider="iconify" data-v-29cf8989></span><span data-v-29cf8989>案例</span><!----><!--]--><!--[--><!--]--><!----></a><!--]--><!--[--><div class="vp-flyout vp-navbar-menu-group" data-v-b42927e7 data-v-15bfbb59><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-15bfbb59><span class="text" data-v-15bfbb59><span class="vp-icon vpi-icon-park-outline-more-three" style="" aria-hidden data-provider="iconify" data-v-15bfbb59></span><!----><span data-v-15bfbb59>更多</span><!----><span class="vpi-chevron-down text-icon" data-v-15bfbb59></span></span></button><div class="menu" data-v-15bfbb59><div class="vp-menu" data-v-15bfbb59 data-v-f3964f32><div class="items" data-v-f3964f32><!--[--><!--[--><div class="vp-menu-link" data-v-f3964f32 data-v-e06ddb34><a class="vp-link link" href="/faq/" data-v-e06ddb34><!--[--><span class="vp-icon vpi-wpf-faq" style="" aria-hidden data-provider="iconify" data-v-e06ddb34></span> 常见问题 <!----><!--]--><!--[--><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-f3964f32 data-v-e06ddb34><a class="vp-link link" href="/sponsor/" data-v-e06ddb34><!--[--><span class="vp-icon vpi-line-md-coffee-loop" style="" aria-hidden data-provider="iconify" data-v-e06ddb34></span> 喝杯奶茶 <!----><!--]--><!--[--><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-f3964f32 data-v-e06ddb34><a class="vp-link link" href="/tools/" data-v-e06ddb34><!--[--><span class="vp-icon vpi-jam-tools" style="" aria-hidden data-provider="iconify" data-v-e06ddb34></span> 主题工具 <!----><!--]--><!--[--><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-f3964f32 data-v-e06ddb34><a class="vp-link link" href="/friends/" data-v-e06ddb34><!--[--><span class="vp-icon vpi-carbon-friendship" style="" aria-hidden data-provider="iconify" data-v-e06ddb34></span> 友情链接 <!----><!--]--><!--[--><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-group" data-v-f3964f32 data-v-6c770283><p class="title" data-v-6c770283><span class="vp-icon vpi-logos-vue bg" style="" aria-hidden data-provider="iconify" data-v-6c770283></span><span data-v-6c770283>Vuepress</span></p><!--[--><!--[--><div class="vp-menu-link" data-v-6c770283 data-v-e06ddb34><a class="vp-link link vp-external-link-icon" href="https://v2.vuepress.vuejs.org" target="_blank" rel="noopener noreferrer" data-v-e06ddb34><!--[--><span class="vp-icon vpi-logos-vue bg" style="" aria-hidden data-provider="iconify" data-v-e06ddb34></span> 官方文档 <!----><!--]--><!--[--><!--]--><span class="visually-hidden">(在新窗口打开)</span></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-6c770283 data-v-e06ddb34><a class="vp-link link vp-external-link-icon" href="https://ecosystem.vuejs.press/" target="_blank" rel="noopener noreferrer" data-v-e06ddb34><!--[--><span class="vp-icon vpi-logos-vue bg" style="" aria-hidden data-provider="iconify" data-v-e06ddb34></span> 生态系统 <!----><!--]--><!--[--><!--]--><span class="visually-hidden">(在新窗口打开)</span></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vp-flyout vp-navbar-menu-group" data-v-b42927e7 data-v-15bfbb59><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-15bfbb59><span class="text" data-v-15bfbb59><span class="vp-icon vpi-codicon-versions" style="" aria-hidden data-provider="iconify" data-v-15bfbb59></span><!----><span data-v-15bfbb59>1.0.0-rc.195</span><span class="vp-badge tip vp-menu-badge" style="" data-v-15bfbb59 data-v-52c8341f><!--[-->新<!--]--></span><span class="vpi-chevron-down text-icon" data-v-15bfbb59></span></span></button><div class="menu" data-v-15bfbb59><div class="vp-menu" data-v-15bfbb59 data-v-f3964f32><div class="items" data-v-f3964f32><!--[--><!--[--><div class="vp-menu-link" data-v-f3964f32 data-v-e06ddb34><a class="vp-link link" href="/changelog/" data-v-e06ddb34><!--[--><!----> 更新日志 <!----><!--]--><!--[--><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-f3964f32 data-v-e06ddb34><a class="vp-link link" href="/contributing/" data-v-e06ddb34><!--[--><!----> 参与贡献 <!----><!--]--><!--[--><!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!--[--><!--]--><div class="vp-flyout vp-navbar-translations translations" data-v-b90976a4 data-v-e0a18246 data-v-15bfbb59><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="选择语言" data-v-15bfbb59><span class="text" data-v-15bfbb59><!----><span class="vpi-languages option-icon" data-v-15bfbb59></span><!----><!----><span class="vpi-chevron-down text-icon" data-v-15bfbb59></span></span></button><div class="menu" data-v-15bfbb59><div class="vp-menu" data-v-15bfbb59 data-v-f3964f32><!----><!--[--><!--[--><div class="items" data-v-e0a18246><p class="title" data-v-e0a18246>简体中文</p><!--[--><div class="vp-menu-link" data-v-e0a18246 data-v-e06ddb34><a class="vp-link link" href="/en/guide/chart/mermaid/" data-v-e06ddb34><!--[--><!----> English <!----><!--]--><!--[--><!--]--><!----></a></div><!--]--></div><!--]--><!--]--></div></div></div><div class="vp-navbar-appearance appearance" data-v-b90976a4 data-v-17780d44><button class="vp-switch vp-switch-appearance" type="button" role="switch" aria-checked="false" title data-v-17780d44 data-v-cbe77d87 data-v-36bbbf22><span class="check" data-v-36bbbf22><span class="icon" data-v-36bbbf22><!--[--><span class="vpi-sun sun" data-v-cbe77d87></span><span class="vpi-moon moon" data-v-cbe77d87></span><!--]--></span></span></button></div><div class="vp-social-links vp-navbar-social-links social-links" data-v-b90976a4 data-v-ba70645a data-v-5dc0805d><!--[--><a class="vp-social-link no-icon" href="https://github.com/pengzhanbo/vuepress-theme-plume" aria-label="github" title="github" target="_blank" rel="noopener" data-v-5dc0805d data-v-c5bc2a09><span class="vp-icon vpi-simple-icons-github" style="" aria-hidden data-provider="iconify" data-v-c5bc2a09></span></a><a class="vp-social-link no-icon" href="https://qm.qq.com/q/FbPPoOIscE" aria-label="qq" title="qq" target="_blank" rel="noopener" data-v-5dc0805d data-v-c5bc2a09><span class="vp-icon vpi-simple-icons-qq" style="" aria-hidden data-provider="iconify" data-v-c5bc2a09></span></a><!--]--></div><div class="vp-flyout vp-navbar-extra extra" data-v-b90976a4 data-v-7e94ae84 data-v-15bfbb59><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-15bfbb59><span class="vpi-more-horizontal icon" data-v-15bfbb59></span></button><div class="menu" data-v-15bfbb59><div class="vp-menu" data-v-15bfbb59 data-v-f3964f32><!----><!--[--><!--[--><div class="group translations" data-v-7e94ae84><p class="trans-title" data-v-7e94ae84>简体中文</p><!--[--><div class="vp-menu-link" data-v-7e94ae84 data-v-e06ddb34><a class="vp-link link" href="/en/guide/chart/mermaid/" data-v-e06ddb34><!--[--><!----> English <!----><!--]--><!--[--><!--]--><!----></a></div><!--]--></div><div class="group appearance" data-v-7e94ae84><div class="item appearance" data-v-7e94ae84><p class="label" data-v-7e94ae84>外观</p><div class="appearance-action" data-v-7e94ae84><button class="vp-switch vp-switch-appearance" type="button" role="switch" aria-checked="false" title data-v-7e94ae84 data-v-cbe77d87 data-v-36bbbf22><span class="check" data-v-36bbbf22><span class="icon" data-v-36bbbf22><!--[--><span class="vpi-sun sun" data-v-cbe77d87></span><span class="vpi-moon moon" data-v-cbe77d87></span><!--]--></span></span></button></div></div></div><div class="group social" data-v-7e94ae84><div class="item social-links" data-v-7e94ae84><div class="vp-social-links social-links-list" data-v-7e94ae84 data-v-5dc0805d><!--[--><a class="vp-social-link no-icon" href="https://github.com/pengzhanbo/vuepress-theme-plume" aria-label="github" title="github" target="_blank" rel="noopener" data-v-5dc0805d data-v-c5bc2a09><span class="vp-icon vpi-simple-icons-github" style="" aria-hidden data-provider="iconify" data-v-c5bc2a09></span></a><a class="vp-social-link no-icon" href="https://qm.qq.com/q/FbPPoOIscE" aria-label="qq" title="qq" target="_blank" rel="noopener" data-v-5dc0805d data-v-c5bc2a09><span class="vp-icon vpi-simple-icons-qq" style="" aria-hidden data-provider="iconify" data-v-c5bc2a09></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="vp-navbar-hamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="nav-screen" data-v-b90976a4 data-v-2122c19e><span class="container" data-v-2122c19e><span class="top" data-v-2122c19e></span><span class="middle" data-v-2122c19e></span><span class="bottom" data-v-2122c19e></span></span></button></div></div></div></div><div class="divider" data-v-b90976a4><div class="divider-line" data-v-b90976a4></div></div></div><!----></header><div class="vp-local-nav reached-top has-sidebar" data-v-a5aadcf6 data-v-5171e520><button class="menu" aria-expanded="false" aria-controls="SidebarNav" data-v-5171e520><span class="vpi-align-left menu-icon" data-v-5171e520></span><span class="menu-text" data-v-5171e520>Menu</span></button><div class="vp-local-nav-outline-dropdown" style="--vp-vh:0px;" data-v-5171e520 data-v-d5044118><!----><!----></div></div><!--[--><aside class="vp-sidebar" vp-sidebar data-v-28af193e><div class="curtain" data-v-28af193e></div><nav id="SidebarNav" class="nav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-28af193e><span id="sidebar-aria-label" class="visually-hidden" data-v-28af193e> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-71ba64cb><section class="vp-sidebar-item sidebar-item level-0 collapsible" data-v-71ba64cb data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-carbon-idea" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h2 class="text" data-v-ab4803a9><span data-v-ab4803a9>从这里开始</span><!----></h2><button type="button" class="caret" aria-label="Collapse 从这里开始" aria-expanded="true" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-tooltip-text-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/intro/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>主题介绍</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-grommet-icons-install" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/usage/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>安装与使用</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ph-tree-structure-bold" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/project-structure/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>项目结构</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><section class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fluent-list-bar-tree-16-regular" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/collection/" data-v-ab4803a9><!--[--><h3 class="text" data-v-ab4803a9><span data-v-ab4803a9>集合</span><!----></h3><!--]--><!--[--><!--]--><!----></a><!----></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-post-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/collection/post/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>post 集合</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-streamline-ultimate-sidebar-line-left" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/collection/doc/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>doc 集合</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ph-sidebar-duotone" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/sidebar/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>侧边栏</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mingcute-edit-4-line" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/write/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>编写文章</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-markdown-outline-rounded" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/auto-frontmatter/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>frontmatter</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-light-language" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/locales/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>国际化</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-deployed-code-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/deployment/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>部署</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-clarity-bundle-solid" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/optimize-build/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>构建优化</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section></div><div class="no-transition group" data-v-71ba64cb><section class="vp-sidebar-item sidebar-item level-0 collapsible has-active" data-v-71ba64cb data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fluent-mdl2-edit-create" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h2 class="text" data-v-ab4803a9><span data-v-ab4803a9>写作</span><!----></h2><button type="button" class="caret" aria-label="Collapse 写作" aria-expanded="true" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><section class="vp-sidebar-item sidebar-item level-1 collapsible collapsed" data-v-ab4803a9 data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-markdown-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h3 class="text" data-v-ab4803a9><span data-v-ab4803a9>markdown</span><!----></h3><button type="button" class="caret" aria-label="Expand markdown" aria-expanded="false" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div style="display:none;" data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fluent-markdown-20-filled" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/basic/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>基础</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fluent-mdl2-auto-enhance-on" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/extensions/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>扩展</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ic-outline-data-object" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/attrs/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>属性支持</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-emoji-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/emoji/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>emoji</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-tabler-math" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/math/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>数学公式</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-table-plus" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/table/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>table 增强</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-grommet-icons-emoji" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/icon/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>图标</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mingcute-mark-pen-line" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/mark/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>马克笔</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-weui-eyes-off-outlined" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/plot/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>隐秘文本</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-tooltip-question-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/abbreviation/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>缩写词</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-iconamoon-comment-add-light" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/annotation/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>内容注释</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-message-text-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/container/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>提示容器</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-alert-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/github-alerts/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Github 警报</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-solar-card-broken" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/card/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>卡片</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-streamline-steps-number" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/steps/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>步骤</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-file-tree" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/file-tree/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>文件树</span><span class="vp-badge warning vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->变更<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-stash-side-peek" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/code-tree/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>代码树</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-solar-text-field-linear" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/field/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>字段容器</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-vaadin-tabs" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/tabs/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>选项组</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-uiw-qrcode" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/qrcode/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>二维码</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-timeline-text-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/timeline/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>时间线</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fxemoji-window bg" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/window/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>示例容器</span><span class="vp-badge warning vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->变更<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-light-flex-no-wrap" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/flex/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Flex 容器</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-carbon-collapse-categories" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/collapse/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>折叠面板</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-gg-npm" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/npm-to/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>npmTo 容器</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-streamline-desktop-help" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/caniuse/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Can I Use</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-cil-chat-bubble" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/chat/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>对话记录</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fluent-table-simple-include-16-regular" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/include/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>导入文件</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-eos-icons-env" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/env/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>环境预设</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-simple-icons-obsidian" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/obsidian/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Obsidian 兼容</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section><section class="vp-sidebar-item sidebar-item level-1 collapsible collapsed" data-v-ab4803a9 data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ph-code-bold" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h3 class="text" data-v-ab4803a9><span data-v-ab4803a9>代码块</span><!----></h3><button type="button" class="caret" aria-label="Expand 代码块" aria-expanded="false" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div style="display:none;" data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ic-outline-code" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/intro/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>介绍</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-majesticons-code-block-line" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/features/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>特性支持</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ph-code" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/copy-code/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>代码复制</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fluent-group-list-20-filled" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/group/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>代码分组</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-import" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/import/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>导入代码</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-experiment-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/twoslash/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Two Slash</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section><section class="vp-sidebar-item sidebar-item level-1 collapsible collapsed" data-v-ab4803a9 data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-carbon-demo" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h3 class="text" data-v-ab4803a9><span data-v-ab4803a9>代码演示</span><!----></h3><button type="button" class="caret" aria-label="Expand 代码演示" aria-expanded="false" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div style="display:none;" data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-icon-park-outline-html-five" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/repl/frontend/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>前端演示</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-simple-icons-rust" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/repl/rust/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Rust</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-devicon-plain-go" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/repl/golang/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Golang</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-tabler-brand-kotlin" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/repl/kotlin/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Kotlin</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-devicon-plain-python" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/repl/python/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Python</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mingcute-codepen-line" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/code-pen/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Code Pen</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-bxl-jsfiddle" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/jsfiddle/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Js Fiddle</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-lucide-codesandbox" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/code-sandbox/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Code Sandbox</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-simple-icons-replit" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/replit/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Replit</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section><section class="vp-sidebar-item sidebar-item level-1 collapsible has-active" data-v-ab4803a9 data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-chart-line" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h3 class="text" data-v-ab4803a9><span data-v-ab4803a9>图表</span><!----></h3><button type="button" class="caret" aria-label="Collapse 图表" aria-expanded="true" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-solar-chart-bold" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/chart/chartjs/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>chart.js</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-raphael-piechart" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/chart/echarts/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>ECharts</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-file-icons-mermaid" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/chart/mermaid/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>mermaid</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-f7-flowchart" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/chart/flowchart/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>flowchart</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ri-mind-map" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/chart/markmap/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>markmap</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-arcticons-uml-class-editor" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/chart/plantuml/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>PlantUML</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section><section class="vp-sidebar-item sidebar-item level-1 collapsible collapsed" data-v-ab4803a9 data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-dashicons-embed-video" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h3 class="text" data-v-ab4803a9><span data-v-ab4803a9>资源嵌入</span><!----></h3><button type="button" class="caret" aria-label="Expand 资源嵌入" aria-expanded="false" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div style="display:none;" data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-teenyicons-pdf-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/embed/pdf/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>PDF 阅读</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ri-bilibili-fill" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/embed/video/bilibili/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Bilibili 视频</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-lets-icons-video-fill" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/embed/video/acfun/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>AcFun 视频</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-youtube" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/embed/video/youtube/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Youtube 视频</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-icon-park-outline-video" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/embed/video/artplayer/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>ArtPlayer 视频</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-rivet-icons-audio" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/embed/audio/reader/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Audio Reader 音频</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section><!--]--></div></div></section></div><div class="no-transition group" data-v-71ba64cb><section class="vp-sidebar-item sidebar-item level-0 collapsible" data-v-71ba64cb data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-lucide-box" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h2 class="text" data-v-ab4803a9><span data-v-ab4803a9>功能</span><!----></h2><button type="button" class="caret" aria-label="Collapse 功能" aria-expanded="true" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-raphael-smile2" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/icon/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>图标</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-search" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/content-search/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>内容搜索</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ri-image-line" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/image-preview/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>图片预览</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-la-comment" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/comments/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>评论</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mingcute-announcement-line" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/bulletin/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>公告板</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-encryption-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/encryption/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>加密</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-simple-icons-contributorcovenant" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/contributors/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>文章贡献者</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-radix-icons-activity-log" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/changelog/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>文章变更历史</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-lucide-creative-commons" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/copyright/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>文章版权所有</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-light-branding-watermark-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/watermark/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>文章水印</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-carbon-friendship" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/friend-links/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>友情链接页</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-lucide-replace" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/replace-assets/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>资源链接替换</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-tabler-seo" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/seo/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>SEO</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-sitemap-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/sitemap/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>sitemap</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ri-ai" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/llmstxt/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>LLMs txt</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section></div><div class="no-transition group" data-v-71ba64cb><section class="vp-sidebar-item sidebar-item level-0 collapsible" data-v-71ba64cb data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-uiw-component" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h2 class="text" data-v-ab4803a9><span data-v-ab4803a9>组件</span><!----></h2><button type="button" class="caret" aria-label="Collapse 组件" aria-expanded="true" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-iconamoon-badge-light" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/badge/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>徽章</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-grommet-icons-emoji" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/icon/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>图标</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-lets-icons-hide-eye" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/plot/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>“隐秘” 文本</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-solar-card-broken" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/card/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>卡片</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-solar-card-send-linear" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/link-card/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>链接卡片</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fa-photo" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/image-card/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>图片卡片</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-vaadin-grid-h" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/card-grid/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>卡片容器</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ri-layout-masonry-line" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/card-masonry/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>瀑布流容器</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-tabler-container" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/home-box/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>首页布局容器</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-octicon-repo-16" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/github-repo-card/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Repo 卡片</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-akar-icons-npm-fill" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/npm-badge/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Npm 徽章</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-dashicons-images-alt2" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/swiper/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>轮播图</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section></div><div class="no-transition group" data-v-71ba64cb><section class="vp-sidebar-item sidebar-item level-0 collapsible" data-v-71ba64cb data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-dashboard-customize-outline-rounded" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h2 class="text" data-v-ab4803a9><span data-v-ab4803a9>自定义</span><!----></h2><button type="button" class="caret" aria-label="Collapse 自定义" aria-expanded="true" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><section class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-home-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/custom-home/" data-v-ab4803a9><!--[--><h3 class="text" data-v-ab4803a9><span data-v-ab4803a9>自定义首页</span><!----></h3><!--]--><!--[--><!--]--><!----></a><!----></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-icon-park-outline-effects" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/custom-home/hero-effect/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Hero 背景效果</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-icon-park-outline-theme" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/custom-style/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>自定义样式</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ph-layout-duotone" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/layout-slots/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>布局插槽</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-carbon-cics-sit-overrides" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/component-overrides/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>组件覆写</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section></div><div class="no-transition group" data-v-71ba64cb><section class="vp-sidebar-item sidebar-item level-0 collapsible" data-v-71ba64cb data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-api" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h2 class="text" data-v-ab4803a9><span data-v-ab4803a9>API</span><!----></h2><button type="button" class="caret" aria-label="Collapse API" aria-expanded="true" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-nimbus-browser" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/api/client/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>客户端</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fa6-brands-node" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/api/node/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Node</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="vp-sidebar-control" data-v-28af193e><button type="button" class="toggle-sidebar-btn" aria-label="Toggle sidebar" data-v-28af193e><span class="vpi-sidebar-close" data-v-28af193e></span></button></div><!--]--><!--[--><div id="VPContent" vp-content class="vp-content has-sidebar" data-v-a5aadcf6 data-v-d3283ff2><div class="vp-doc-container has-sidebar has-aside" data-v-d3283ff2 data-v-c2acd915><!--[--><!--]--><div class="container" data-v-c2acd915><div class="aside" vp-outline data-v-c2acd915><div class="aside-curtain" data-v-c2acd915></div><div class="aside-container" data-v-c2acd915><div class="aside-content" data-v-c2acd915><div class="vp-doc-aside" data-v-c2acd915 data-v-8e9ccc00><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="vp-doc-aside-outline" role="navigation" data-v-8e9ccc00 data-v-c71a8a7e><div class="content" data-v-c71a8a7e><div class="outline-marker" data-v-c71a8a7e></div><div id="doc-outline-aria-label" aria-level="2" class="outline-title" role="heading" data-v-c71a8a7e><span data-v-c71a8a7e>此页内容</span><span class="vpi-print icon" data-v-c71a8a7e></span></div><ul class="root" data-v-c71a8a7e data-v-875470cb><!--[--><!--]--></ul></div></nav><!--[--><!--[--><!--[--><!--[--><div class="aside-nav-wrapper" data-v-a5aadcf6 data-v-44a708ba><a class="vp-link link no-icon vp-external-link-icon link" href="https://github.com/pengzhanbo/vuepress-theme-plume" target="_blank" rel="noopener noreferrer" data-v-44a708ba><!--[--><span class="vp-icon vpi-tabler-star" style="" aria-hidden data-provider="iconify" data-v-44a708ba></span><span class="link-text" data-v-44a708ba>在 GitHub 上 Star</span><span class="vpi-arrow-right" data-v-44a708ba></span><!--]--><!--[--><!--]--><!----></a><a class="vp-link link no-icon vp-external-link-icon link" href="https://github.com/pengzhanbo/vuepress-theme-plume/issues/new/choose" target="_blank" rel="noopener noreferrer" data-v-44a708ba><!--[--><span class="vp-icon vpi-octicon-issue-opened-16" style="" aria-hidden data-provider="iconify" data-v-44a708ba></span><span class="link-text" data-v-44a708ba>遇到问题?</span><span class="vpi-arrow-right" data-v-44a708ba></span><!--]--><!--[--><!--]--><!----></a><a class="vp-link link link" href="/sponsor/" data-v-44a708ba><!--[--><span class="vp-icon vpi-ep-milk-tea" style="" aria-hidden data-provider="iconify" data-v-44a708ba></span><span class="link-text" data-v-44a708ba>喝杯奶茶</span><span class="vpi-arrow-right" data-v-44a708ba></span><!--]--><!--[--><!--]--><!----></a></div><!--]--><!--]--><!--]--><!--]--><div class="spacer" data-v-8e9ccc00></div><!--[--><!--]--></div></div></div></div><div class="content" data-v-c2acd915><div class="content-container" data-v-c2acd915><!--[--><!--]--><main class="main" data-v-c2acd915><nav class="vp-breadcrumb" data-v-c2acd915 data-v-68dbda29><ol vocab="https://schema.org/" typeof="BreadcrumbList" data-v-68dbda29><!--[--><li property="itemListElement" typeof="ListItem" data-v-68dbda29><a class="vp-link link no-icon breadcrumb" href="/" property="item" typeof="WebPage" data-v-68dbda29><!--[-->首页<!--]--><!--[--><!--]--><!----></a><span class="vpi-chevron-right" data-v-68dbda29></span><meta property="name" content="首页" data-v-68dbda29><meta property="position" content="1" data-v-68dbda29></li><li property="itemListElement" typeof="ListItem" data-v-68dbda29><span class="vp-link no-icon breadcrumb" property="item" typeof="WebPage" data-v-68dbda29><!--[-->指南<!--]--><!--[--><!--]--><!----></span><span class="vpi-chevron-right" data-v-68dbda29></span><meta property="name" content="指南" data-v-68dbda29><meta property="position" content="2" data-v-68dbda29></li><li property="itemListElement" typeof="ListItem" data-v-68dbda29><span class="vp-link no-icon breadcrumb" property="item" typeof="WebPage" data-v-68dbda29><!--[-->图表<!--]--><!--[--><!--]--><!----></span><span class="vpi-chevron-right" data-v-68dbda29></span><meta property="name" content="图表" data-v-68dbda29><meta property="position" content="3" data-v-68dbda29></li><li property="itemListElement" typeof="ListItem" data-v-68dbda29><a class="vp-link link no-icon breadcrumb current" href="/guide/chart/mermaid/" property="item" typeof="WebPage" data-v-68dbda29><!--[-->mermaid<!--]--><!--[--><!--]--><!----></a><!----><meta property="name" content="mermaid" data-v-68dbda29><meta property="position" content="4" data-v-68dbda29></li><!--]--></ol></nav><!--[--><!--]--><!--[--><div class="vp-doc-title" data-v-42fa9e7c><!--[--><!--]--><h1 class="page-title" data-v-42fa9e7c><!----> mermaid <!----></h1><!--[--><!--[--><!--[--><!--[--><div class="vp-page-context-menu" data-v-a5aadcf6 data-v-b0188d12><div class="page-context-button" type="button" data-v-b0188d12><span class="page-context-copy" data-v-b0188d12><span class="vpi-copy" data-v-b0188d12></span><span class="text" data-v-b0188d12>复制页面</span></span><span class="page-context-toggle" data-v-b0188d12><span class="vpi-chevron-down" data-v-b0188d12></span></span></div><ul class="page-context-menu" style="display:none;" data-v-b0188d12><li data-v-b0188d12><a href="javascript:void(0)" data-v-b0188d12><span class="vpi-copy" data-v-b0188d12></span><span data-v-b0188d12>复制页面 <small data-v-b0188d12>将页面以 Markdown 格式复制供 LLMs 使用</small></span></a></li><!--[--><li data-v-b0188d12><a href="/guide/chart/mermaid/index.md" target="_blank" rel="noopener noreferrer" aria-label="以 Markdown 格式查看" type="text/markdown" data-allow-mismatch data-v-b0188d12><span class="vpi-markdown" data-v-b0188d12></span><span data-v-b0188d12>以 Markdown 格式查看 <span class="vpi-external-link" data-v-b0188d12></span><small data-v-b0188d12>以纯文本查看此页面</small></span></a></li><li data-v-b0188d12><a href="https://chat.openai.com/?prompt=" target="_blank" rel="noopener noreferrer" aria-label="在 ChatGPT 中打开" data-allow-mismatch data-v-b0188d12><span class="vpi-chatgpt" data-v-b0188d12></span><span data-v-b0188d12>在 ChatGPT 中打开 <span class="vpi-external-link" data-v-b0188d12></span><small data-v-b0188d12>向 ChatGPT 提问有关此页面</small></span></a></li><li data-v-b0188d12><a href="https://claude.ai/new?q=" target="_blank" rel="noopener noreferrer" aria-label="在 Claude 中打开" data-allow-mismatch data-v-b0188d12><span class="vpi-claude" data-v-b0188d12></span><span data-v-b0188d12>在 Claude 中打开 <span class="vpi-external-link" data-v-b0188d12></span><small data-v-b0188d12>向 Claude 提问有关此页面</small></span></a></li><li data-v-b0188d12><a href="https://perplexity.ai/?q=" target="_blank" rel="noopener noreferrer" aria-label="在 Perplexity 中打开" data-allow-mismatch data-v-b0188d12><span class="vpi-perplexity" data-v-b0188d12></span><span data-v-b0188d12>在 Perplexity 中打开 <span class="vpi-external-link" data-v-b0188d12></span><small data-v-b0188d12>向 Perplexity 提问有关此页面</small></span></a></li><!--]--></ul></div><!--]--><!--]--><!--]--><!--]--></div><div class="vp-doc-meta" data-v-42fa9e7c><!--[--><!--]--><p class="reading-time" data-v-42fa9e7c><span class="vpi-books icon" data-v-42fa9e7c></span><span data-v-42fa9e7c>约 654 字</span><span data-v-42fa9e7c>大约 2 分钟</span></p><!----><!--[--><!--]--><p class="create-time" data-v-42fa9e7c><span class="vpi-clock icon" data-v-42fa9e7c></span><span data-v-42fa9e7c>2024-03-16</span></p></div><!--]--><!--[--><!--]--><!--[--><div class="_guide_chart_mermaid_ external-link-icon-enabled vp-doc plume-content" vp-content data-v-c2acd915><!--[--><!--]--><div data-v-c2acd915><h2 id="概述" tabindex="-1"><a class="header-anchor" href="#概述"><span>概述</span></a></h2><p>主题支持在 文章中 嵌入由 <a href="https://mermaid.js.org/" target="_blank" rel="noopener noreferrer">Mermaid</a> 。</p><p>该功能由 <a href="https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/" target="_blank" rel="noopener noreferrer">@vuepress/plugin-markdown-chart</a> 提供支持。</p><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置"><span>配置</span></a></h2><p>主题默认不启用该功能。</p><p>你需要在你的项目中安装 <a href="https://mermaid.js.org/" target="_blank" rel="noopener noreferrer">mermaid</a> 库。</p><div class="vp-code-tabs"><div class="vp-code-tabs-nav" role="tablist"><!--[--><button class="active vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-0-0" aria-selected="true"><!--[--><span class="vp-icon vpi-vscode-icons-file-type-light-pnpm bg" style="" aria-hidden data-provider="iconify"></span><span>pnpm</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-0-1" aria-selected="false"><!--[--><span class="vp-icon vpi-vscode-icons-file-type-yarn bg" style="" aria-hidden data-provider="iconify"></span><span>yarn</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-0-2" aria-selected="false"><!--[--><span class="vp-icon vpi-logos-npm-icon bg" style="" aria-hidden data-provider="iconify"></span><span>npm</span><!--]--></button><!--]--></div><!--[--><div id="codetab-0-0" class="active vp-code-tab" role="tabpanel" aria-expanded="true"><div class="vp-code-tab-title"><!--[--><span class="vp-icon vpi-vscode-icons-file-type-light-pnpm bg" style="" aria-hidden data-provider="iconify"></span><span>pnpm</span><!--]--></div><!--[--><div class="language-sh" data-highlighter="shiki" data-ext="sh" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-sh"><span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">pnpm</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> add</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> mermaid</span></span></code></pre></div><!--]--></div><div id="codetab-0-1" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><span class="vp-icon vpi-vscode-icons-file-type-yarn bg" style="" aria-hidden data-provider="iconify"></span><span>yarn</span><!--]--></div><!--[--><div class="language-sh" data-highlighter="shiki" data-ext="sh" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-sh"><span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">yarn</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> add</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> mermaid</span></span></code></pre></div><!--]--></div><div id="codetab-0-2" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><span class="vp-icon vpi-logos-npm-icon bg" style="" aria-hidden data-provider="iconify"></span><span>npm</span><!--]--></div><!--[--><div class="language-sh" data-highlighter="shiki" data-ext="sh" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-sh"><span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">npm</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> install</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> mermaid</span></span></code></pre></div><!--]--></div><!--]--></div><p>然后在 <code>.vuepress/config.ts</code> 配置文件中,启用该功能:</p><div class="code-block-title" data-title=".vuepress/config.ts"><div class="code-block-title-bar"><span class="title"><span class="vp-icon vpi-vscode-icons-file-type-typescript bg" style="" aria-hidden data-provider="iconify"></span>.vuepress/config.ts</span></div><div class="language-ts" data-highlighter="shiki" data-ext="ts" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark has-diff vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineUserConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
|
|
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> theme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">plumeTheme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
|
|
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> markdown</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
|
|
<span class="line diff add"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> mermaid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> },</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> })</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre></div></div><div class="hint-container note"><p class="hint-container-title">注</p><p>以下文档 Fork 自 <a href="https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/mermaid.html" target="_blank" rel="noopener noreferrer">@vuepress/plugin-markdown-chart</a>, 遵循 <a href="https://github.com/vuepress/ecosystem/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">MIT</a> 许可证。</p></div><h2 id="语法" tabindex="-1"><a class="header-anchor" href="#语法"><span>语法</span></a></h2><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">mermaid</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"><!-- 在此处放置 mermaid 代码 --></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre></div><p>除了使用 mermaid 代码块,你也可以直接使用以下代码块:</p><ul><li>class: <code>classDiagram</code></li><li>c4c: <code>C4Context</code></li><li>er: <code>erDiagram</code></li><li>gantt: <code>gantt</code></li><li>git-graph: <code>gitGraph</code></li><li>journey: <code>journey</code></li><li>mindmap: <code>mindmap</code></li><li>pie: <code>pie</code></li><li>quadrant: <code>quadrantChart</code></li><li>requirement: <code>requirementDiagram</code></li><li>sankey: <code>sankey-beta</code></li><li>sequence: <code>sequenceDiagram</code></li><li>state: <code>stateDiagram-v2</code></li><li>timeline: <code>timeline</code></li><li>xy: <code>xychart-beta</code></li></ul><p>你不需要再声明图表类型,也不需要缩进图表代码。</p><p>当图表支持设置标题时,你可以直接在代码块信息后添加标题:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">sequence 代码标题</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"><!-- 顺序图代码内容</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">... --></span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre></div><p>配置文档详见 <a href="https://mermaid.js.org/" target="_blank" rel="noopener noreferrer">Mermaid 文档</a></p><h2 id="高级" tabindex="-1"><a class="header-anchor" href="#高级"><span>高级</span></a></h2><p>你可以在 <a href="https://vuejs.press/zh/guide/configuration.html#%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6" target="_blank" rel="noopener noreferrer">客户端配置文件</a> 中导入并使用 <code>defineMermaidConfig</code> 来自定义 Mermaid 配置:</p><div class="language-ts line-numbers-mode" data-highlighter="shiki" data-ext="ts" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> defineMermaidConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">@vuepress/plugin-markdown-chart/client</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span></span>
|
|
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> defineClientConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">vuepress/client</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">defineMermaidConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
|
|
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 在此设置 mermaid 选项</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineClientConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
|
|
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // ...</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="示例" tabindex="-1"><a class="header-anchor" href="#示例"><span>示例</span></a></h2><h3 id="流程图" tabindex="-1"><a class="header-anchor" href="#流程图"><span>流程图</span></a></h3><p><strong>输入:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">mermaid</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">---</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">title: Flowchart</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">---</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">flowchart TB</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> c1-->a2</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> subgraph one</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> a1-->a2</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> end</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> subgraph two</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> b1-->b2</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> end</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> subgraph three</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> c1-->c2</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> end</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> one --> two</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> three --> two</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> two --> c2</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="循序图" tabindex="-1"><a class="header-anchor" href="#循序图"><span>循序图</span></a></h3><p><strong>输入:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">sequence Greetings</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Alice ->> Bob: Hello Bob, how are you?</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Bob-->>John: How about you John?</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Bob--x Alice: I am good thanks!</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Bob-x John: I am good thanks!</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Bob-->Alice: Checking with John...</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Alice->John: Yes... John, how are you?</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="类图" tabindex="-1"><a class="header-anchor" href="#类图"><span>类图</span></a></h3><p><strong>输入:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">class Animal Example</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">note "From Duck till Zebra"</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Animal <|-- Duck</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Animal <|-- Fish</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Animal <|-- Zebra</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Animal : +int age</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Animal : +String gender</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Animal: +isMammal()</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Animal: +mate()</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">class Duck{</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> +String beakColor</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> +swim()</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> +quack()</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">}</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">class Fish{</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> -int sizeInFeet</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> -canEat()</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">}</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">class Zebra{</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> +bool is_wild</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> +run()</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">}</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="状态图" tabindex="-1"><a class="header-anchor" href="#状态图"><span>状态图</span></a></h3><p><strong>输入:</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">state Check if n is negative</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">state if_state <<choice>></span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">[*] --> IsPositive</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">IsPositive --> if_state</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">if_state --> False: if n < 0</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">if_state --> True : if n >= 0</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre></div><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="关系图" tabindex="-1"><a class="header-anchor" href="#关系图"><span>关系图</span></a></h3><p><strong>输入:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">er Er Example</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">CAR ||--o{ NAMED-DRIVER : allows</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">CAR {</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> string registrationNumber</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> string make</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> string model</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">}</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">PERSON ||--o{ NAMED-DRIVER : is</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">PERSON {</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> string firstName</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> string lastName</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> int age</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">}</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="用户日记图" tabindex="-1"><a class="header-anchor" href="#用户日记图"><span>用户日记图</span></a></h3><p><strong>输入:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">journey</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">title My working day</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">section Go to work</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Make tea: 5: Me</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Go upstairs: 3: Me</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Do work: 1: Me, Cat</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">section Go home</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Go downstairs: 5: Me</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Sit down: 5: Me</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="甘特图" tabindex="-1"><a class="header-anchor" href="#甘特图"><span>甘特图</span></a></h3><p><strong>输入:</strong></p><details class="hint-container details"><summary>查看代码</summary><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">gantt</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">dateFormat YYYY-MM-DD</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">title Adding GANTT diagram functionality to mermaid</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">excludes weekends</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">section A section</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Completed task :done, des1, 2014-01-06,2014-01-08</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Active task :active, des2, 2014-01-09, 3d</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Future task : des3, after des2, 5d</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Future task2 : des4, after des3, 5d</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">section Critical tasks</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Completed task in the critical line :crit, done, 2014-01-06,24h</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Implement parser :crit, done, after des1, 2d</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Create tests for parser :crit, active, 3d</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Future task in critical line :crit, 5d</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Create tests for renderer :2d</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Add to mermaid :1d</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">section Documentation</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Describe gantt syntax :active, a1, after des1, 3d</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Add gantt diagram to demo page :after a1 , 20h</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Add another diagram to demo page :doc1, after a1 , 48h</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">section Last section</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Describe gantt syntax :after doc1, 3d</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Add gantt diagram to demo page :20h</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Add another diagram to demo page :48h</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="饼图" tabindex="-1"><a class="header-anchor" href="#饼图"><span>饼图</span></a></h3><p><strong>输入:</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">pie</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">title What Voldemort doesn't have?</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> "FRIENDS" : 2</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> "FAMILY" : 3</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> "NOSE" : 45</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre></div><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="git-图表" tabindex="-1"><a class="header-anchor" href="#git-图表"><span>Git 图表</span></a></h3><p><strong>输入:</strong></p><details class="hint-container details"><summary>查看代码</summary><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">git-graph</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">commit</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">branch hotfix</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout hotfix</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">commit</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">branch develop</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout develop</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">commit id:"ash" tag:"abc"</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">branch featureB</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout featureB</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">commit type:HIGHLIGHT</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout main</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout hotfix</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">commit type:NORMAL</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout develop</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">commit type:REVERSE</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout featureB</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">commit</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout main</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">merge hotfix</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout featureB</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">commit</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout develop</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">branch featureA</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">commit</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout develop</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">merge hotfix</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout featureA</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">commit</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout featureB</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">commit</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout develop</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">merge featureA</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">branch release</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout release</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">commit</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout main</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">commit</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout release</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">merge main</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">checkout develop</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">merge release</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="c4c-图表" tabindex="-1"><a class="header-anchor" href="#c4c-图表"><span>C4C 图表</span></a></h3><p><strong>输入:</strong></p><details class="hint-container details"><summary>查看代码</summary><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">c4c</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">title System Context diagram for Internet Banking System</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Person(customerB, "Banking Customer B")</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Person_Ext(customerC, "Banking Customer C")</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Enterprise_Boundary(b1, "BankBoundary") {</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> System_Boundary(b2, "BankBoundary2") {</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> System(SystemA, "Banking System A")</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> }</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Boundary(b3, "BankBoundary3", "boundary") {</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> }</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">}</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">BiRel(customerA, SystemAA, "Uses")</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">BiRel(SystemAA, SystemE, "Uses")</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Rel(SystemC, customerA, "Sends e-mails to")</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="思维导图" tabindex="-1"><a class="header-anchor" href="#思维导图"><span>思维导图</span></a></h3><p><strong>输入:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">mindmap</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">root((VuePress))</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Out of box</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Default theme</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Navbar</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Sidebar</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Darkmode</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> I18n</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Search</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Search</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> DocSearch<br />by algolia</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Customize</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Theme</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> (hope)</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Plugins</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> (components)</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> (md-enhance)</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="时序图" tabindex="-1"><a class="header-anchor" href="#时序图"><span>时序图</span></a></h3><p><strong>输入:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">timeline</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">title Timeline of Industrial Revolution</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">section 17th-20th century</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Industry 1.0 : Machinery, Water power, Steam <br>power</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Industry 2.0 : Electricity, Internal combustion engine, Mass production</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Industry 3.0 : Electronics, Computers, Automation</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">section 21st century</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Industry 4.0 : Internet, Robotics, Internet of Things</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Industry 5.0 : Artificial intelligence, Big data,3D printing</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="桑基图" tabindex="-1"><a class="header-anchor" href="#桑基图"><span>桑基图</span></a></h3><p><strong>输入:</strong></p><details class="hint-container details"><summary>查看代码</summary><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">sankey</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Agricultural 'waste',Bio-conversion,124.729</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Bio-conversion,Liquid,0.597</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Bio-conversion,Losses,26.862</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Bio-conversion,Solid,280.322</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Bio-conversion,Gas,81.144</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Biofuel imports,Liquid,35</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Biomass imports,Solid,35</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Coal imports,Coal,11.606</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Coal reserves,Coal,63.965</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Coal,Solid,75.571</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">District heating,Industry,10.639</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">District heating,Heating and cooling - commercial,22.505</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">District heating,Heating and cooling - homes,46.184</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Electricity grid,Over generation / exports,104.453</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Electricity grid,Heating and cooling - homes,113.726</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Electricity grid,H2 conversion,27.14</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Electricity grid,Industry,342.165</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Electricity grid,Road transport,37.797</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Electricity grid,Agriculture,4.412</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Electricity grid,Heating and cooling - commercial,40.858</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Electricity grid,Losses,56.691</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Electricity grid,Rail transport,7.863</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Electricity grid,Lighting & appliances - commercial,90.008</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Electricity grid,Lighting & appliances - homes,93.494</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Gas imports,Ngas,40.719</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Gas reserves,Ngas,82.233</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Gas,Heating and cooling - commercial,0.129</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Gas,Losses,1.401</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Gas,Thermal generation,151.891</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Gas,Agriculture,2.096</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Gas,Industry,48.58</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Geothermal,Electricity grid,7.013</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">H2 conversion,H2,20.897</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">H2 conversion,Losses,6.242</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">H2,Road transport,20.897</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Hydro,Electricity grid,6.995</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Liquid,Industry,121.066</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Liquid,International shipping,128.69</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Liquid,Road transport,135.835</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Liquid,Domestic aviation,14.458</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Liquid,International aviation,206.267</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Liquid,Agriculture,3.64</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Liquid,National navigation,33.218</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Liquid,Rail transport,4.413</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Marine algae,Bio-conversion,4.375</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Ngas,Gas,122.952</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Nuclear,Thermal generation,839.978</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Oil imports,Oil,504.287</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Oil reserves,Oil,107.703</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Oil,Liquid,611.99</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Other waste,Solid,56.587</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Other waste,Bio-conversion,77.81</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Pumped heat,Heating and cooling - homes,193.026</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Pumped heat,Heating and cooling - commercial,70.672</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Solar PV,Electricity grid,59.901</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Solar Thermal,Heating and cooling - homes,19.263</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Solar,Solar Thermal,19.263</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Solar,Solar PV,59.901</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Solid,Agriculture,0.882</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Solid,Thermal generation,400.12</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Solid,Industry,46.477</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Thermal generation,Electricity grid,525.531</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Thermal generation,Losses,787.129</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Thermal generation,District heating,79.329</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Tidal,Electricity grid,9.452</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">UK land based bioenergy,Bio-conversion,182.01</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Wave,Electricity grid,19.013</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Wind,Electricity grid,289.366</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="依赖图" tabindex="-1"><a class="header-anchor" href="#依赖图"><span>依赖图</span></a></h3><p><strong>输入:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">requirement</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">requirement test_req {</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">id: 1</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">text: the test text.</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">risk: high</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">verifymethod: test</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">}</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">element test_entity {</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">type: simulation</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">}</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">test_entity - satisfies -> test_req</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="象限图" tabindex="-1"><a class="header-anchor" href="#象限图"><span>象限图</span></a></h3><p><strong>输入:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">quadrant</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">title Reach and engagement of campaigns</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">x-axis Low Reach --> High Reach</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">y-axis Low Engagement --> High Engagement</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">quadrant-1 We should expand</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">quadrant-2 Need to promote</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">quadrant-3 Re-evaluate</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">quadrant-4 May be improved</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Campaign A: [0.3, 0.6]</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Campaign B: [0.45, 0.23]</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Campaign C: [0.57, 0.69]</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Campaign D: [0.78, 0.34]</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Campaign E: [0.40, 0.34]</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Campaign F: [0.35, 0.78]</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="xy图" tabindex="-1"><a class="header-anchor" href="#xy图"><span>XY图</span></a></h3><p><strong>输入:</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">xy</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">title "Sales Revenue"</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">y-axis "Revenue (in $)" 4000 --> 11000</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre></div><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="块图" tabindex="-1"><a class="header-anchor" href="#块图"><span>块图</span></a></h3><p><strong>输入:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">block</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">columns 3</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">前端 blockArrowId6<[" "]>(right) 后端</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">space:2 down<[" "]>(down)</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">硬盘 left<[" "]>(left) Database[("数据库")]</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">classDef front fill:#696,stroke:#333;</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">classDef back fill:#969,stroke:#333;</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">class Frontend front</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">class Backend,Database back</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--><h3 id="复杂例子" tabindex="-1"><a class="header-anchor" href="#复杂例子"><span>复杂例子</span></a></h3><p><strong>输入:</strong></p><details class="hint-container details"><summary>查看代码</summary><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">mermaid</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">graph TB</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> sq[Square shape] --> ci((Circle shape))</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> subgraph A</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> od>Odd shape]-- Two line<br/>edge comment --> ro</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> di==>ro2(Rounded square shape)</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> end</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> %% Notice that no text in shape are added here instead that is appended further down</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> e --> od3>Really long text with line break<br>in an Odd shape]</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> %% Comments after double percent signs</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> cyr[Cyrillic]-->cyr2((Circle shape));</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> classDef green fill:#9f6,stroke:#333,stroke-width:2px;</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> classDef orange fill:#f96,stroke:#333,stroke-width:4px;</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> class sq,e green</span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> class di orange</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><p><strong>输出:</strong></p><!--[--><div class="mermaid-actions"><button class="preview-button" title="preview"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg></button><button class="download-button" title="download"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg></button></div><div class="mermaid-wrapper"><div style="display:flex;align-items:center;justify-content:center;height:96px;" class="mermaid-loading"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--]--></div><!--[--><h2 id="doc-contributors" tabindex="-1"><a href="#doc-contributors" class="header-anchor"><span>贡献者</span></a></h2><div class="vp-contributors"><a href="https://github.com/pengzhanbo" target="_blank" rel="noreferrer" class="vp-contributor"><img src="https://avatars.githubusercontent.com/pengzhanbo?v=4" alt class="vp-contributor-avatar"><span class="vp-contributor-name">pengzhanbo</span></a></div><!--]--><!--[--><h2 id="doc-changelog" tabindex="-1"><a href="#doc-changelog" class="header-anchor"><span>更新日志</span></a></h2><div class="vp-changelog-wrapper"><div class="vp-changelog-header"><div class="vp-latest-updated"><span class="vp-changelog-icon"></span><span data-allow-mismatch>2025/10/7 15:13</span></div><div><span class="vp-changelog-menu-icon"></span><span>查看所有更新日志</span></div></div><ul class="vp-changelog-list"><!--[--><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/4d2361a7046214fe0f4e4af01831107fd00e38ad" target="_blank" rel="noreferrer"><code>4d236</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">feat(theme)!: add collections support (<a href="https://github.com/pengzhanbo/vuepress-theme-plume/issues/704" target="_blank" rel="noopener noreferrer">#704</a>)</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2025-10-07T15:13:09.000Z">2025/10/7</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/f7f39b8f3231f0699f96afc4c12bf131299c7108" target="_blank" rel="noreferrer"><code>f7f39</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">docs: update docs</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2025-07-10T03:40:43.000Z">2025/7/10</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/338334f4796d04801b3175fbd633128905b73ce5" target="_blank" rel="noreferrer"><code>33833</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">feat!: use new chart plugin and remove md-enhance (<a href="https://github.com/pengzhanbo/vuepress-theme-plume/issues/621" target="_blank" rel="noopener noreferrer">#621</a>)</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2025-06-19T10:48:46.000Z">2025/6/19</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/b07426dfc6142c10db34618a8fadb6feb5c0d4ce" target="_blank" rel="noreferrer"><code>b0742</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">refactor(plugin-md-power): improve md plugins (<a href="https://github.com/pengzhanbo/vuepress-theme-plume/issues/562" target="_blank" rel="noopener noreferrer">#562</a>)</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2025-04-25T07:04:55.000Z">2025/4/25</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/74dfa34ceed33c3517fdf53abbc8897b95b3f94c" target="_blank" rel="noreferrer"><code>74dfa</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">docs: enable twoslash for code block</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2025-04-01T02:23:34.000Z">2025/4/1</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/0fd6cac57412002f4d72dc10378789b529adc357" target="_blank" rel="noreferrer"><code>0fd6c</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">refactor(theme): improve types and flat config (<a href="https://github.com/pengzhanbo/vuepress-theme-plume/issues/524" target="_blank" rel="noopener noreferrer">#524</a>)</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2025-03-15T18:29:30.000Z">2025/3/15</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/6e6f9af12cfa52770de67ee966bd15b37c3256dc" target="_blank" rel="noreferrer"><code>6e6f9</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">docs: improve docs (<a href="https://github.com/pengzhanbo/vuepress-theme-plume/issues/509" target="_blank" rel="noopener noreferrer">#509</a>)</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2025-03-02T03:26:45.000Z">2025/3/2</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/597a199776e0bedf1217cf94f96f0dbed288a5cb" target="_blank" rel="noreferrer"><code>597a1</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">style: lint fix</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2024-11-29T21:59:25.000Z">2024/11/29</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/1182f3edc0ba27b7a6eb4827158c106918c9f38a" target="_blank" rel="noreferrer"><code>1182f</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">perf: supplement content MIT protocol</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2024-05-02T09:53:39.000Z">2024/5/2</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/822d861daef23a289c5e7720cdd7b0beb79b60c1" target="_blank" rel="noreferrer"><code>822d8</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">docs: lint fix md</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2024-03-21T17:09:57.000Z">2024/3/21</time></span></li><!--]--></ul></div><!--]--><!----><footer class="vp-doc-footer" data-v-c2acd915 data-v-393f5f4b><!--[--><!--]--><div class="edit-info" data-v-393f5f4b><div class="edit-link" data-v-393f5f4b><a class="vp-link link no-icon vp-external-link-icon edit-link-button" href="https://github.com/pengzhanbo/vuepress-theme-plume/edit/main/docs/guide/chart/mermaid.md" target="_blank" rel="noopener noreferrer" data-v-393f5f4b><!--[--><span class="vpi-square-pen edit-link-icon" aria-label="edit icon" data-v-393f5f4b></span> 编辑此页<!--]--><!--[--><!--]--><!----></a></div><!----></div><!----><nav class="prev-next" data-v-393f5f4b><div class="pager" data-v-393f5f4b><a class="vp-link link pager-link prev" href="/guide/chart/echarts/" data-v-393f5f4b><!--[--><span class="desc" data-v-393f5f4b>上一页</span><span class="title" data-v-393f5f4b><span class="vp-icon vpi-raphael-piechart" style="" aria-hidden data-provider="iconify" data-v-393f5f4b></span><span data-v-393f5f4b>ECharts</span></span><!--]--><!--[--><!--]--><!----></a></div><div class="pager" data-v-393f5f4b><a class="vp-link link pager-link next" href="/guide/chart/flowchart/" data-v-393f5f4b><!--[--><span class="desc" data-v-393f5f4b>下一页</span><span class="title" data-v-393f5f4b><span class="vp-icon vpi-f7-flowchart" style="" aria-hidden data-provider="iconify" data-v-393f5f4b></span><span data-v-393f5f4b>flowchart</span></span><!--]--><!--[--><!--]--><!----></a></div></nav></footer></div><!--]--></main><div id="comment" class="giscus-wrapper input-top vp-comment" vp-comment style="display:block;" data-v-c2acd915><div style="display: flex;align-items: center;justify-content: center;height: 96px"><span style="--loading-icon: url("data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!--]--><button type="button" class="vp-back-to-top" aria-label="back to top" data-v-a5aadcf6 style="display:none;" data-v-7a6b3799><span class="percent" data-allow-mismatch data-v-7a6b3799>0%</span><span class="show icon vpi-back-to-top" data-v-7a6b3799></span><svg aria-hidden="true" data-v-7a6b3799><circle cx="50%" cy="50%" data-allow-mismatch style="stroke-dasharray:calc(0% - 12.566370614359172px) calc(314.1592653589793% - 12.566370614359172px);" data-v-7a6b3799></circle></svg></button><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-label="sign down" class="vp-sign-down" aria-hidden="true" data-v-a5aadcf6 style="display:none;" data-v-43069080><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" data-v-43069080><path d="m19 11l-7 6l-7-6" data-v-43069080></path><path d="m19 5l-7 6l-7-6" opacity="0.6" data-v-43069080></path></g></svg><footer class="vp-footer has-sidebar" vp-footer data-v-a5aadcf6 data-v-b83cc7e0><!--[--><div class="container" data-v-b83cc7e0><div class="message" data-v-b83cc7e0>Powered by <a target="_blank" href="https://v2.vuepress.vuejs.org/">VuePress</a> & <a target="_blank" href="https://theme-plume.vuejs.press">vuepress-theme-plume</a></div><div class="copyright" data-v-b83cc7e0>Copyright © 2021-present pengzhanbo</div></div><!--]--></footer><!--[--><!--]--><!--]--></div><!----><!--]--><!--[--><!--]--><!--]--></div><script type="module" src="/assets/app-B2DsuqVi.js" defer></script></body></html> |