Mermaid 图表渲染 功能扩展
在文章中渲染 Mermaid 图表,短按弹出可缩放大图、长按显示源码、自动适配黑白主题
购买 / 收藏:请先登录
开发者:Half-Skilled
免费应用请进入你自己站点后台应用商店安装。
这是emlog建站系统的一款插件。要使用此插件,您需要先安装emlog系统。
安装教程
无代码加密 无额外授权 版本号:1.0
适配PHP:7.4+
最近更新:1.0 6小时前
Version: 1.0
Description: 在文章中渲染 Mermaid 图表,短按弹出可缩放大图、长按显示源码、自动适配黑白主题
Mermaid 图表渲染插件
在 Emlog 文章中渲染 Mermaid 图表,支持流程图、时序图、甘特图、类图等。
功能
- 文章内渲染:
`mermaid代码块自动渲染为 SVG 图表 - 短按弹大图:点击图表弹出可缩放/拖拽的模态框
- 长按显示源码:长按图表切换显示原始 Mermaid 源码
- 自动暗色适配:检测博客背景色亮度,自动切换图表亮/暗主题
- 可配置检测:后台自定义检测目标元素和 CSS 属性
- CDN/本地:Mermaid 内核支持 CDN 地址,留空用本地捆绑版
使用
在文章中写入 Mermaid 代码块:
```mermaid
graph TD
A[开始] --> B[处理]
B --> C[结束]
前台自动渲染为 SVG,交互方式:
| 操作 | 效果 |
|------|------|
| 短按(< 500ms) | 弹出大图模态框,滚轮缩放、拖拽平移 |
| 长按(>= 500ms) | 切换显示/隐藏 Mermaid 源码 |
## 后台设置
| 配置项 | 说明 | 默认值 |
|--------|------|--------|
| Mermaid JS 地址 | CDN 地址,留空用本地 |(本地)|
| 检测目标 | 用于暗色判断的 CSS 选择器 | body |
| 检测属性 | 用于暗色判断的 CSS 属性名 | background-color | -
1.0
6小时前Version: 1.0
Description: 在文章中渲染 Mermaid 图表,短按弹出可缩放大图、长按显示源码、自动适配黑白主题