使用代码和Graphviz创建逻辑示意图

你有没有画过架构图，发现重复的点击和拖动很乏味？你必须修改那个图表，然后发现它很复杂吗？

Graphviz是一款开源的图形可视化软件，它允许我们使用代码来描述图表，并自动为我们绘制图表。如果将来需要修改图表，我们只需要修改描述，节点和边就会自动重新定位。

在开始编写图形之前，我们需要了解如何将代码转换为图像，以便测试我们正在做什么。

这将安装点CLI等，该CLI可用于从文本文件生成图像：

在上面的示例中，我们将PNG指定为输出(-Tpng)，但是有许多可用选项。正如我们所看到的，输入文件通常使用gv扩展名。

点是用来描述要由Graphviz解析的图形的最常用格式。

如果我们想使用有向图(带箭头的图)，我们需要改用有向图：

有向图MyGraph{a[Shape=box]b[Shape=多边形，边=6]c[Shape=三角形]d[Shape=inv三角形]e[Shape=多边形，边=4，斜=.。5]f[形状=多边形，边=4，扭曲=。5]g[形状=菱形]h[形状=M钻石]i[形状=Msquare]a->；b a->；c a->；d a->；e a->；f a->；g a->；h a->；i}

不同支持的形状可以在其文档的节点形状部分找到。

