foolish fly fox's blog

--Stay hungry, stay foolish.
--Forever young, forever weep.



各种常用图的绘制

在实际工作中,写文档时,我们经常要绘制各种图,下面对各种常见图的绘制都给出一个实例。

首先,需要装好 vscode/atom + markdown preview enhance,并在本地装好各种渲染引擎。如要渲染 vscode/atom 中的viz代码块,需要使用 graphviz 软件,安装方法非常简单,在 Linux 执行 sudo apt install graphviz,在 mac os 下执行 brew install graphviz

如果想要将用dot语法编写的文件转换成 png/jpg/svg/pdf 等,使用方法为:

<cmd> <input-file> -T <format> -o output

如下例:

circo xxx.gv -T png -o xxx.png

用 circo 引擎绘制,输出png格式的文件。<cmd> 还可以用 dotosageneatotwopi

另外,使用 brew 时国外的源通常较慢,可以使用国内的源,如中科大或者清华的镜像,方法:替换及重置Homebrew默认源

如果 Linux 的安装较慢,也可以修改/etc/apt/sources.list,具体方法参见 : http://wiki.ubuntu.org.cn/源列表

在 vscode/atom 绘图方法:https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/diagrams

流程图

使用 flow charts 进行绘制,下面的例子是使用递归方法求解阶乘的函数:

int factorial(n){
    if(n<0){
        printf("错误:n小于0")
        return -1;
    }
    if(n==0)
        return 1;
    return factorial(n-1)*n;
}

其流程图为:

st=>start: 开始:fractial(n)执行
lt_0=>condition: n小于0?
output_lt0=>inputoutput: 打印错误
rt_neg1=>operation: 返回-1
eq_0=>condition: n等于0?
rt_1=>operation: 返回1
calc_sub=>subroutine: 返回n×fractial(n-1)

end=>end: 结束

st->lt_0
lt_0(yes)->output_lt0->rt_neg1->end
lt_0(no)->eq_0(yes)->rt_1->end
eq_0(no)->calc_sub->end
st=>start: 开始:fractial(n)执行 lt_0=>condition: n小于0? output_lt0=>inputoutput: 打印错误 rt_neg1=>operation: 返回-1 eq_0=>condition: n等于0? rt_1=>operation: 返回1 calc_sub=>subroutine: 返回n×fractial(n-1) end=>end: 结束 st->lt_0 lt_0(yes)->output_lt0->rt_neg1->end lt_0(no)->eq_0(yes)->rt_1->end eq_0(no)->calc_sub->end

注意:

数据的结构

下面是网购中的一条消费记录的数据结构:

