GraphvizOnline 完整上手指南不装任何软件用一行行文字 3 分钟生成专业图表【免费下载链接】GraphvizOnlineLets Graphviz it online项目地址: https://gitcode.com/gh_mirrors/gr/GraphvizOnline周五下午 4 点 57 分距离周会还有三分钟leader 突然在群里说把咱们服务间调用关系画张图会上一分钟讲清楚。你的电脑上没装 Visio公司安全策略又不让随便装软件临时找一个能用的绘图工具打开浏览器搜了一圈全是注册、付费、上传文件的套路。那一瞬间你盯着空白的桌面脑子里只有四个字怎么办。其实这个问题早就有个轻巧到几乎没人注意的答案——GraphvizOnline。它是一个完全在浏览器里运行的 Graphviz 图表编辑器不用安装任何东西把图表用文字描述出来回车一下图就自动画好了。今天的文章就用一份可复现的完整路径带你从零跑到第一张图再挖几个连老用户都未必发现的隐藏能力。它究竟厉害在哪三个让人无法拒绝的理由第一零安装、零配置。项目克隆到本地后连依赖都不用装一个 Python 命令就能启动。它把 Graphviz 的 C 语言编译器用 Emscripten 编译成了 JavaScript即项目根目录的viz-global.js排版计算全部在你的浏览器里完成。第二文字即图表。你不需要拖动鼠标、对齐方框、连线。用 DOT 语言描述节点和关系布局交给算法。程序员、文档写作者对这种描述式创作会格外顺手。第三一张 URL 就是一张图。图表内容直接编码进网址复制地址栏就是分享。对比那些要上传文件、生成临时链接的在线工具这个设计领先了不止一个身位。5 步跑通你的第一张图假设你已经在终端里下面每一步都可以直接复制。第 1 步把项目拿下来git clone https://gitcode.com/gh_mirrors/gr/GraphvizOnline cd GraphvizOnline项目自带 ACE 编辑器、viz.js 编译器和全部界面文件没有额外依赖。第 2 步启动本地服务器python3 -m http.server 8000第 3 步打开浏览器访问http://localhost:8000。左侧是代码编辑器右侧是预览区中间的分隔条可以左右拖动双击它还能一键回到 50% 的等分宽度这是main.js里的小彩蛋。第 4 步删掉示例写一段最小的图编辑器里默认有一段带 cluster 的示例代码先全部清空贴入下面这段digraph G { A - B; A - C; B - D; C - D; }语法不用背digraph声明这是一个有向图A - B就是一条从 A 到 B 的箭头。第 5 步等 1.5 秒看图自己长出来编辑停手后页面会自动重新渲染源码里有一个 1.5 秒的防抖机制避免每敲一个字母都重排一次。如果语法有错右侧顶部会出现红色错误提示并把出错原因直接打出来——通常就是少了分号或花括号不匹配。到这里你的第一张图已经跑通了。接下来才是重头戏。换个引擎等于换了种画法在预览区上方的工具条里藏着一个下拉框Engine默认是dot。很多人用了一年都没动过它其实这是 GraphvizOnline 最被低估的功能。DOT 语言只描述谁和谁相连至于怎么摆布这些节点由引擎决定dot分层布局适合流程图、树形结构默认选择neato弹簧模型适合表示距离/关系的网络图circo环形布局适合环路明显的图fdp/sfdp力导向布局适合大而复杂的无向图twopi放射状布局适合有明确中心的星型结构osage/patchwork聚类 / 瓦片布局适合强调分组关系的场景同一段 DOT 代码dot下是一棵规整的树切到circo就变成一个闭环圈。遇到图怎么排都不好看的窘境别急着改代码先换个引擎试试往往一秒见效。一张 URL 就是你的分享卡片这是整个项目里最精巧的设计藏在main.js里。只要你编辑过代码地址栏里#后面的内容就是当前图表的完整定义。也就是说把地址栏复制发给同事对方打开就是同一张图还能继续编辑。无需注册、无需上传、无需任何后端。更省心的是右上角的Share按钮它会把网址生成短链。如果短链服务暂时连不上代码会自动降级——用 LZString 压缩算法把图表内容压缩进网址参数对应?compressed前缀照样能分享。压缩后的网址往往短得惊人几十行 DOT 代码能压成一串不到百字符的链接。此外?url参数还能直接加载任意公开网址或 Gist 里的 DOT 定义让远程读取图表变成一行 URL 的事配合 Gist 还能顺带实现版本管理。藏在演示场景里的彩蛋presentation 模式如果你需要在投屏、会议上只展示图、不暴露代码?presentation参数就是为此设计的。用法是在网址后面追加例如?presentationeditable,hide-optionseditable表示保留一个可以唤出编辑器的按钮hide-options隐藏顶部工具条想要下载或分享按钮就再补上show-download、show-share。一条参数你的页面就从编辑器秒变纯展示看板。另外提一句预览图本身支持滚轮缩放、拖拽平移在触屏设备上还能双指捏合缩放底层用了 Hammer.js 做手势识别。开会时用平板放大细节完全没问题。常见误区与 FAQ误区一以为必须先装 Graphviz。不用。viz-global.js里已经是编译好的 Graphviz 引擎整个工具 100% 前端运行。这也是它能零安装跑起来的根本原因。误区二语法错了一点点图消失了。不是 bug是防错机制。预览区顶部会明确显示错误信息照着改就行。常见雷区语句结尾漏分号、花括号数量不匹配、节点名里用了中文标点。误区三只能导出 SVG。工具条上的 Format 下拉框里有 svg、png、json、xdot、plain、ps 六种格式旁边还有 Show raw output 开关可查看原始输出。导出时点Download就能拿到对应格式的文件图片类格式SVG/PNG直接内嵌在页面里。问改了代码忘了保存关了网页就丢只要地址栏还在内容就在。图表定义始终跟随 URL复制链接等于存档。不过重要内容还是建议存一份 DOT 源文件到本地更稳妥。问中文标签能显示吗可以。DOT 里直接用中文文本即可配合style.css与节点属性如fontname还能调整字号和字体。下一步动手画一张你自己的图GraphvizOnline 的价值总结起来就一句话把画图从拖拽像素变成描述逻辑顺便把分享压缩进一条 URL。它把 Graphviz 几十年的排版积累搬进了浏览器却让使用门槛低到几乎为零。所以别光看。现在就做一件具体的事把你手头一个项目的调用关系或者下周要汇报的流程写成十几行 DOT 文字跑起来看一眼。从最简单的三五个节点开始再慢慢加样式、试引擎。你会发现曾经要折腾半小时的图现在真的是一杯咖啡的时间。好图胜过千言万语而你的下一张图也许就藏在明天那条消息里。【免费下载链接】GraphvizOnlineLets Graphviz it online项目地址: https://gitcode.com/gh_mirrors/gr/GraphvizOnline创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
GraphvizOnline 完整上手指南不装任何软件用一行行文字 3 分钟生成专业图表【免费下载链接】GraphvizOnlineLets Graphviz it online项目地址: https://gitcode.com/gh_mirrors/gr/GraphvizOnline周五下午 4 点 57 分距离周会还有三分钟leader 突然在群里说把咱们服务间调用关系画张图会上一分钟讲清楚。你的电脑上没装 Visio公司安全策略又不让随便装软件临时找一个能用的绘图工具打开浏览器搜了一圈全是注册、付费、上传文件的套路。那一瞬间你盯着空白的桌面脑子里只有四个字怎么办。其实这个问题早就有个轻巧到几乎没人注意的答案——GraphvizOnline。它是一个完全在浏览器里运行的 Graphviz 图表编辑器不用安装任何东西把图表用文字描述出来回车一下图就自动画好了。今天的文章就用一份可复现的完整路径带你从零跑到第一张图再挖几个连老用户都未必发现的隐藏能力。它究竟厉害在哪三个让人无法拒绝的理由第一零安装、零配置。项目克隆到本地后连依赖都不用装一个 Python 命令就能启动。它把 Graphviz 的 C 语言编译器用 Emscripten 编译成了 JavaScript即项目根目录的viz-global.js排版计算全部在你的浏览器里完成。第二文字即图表。你不需要拖动鼠标、对齐方框、连线。用 DOT 语言描述节点和关系布局交给算法。程序员、文档写作者对这种描述式创作会格外顺手。第三一张 URL 就是一张图。图表内容直接编码进网址复制地址栏就是分享。对比那些要上传文件、生成临时链接的在线工具这个设计领先了不止一个身位。5 步跑通你的第一张图假设你已经在终端里下面每一步都可以直接复制。第 1 步把项目拿下来git clone https://gitcode.com/gh_mirrors/gr/GraphvizOnline cd GraphvizOnline项目自带 ACE 编辑器、viz.js 编译器和全部界面文件没有额外依赖。第 2 步启动本地服务器python3 -m http.server 8000第 3 步打开浏览器访问http://localhost:8000。左侧是代码编辑器右侧是预览区中间的分隔条可以左右拖动双击它还能一键回到 50% 的等分宽度这是main.js里的小彩蛋。第 4 步删掉示例写一段最小的图编辑器里默认有一段带 cluster 的示例代码先全部清空贴入下面这段digraph G { A - B; A - C; B - D; C - D; }语法不用背digraph声明这是一个有向图A - B就是一条从 A 到 B 的箭头。第 5 步等 1.5 秒看图自己长出来编辑停手后页面会自动重新渲染源码里有一个 1.5 秒的防抖机制避免每敲一个字母都重排一次。如果语法有错右侧顶部会出现红色错误提示并把出错原因直接打出来——通常就是少了分号或花括号不匹配。到这里你的第一张图已经跑通了。接下来才是重头戏。换个引擎等于换了种画法在预览区上方的工具条里藏着一个下拉框Engine默认是dot。很多人用了一年都没动过它其实这是 GraphvizOnline 最被低估的功能。DOT 语言只描述谁和谁相连至于怎么摆布这些节点由引擎决定dot分层布局适合流程图、树形结构默认选择neato弹簧模型适合表示距离/关系的网络图circo环形布局适合环路明显的图fdp/sfdp力导向布局适合大而复杂的无向图twopi放射状布局适合有明确中心的星型结构osage/patchwork聚类 / 瓦片布局适合强调分组关系的场景同一段 DOT 代码dot下是一棵规整的树切到circo就变成一个闭环圈。遇到图怎么排都不好看的窘境别急着改代码先换个引擎试试往往一秒见效。一张 URL 就是你的分享卡片这是整个项目里最精巧的设计藏在main.js里。只要你编辑过代码地址栏里#后面的内容就是当前图表的完整定义。也就是说把地址栏复制发给同事对方打开就是同一张图还能继续编辑。无需注册、无需上传、无需任何后端。更省心的是右上角的Share按钮它会把网址生成短链。如果短链服务暂时连不上代码会自动降级——用 LZString 压缩算法把图表内容压缩进网址参数对应?compressed前缀照样能分享。压缩后的网址往往短得惊人几十行 DOT 代码能压成一串不到百字符的链接。此外?url参数还能直接加载任意公开网址或 Gist 里的 DOT 定义让远程读取图表变成一行 URL 的事配合 Gist 还能顺带实现版本管理。藏在演示场景里的彩蛋presentation 模式如果你需要在投屏、会议上只展示图、不暴露代码?presentation参数就是为此设计的。用法是在网址后面追加例如?presentationeditable,hide-optionseditable表示保留一个可以唤出编辑器的按钮hide-options隐藏顶部工具条想要下载或分享按钮就再补上show-download、show-share。一条参数你的页面就从编辑器秒变纯展示看板。另外提一句预览图本身支持滚轮缩放、拖拽平移在触屏设备上还能双指捏合缩放底层用了 Hammer.js 做手势识别。开会时用平板放大细节完全没问题。常见误区与 FAQ误区一以为必须先装 Graphviz。不用。viz-global.js里已经是编译好的 Graphviz 引擎整个工具 100% 前端运行。这也是它能零安装跑起来的根本原因。误区二语法错了一点点图消失了。不是 bug是防错机制。预览区顶部会明确显示错误信息照着改就行。常见雷区语句结尾漏分号、花括号数量不匹配、节点名里用了中文标点。误区三只能导出 SVG。工具条上的 Format 下拉框里有 svg、png、json、xdot、plain、ps 六种格式旁边还有 Show raw output 开关可查看原始输出。导出时点Download就能拿到对应格式的文件图片类格式SVG/PNG直接内嵌在页面里。问改了代码忘了保存关了网页就丢只要地址栏还在内容就在。图表定义始终跟随 URL复制链接等于存档。不过重要内容还是建议存一份 DOT 源文件到本地更稳妥。问中文标签能显示吗可以。DOT 里直接用中文文本即可配合style.css与节点属性如fontname还能调整字号和字体。下一步动手画一张你自己的图GraphvizOnline 的价值总结起来就一句话把画图从拖拽像素变成描述逻辑顺便把分享压缩进一条 URL。它把 Graphviz 几十年的排版积累搬进了浏览器却让使用门槛低到几乎为零。所以别光看。现在就做一件具体的事把你手头一个项目的调用关系或者下周要汇报的流程写成十几行 DOT 文字跑起来看一眼。从最简单的三五个节点开始再慢慢加样式、试引擎。你会发现曾经要折腾半小时的图现在真的是一杯咖啡的时间。好图胜过千言万语而你的下一张图也许就藏在明天那条消息里。【免费下载链接】GraphvizOnlineLets Graphviz it online项目地址: https://gitcode.com/gh_mirrors/gr/GraphvizOnline创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
