markdown 流程图js_Markdown 进阶 - PlantUML 绘图

本文使用 Zhihu On VSCode 创作并发布

PlantUML 是基于 Java 语言的开源 UML（Unified Modeling Language）图形绘制工具，因为其可以单独绘图，又可以嵌入 Markdown 以及 HTML，因而被不少开发文档采用。PlantUML 可以看作是著名绘图工具 Graphviz 的封装。相比于 Graphviz 的 Geek 风，PlantUML 的颜值更高。而与 Mermaid.js 相比，其支持的图形种类更为多样。

PlantUML 支持的图形可简单分为三种类型

• 基本类：流程图、时序图、Gantt 图
• 工程类：类图、实体关系图、用例图、组件图
• 导图类：思维导图、组织结构导图
  当然在上述提及的图形之外，PlantUML 还支持一些其他的图形，详情请见官网

https://plantuml.com​plantuml.com

关于 PlantUML 的使用也不复杂，先安装 GraphViz，建议使用包管理器安装

关于包管理器的使用，本专栏里有专门的介绍，这里不再赘述

对 Windows，使用 Scoop 或 Chocolatey

scoop install graphviz
choco install graphviz

对 MacOS，使用 Homebrew

brew cask install graphviz

在 VSCode 中，安装2个扩展

• Markdown Preview Enhanced
• PlantUML

然后，就可以在 Markdown 愉快地使用 PlantUML 了。

基本类型

流程图

@startuml

start
:new page;
if (Page.onSecurityCheck) then (true)
  :Page.onInit();
  if (isForward?) then (no)