稳定渲染器DOT浏览器 SVG依赖图

Graphviz DOT Preview

编写 DOT 语法，并把依赖图、状态图和有向图预览成 SVG。

示例

DOT 源码

Graphviz 预览就绪

你的 Graphviz 图会显示在这里。

下一步可以继续

把当前预览结果带到相关工具里继续转换、排查或导出。

用自然语言生成可编辑 Mermaid 图表，并在导出前完成预览和 review。

用 AI 修复 Mermaid 语法错误，并在发布前检查图表语义和可读性。

用 AI 从产品或系统说明生成 Mermaid 架构图。

依赖关系编译图状态转换

是的，该页面会动态加载基于 WebAssembly 的 Viz renderer。

渲染后的 SVG 可以下载，也可以通过工具栏转换成 PNG。

Graphviz DOT Preview 让开发者快速把 DOT 源码转换成可视化图表，适合依赖结构、有向流程、状态机和生成式图输出。

渲染器只在 Graphviz 工具页加载，并在浏览器端返回 SVG。这样首页保持轻量，工具页又能提供真实 DOT 渲染。

适合检查构建图、包关系、状态转换和更容易用文本维护的架构草图。

Graphviz DOT 适合依赖图，尤其是方向、集群和边标签重要的场景。预览能快速发现循环、漏标和跨边界依赖。

digraph G {
  rankdir=LR;
  subgraph cluster_api { label="API"; web; gateway; }
  gateway -> orders [label="REST"];
  orders -> db [label="SQL"];
}

DOT 源码有效也可能布局很乱。先移除样式，只保留关系，再逐步恢复布局提示。

digraph {
  rankdir=LR
  auth -> api
  api -> queue
  queue -> worker
}

当你需要在文档、PR、故障复盘或交接材料发布前检查源码内容时，可以使用 Graphviz DOT Preview。在浏览器中把 DOT 图渲染成 SVG。

导出前建议检查标签是否可读、关系是否和源码一致、示例是否包含敏感信息，以及修改输入后预览是否仍然成立。

如果预览失败，先把输入缩小到最小完整示例，确认格式语法，再逐段加回内容。很多失败来自不完整文件、缩进错误、缺少图表头，或复制了依赖隐藏上下文的片段。

请把预览结果当作 review 界面，而不是生产事实来源。生成的图表、转换文件、看板和规则示例在进入正式文档或运维流程前仍需要人工确认。

有向图: digraph G { rankdir=LR; Start -> Parse -> Render -> Export; Render -> Error; Error -> Parse; }
依赖图: digraph dependencies { node [shape=box, style=rounded]; app -> ui; app -> renderers; renderers -> mermaid; renderers -> graphviz; }
状态图: digraph states { node [shape=circle]; editing -> rendering; rendering -> ready; rendering -> failed; failed -> editing; }

稳定渲染器

这个工具已有专用渲染或预览界面，支持常用导出，适合浏览器内反复预览、修改和发布前检查。

分级不是质量打分，而是告诉用户当前工具更适合稳定导出、深度调试、快速解析，还是 AI 辅助生成。