digraph G{
    node [shape=record]
    consume [label="<customer>消费者|<goods>商品|<prince>价格|购买日期"]
    customer [label="id号|VIP?|生日"]
    goods [label="<productor>生产商|
    {生成地|生产日期|<price>建议价格|保质期}"]
    productor [label="{厂商编号|法人代表}"]

    consume:customer->customer
    consume:goods->goods
    goods:productor->productor
    consume:price->goods:price
    // 子图一定要以cluster为前缀
    subgraph cluster_gr{
        bgcolor=green
        label="goods relative"
        goods
        productor
    }
}

G cluster_gr goods relative consume 消费者 商品 价格 购买日期 customer id号 VIP? 生日 consume:customer->customer goods 生产商 生成地 生产日期 建议价格 保质期 consume:goods->goods consume:price->goods:price productor 厂商编号 法人代表 goods:productor->productor

函数的调用

digraph G{
    makestring [label="make a \nstring"]
    compare [style=filled, fillcolor=gray, 
    shape=box]

    main [shape=box]
    main->parse
    main->init [style=dotted]
    main->printf [style=bold, color=red,
    label="100 times"]
    main->cleanup
    parse->execute
    execute->{printf, makestring}
    init->makestring
    execute->compare [color=red]
}

G makestring make a string compare compare main main parse parse main->parse init init main->init printf printf main->printf 100 times cleanup cleanup main->cleanup execute execute parse->execute init->makestring execute->makestring execute->compare execute->printf

二叉树

digraph G{
    node [shape=record, height=.1]
    l1 [label="<left>|<f1>G|<right>"]
    l2_1 [label="<left>|<f1>E|<right>"]
    l2_2 [label="<left>|<f1>R|<right>"]
    l3_1 [label="<left>|<f1>B|<right>"]
    l3_2 [label="<left>|<f1>F|<right>"]
    l3_3 [label="<left>|<f1>H|<right>"]
    l3_4 [label="<left>|<f1>Y|<right>"]
    l4_1 [label="<left>|<f1>A|<right>"]
    l4_2 [label="<left>|<f1>C|<right>"]    
    l1:left->l2_1:f1
    l1:right->l2_2:f1
    l2_1:left->l3_1:f1
    l2_1:right->l3_2:f1
    l2_2:left->l3_3:f1
    l2_2:right->l3_4:f1
    l3_1:left->l4_1:f1
    l3_1:right->l4_2:f1
}

G l1 G l2_1 E l1:left->l2_1:f1 l2_2 R l1:right->l2_2:f1 l3_1 B l2_1:left->l3_1:f1 l3_2 F l2_1:right->l3_2:f1 l3_3 H l2_2:left->l3_3:f1 l3_4 Y l2_2:right->l3_4:f1 l4_1 A l3_1:left->l4_1:f1 l4_2 C l3_1:right->l4_2:f1

哈希表

digraph G{
    graph [rankdir=LR, nodesep=.05]
    node [shape=record]
    hash [label="<1>|<2>|<3>|<4>|<5>|<6>|<7>|<8>", width=0.1]
    node [width=1.5,height=0.1]
    node1 [label="{<head>n14|719|}"]
    node2_1 [label="{<head>a1|805|<tail>}"]
    node2_2 [label="{<head>o15|794|}"]
    node3 [label="{<head>i9|718|}"]
    node6_1 [label="{<head>e5|989|<tail>}"]
    node6_2 [label="{<head>s19|659|}"]
    node7 [label="{<head>t20|959|}"]
    hash:1->node1:head
    hash:2->node2_1:head
    node2_1:tail->node2_2:head
    hash:3->node3:head
    hash:6->node6_1:head
    node6_1:tail->node6_2:head
    hash:7->node7:head
}

G hash node1 n14 719 hash:1->node1:head node2_1 a1 805 hash:2->node2_1:head node3 i9 718 hash:3->node3:head node6_1 e5 989 hash:6->node6_1:head node7 t20 959 hash:7->node7:head node2_2 o15 794 node2_1:tail->node2_2:head node6_2 s19 659 node6_1:tail->node6_2:head

思维导图

digraph G{
    label="Dot language learning map"
    rankdir=LR
    node [shape=Mrecord, fontsize=12]
    edge [arrowhead=dot,color="#afd275"]
    dot_language [label="DOT\n语言", style=filled, fillcolor="#00bfff"]

    grammar_string [label="字符串"]

    id_char [label="字符"]
    id_string [label="字符串"]

    dot_language->{"布局器", "语法"}
    "布局器"->{dot, circo, neato, twopi, osage}

    语法->{ID, "关键字", grammar_string,
    "分组符号", "属性"}

    ID->id_char->"字母\n数字\n下划线"
    ID->id_string->{"双引号包裹", <尖括号包裹>}

    "关键字"->{"graph","digraph","subgraph",
    "edge","node","strict"}
    "subgraph"->"cluster"

    grammar_string->{"换行:\\n", "拼接:+", "转义","实体字符"}
    "转义"->{"\\*", "\\\\"}

    "分组符号"->{"中括号:属性","大括号:节点"}

    "属性"->{"label","shape","style","fillcolor","bgcolor",
    "color","fontcolor","fontname","fontsize","rankdir",
    "dir","arrowhead","arrowtail","arrowsize"}
}

G Dot language learning map dot_language DOT 语言 布局器 布局器 dot_language->布局器 语法 语法 dot_language->语法 grammar_string 字符串 换行:\\n 换行:\n grammar_string->换行:\\n 拼接:+ 拼接:+ grammar_string->拼接:+ 转义 转义 grammar_string->转义 实体字符 实体字符 grammar_string->实体字符 id_char 字符 字母\n数字\n下划线 字母 数字 下划线 id_char->字母\n数字\n下划线 id_string 字符串 双引号包裹 双引号包裹 id_string->双引号包裹 尖括号包裹 尖括号包裹 id_string->尖括号包裹 dot dot 布局器->dot circo circo 布局器->circo neato neato 布局器->neato twopi twopi 布局器->twopi osage osage 布局器->osage 语法->grammar_string ID ID 语法->ID 关键字 关键字 语法->关键字 分组符号 分组符号 语法->分组符号 属性 属性 语法->属性 ID->id_char ID->id_string graph graph 关键字->graph digraph digraph 关键字->digraph subgraph subgraph 关键字->subgraph edge edge 关键字->edge node node 关键字->node strict strict 关键字->strict 中括号:属性 中括号:属性 分组符号->中括号:属性 大括号:节点 大括号:节点 分组符号->大括号:节点 label label 属性->label shape shape 属性->shape style style 属性->style fillcolor fillcolor 属性->fillcolor bgcolor bgcolor 属性->bgcolor color color 属性->color fontcolor fontcolor 属性->fontcolor fontname fontname 属性->fontname fontsize fontsize 属性->fontsize rankdir rankdir 属性->rankdir dir dir 属性->dir arrowhead arrowhead 属性->arrowhead arrowtail arrowtail 属性->arrowtail arrowsize arrowsize 属性->arrowsize cluster cluster subgraph->cluster \\* \* 转义->\\* \\\\ \\ 转义->\\\\

备注

还有UML之类的图,由于接触比较少,以后用到再进行补充...