有向图我的图形{a[style=填充，颜色=绿色]b[周边=4，颜色=蓝色]c[字体颜色=深]d[样式=填充，填充颜色=暗蓝色，颜色=珊瑚4，笔宽=3]e[样式=点线]f[样式=虚线]g[样式=对角线]h[样式=填充，颜色=#34；#333399"；]i[样式=填充，颜色="；#ff000055。]j[形状=框，样式=条纹，填充颜色="；红色：绿色：蓝色#34；]k[样式=楔形，填充颜色=#34；绿色：白色：红色#34；]a->；b a->；c a->；d a->；e b->；f b->；g b->；h b->；i d->；J j->；k}。

有向图MyGraph{a-&>b[dir=Both，Arrohead=open，ArrowTail=inv]a->；c[dir=Both，Arrohead=dot，ArrowTail=invdot]a->；d[dir=Both，Arrohead=ODOT，ArrowTail=Invodot]a->；e[dir=Both，Arrohead=TEE，ArrowTail=Empty]a->；g[目录=两者，箭头=菱形，箭头=长方体]}。

有向图MyGraph{a-&>b[color=#34；Black：red：Blue&34；]a->；c[color=#34；Black：red；0.5：Blue&34；]a->；d[dir=None，color=#34；green：red：Blue&34；]a->；e[dir=None，color="；green：red；3：Blue"；]a->；f[dir=无，color="；橙色"；]d->；g[箭头大小=2.5]d->；h[style=虚线]d->；i[style=doted]d->；j[penwidth=5]}。

如果我们注意上面的代码和图表，我们可以看到，当我们为一个箭头指定多个颜色时，如果我们不指定任何权重，那么每种颜色将有一条线。如果我们希望单个箭头具有多种颜色，则至少必须有一种颜色指定要覆盖的线条的权重百分比：

有向图MyGraph{Begin[Label="；This is Begin"；]End[Label="；]End here"；]Begin->；End}。

有向图MyGraph{Begin[Label="；This is Begin[Label="；，fontcolor=green，fontSize=10]End[Label="；，fontcolor="；It End here"；，fontcolor=red，fontSize=10]Begin->；End[Label="；Begin to End"；，fontcolor=Grey，fontSize=16]}。

簇也称为子图。集群的名称需要以cluster_开头，否则它不会包含在方框中。

有向图MyGraph{subgraph cluster_a{bc->；d}a->；bd->；e}。

有向图MyGraph{subgraph cluster_a{subgraph cluster_b{subgraph cluster_c{d}c->；d}b->；c}a->；b d->；e}。

HTML允许我们创建更复杂的节点，这些节点可以拆分成多个部分。每个部分都可以在图形中独立引用：

有向图MyGraph{a[Shape=明文，Label=<；<；table>；<；tr>；<；td>；Hello<；/td>；<；world！/td>；<；/tr>；<；tr>；<；td colspan="；2&34；port=&。/td>；<；/tr>；<；/table>；>；]b[Shape=纯文本，Label=<；<；表格边框="；0"；celledge="；0"；>；<；tr>；<；td rowspan="；3"；>；td>；top<；/td>；<；td rowspan="；3"；port="；b2"；>；right<；/td>；<；/tr>；<；td port="；b1"；>；center<；/td>；<；/tr。Bottom<；/td>；<；/tr>；<；/table>；>；]a：A1->；b：B1 a：A1->；b：B2}。

只有HTML的子集可以用于创建节点，并且规则非常严格。为了使节点正确显示，我们需要将形状设置为纯文本。

另一个需要注意的重要事情是port属性，它允许我们使用冒号(a：a1)引用特定的单元格。

我们可以设置HTML节点的样式，但只能使用HTML的子集：

有向图我的图形{a[Shape=纯文本，Label=<；<；table；<；tr&>；<；td color="；#ff0000"；bgcolor="；#008822&34；>；font color="；#55ff00&34；>；Hello<；/font<；/td>；&。/tr>；<；tr>；<；td colspan="；2"；color="；#00ff00"；bgcolor="；#ff0000"；>；font color="；#ffffff"；>；您还好吗？<；/font>；<；/td>；<；/。]}

有时，我们希望为节点使用指定图标，这可以通过image属性来实现：

有向图MyGraph{ec2[Shape=None，Label="；"；，image="；icons/ec2.png"；]IGW[Shape=None，Label="；"；，icons/igw.png"；]rds[Shape=None，Label="；"；，image="；icons/rds.png"；]VPC[Shape=None，Label="；"；，image="；icons/rds.png"；]VPC[Shape=。"；，image="；icons/vpc.png"；]子图CLUSTER_VPC{LABEL="；VPC"；SUBGRAM CLUSTER_PUBLIC_SUBNET{Label="；Public Subnet"；EC2}Subgraph CLUSTER_PRIVATE_SUBNET{Label="；Private Subnet"；EC2->；rds}vPC IGW->；EC2}Users->；IGW}。

等级是最难理解的事情之一，因为它们改变了渲染引擎的工作方式。在这里，我只会介绍一些我认为有用的基本内容。

有向图MyGraph{a->；b b->；ca->；da->；c}。

有向图MyGraph{rankdir=lr a->；b b->；c a->；d a->；c}。

也可以使用排名来强制一个节点与另一个节点处于同一级别：

有向图MyGraph{rankdir=lr a->；b b->；c a->；d a->；c{秩=相同；c；b}}。

rankdir属性是全局的，因此不能在集群内更改，但使用RANK可以模拟集群内的LR方向：

有向图MyGraph{子图CLUSTER_A{a1->；a2 a2->；a3{秩=相同；a1；a2；a3}}子图cluster_B{a3->；b1 b1->；b2 b2->；b3{秩=相同；b1；b2；b3}}Begin->；A1}。

有向图MyGraph{SUBGRAM CLUSTER_A{a1 a2 A3{RANK=SAME；a1；a2；A3}}子图CLUSTER_B{b1 b2 b3{RANK=SAME；b1；b2；b3}}BEGIN->；a1 a1->；a2[Constraint=false]a2->；a3[Constraint=false]a3->；b1 b1->；b2 b2->；b3}。

在这篇文章中，我们学习了如何使用Graphviz生成基于声明性语言的图形。这使我在将来绘制架构图和修改它们变得容易得多。

我介绍了我认为对日常使用最重要的功能，但有很多功能我没有介绍，坦白说，我不明白。

[开源网站]