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

相关推荐
时光之源7 小时前
Labelme安装及使用说明教程
vscode·数据集·cursor·labelme·数据标注
意疏10 小时前
【C语言】解决VScode中文乱码问题
c语言·开发语言·vscode
Dshuishui10 小时前
VSCode 环境下编译运行 C++ 项目
c++·ide·vscode
swear0110 小时前
【VSCODE 插件 rust-analyzer 使用】打开文件夹
ide·vscode·rust
番茄炒西红柿炒洋柿子11 小时前
CC Switch搭建到vscode
vscode·编辑器
Ancelin安心11 小时前
西工大noj(C/C++)100题参考题解及注意事项(2024)
c语言·c++·ide·windows·vscode·算法
Sestid12 小时前
前端AI编程使用技巧(后续会更新cursor和claude code for vscode)
前端·vscode·ai编程·claude·cursor
计算机安禾1 天前
【数据结构与算法】第35篇:归并排序与基数排序
c语言·数据结构·vscode·算法·排序算法·哈希算法·visual studio
仟人斩1 天前
Windows 下把 VSCode 加入右键菜单(注册表方案)
windows·vscode·上下文菜单
樂油1 天前
Claude Code的安装并连接VScode(使用CC Switch或ollama连接)
vscode·ollama·claude code·cc switch