最近更新：1.2.3 5个月前
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 个以内，避免渲染卡顿
-
1.2.3
5个月前1. 修复 Graphviz 属性注入位置 bug — 属性现在正确注入到 { 内部，而非之前（修复 v1.2.2 的语法错误）
2. 智能属性检测 — 已有 ranksep 或 nodesep 的代码不会重复注入（|| 逻辑替代 &&） -
1.2.2
5个月前1. Mermaid 默认图表间距增大（nodeSpacing 20→40, rankSpacing 30→55），避免节点和层级重叠
2. Graphviz 自动注入 `ranksep=1.0 nodesep=0.6 newrank=true` 默认属性，防止图形元素重叠
3. 以上设置同时作用于前端渲染和后台编辑器预览 -
1.2.1
5个月前1. 全屏改为 95vw × 95vh，最大化利用屏幕空间
2. 全屏缩放改为 SVG viewBox 方式，矢量级别清晰
3. 超宽图表（宽高比 > 4）全屏时高度铺满 + 横向滚动
4. 高型图表全屏时使用 flex-direction: column 优化布局
5. Mermaid 初始化自动压缩 nodeSpacing / rankSpacing，图表更紧凑
6. 全屏退出时自动重置缩放状态和 overflow
7. 全屏点击遮罩层 / ESC 退出，viewer 移回原位置 -
1.2.0
5个月前1. 新增 Mermaid 图表渲染支持
2. 新增图表交互工具栏：全屏查看、复制源码、缩放、平移
3. 缩放改为 SVG viewBox 方式，矢量级别清晰
4. 全屏模式支持点击遮罩层 / ESC 退出，退出时自动重置缩放
5. 全屏使用 GitHub 风格双向箭头图标 -
1.1.0
6个月前v1.1.0 更新：
1. Graphviz Preview 按钮 — 编辑页面插件扩展区域，点击弹出全屏预览层
2. 编辑器预览集成 — 使用编辑器自带预览按钮时自动渲染 graphviz
3. Watch 模式支持 — 实时预览中延迟渲染 graphviz（800ms 防抖）
4. 懒加载 viz.js — 使用 import() 按需加载，支持并发调用不丢失回调 -
1.0.0
6个月前初始版本