vscode如何在markdown中支持mermaid流程图

vscode如何在markdown中支持mermaid流程图

本经验介绍在vscode中，如何在markdown中支持mermaid流程图。在markdown中支持mermaid流程图可以安装markdown preview mermaid support插件。

首先，打开vscode，切换到插件面板，搜索mermaid。安装如图所示插件。

安装好mermaid插件之后，就可以在markdow中使用了。使用如图的mermaid代码块，图中是未安装插件时的预览。

安装插件之后的预览则发生变化，出现图像。

在mermaid代码块中，可以使用各种mermaid语法，比如可以调整形状样式。

也可以写classDiagram的代码，绘制类的关系图，如图所示。

或者，也可以绘制gantt图等。细节可以查阅mermaid的在线文档。

1、首先，打开vscode，切换到插件面板，搜索mermaid。安装如图所示插件。2、安装好mermaid插件之后，就可以在markdow中使用了。使用如图的mermaid代码块，图中是未安装插件时的预览。3、安装插件之后的预览则发生变化，出现图像。4、在mermaid代码块中，可以使用各种mermaid语法，比如可以调整形状样式。5、也可以写classDiagram的代码，绘制类的关系图，如图所示。6、或者，也可以绘制gantt图等。细节可以查阅mermaid的在线文档。