图文
2026-9-10
Graphviz+Mermaid图表渲染器 - emlog插件
无代码加密 无额外授权 版本号：1.2.3
适配PHP：7.4+
最近更新：1.2.3 3个月前
1. 修复 Graphviz 属性注入位置 bug — 属性现在正确注入到 { 内部，而非之前（修复 v1.2.2 的语法错误）
2. 智能属性检测 — 已有 ranksep 或 nodesep 的代码不会重复注入（|| 逻辑替代 &&）
简介
Graphviz+Mermaid图表渲染器是一款 Emlog 前端渲染插件，能够将文章中的 Graphviz DOT，Mermaid语法代码块自动转换为 SVG 矢量图表，无需服务端依赖，纯前端解析渲染。
功能特性
- 语法识别：自动识别
Mermaid,dot和graphviz语言标记的代码块 - 前端渲染：基于 viz.js 库在浏览器端完成解析与渲染，无需安装 Graphviz 环境
- 渲染缓存：内置 Map 缓存机制，相同图表只渲染一次，提升页面加载性能
- 响应式布局：SVG 图表自适应容器宽度，移动端友好
- 交互效果：支持节点悬停高亮与点击缩放动画
- UTF-8 支持：完整支持中文标签及 Unicode 字符
使用方法
第一步：启用插件
进入 Emlog 后台 → 插件管理 → 找到「Graphviz 图表渲染器」→ 点击启用。
第二步：编写图表代码
在文章编辑器中插入 Graphviz 代码块，使用 dot 或 graphviz 作为语言标识。
流程图示例
digraph {
rankdir=LR
node [shape=box]
开始 -> 处理 -> 结束
}
关系图示例
graph {
A -- B
B -- C
C -- D
D -- A
}第三步：发布预览
保存并发布文章后，代码块将自动渲染为交互式 SVG 图表。
注意事项
- 代码块必须使用 Markdown 标准格式（三个反引号包裹）
- 语言标识必须为
dot或graphviz，其他标识不会触发渲染 - 首次加载页面时需下载 viz.js 库，后续访问走浏览器缓存
- 复杂图表节点数量建议控制在 100 个以内，避免渲染卡顿
