本系列介绍 文本转图片 工具支持的图形描述语言。图形描述语言将图片描述为代码或者文本，有利于版本管理，很适合嵌入 LaTeX 或 Markdown 文档。用于网站时，还可以减轻图片存储压力，因为图片可以根据代码在使用时生成。本文是该系列第七篇，介绍 blockdiag。
概述
blockdiag 是一个 simple block-diagram image generator，类似于 Graphviz 的 DOT 语言。用于生成框图或流程图。本文只简单介绍其语法，完整文档请访问其 官方网站。
语法
图属性
设置整个图的属性，语法 attr=value;。全部属性如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
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. |
以下是一个图属性的例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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; } } |
节点属性
可以用以下语法设置节点属性：
|
1 2 3 |
node_id [ attribute ]; node_id [ attribute = value ]; node_id [ attribute = value , attribute = value , … ]; |
使用 ',' 分隔以使用多个属性。如果用于指定属性的字符串包括空格或符号，则需要使用引号包裹。以下是可用属性：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
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. |
以下是一个示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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; } |
边属性
可以用以下语法设置边属性：
|
1 2 3 |
node_A -> node_B -> … [ attribute ]; node_A -> node_B -> … [ attribute = value ]; node_A -> node_B -> … [ attribute = value , attribute = value , … ]; |
使用 ',' 分隔以使用多个属性。如果用于指定属性的字符串包括空格或符号，则需要使用引号包裹。以下是可用属性：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
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. |
以下是一个例子：
|
1 2 3 4 5 6 7 8 9 10 |
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画廊
以上就是全部内容，欢迎到 文本转图片工具 试用。
发表回复