在VSCode使用Markdown繪制UML圖

需要插件

• Markdown All in One
• Markdown Preview Enhanced
• PlantUML
• markdownlint

1. Markdown All in One,VSCode中支持Markdown(鍵盤快捷鍵、目錄、自動預覽等)
2. Markdown Preview Enhanced可以對Markdown做增強預覽,比如支持各種繪圖等
3. PlantUML,一款很強大的，並且可以繪制各種圖形的腳本語言。需要安裝java
4. markdownlint是讓VSCode對Markdown文檔進行標記，檢查。他可以提示你寫的markdown是否標准

需要安裝工具

• VSCode
• graphviz
• java

1. Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，並針對網頁開發和雲端應用開發做了優化。軟件跨平台支持 Win、Mac 以及 Linux。https://code.visualstudio.com/
2. Graphviz是開源圖形可視化軟件。圖形可視化是將結構信息表示為抽象圖形和網絡的圖表的一種方式。它在網絡，生物信息學，軟件工程，數據庫和網頁設計，機器學習以及其他技術領域的可視化界面中有重要的應用。 http://graphviz.org/
3. Java 運行時環境:http://java.org

使用PlantUML插件預覽

1. 在http://plantuml.com/下載plantuml.jar
2. 在path配置plantuml.jar環境變量
3. 在VSCode使用快捷鍵Alt+D預覽PlantUML

命令

您必須設置以下環境變量才能使擴展工作：原文鏈接

---

• JAVA_HOME：Java SDK安裝目錄（必須有一個bin子目錄）
• Windows示例： C:\Program Files\Java\jdk1.8.0_101)
• macOS例子： /Library/Java/JavaVirtualMachines/jdk1.8.0_101.jdk/Contents/Home
• PLANTUML_JAR：plantuml.jar文件的路徑
• Windows示例： C:\Users\UserName\bin\plantuml\plantuml.jar
• macOS例子： /usr/local/Cellar/plantuml/8048/libexec/plantuml.jar

如果你想使用PlantUML的功能，需要GraphViz的，你需要設置GRAPHVIZ_DOT環境變量，解釋在這里：

• GRAPHVIZ_DOT：dot可執行二進制文件的路徑
• Windows示例： C:\Program Files\Graphviz\bin\dot.exe
• macOS例子： /usr/local/Cellar/graphviz/2.38.0_1/bin/dot

設置這些環境變量后，您需要重新啟動VSCode才能使擴展工作。

注意：配置完成之后，大家最好在cmd命令測試以下是否可以訪問

$> plantuml.jar
$> dot.exe

### 在Markdown使用PlantUML

'''plantuml  //代碼塊標記為plantuml便於書寫
    @startuml
    interface  ICollectBeganManagerFactory<T>{
    ..創建一個ICollectBegan..
    IDisposableDependencyObjectWrapper<ICollectBegan> Create(CollectTypes collectClassify);
    }
    note right:采集開始管理工廠接口
    interface IDisposableDependencyObjectWrapper{
        Object Object{get;}
    }
    note left of IDisposableDependencyObjectWrapper:ABP內置接口：對象包裝器
    IDisposableDependencyObjectWrapper <.. ICollectBeganManagerFactory : 依賴
    class CollectBeganManagerFactory<T>
    ICollectBeganManagerFactory <|.. CollectBeganManagerFactory : 實現
    @enduml
'''

### 其它Marckdown

* test1
* test2
1. test1描述
2. test2描述

PlantUML官網:http://plantuml.com/

PlantUML之UML文檔:http://plantuml.com/class-diagram

---

在MPE Preview預覽

---

在Markdown使用PlantUML

其它Marckdown

• test1
• test2

1. test1描述
2. test2描述