无代码加密 无额外授权 版本号：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 个以内，避免渲染卡顿