Mermaid 图表系统渲染测试
本文用于测试 Zen Blog 引擎对 Mermaid 图表系统的原生支持、双主题实时切换、代码复制与移动端自适应表现。
1. 架构流程图 (Flowchart)
graph TD A[Markdown 源文件] --> B(core/markdown.js 编译拦截) B --> C{是否包含 mermaid?} C -->|是| D[生成 .figure-mermaid 语义容器] C -->|否| E[标准 Shiki 高亮处理] D --> F[hasMermaid: true 元数据] F --> G[客户端动态 ESM 按需加载] G --> H[Zen 调色板双主题渲染]
2. 序列时序图 (Sequence Diagram)
sequenceDiagram autonumber actor Reader as 读者 participant UI as 博客界面 participant Theme as 主题控制器 participant Engine as Mermaid 引擎 Reader->>UI: 点击深色/浅色切换开关 UI->>Theme: 触发 classList.toggle('dark-theme') Theme-->>Engine: 广播主题变动通知 Engine->>Engine: 读取 data-source 并加载对应调色板 Engine-->>UI: 毫秒级重绘矢量 SVG
3. Git 分支演进图 (GitGraph)
gitGraph commit id: "Initial v9" commit id: "Core Shiki" branch feature/mermaid checkout feature/mermaid commit id: "Add AST Interceptor" commit id: "Add Zen Palette" checkout main merge feature/mermaid id: "Zen Mermaid Ready" commit id: "Release 9.1"
4. 组成饼图 (Pie Chart)
pie title 页面资源体积分布 (含 Mermaid 页面) "HTML 结构" : 25 "Zen CSS 核心样式" : 35 "按需异步 Mermaid ESM" : 40