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

相关推荐
假装我不帅16 小时前
wsl+vscode开发.net项目
ide·vscode·.net
小蕾Java17 小时前
【VSCode】Visual Studio Code 2025安装包及安装教程 (附所有版本下载)
ide·vscode·编辑器
达子66618 小时前
用Vscode编译正点原子ESP32例程报错:ninja: error: loading ‘build.ninja‘: 系统找不到指定的文件
ide·vscode·编辑器
热爱生活的五柒19 小时前
vscode如何链接远程服务器里面的docker里面的目录
服务器·vscode·docker
小蕾Java21 小时前
【VSCode】Visual Studio Code 2024安装包及安装教程 (附所有版本下载)
ide·vscode·编辑器
亚林瓜子1 天前
在vscode中全选后,同时在每行行尾,开始多行编辑(Mac版)
ide·vscode·macos
Dobby_051 天前
【Go】C++ 转 Go 第(一)天:环境搭建 Windows + VSCode 远程连接 Linux
linux·运维·c++·vscode·golang
tianyuanwo1 天前
VSCode高效使用完全指南:提升开发效率的系统化实践
ide·vscode·编辑器
LXA08092 天前
VSCode 常用插件全面详解
ide·vscode·编辑器
Sylvan Ding2 天前
VSCode插件推荐 2025 - 拥抱 Agentic Coding 时代:是时候从 PyCharm 切换到 VSCode 生态了!
ide·vscode·pycharm·extension·插件·agentic·氛围编程