安装hexo插件
npm install hexo-filter-mermaid-diagrams
修改themes/3-hexo/_config.yml 的 mermaid.on，开启主题支持
# Mermaid 支持
mermaid:
# on: false
on: true
# cdn: //cdn.jsdelivr.net/npm/mermaid@8.4.2/dist/mermaid.min.js
cdn: https://cdn.jsdelivr.net/npm/mermaid@11.10.0/dist/mermaid.min.js
options: # 更多配置信息可以参考 https://mermaidjs.github.io/#/mermaidAPI
theme: 'default'
startOnLoad: true
flowchart:
useMaxWidth: false
htmlLabels: true
在markdown中，像写代码块一样写
<pre class="mermaid">flowchart TD
A["onInit() <br>控制器创建时调用"] --> B["onReady() <br>UI首次渲染完成"]
B --> C["onResumed() <br>恢复活跃/前台"]
C --> D["onPaused() <br>进入后台/失去活跃"]
D --> E["onInactive() <br>非活动状态，等待用户操作"]
E --> F["onHidden() <br>页面被部分遮挡"]
F --> G["onDetached() <br>完全分离，不再可见"]
G --> H["onClose() <br>控制器销毁，清理资源"]
%% 状态切换说明
C -.-> D
D -.-> C
D -.-> E
E -.-> F
F -.-> C
%% 样式分组
style A fill:#d9f1ff,stroke:#0366d6,stroke-width:2px
style B fill:#d9f1ff,stroke:#0366d6,stroke-width:2px
style C fill:#e2ffe2,stroke:#228B22,stroke-width:2px
style D fill:#fffacc,stroke:#d6a600,stroke-width:2px
style E fill:#fffacc,stroke:#d6a600,stroke-width:2px
style F fill:#fffacc,stroke:#d6a600,stroke-width:2px
style G fill:#ffe0e0,stroke:#d63333,stroke-width:2px
style H fill:#ffe0e0,stroke:#d63333,stroke-width:2px</pre>
