网页版 Graphviz 免费绘图指南：在线流程图编辑器，输入文字即时出图
【免费下载链接】GraphvizOnlineLet's Graphviz it online项目地址: https://gitcode.com/gh_mirrors/gr/GraphvizOnline
给老板的汇报要一张系统架构图，可电脑里没装任何绘图软件，下载安装加学习工具又得半小时。GraphvizOnline 是一个免安装的在线流程图工具：左边输入几行文字描述，右边即时渲染出图，布局全部自动完成。
一个真实的卡点：画图的时间不该超过描述图的时间
周一上午，同事甩来一句话：下午评审，帮我出一张网关限流流程图。
打开电脑找工具，才发现平时根本用不上这类软件，什么图都没装。下载一个、注册、找到"新建流程图"按钮、再一个个拖节点对对齐——这比直接画出来还慢。
后来我换了一个思路：不拖节点，直接"写"图。
GraphvizOnline 就是干这件事的：用文字描述图表，剩下交给工具。它把 Graphviz 的 C 语言编译核心打包进了网页脚本，浏览器里直接运行，左边输入 DOT 代码，右边实时出图，自动排版对齐，拖拽一步都省了。
它替你省掉的三件事
- 免安装、免账号：纯网页应用，浏览器打开即用，本地起个静态服务就行
- 即时渲染：每敲下一行代码，右侧图立刻更新，不用点"生成"等结果
- 十种布局引擎：流程图、关系网、星型结构换引擎就能换观感，同一份代码
- 免费可商用：BSD-3 协议开源，个人、公司场景随意用
无需安装，三步跑起来
git clone https://gitcode.com/gh_mirrors/gr/GraphvizOnline cd GraphvizOnline python3 -m http.server 8000第一行把仓库下载到本地，第二行进目录，第三行让 Python 自带的小服务把静态页面端出来。没有依赖要装，因为 Graphviz 核心已经是编译好的 JavaScript。
浏览器打开http://localhost:8000，界面分三个区域：
- 左侧代码编辑区：预置了一段示例图代码，带 DOT 语法高亮
- 右侧预览区：示例图已经渲染好，滚轮缩放、拖拽平移都支持
- 顶部工具栏：Engine 引擎选择、Format 输出格式、Download 下载、Share 分享
中间有一条分割线，拖一下就能调整左右两区的比例，双击恢复五五开。
核心能力拆解：四个最实用的开关 🎛️
十种布局引擎，换一种画法
Engine 下拉框里藏着 circo、dot、neato、fdp、twopi、sfdp、osage、patchwork 等十种布局引擎。同一份代码，换引擎就是另一张图：
- 流程图：
dot - 关系网络：
neato - 星型、聚类结构：
twopi - 有向环：
circo - 力导向布局：
fdp/sfdp
适合场景：一份图反复调观感，不想重画，只换引擎。
导出 SVG、PNG，一步下载
Format 支持 svg、png、json、xdot、plain、ps 六种输出。SVG 嵌网页不失真，PNG 直接进 PPT 和文档，JSON 给程序做二次处理。点 Download 触发本地下载，不经过任何服务器。
适合场景：调试期用 SVG 频繁预览，定稿再导 PNG 进汇报材料。
Share 生成一条自带图的链接
点 Share，URL 参数里直接内嵌压缩后的图定义，对方打开链接看到的就是你此刻的图，不需要对方装任何东西。URL 还支持?url=参数，能直接加载 Gist 或任意公开地址里的图定义。
适合场景：把图定义当版本归档，团队同步"当前是哪一版"。
演示模式，只留图不留编辑器
URL 后面加?presentation，编辑区直接收起，只保留干净的图。参数可以组合控制，比如?presentation=editable,hide-options,show-download：editable保留展开编辑器按钮，hide-options隐藏顶部选项栏，show-download只留下载按钮。
适合场景：技术分享时，把链接甩给听众，屏幕上只出现图。
两个真实用法
用法一：给限流逻辑画一张流程评审图
- 打开页面，把编辑区里的示例代码整体选中删掉
- 写清节点和连线，几行就够：
digraph gw { req [label="请求进入"]; count [label="统计窗口内请求数"]; over [label="超过阈值?"]; deny [label="返回 429", style=filled]; pass [label="放行到后端"]; req -> count -> over; over -> deny [label="是"]; over -> pass [label="否"]; }- 右侧即时出图，Format 切到 png 后点 Download，图直接进文档
输出：一张带箭头和标签的标准流程图，从写完到出图不超过一分钟。
用法二：同一份数据，对比三种布局
- 写下节点和连线，比如五个服务之间的调用关系
- Engine 选
dot，看默认的层级排布 - 再切
neato、twopi，同一份代码出三种观感，挑最清楚的一版
输出：不重画一行代码，拿到三版候选图。适合拿不准布局时做对比。
新手常见疑问
Q：首次打开会不会卡？A：第一次会在浏览器里编译 viz.js 核心（Graphviz C 代码转成的 JavaScript），稍等一两秒；之后渲染在本地进行，普通规模的图都是秒出。
Q：我的代码会上传到哪里？A：不会。渲染全部在浏览器本地完成，代码不出机器。
Q：可以商用和改源码吗？A：可以。项目是 BSD-3 协议，界面样式在style.css，渲染逻辑入口看 main.js 就行。
Q：DOT 语言要学多久？A：入门只需要三样东西——节点、连线、属性。编辑器自带语法高亮，照着预置示例改几遍就会。
适合谁用
适合写技术文档的工程师、临时需要出一张图又不想学专业工具的人，以及想把图定义当代码做版本管理的小团队；它不负责手绘风和拖拽精调——那是专业绘图软件的地盘。
现在就把上面那三行命令复制进终端，打开http://localhost:8000，把示例代码换成你自己的节点和连线——图就出来了。
【免费下载链接】GraphvizOnlineLet's Graphviz it online项目地址: https://gitcode.com/gh_mirrors/gr/GraphvizOnline
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
