🌙 深色模式

DOT 语言预览

Graphviz DOT 语言在线编辑与可视化预览，支持节点、边、子图等语法，适合绘制流程图、关系图、状态图等

DOT 文件预览编辑器

本工具基于 viz.js 在浏览器本地渲染 Graphviz DOT，不上传代码或图片。基础写法：digraph G { A -> B; }

代码编辑

示例模板

"kw">digraph G {
  "kw">rankdir=LR;
  "kw">node [shape=box, style="rounded,filled", fillcolor="#eef6ff", color="#5b8def"];
  "kw">edge [color="#64748b"];

  Start ["kw">label="开始", shape=oval, fillcolor="#dcfce7", color="#22c55e"];
  Login ["kw">label="用户登录"];
  Check ["kw">label="校验权限", shape=diamond, fillcolor="#fef3c7", color="#f59e0b"];
  Dashboard ["kw">label="进入控制台"];
  Error ["kw">label="提示错误", fillcolor="#fee2e2", color="#ef4444"];

  Start "edge">-> Login "edge">-> Check;
  Check "edge">-> Dashboard ["kw">label="通过"];
  Check "edge">-> Error ["kw">label="失败"];
}

语法提示：有向边使用 ->，无向边使用 --；属性写在方括号里，例如 A [label="开始"];。

图形预览

渲染中...

输入 DOT 代码后将在这里实时预览。

关于 DOT 语言预览

DOT 文件预览编辑器：在浏览器本地使用 viz.js / Graphviz 渲染 DOT 语法，支持粘贴代码、上传 .dot 文件、实时预览、拖拽缩放查看，并可导出 SVG 或 PNG 图片。

使用步骤

在左侧编辑区粘贴 DOT 代码，或上传本地 .dot 文件。
点击模板按钮可快速载入有向图、无向图、层级架构图示例。
编辑代码后右侧会自动重新渲染，语法错误会显示友好提示。
在预览区滚轮 / 按钮缩放，按住拖动画布移动视图。
确认图形后点击「导出 SVG」或「导出 PNG」下载结果。

常见使用场景

Graphviz 流程图 / 架构图预览
DOT 文件本地调试
拓扑图、依赖关系图快速导出