如何快速美化你的ruby-graphviz图表：节点形状、颜色与样式完全指南-平芜编程栈

如何快速美化你的ruby-graphviz图表：节点形状、颜色与样式完全指南

【免费下载链接】Ruby-Graphviz[MIRROR] Ruby interface to the GraphViz graphing tool项目地址: https://gitcode.com/gh_mirrors/ru/Ruby-Graphviz

Ruby-Graphviz 是一款功能强大的Ruby版GraphViz绘图接口，用几行代码就能画出流程图、依赖图与架构图。本文围绕节点形状、颜色与样式三大美化手段展开，带你快速产出专业美观的图表，无需任何设计基础。

🚀 5 分钟上手：安装与第一张图

一行命令安装（需先安装 GraphViz 程序本体）：

gem install ruby-graphviz

创建第一张有向图（基础用法见项目根目录README.md）：

require 'ruby-graphviz' g = GraphViz.new(:G, :type => :digraph) hello = g.add_nodes("Hello") world = g.add_nodes("World") g.add_edges(hello, world) g.output(:png => "hello.png")

运行后即得到hello.png。接下来，我们把它变得更漂亮。

🔷 节点形状：让流程一眼看懂（shape 属性速查）

默认情况下所有节点都是椭圆。在add_nodes时传入:shape即可更换形状：

形状值	效果	典型用途
`ellipse`	椭圆（默认）	普通步骤
`box`	矩形	处理、函数
`diamond`	菱形	判断、分支
`hexagon`	六边形	准备动作
`circle`/`doublecircle`	圆 / 双圆	起止点
`record`	表格记录框	数据库表、结构体

g.add_nodes("判断", :shape => "diamond")

菱形判断节点的完整示例：examples/sample17.rb
record记录形状（类似数据库表结构）：examples/sample31.rb
SDL 流程图自定义形状（sdl_procedure_start、sdl_save等）：examples/sample30.rb

💡 项目示例中还能看到Mdiamond、Msquare等 SDL 形状写法，参考examples/sample12.rb。

🎨 颜色系统：颜色名、十六进制、HSV 三种写法

Ruby-Graphviz 在lib/graphviz/utils/colors.rb中内置了完整的颜色换算系统，三种写法任选：

颜色名："lightblue"、"firebrick"—— 内置 COLORS 表收录 100 多种颜色，从aliceblue到teal一应俱全；
十六进制："#FF0000"（还支持#RRGGBBAA带透明度）；
HSV：".7 .3 1.0"（色相、饱和度、明度，各取 0~1）。

常用颜色属性一览：

属性	作用
`color`	边框颜色
`fillcolor`	填充颜色（需搭配`style="filled"`）
`fontcolor`	文字颜色
`fontname`/`fontsize`	字体与字号

来自examples/sample02.rb的真实示例——一个蓝紫色填充的矩形节点：

g.add_nodes("compare", :shape => "box", :style => "filled", :color => ".7 .3 1.0")

颜色类型定义见lib/graphviz/types/color.rb，它还支持颜色值与 RGB/HSV 互相转换（to_ruby）。

✏️ 样式与线条：filled、dashed 与箭头

:style是控制"质感"的核心属性，常用值如下：

style 值	效果
`filled`	填充
`solid`/`dashed`/`dotted`/`bold`	实线 / 虚线 / 点线 / 加粗
`rounded`	圆角矩形（配合`box`）
`invis`	隐形节点（仅占位，见`examples/sample17.rb`）

边（edge）还可以进一步精调：

:penwidth线条粗细
:arrowhead/:arrowtail箭头类型：vee、box、diamond、open等（箭头输出处理见lib/graphviz/types/arrow_type.rb）
:weight权重、:minlen最小长度
:label边上文字

一条"红色加粗、带标注"的边只需一行（摘自examples/sample02.rb）：

g.add_edges(main, printf, :color => "red", :style => "bold", :label => "100 times")

所有属性的类型定义集中存放在lib/graphviz/constants.rb，不确定某个属性属于节点、边还是图时，查这里即可。

🌐 全局设置：一次定义，全图生效

在添加节点之前，可以批量设置整张图的默认样式，避免逐个节点重复配置：

g.node[:shape] = "ellipse" # 默认节点形状 g.node[:color] = "black" g.edge[:style] = "filled" g[:size] = "4,4" # 画布尺寸（英寸） g[:rankdir] = "LR" # 从左到右布局

更多布局属性：ranksep（层间距）、nodesep（节点间距）、bgcolor（背景色）、center（整体居中）。完整示例见examples/sample02.rb。

📦 进阶美化：集群分组与输出格式

集群分组：用cluster给节点分组并整体着色，例如cluster.a0 :style => "filled", :color => "white"，参考examples/sample12.rb与examples/sample13.rb；
输出格式：g.output(:png => ...)之外还支持svg、pdf、ps、tiff、bmp等，完整格式列表见lib/graphviz/constants.rb中的FORMATS；
DSL 写法：项目还提供接近 dot 语言的 DSL 风格（lib/graphviz/dsl.rb），喜欢简洁语法的话可以切换试试。