GraphvizOnline 完整上手指南：一个浏览器页面，把 DOT 文本变成专业图表

【免费下载链接】GraphvizOnlineLet's Graphviz it online项目地址: https://gitcode.com/gh_mirrors/gr/GraphvizOnline

这篇文章采用"一次真实创作旅程"的叙事结构：从"想画一张图"这个朴素需求出发，沿着一条完整的操作路径展开，让每个功能在场景中自然登场，读完你就能独立完成从写代码到分享图表的全流程。

GraphvizOnline 是一个完全免费、无需安装的在线 Graphviz 图表编辑器。你不需要拖动任何图形组件，只需要用 DOT 语言描述"有哪些节点、节点之间怎么连"，它就会在浏览器里实时渲染出可缩放、可导出的矢量图。它的最大卖点只有一个词：即时——左边打字，右边出图，一秒都不等。

一个普通下午的场景

假设你是这样开始想问题的：产品文档里需要一个调用流程图，演示文稿里需要一张架构图，但手边既没有专业绘图软件，又不想为画一张图去折腾安装配置。

于是你搜索"在线画图工具"，找到了 GraphvizOnline。接下来的一切，都发生在你面前这个浏览器标签页里，仅此而已。

第一步：把项目请到本地

项目是纯前端代码，零依赖构建，拿下来就能用。打开终端执行：

git clone https://gitcode.com/gh_mirrors/gr/GraphvizOnline cd GraphvizOnline

如果你只是想快速看看效果，直接双击打开index.html文件就已经可以运行了。想要更真实的在线体验，在项目目录下启动一个简单的本地服务器：

python3 -m http.server 8000

然后在浏览器地址栏输入http://localhost:8000，GraphvizOnline 的界面就出现了。整个过程不需要安装任何依赖、不需要配置环境变量、不需要 npm install，这正是它"零配置上手"的底气所在。

第二步：写出你的第一张图

打开页面后，你会看到左右分栏的布局：左边是代码编辑器，右边是图表预览区。编辑器里已经预置了一段示例代码，右侧同步显示着渲染好的图——这就是整个工具的核心交互：改左边，看右边。

删掉示例，输入这样三行：

digraph G { A -> B; A -> C; }

右侧立刻出现三个节点和两条箭头。这就是 DOT 语言：digraph声明一张有向图，A -> B表示从 A 到 B 有一条边。不需要任何标点上的纠结，语法就这么多。

想加点视觉区分？给节点指定形状和颜色：

digraph G { start [shape=Mdiamond]; end [shape=Msquare]; start -> A -> B -> end; }

节点立刻变成菱形和方形的标记形状。形状、颜色、线条样式全都通过属性控制，改动是即时反馈的，你可以大胆试错，改坏了马上改回来，零成本。

第三步：认识编辑器里的隐藏能力

左边这块编辑区可不是普通文本框，它内置了 ACE 编辑器——就是很多在线代码工具使用的那款。这意味着你拥有：

• 语法高亮：关键字、节点名、属性一眼可辨，写错结构也能从颜色上看出端倪
• 自动补全：输入属性名时会有提示，不用背 API
• 快捷键体系：支持 Vim、Emacs 等键位方案，熟悉哪个用哪个
• 灵活的布局控制：中间的分割条可以左右拖拽，也可以双击回到 50% 对半分

还有一个容易被忽略的小按钮：编辑器顶部的切换按钮可以一键收起代码区，让图表占据整个窗口。这个细节在做演示时会非常有用。

第四步：不同的布局引擎，不同的视角

工具栏上的Engine 下拉框是 GraphvizOnline 最有技术含量的一处设计。同样的节点和连线，用不同的引擎布局，出来的图形观感完全不同。默认使用dot，它擅长有向图的层次排列。而你手头的选择多达十种：

同样的代码，切换几次引擎，你会看到图表呈现出完全不同的气质。布局不满意时，别急着改代码，先换引擎试试，往往有惊喜。

