程式設計師的優雅繪圖方式:Graphviz 入門

程式設計師的日常工作中，常常需要繪製各式各樣的流程圖、時序圖、狀態圖等等等等……在用 Visio、PPT 之類的繪圖軟體時，經常要為矩形畫多大、畫完擺在哪、線框怎麼配色這樣的問題困擾，只想大喊一聲：「我是程式設計師啊又不是設計師😂」這時候，你就需要一款優雅簡潔的文本繪圖工具，語雀。作為一款深受開發者喜愛的文檔工具，語雀支持 PlantUML、Graphviz、Mermaid 和 Flowchart 四種文本繪圖格式~使用這些文本繪圖格式，你能夠很快很清晰地通過簡單的文字描述，畫出點與點之間的關係，並且有許多布局算法能夠很好的幫你布局，非常適合繪製結構化的圖標和網絡。以下是來自我們可愛的用戶 端端 的 Graphviz 不帶廢話的硬核入門教程：《語雀 Graphviz 教程，包學包會》，文章較長，tips滿滿，建議先馬後看~

語雀官方的Graphviz感覺太複雜，我還是寫一個簡單一點的吧。

graph easy{  a--b [label="你真漂亮"]}
graph easy{  a--b [label="你真漂亮", fontcolor=red, fontsize=34]}
digraph easy {  a -> b [style=dashed];}
box  矩形
polygon
ellipse
circle  圓形
point
egg 蛋形
triangle 三角形
plaintext 使用文字
diamond 鑽石型
trapezium 梯形
parallelogram 斜的長方形
house
hexagon
octagon
doublecircle
doubleoctagon
tripleoctagon
invtriangle
invtrapezium
invhouse
Mdiamond
Msquare
Mcircle
none
record
Mrecord
graph easy {  node [shape=box]  a -- b;}
默認圖是從上到下畫的，你可以用`rankdir = LR`來讓圖從左往右繪製
digraph easy {  rankdir = LR;  a -> b;}
LR  從左往右布局
RL 從右往左布局
TB  從上下往下布局（默認）
BT 從下往上布局
digraph easy {  rankdir = LR;  a -> b;  b -> c;  a -> c;  c -> d;  a -> d;}
digraph easy {  a -> b;   b -> c; }
graph easy{  "直到確定，手的溫度來自你心裡"--"這一刻，也終於勇敢說愛你";  "這一刻，也終於勇敢說愛你" -- "一開始 我只顧著看你, 裝做不經意 心卻飄過去"}
graph easy{  a [label="直到確定，手的溫度來自你心裡"];  b [label="這一刻，也終於勇敢說愛你"];  c [label="一開始 我只顧著看你, 裝做不經意 心卻飄過去"]  a -- b;  b -- c;}
digraph easy{  rankdir = LR;  node [color=Red,shape=egg]  edge [color=Pink, style=dashed]  a -> b;  b -> c;  a -> c;  c -> d;  a -> d;}
digraph easy{  bgcolor=Pink;  b [style=filled, fillcolor=yellow, center=true]  a->b;}
digraph easy{  nodesep = 0.5  header [shape=circle, label="^_^", style=filled, fillcolor=pink]  body [shape=invhouse, label="~ ~\n~ ~\n~ ~", center=true, style=filled, fillcolor=peru]  leftHand [shape=Mcircle, label="", style=filled, fillcolor=palegoldenrod]  rightHand [shape=Mcircle, label="", style=filled, fillcolor=palegoldenrod]    leftFoot [shape=egg, label="", style=filled, fillcolor=palegoldenrod]  rightFoot [shape=egg, label="", style=filled, fillcolor=palegoldenrod]    header->body [arrowhead=crow];  body->leftHand [arrowhead=invodot, penwidth=3, color=cornflowerblue, tailport=ne];  body-> rightHand [arrowhead=invodot, penwidth=3, color=cornflowerblue, tailport=nw];    body -> leftFoot [arrowhead=tee, penwidth=5, color=cornflowerblue]  body -> rightFoot [arrowhead=tee, penwidth=5, color=cornflowerblue]}
一般來說，如果圖沒有渲染出來，都是因為繪圖語法出問題了。我剛剛開始用的時候，就常常把--用在有向圖中，導致圖無法預覽。建議官方可以把報錯信息提示給用戶。目前來說，這個錯誤信息只在控制臺中列印了，需要按F12打開瀏覽器的console界面。看看哪裡出錯了，然後找到對應的位置修改。如果看完還是學不會……那就點擊「閱讀原文」留言給ta！畢竟是ta自己說的「包學包會」嘛 🌚
✌️可能是西湖區最好用的文檔工具✌️