dot 语言画类图和 UML 关系图

开源代码画图软件 graphviz

官网&下载
（可以用 Chrome 翻译看教程）：
https://graphviz.gitlab.io/download/

安装后可以设置拓展名为 .gv 的文件都用 gvedit.exe 打开

gvedit.exe使用说明

示例代码：

digraph G {
  a->b
}

环境变量与命令行

可以在环境变量的 Path 添加安装目录下的 bin 路径
右击我的电脑 -> 属性

高级系统设置

环境变量

Path

新增

D:\Program Files (x86)\Graphviz2.38\bin
英文分号;分隔

添加环境变量后就可以在命令行中生成图片了，命令如下：
dot -Tsvg -O 文件路径
sftp -Tsvg -O 文件路径
第一个是单方向算法
第二个是多方向少交叉算法
-O是根据格式自动补充拓展名
也可以-o加目标路径文件名

VSCode （实时预览编辑器）

加上插件：
Graphviz (dot) language support for Visual Studio Code
Graphviz Preview：Ctrl +Shift + P select “Graphviz: Show Preview”

VScode效果

类图

digraph Class{
    rankdir=BT; // 箭头从下到上
    // 默认方形
    node [shape = "record", fontname = "Consolas"]
    // 默认空箭头
    edge [arrowhead = "empty", fontname = "Consolas"]

    // + 公有 - 私有 # 保护 ~ 包级(默认) 下划线静态 斜体抽象\l左对齐换行
    people [label = "{people
    | +name: String\l
    -age: int\l
    | +getAge(): int\l}"]
    // o- 表示接口
    study [label = "{o- study}"]

    // 继承 extends
    student -> people
    // 实现 implements
    student -> study [style="dashed"]
}

类图

一对多

digraph {
    1 -> n [
        arrowhead = "crow"
        taillabel="1  "
        headlabel="n  "
    ]
}

1-n

多对多

digraph {
    1 -> n [
        dir = "both"
        arrowtail = "crow"
        arrowhead = "crow"
        taillabel="n  "
        headlabel="n  "
    ]
}

n-n

UML(统一建模语言)关系

digraph UML{
    rankdir=LR
    // 设置字体防止乱码
    fontname = "Microsoft YaHei"
    node [fontname = "Microsoft YaHei"]
    edge [fontname = "Microsoft YaHei"]
    
    子类 -> 父类
    [label = "1继承泛化
    Generalization
    extends"
    arrowhead = "empty"]

    接口[label = "接口
    interface"]

    实现 -> 接口
    [label = "2实现
    Realization
    implements "
    arrowhead = "empty"
    style="dashed"]

    主体 -> 工具
    [label = "3依赖
    Dependency"
    arrowhead = "vee"
    style="dashed"]


    主人 -> 被拥有
    [label = "4.1关联
    Association"
    arrowhead = "vee"]

    A -> B
    [label = "4.2双向关联"
    arrowhead = "none"]

    C -> C
    [label = "4.3自身关联"
    arrowhead = "vee"]


    成员 -> 整体
    [label = "5聚合
    Aggregation"
    dir = "both"
    arrowtail = "vee"
    arrowhead = "odiamond"]

    部分 -> 总体
    [label = "6.组合
    Composition"
    dir = "both"
    arrowhead = "diamond"
    arrowtail = "vee"]
}

UML

digraph{
// 设置字体防止乱码
fontname = "Microsoft YaHei"
node [fontname = "Microsoft YaHei"]
edge [fontname = "Microsoft YaHei"]

// 合并使子图上的线隐藏
graph [compound=true]

subgraph cluster_0 {
  里
}

里->外[ltiail=cluster_0]
外->里[lhead=cluster_0]
}

用空白节点控制宽度：

digraph G {
  rankdir=LR
  fontname = "Microsoft YaHei"
  node [fontname = "Microsoft YaHei" shape = "record"]
  edge [fontname = "Microsoft YaHei"]
  // 控制宽度
  width1[style="invis"]
  width[style="invis" label="----------------------------------------------------------------------------------------------------"]
  width1->width[style="invis"]
  { rank=same; width };

}

设置字体对应列表：
新細明體：PMingLiU
細明體：MingLiU
標楷體：DFKai-SB
黑体：SimHei
宋体：SimSun 或任意字符
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋_GB2312：FangSong_GB2312
楷体_GB2312：KaiTi_GB2312
微軟正黑體：Microsoft JhengHei
微软雅黑体：Microsoft YaHei 推荐

其他学习链接

使用graphviz绘制流程图（2015版）：
http://icodeit.org/2015/11/using-graphviz-drawing/?from=timeline