用文字就能“画“出专业图表：GraphvizOnline 浏览器版 GraphViz 保姆级体验

用文字就能"画"出专业图表：GraphvizOnline 浏览器版 GraphViz 保姆级体验

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

周一早上九点，会议室白板前围了一圈人。产品经理指着板子上扭扭曲曲的方框连线说："这就是我们的系统架构。"没人忍心指出，那朵"云"看起来更像一只受惊的章鱼。

如果你也经历过这种尴尬，今天要介绍的工具能帮你彻底翻篇——GraphvizOnline，一个把 GraphViz 装进浏览器的在线图表编辑器，免费、开源、免安装。它做的事情简单到不可思议：你用纯文字描述图表关系，它当场还你一张规整漂亮的关系图。

第一次用它画图，我只花了三分钟

拿到代码只需要一条命令：

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

其实连克隆都可以省，直接双击项目里的index.html就能用。想体验更丝滑的本地服务，终端跑一句python3 -m http.server 8000，再访问http://localhost:8000，一个完整的绘图工作台就位了。

打开页面的瞬间你会看到：左边是代码区，右边是预览区，默认还躺着一张示例图。把左边内容删掉，敲下这三行：

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

几乎是同一秒，右边的方框和箭头就自己长了出来——没有拖拽，没有对齐磁吸，也没有"为什么这根线永远歪着"的深夜崩溃。你描述关系，它负责排版，这就是 DOT 语言最迷人的地方。

当我把"绘图"从动词改成"写"

真正让我对这个小工具改观的，是一次给技术文档配图的任务。以前画调用流程图，我得在绘图软件里反复挪框、调线，一小时磨出三张算走运。这次我打开 GraphvizOnline，把接口之间的调用关系一行行敲进编辑器，预览区跟着实时刷新——改一个词、加一条边，图立刻变。

那个下午，我画完了文档里需要的全部七张图，全程是同一套流程：描述、预览、微调、下载。顶部工具栏可以选择引擎，dot适合层级分明的流程图，neato擅长关系松散的网状图，circo专门伺候环形结构，多试几个总有一个对味；输出格式则覆盖 SVG、PNG、JSON 乃至 PostScript，网页嵌 SVG、文档插 PNG，各取所需。

把一整张图打包进一个链接

还有一次，团队群里有人问新系统的数据流，我懒得再写八百字解释，直接把编辑好的图通过 Share 按钮压进一个链接甩进群里。对方点开看到的就是图本身——连编辑界面都能藏起来，只需在网址后面追加?presentation参数，再配合editable、hide-options、show-download这些子参数，对方能看什么、能改什么，全由你说了算。

如果图表需要长期维护，更讲究的做法是把 DOT 定义存到公开的代码片段托管地址，再用?url=参数让 GraphvizOnline 直接加载。几个人各自下载代码，改完图顺手更新仓库，图的版本历史和代码的版本历史从此共用同一条时间线。

藏在代码里的两块拼图

好奇它凭什么能在浏览器里跑起 GraphViz？答案在viz-global.js——这是借助 emscripten 把 C 语言版 GraphViz 编译成 JavaScript 的成果；左边那个手感顺滑的编辑器，则是 ACE 编辑器在幕后撑场。想研究实现细节，从index.html摸清页面骨架，再到main.js看编译与渲染逻辑，这条路径足够你顺藤摸瓜。

整个项目以 BSD-3 许可证开源，拿来用、拿来改、拿去分享都放心。从一场尴尬的晨会，到一次顺畅的文档配图，再到一次高效的团队沟通，GraphvizOnline 让我确认了一件事：画图这件事，最费神的从来不是手，而是想清楚关系。剩下的，交给文字就好。

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