本系列介绍 文本转图片 工具支持的图形描述语言。图形描述语言将图片描述为代码或者文本，有利于版本管理，很适合嵌入 LaTeX 或 Markdown 文档。用于网站时，还可以减轻图片存储压力，因为图片可以根据代码在使用时生成。本文是该系列第七篇，介绍 blockdiag。
概述
blockdiag 是一个 simple block-diagram image generator，类似于 Graphviz 的 DOT 语言。用于生成框图或流程图。本文只简单介绍其语法，完整文档请访问其 官方网站。
语法
图属性
设置整个图的属性，语法 attr=value;。全部属性如下：
node_width = Integer
Specify default node width. Default is 128.
node_height = Integer
Specify default node height. Default is 40.
span_width = Integer
Specify default horizontal span between nodes. Default is 64.
span_height = Integer
Specify default vertical span between nodes. Default is 40.
default_fontsize = Integer
Specify default font size used at label attribute. Default is 11.
default_shape = Shape
Specify default node shape. Default is box.
New in version 0.7.2.
orientation = portrait
Set portrait mode. Default is landscape mode.
New in version 0.7.0.
default_node_color = #RRGGBB or colorname
Specify node default color. Default is white.
New in version 0.9.1.
default_group_color = #RRGGBB or colorname
Specify group default color. Default is orange.
New in version 0.9.1.
default_linecolor = #RRGGBB or colorname
Specify node border and edge default color. Default is black.
New in version 0.9.1.
default_textcolor = #RRGGBB or colorname
Specify default color of node label, edge label and group label. Default is black.
New in version 0.9.2.
edge_layout = normal or flowchart
Experimental Specify how to layout edges. Default is normal.以下是一个图属性的例子：
blockdiag {
default_node_color = lightyellow;
default_group_color = lightgreen;
default_linecolor = magenta;
default_textcolor = red;
orientation = portrait;
A -> B -> C;
B -> D;
group {
C; D;
}
}
节点属性
可以用以下语法设置节点属性：
node_id [ attribute ];
node_id [ attribute = value ];
node_id [ attribute = value , attribute = value , … ];使用 ',' 分隔以使用多个属性。如果用于指定属性的字符串包括空格或符号，则需要使用引号包裹。以下是可用属性：
label = String
Specify label which is draw on the node. Default is node_id.
style = Type of line
Specify the line type of node border. Default is solid line.
dotted
Surround with dotted line.
dashed
Surround with dashed line.
Number, Number, …
Specify line length and space length alternately with comma separated.
New in version 0.9.6.
color = #RRGGBB or colorname
Specify node background color. If none is specified, the node becomes transparent. Default is white.
numbered = Integer
Set number to the node.
When you use desctable option on the Sphinx extension, a row named ‘No.’ is added to the table. Use description to enable desctable option.
shape = Type of shape
Specify shape of the node. Default is box. See shape of nodes.
You can use other shapes by using renderer plugins. Please search ‘blockdiagcontrib’ on the PyPi.
New in version 0.6.5: (experimental)
New in version 0.6.6: actor shape
New in version 0.8.2: dots shape
background = background image
Set background image to the node. File path or URL can be used.
stacked
Set nodes to stacked.
New in version 0.8.2.
description = description
When you use desctable option on the Sphinx extension, draw a table below the blockdiag.
Name and description will be shown on the column. Node ID or label attribute will be used to the name.
New in version 0.8.0.
icon = Image file
Set the image on the node. File path or URL can be used.
New in version 0.9.0.
textcolor = #RRGGBB or colorname
Specify node label color. Default is black.
New in version 0.9.2.
width = Integer
Specify the node width. Default is 128.
New in version 0.9.5.
height = Integer
Specify the node height. Default is 40.
New in version 0.9.5.
fontsize = Integer
Specify label font size of the node. Default is 11.
New in version 0.9.7.
rotate = Integer
Specify angle of text rotation. 0, 90, 180 and 270 are supported. Default is 0.以下是一个示例：
blockdiag {
// standard node shapes
box [shape = "box"];
roundedbox [shape = "roundedbox"];
diamond [shape = "diamond"];
ellipse [shape = "ellipse"];
note [shape = "note"];
cloud [shape = "cloud"];
mail [shape = "mail"];
beginpoint [shape = "beginpoint"];
endpoint [shape = "endpoint"];
minidiamond [shape = "minidiamond"];
actor [shape = "actor"];
dots [shape = "dots"];
box -> roundedbox -> diamond -> ellipse;
cloud -> note -> mail -> actor;
minidiamond -> beginpoint -> endpoint -> dots;
// node shapes for flowcharts
condition [shape = "flowchart.condition"];
database [shape = "flowchart.database"];
input [shape = "flowchart.input"];
loopin [shape = "flowchart.loopin"];
loopout [shape = "flowchart.loopout"];
terminator [shape = "flowchart.terminator"];
condition -> database -> terminator -> input;
loopin -> loopout;
}
边属性
可以用以下语法设置边属性：
node_A -> node_B -> … [ attribute ];
node_A -> node_B -> … [ attribute = value ];
node_A -> node_B -> … [ attribute = value , attribute = value , … ];使用 ',' 分隔以使用多个属性。如果用于指定属性的字符串包括空格或符号，则需要使用引号包裹。以下是可用属性：
label = String
Show short strings on the edge.
style = Type of edge line
Specify type of edge line. Default is solid.
dotted
Dotted line.
dashed
Dashed line.
none
Edge is not shown.
Number, Number, …
Specify line length and space length alternately with comma separated.
New in version 0.9.6.
hstyle = Type of head shape
Specify head shape of edge.
New in version 0.7.3.
generalization
generalization
composition
composition
aggregation
aggregation
color = #RRGGBB or colorname
Specify edge color. Default is black. If none is specified, draw a transparent arrow.
dir = direction
Specify direction of edge arrow.
none
Not draw an arrow, just connect nodes.
This is equivalent for A -- B.
forward
Draw an arrow from left node to right node or upside node to downside node.
This is equivalent for A -> B.
back
Draw an arrow from right node to left node or downside node to upside node.
This is equivalent for A <- B.
both
Draw arrows at both side.
This is equivalent for A <-> B.
folded
Fold the edge.
New in version 0.7.5.
textcolor = #RRGGBB or colorname
Specify edge label color. Default is black.
New in version 0.9.2.
thick
Make the edge thick.
New in version 0.9.7.
fontsize = Integer
Specify edge label font size. Default is 11.
New in version 0.9.7.以下是一个例子：
blockdiag {
// Set arrow direction to edges.
A -> B [dir = none];
B -> C [dir = forward];
C -> D [dir = back];
D -> E [dir = both,color=red];
// Same meaning
F -- G -> H <- I <-> J;
}
blockdiag画廊
以上就是全部内容，欢迎到 文本转图片工具 试用。
发表回复