如何优雅的使用MarkDown画UML图

前言

前段时间写设计模式的总结，需要用到类图。但是如果使用OmniGraffle这类的图画出来，再导入。实在有点慢，又有点low。于是摸索出一个比较好的方案。

---

方案

• Plantuml+MarkDown

先在 http://www.plantuml.com/plantuml/uml 上画出需要的UML图，然后将地址通过UML的写法导入。由于本人将plantuml的纪录放在

标签内保存，方便以后的修改。

Plantuml文档:http://plantuml.com/

![单例模式(通用类图)](http://www.plantuml.com/plantuml/svg/SoWkIImgAStDuGh9BCb9LL1wsZlroRxkPoiMFjtJh_6oOTRpAIkURzpzTFO-JIKk1QxadCJYOWNddCpKl18e9pWpBpqdjIG_ZuiBpbImqTE3gK9NLisbhG2qj2GpMI4jCoyn1o6ZOAkGbrgEu6je8fGY5AMdbY2huD9LA2ZAB4iiIKNHMCk5ubQ5QYvTNGMWTrxiRqUeqqCrwzcqdK1FlrYt_-NqTK0375BpKe010m00) 


@startuml
Title "单例模式(通用类图)"
 
class Client
class Singleton

Singleton <.. Client

class Singleton{
+ static final Singleton = new Singleton()
+ static Singleton getSingleton()

- private Singleton()
}

class Client {
-- 通过 Singleton.getSingleton()方式访问
}
@enduml

预计效果:

• Gravizo+MarkDown
  支持有限，并且在MacDown文件内写入时候，中间不能有空行。感觉是作者插件的支持不是特别完善？

这个是给出的样例项目:https://github.com/TLmaK0/gravizo

# CSDN 不支持这样写 (MacDown软件内可以)
![Alt text](https://g.gravizo.com/svg?
  digraph G {
    aize ="4,4";
    main [shape=box];
    main -> parse [weight=8];
    parse -> execute;
    main -> init [style=dotted];
    main -> cleanup;
    execute -> { make_string; printf}
    init -> make_string;
    edge [color=red];
    main -> printf [style=bold,label="100 times"];
    make_string [label="make a string"];
    node [shape=box,style=filled,color=".7 .3 1.0"];
    execute -> compare;
  }
)

# 写法2(上面会有Gravizo标志 作者过于xx)
![Alt text](https://g.gravizo.com/source/svg/thiisthemark?http%3A%2F%2Fwww.gravizo.com)

• CSDN-MarkDown
  支持过少，感觉不怎么行。但是胜在方便。

---

Reference

[1]. CSDN Markdown简明教程4-UML图
[2]. Markdown 绘制 UML 图 – PlantUML + Gravizo
[3]. UML类图几种关系的小结
[4]. http://www.gravizo.com/
[5]. http://plantuml.com/
[6]. http://www.plantuml.com/plantuml/uml/
[7]. https://github.com/TLmaK0/gravizo