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 次提交。
3. 生态集成
GraphvizOnline 不只是孤立的在线编辑器，它与开发者的日常工具链形成了良好的衔接：
- GitHub Gist：
.gv文件托管到 Gist 后，可通过?url=参数直接在 GraphvizOnline 中打开，实现图表定义的版本化管理与一键加载。 - 演示模式嵌入：通过
?presentation=hide-options,show-download等参数，可以隐藏编辑器面板、仅保留图表预览与下载按钮，适合嵌入到技术博客、Wiki、PPT 分享链接中。 - Ace-editor 语法高亮：DOT 语言的关键词、属性、注释均有着色，降低编写门槛。
- 导出兼容主流工具链：SVG 兼容 Illustrator / Figma / 浏览器；PNG 兼容 Word / PPT / Slack 等任何支持图片的场景。
4. 适用场景
- 快速绘制流程图、架构图、状态机、ER 图、依赖关系图等各类 DOT 图表。
- 工程师写技术文档、做架构评审时需要即写即渲染的轻量可视化工具。
- 教学或学习 Graphviz DOT 语言——所见即所得的编辑器是新手友好的入门方式。
- 通过 URL 分享图表给同事或社区，对方打开链接即可看到完整渲染结果。
如果你常用 DOT 语言画图，或需要一个无需安装、打开浏览器就能工作的 Graphviz 在线渲染器，GraphvizOnline 是一个值得收藏的工具。在线版可直接访问 dreampuf.github.io/GraphvizOnline。