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

相关推荐
笨小蛙3 小时前
服务器Docker容器创建与VScode远程连接SSH使用
服务器·vscode·docker·容器·ssh
EstrangedZ5 小时前
使用vscode进行c/c++开发的时候,输出报错乱码、cpp文件本身乱码的问题解决
c语言·c++·vscode
dqsh065 小时前
ESP32-C3 Vscode+ESP-IDF开发环境搭建 保姆级教程
ide·vscode·物联网·编辑器·智能家居·iot
杰哥技术分享9 小时前
VScode-使用技巧-持续更新
ide·vscode·编辑器
Sunny_lxm19 小时前
在 Vue 2中使用 dhtmlxGantt 7.1.13组件,并解决使用时遇到的问题汇总.“dhtmlx-gantt“: “^7.1.13“,
前端·vue.js·甘特图·dhtmlxgantt
Ada大侦探20 小时前
VSCode的下载与安装(2025亲测有效)
ide·vscode·编辑器
学渣6765621 小时前
vscode开发stm32,main.c文件中出现很多报错影响开发解决日志
c语言·vscode·stm32
干啥都是小小白1 天前
如何使用windows下的vscode连接到本地虚拟机的linux
ide·vscode·编辑器
CodingInCV1 天前
cursor/vscode连接低版本的系统(glibc<2.28)
ide·vscode·编辑器
colorful_stars2 天前
vscode连接的linux服务器,上传项目至github
linux·vscode·github