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 小时前
【部署】win10的wsl环境下调试dify的api后端服务
vscode·python·docker·uv·dify·remote-ssh·pyenv
爱吃程序猿的喵3 小时前
基于VSCode+PlatformIO环境的ESP8266的HX1838红外模块
ide·vscode·编辑器·arduino·esp8266·红外线
阿运河11 小时前
如何配置 VScode 断点调试Linux 工程代码
linux·ide·vscode
LXL_2419 小时前
如何安装不同版本的ESP-IDF,并配置Vscode插件,以及在Vscode中切换版本
ide·vscode·编辑器
kaiyuanheshang1 天前
关于VScode的调试
ide·vscode·编辑器·debug·调试
三天不学习1 天前
Visual Studio Code 前端项目开发规范合集【推荐插件】
前端·ide·vscode
是大糊涂不聪明1 天前
VSCode远程无法选择虚拟环境问题
ide·vscode·编辑器
qq_427649061 天前
VScode密钥(公钥,私钥)实现免密登录【很细,很全,附带一些没免密登录成功的一些解决方法】
ide·vscode·ssh·密钥·免密登录·公钥·私钥
视频砖家1 天前
VSCode如何解决打开html页面中文乱码的问题
vscode·编辑器·vscode乱码·vscode中文乱码
HeShen.1 天前
AutoDL+SSH在vscode中远程使用GPU训练深度学习模型
ide·人工智能·vscode·深度学习·ssh·远程工作