如何优雅的使用MarkDown画UML图

痛定思痛。 2022-04-12 09:55 704阅读 0赞

### 前言 ###

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

--------------------

### 方案 ###

*  Plantuml+MarkDown

先在 [http://www.plantuml.com/plantuml/uml][http_www.plantuml.com_plantuml_uml] 上画出需要的UML图，然后将地址通过UML的写法导入。由于本人将plantuml的纪录放在`<details></details>`标签内保存，方便以后的修改。

Plantuml文档:[http://plantuml.com/][http_plantuml.com]

![单例模式(通用类图)](/images/20220412/821d5a1e08354ccf86be958e539a687b.png) 
    
    <details>
    @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
    </details>

预计效果:

![单例模式(通用类图)][SoWkIImgAStDuGh9BCb9LL1wsZlroRxkPoiMFjtJh_6oOTRpAIkURzpzTFO-JIKk1QxadCJYOWNddCpKl18e9pWpBpqdjIG_ZuiBpbImqTE3gK9NLisbhG2qj2GpMI4jCoyn1o6ZOAkGbrgEu6je8fGY5AMdbY2huD9LA2ZAB4iiIKNHMCk5ubQ5QYvTNGMWTrxiRqUeqqCrwzcqdK1FlrYt_-NqTK0375BpKe010m00]

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

这个是给出的样例项目:[https://github.com/TLmaK0/gravizo][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)

![Alt text][]

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

--------------------

### Reference ###

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

[http_www.plantuml.com_plantuml_uml]: http://www.plantuml.com/plantuml/uml
[http_plantuml.com]: http://plantuml.com/
[SoWkIImgAStDuGh9BCb9LL1wsZlroRxkPoiMFjtJh_6oOTRpAIkURzpzTFO-JIKk1QxadCJYOWNddCpKl18e9pWpBpqdjIG_ZuiBpbImqTE3gK9NLisbhG2qj2GpMI4jCoyn1o6ZOAkGbrgEu6je8fGY5AMdbY2huD9LA2ZAB4iiIKNHMCk5ubQ5QYvTNGMWTrxiRqUeqqCrwzcqdK1FlrYt_-NqTK0375BpKe010m00]: /images/20220412/821d5a1e08354ccf86be958e539a687b.png
[https_github.com_TLmaK0_gravizo]: https://github.com/TLmaK0/gravizo
[Alt text]: https://g.gravizo.com/source/svg/thiisthemark?http%3A%2F%2Fwww.gravizo.com
[CSDN Markdown_4-UML]: https://blog.csdn.net/whqet/article/details/44281463
[Markdown _ UML _ _ PlantUML _ Gravizo]: https://blog.csdn.net/heqiangflytosky/article/details/77050849
[UML]: https://www.zybuluo.com/linux1s1s/note/158452
[http_www.gravizo.com]: http://www.gravizo.com/
[http_www.plantuml.com_plantuml_uml 1]: http://www.plantuml.com/plantuml/uml/