VSCode中使用Markdown以及Mermaid实现流程图和甘特图等效果

前言

Markdown(简称md)这种文件格式,渐渐盛行起来。有点类似html格式的意思。特别是内嵌的对Marmaid的支持,对流程图、甘特图等的绘制,都非常的方便。

一、安装Markdown的插件

二、创建.md文件

新建一个Markdown文件,如下图:

三、最简单的一个文本实例

这是一个段落。

  • 这是一个列表项

  • 这是另一个列表项

**这是加粗的文字**

点击这个,预览效果。

以下是效果图:

四、增加Mermaid的功能

增加如下的一些插件:

安装完毕后使用甘特图进行测试,发现没有效果,如下图:

右下角有这样的错误提示,再看VSCode左边部分:

采用GitHub账户进行登录。

经过登录认证后,从新回到VSCode

确保Mermaid Plugin安装完整。

五、插件安装完毕后的效果

注意,这个甘特图的代码必须

```mermaid 开始

``` 结束

否则会出现解析的错误,如下图:

流程图开始的时候,我也犯了同样的错误,如下图:

补上```,结果也正确了,如下图:

总体而言VSCode中编辑Mardown文件(md)还是非常方便的。

六、源码链接

https://download.csdn.net/download/quickrubber/90533645

相关推荐
Super 含1 小时前
Android 包体积优化(一):APK 到底大在哪里?从 APK 结构到体积分析
android·ide·vscode
舞动青春884 小时前
vscode copilot配置kimi k3
ide·vscode·copilot
golang学习记1 天前
VS Code 2026年的正确的打开方式
vscode
Highcharts.js2 天前
可视化图表之甘特图Gantt:原理、应用与实践指南
甘特图·数据可视化·highcharts·图表渲染
daols882 天前
vue 甘特图 vxe-gantt 任务条拖拽自动更新日期
javascript·vue.js·甘特图
BIBI20492 天前
Windows 下 Maven 安装与 VSCode 配置
java·windows·vscode·maven·环境搭建·安装教程
weixin_404679312 天前
godot + vscode ai开发
ide·vscode·编辑器·游戏引擎·godot
我一定会有钱2 天前
vscode system下载安装
ide·vscode·编辑器
2401_858286113 天前
VSCODE远程链接错误: 无法建立链接,过程试图写入的管道不存在的解决方法
ide·vscode·编辑器
像风一样自由20203 天前
加强版VScode结合remote-ssh远程连接服务器开发指南
服务器·vscode·ssh