Open source that changes a text file that follows a specific format into an image file in various formats such as png, svg, pdf.
You can also test at the following demo site. http://blockdiag.com/ja/blockdiag/demo.html
Installation procedure on Windows.
$ pip install webcolors
$ easy_install pillow
$ easy_install blockdiag
http://blockdiag.com/ja/blockdiag/introduction.html
Prepare the following files.
blockdiag {
//It seems that it will be a comment if the symbol is at the beginning
/*comment*/
#comment
(comment
>comment
"comment"
//Set font etc.
default_fontsize = 24;
// -,>Use the direction of the arrow with
node_id1 -> node_id2;
node_id3 <- node_id4;
node_id5 -- node_id6;
node_id7 <-> node_id8;
//Multiple nodes can be grouped
//Grouped nodes are surrounded by a color frame
group {
node_id6; node_id8;
}
}
#png conversion
$ blockdiag simple.diag
#svg conversion
$ blockdiag -Tsvg simple.diag
Attributes for changing the shape of the node and the font settings on the node.
| item | item内容 | Set value | Set value内容 | Setting Example | Default value |
|---|---|---|---|---|---|
| label = String | Define the string displayed on the node. | B [label = "Title"]; | If omitted, the node ID is the label. | ||
| style = Type of line | Specify the type of border that surrounds the node. | Solid line when omitted. | |||
| dotted | dotted line. | B [style = dotted]; | |||
| dashed | Dashed line. | C [style = dashed]; | |||
| Number, Number, ... | Specify the line length and blank length alternately, separated by commas. | D [style = "3,3,3,3,15,3"]; | |||
| color = #RRGGBB or colorname | Specify the background color of the node. | White if not specified. | |||
| none | Transparent color | B [color = none]; | |||
| pink,red,blue,green etc. | Specified color | C [color = pink]; | |||
| #NNNNNN | #NNNNNN format | D [color = "#888888"]; | |||
| numbered = Integer | Specify the number to be displayed on the upper right of the node. | B [numbered = 99]; | |||
| C [numbered = A]; | |||||
| shape = Type of shape | Specify the shape of the node. | If omitted, box | |||
| box | Rectangle | A [shape = "box"]; | |||
| routebox | Rounded rectangle | A [shape = "roundedbox"]; | |||
| diamond | rhombus | A [shape = "diamond"]; | |||
| eclipse | ellipse | A [shape = "ellipse"]; | |||
| cloud | cloud | A [shape = "cloud"]; | |||
| note | Abstract shapes in text files | A [shape = "note"]; | |||
| Email abstract shapes | A [shape = "mail"]; | ||||
| actor | Human | A [shape = "actor"]; | |||
| minidiam | Small rhombus | A [shape = "minidiamond"]; | |||
| beginpoint | Starting point (black point) | A [shape = "beginpoint"]; | |||
| endpoint | End point (double circle) | A [shape = "endpoint"]; | |||
| dots | Three vertical black dots | A [shape = "dots"]; | |||
| flowchart.condition | Branch (diamond) | A [shape = "flowchart.condition"]; | |||
| flowchart.database | Database (cylinder) | A [shape = "flowchart.database"]; | |||
| flowchart.input | Input file (diamond) | A [shape = "flowchart.input"]; | |||
| flowchart.loopin | Start iterative processing | A [shape = "flowchart.loopin"]; | |||
| flowchart.loopout | End of iterative processing | A [shape = "flowchart.loopout"]; | |||
| flowchart.terminator | Processing (rounded rectangle) | A [shape = "flowchart.terminator"]; | |||
| background = background image | Specify the background image to be displayed on the node. Specify by file path or URL. | A [label = "", background = "_static/python-logo.gif"]; | |||
| stacked | Put multiple nodes on top of each other. | A [stacked]; | |||
| B[shape = "ellipse", stacked]; | |||||
| description = description | If you are using the desctable option with your Sphinx extension, you'll see a description table for each node below the figure. | C [label = "title", description = "Description"]; | |||
| icon = Image file | Specify the icon image to be displayed on the node. Specify by file path or URL. | A [icon = "_static/feed-icon-legacy_orange.png "]; | |||
| textcolor = #RRGGBB or colorname | Specify the color of the label string of the node. | Black when omitted. | |||
| none | Transparent color | B [textcolor = none]; | |||
| pink,red,blue,green etc. | Specified color | C [textcolor = pink]; | |||
| #NNNNNN | #NNNNNN format | D [textcolor = "#888888"]; | |||
| width = Integer | Specify the width of the node. | The default is 128. | |||
| height = Integer | Specify the height of the node. | The default is 40. | |||
| fontsize = Integer | Specify the font size of the label attribute of the node. | The default is 11. | |||
| rotate = Integer | Specify the rotation angle of the label. 0, 90, 180,You can set any value of 270. | The default is 0. | |||
| 0 | |||||
| 90 | |||||
| 180 | |||||
| 270 |
A line connecting the nodes.
| item | item内容 | Set value | Set value内容 | Setting Example | Default value |
|---|---|---|---|---|---|
| label = String | Display a short sentence on the edge. | ||||
| style = Type of edge line | Specify the line type of the edge. | Solid line when omitted | |||
| dotted | Connect with a dotted line. | A -> B [style = dotted]; | |||
| dashed | Connect with a broken line. | B -> C [style = dashed]; | |||
| none | Erase the edge. | C -> D [style = none]; | |||
| Number, Number, ... | Specify the line length and blank length alternately, separated by commas. | D -> E [style = "3,3,3,3,15,3"]; | |||
| hstyle = Type of head shape | Specify the shape of the arrow. | ||||
| generalization | Generalization | A -> B [hstyle = generalization]; | |||
| composition | Composition | B -> C [hstyle = composition]; | |||
| aggregation | Aggregation | C -> D [hstyle = aggregation]; | |||
| color = #RRGGBB or colorname | Specify the edge color. | Black when omitted. | |||
| none | Transparent color | B -> C [color = "none"]; | |||
| pink,red,blue,green etc. | Specified color | B -> C [color = "pink"]; | |||
| #NNNNNN | #NNNNNN format | B -> C [color = "#888888"]; | |||
| dir = direction | Specify the direction of the arrow. | ||||
| none | Connect nodes without drawing an arrow. | A -> B [dir = none]; | |||
| forward | Draw an arrow from the left node to the right node, or from the top node to the bottom node. | B -> C [dir = forward]; | |||
| back | Draw an arrow from the right node to the left node, or from the bottom node to the top node. | C -> D [dir = back]; | |||
| both | Write arrows on both. | D -> E [dir = both]; | |||
| folded | Fold the edge. | C -> D [folded]; | |||
| textcolor = #RRGGBB or colorname | Specify the color of the edge label. Black when omitted. | ||||
| none | Transparent color | A -> B[label=title, textcolor=none]; | |||
| pink,red,blue,green etc. | Specified color | A -> B[label=title, textcolor=pink]; | |||
| #NNNNNN | #NNNNNN format | A -> B[label=title, textcolor=#888888]; | |||
| thick | Thicken the edges. | B -> D[thick]; | |||
| fontsize = Integer | Specify the font size of the edge label. | A -> B [label='text', fontsize=16]; | The default is 11. |
Settings for the entire shape.
| item | item内容 | Set value | Set value内容 | Setting Example | Default value |
|---|---|---|---|---|---|
| node_width = Integer | Specify the width of the node. | node_width = 200; | The default is 128. | ||
| node_height = Integer | Specify the height of the node. | node_height = 100; | The default is 40. | ||
| span_width = Integer | Specify the width between nodes. | span_width = 240; | The default is 64. | ||
| span_height = Integer | Specify the vertical width between nodes. | span_height = 120; | The default is 40. | ||
| default_fontsize = Integer | Specify the font size to use for the node label attribute. | default_fontsize = 24; | The default is 11. | ||
| default_shape = Shape | Specify the default node shape. | The default is box. | |||
| box | Rectangle | ||||
| routebox | Rounded rectangle | ||||
| diamond | rhombus | ||||
| eclipse | ellipse | ||||
| cloud | cloud | ||||
| note | Abstract shapes in text files | ||||
| Email abstract shapes | |||||
| actor | Human | ||||
| minidiam | Small rhombus | ||||
| beginpoint | Starting point (black point) | ||||
| endpoint | End point (double circle) | ||||
| dots | Three vertical black dots | ||||
| flowchart.condition | Branch (diamond) | ||||
| flowchart.database | Database (cylinder) | ||||
| flowchart.input | Input file (diamond) | ||||
| flowchart.loopin | Start iterative processing | ||||
| flowchart.loopout | End of iterative processing | ||||
| flowchart.terminator | Processing (rounded rectangle) | ||||
| orientation = portrait | In vertical writing mode. | Horizontal writing mode when omitted. | |||
| default_node_color = #RRGGBB or colorname | Specify the default color of the node. | White when omitted. | |||
| none | Transparent color | default_node_color = none; | |||
| pink,red,blue,green etc. | Specified color | default_node_color = pink; | |||
| #NNNNNN | #NNNNNN format | default_node_color = "#888888"; | |||
| default_group_color = #RRGGBB or colorname | Specify the default color for the group. | The default is orange. | |||
| none | Transparent color | default_group_color = none; | |||
| pink,red,blue,green etc. | Specified color | default_group_color = pink; | |||
| #NNNNNN | #NNNNNN format | default_group_color = "#888888"; | |||
| default_linecolor = #RRGGBB or colorname | Specifies the default color for node borders and edges. | Black when omitted. | |||
| none | Transparent color | default_linecolor = none; | |||
| pink,red,blue,green etc. | Specified color | default_linecolor = pink; | |||
| #NNNNNN | #NNNNNN format | default_linecolor = "#888888"; | |||
| default_textcolor = #RRGGBB or colorname | Specify default colors for node labels, edge labels, and group labels. | Black when omitted. | |||
| none | Transparent color | default_textcolor = none; | |||
| pink,red,blue,green etc. | Specified color | default_textcolor = pink; | |||
| #NNNNNN | #NNNNNN format | default_textcolor = "#888888"; | |||
| edge_layout = normal or flowchart | Specify the Experimental edge layout rule. |
Recommended Posts