第五步：把图带走，导出与下载

画好的图不能只留在浏览器里。GraphvizOnline 支持多种输出格式，在Format 下拉框中切换：

• SVG（默认）：矢量格式，无限放大不失真，网页嵌入、文档插图都合适
• PNG：位图格式，适合直接贴进聊天窗口或演示文稿
• JSON / XDOT：程序化处理时的结构化数据
• PLAIN / PS：进一步加工或打印场景

右侧工具栏的Download按钮会按当前选中的格式打包下载文件。SVG 预览区还支持滚轮缩放和拖拽平移（页面集成了 svg-pan-zoom），即使是节点密密麻麻的大图也能轻松浏览细节。

第六步：把图"发给别人"，三种分享姿势

图做完了，怎么给别人看？GraphvizOnline 提供了三条不同深度的分享路径。

姿势一：URL 直接携带代码。编辑器里的代码会自动同步到地址栏的 hash 中，把当前页面 URL 复制发给同事，对方打开就是同一张图。即使对方没有本地部署，也能直接访问体验。

姿势二：一键生成短链接。点击工具栏的Share按钮，工具会尝试把包含完整图表定义的 URL 压缩成短链接，自动填入分享框，复制即可。

姿势三：从公共地址加载。这是隐藏较深但很实用的一招——在 URL 后追加?url=某个公开地址，GraphvizOnline 会直接抓取并渲染该地址中的图定义。把图定义放进 Gist 这类服务，就同时获得了版本管理和团队协作能力：图定义的任何改动都有历史记录，团队成员各取所需。

第七步：用演示模式，把页面变成"幻灯片"

如果你需要在会议室投屏，或者把图嵌进某个演示系统，GraphvizOnline 的presentation 模式就是为你准备的。在 URL 后追加?presentation=editable,hide-options，页面会收起多余的工具条，只保留干净的图表；editable参数则让观看者可以临时展开编辑器修改图表，非常适合现场讨论场景。

组合参数还能精细控制展示内容，比如?presentation=editable,hide-options,show-download表示隐藏选项栏但保留下载入口。同一个工具，既能当编辑器，也能当播放器，这是大多数在线绘图工具给不了的灵活性。

常见疑问速答

问：DOT 语言难学吗？答：入门只需要理解两件事——声明节点、声明连线。半小时足以画出像样的图，进阶的样式属性都是按需查、按需用。

问：图表很复杂会不会卡？答：渲染在本地浏览器完成（Graphviz 通过 Emscripten 编译为 JavaScript 运行），不依赖服务器，小型和中型图表毫无压力。

问：代码写错了会怎样？答：预览区会给出明确的错误信息提示，你照着提示改即可，不会让页面崩溃。

你的第一张图，现在就动手

回顾这条创作旅程：克隆项目 → 打开页面 → 写三行 DOT → 调引擎 → 导出 → 分享 → 演示，GraphvizOnline 把图表制作的每个环节都压缩到了浏览器里。它开箱即用的特质，让它既是技术文档写作者的随身工具，也是教学演示、项目管理、快速原型设计的轻量搭档。

现在轮到你了。克隆项目，打开浏览器，输入属于你的第一张图——从最简单的一句A -> B开始，往里面加上你真实工作中的节点和关系。十分钟后回头看，你会发现，那张原本要折腾半小时的图，已经安静地躺在屏幕右侧了。

小档案：GraphvizOnline 采用 BSD-3 许可证，完全开源免费，你可以放心地使用、修改和再分发。代码结构也非常清晰——index.html是页面骨架，main.js承载全部逻辑，style.css定义界面外观，ace/目录是内置编辑器，viz-global.js则是 Graphviz 的浏览器版编译产物。读懂这些，你甚至可以为它添加自己想要的功能。

祝画图愉快，让想法尽早"可视化"出来。🚀

【免费下载链接】GraphvizOnlineLet's Graphviz it online项目地址: https://gitcode.com/gh_mirrors/gr/GraphvizOnline