GraphvizOnline 是一个纯客户端的在线 Graphviz 编辑器与查看器,让你在浏览器中直接编写 DOT 代码并即时渲染图表,无需安装任何软件或服务器端处理。

其核心定位可以概括为以下几个方面:
1. 产品核心能力
- 实时编辑与渲染:左侧编写 DOT 代码,右侧即时预览渲染结果,即写即所得。
- 多格式导出:支持导出为 SVG(矢量)、PNG(位图)和纯文本 DOT。
- 语法错误提示:DOT 代码有误时显示编译错误信息,而非白屏崩溃。
- URL 分享:DOT 源码可编码进 URL 直接分享给他人。
- Gist 加载:通过
?url=参数从 GitHub Gist 或其他公开 URL 加载图定义。 - 演示模式:
?presentation=参数支持editable、hide-options、show-engine、show-format、show-raw、show-download、show-share等多种展示模式,可无缝嵌入技术文档或 PPT 链接。 - 暗色主题:内置深色模式。
- SVG 平移缩放:渲染结果支持鼠标拖拽与滚轮缩放,也集成 Hammer.js 支持移动端触控操作。
- 零数据外传:所有渲染都在浏览器本地完成,源代码不会发送到任何外部服务器。
2. 技术栈与开源信息
- 图渲染引擎基于 Viz.js,将 Graphviz C 代码通过 Emscripten 编译为 JavaScript,在浏览器内完成 DOT 解析与布局。
- SVG 渲染与过渡动画由 d3-graphviz 提供(基于 D3.js),交互体验更加平滑。
- 代码编辑器使用 Ace-editor,提供 DOT 语法高亮、行号、代码折叠等 IDE 级编辑体验。
- 整体为纯前端项目:JavaScript 88.3% / CSS 8.6% / HTML 3.1%,无任何后端服务。
- 采用 BSD-3-Clause 许可证,完全免费开源,可自由修改与商用。
- 在 GitHub 上已获得 986 Stars 和 248 Forks,共 57 次提交。





