【注意】最后更新于 March 21, 2018，文中内容可能已过时，请谨慎使用。
为什么要画图
- 直观
- 人脑的容量有限,使用图来抽象复杂的过程
流程图
使用markdown画流程图
语法规则:
定义变量 变量名=>操作: 名称
常用操作 开始(start)结束(end)流程(operation)判断(condition)
连接 ->
判断 condition(yes)或condition(no)
修正连接线位置 变量名(指定方向)或者condition(yes,指定方向) 默认为下
添加url e=>end:>http:baidu.com
输入
1
2
3
4
5
6
7
8
|
st=>start: 用户登陆
op=>operation: 登陆操作
cond=>condition: 登陆成功 Yes or No?
e=>end: 进入后台
st->op->cond
cond(yes)->e
cond(no)->op
|
输出
1
2
3
4
5
6
7
8
|
st=>start: 用户登陆
op=>operation: 登陆操作
cond=>condition: 登陆成功 Yes or No?
e=>end: 进入后台
st->op->cond
cond(yes)->e
cond(no)->op
|
函数调用图
在阅读源码的过程中经常需要记录关键的方法调用关系,我使用DOT语法来画
我自己定义了一些画调用图的规则,可以参考下
- 不同的类使用不同的子图,使用
label标识类名
a->b标识a调用了b- 遇到同名方法则带上参数比如
initializeBean(String,Object, RootBeanDefinition)
源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
public class Test{
public void main(){
a();
b();
}
private void a(){}
private void b(){
c()
}
private void c(){}
new Test2().t2();
}
public class Test2{
public void t2(){}
}
|
输入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
digraph IOC1 {
rankdir="TB"
node [fontname = "Verdana", fontsize = 10, color="skyblue", shape="record"];
subgraph cluster_Test{
label="Test"
main->a [label="1"]
main->b [label="2"]
b->c
}
subgraph cluster_Test2{
label="Test2"
c->t2
}
}
|
输出
时序图
时序图我一般用来做方法调用的抽象表达,函数调用图是非常详细的调用流程,而时序图只画重点流程
markdown也可以画时序图,不过我一般使用plantuml
比如上面的函数调用图转化为时序图就是
输入
1
2
3
4
5
6
7
8
9
|
@startuml
activate Test
activate Test2
Test->Test2:c
@enduml
|
输出
1
2
3
4
5
6
7
8
9
10
11
|
@startuml
activate Test
activate Test2
Test->Test2:c
@enduml
|
plantuml语法
类图
类图可以用于表达类的结构,特别是源码中使用了一些设计模式时,使用类图可以缕清楚结构
使用plantuml绘制类图,极为方便,基本只需要复制源码就行
输入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
interface Advice {
}
interface Interceptor extends Advice{
}
interface MethodInterceptor extends Interceptor{
}
class MethodBeforeAdviceInterceptor implements MethodInterceptor{
}
|
输出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
interface Advice {
}
interface Interceptor extends Advice{
}
interface MethodInterceptor extends Interceptor{
}
class MethodBeforeAdviceInterceptor implements MethodInterceptor{
}
|