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

相关推荐
Python之栈1 小时前
再见VS Code!Google IDE 正颠覆传统开发体验
ide·vscode·python
卷卷的小趴菜学编程1 小时前
算法篇-------------双指针法
c语言·开发语言·c++·vscode·算法·leetcode·双指针法
txz20353 小时前
CMake在Windows环境下Visual Studio Code的使用
ide·vscode·编辑器
代码很单纯,复杂的是人。5 小时前
platfromIO(VScode)串口print输出中文乱码
ide·vscode·编辑器
大哥喝阔落5 小时前
vscode_拼写关闭
ide·vscode·编辑器
qq_297504615 小时前
【解决】VsCode中code runner无法使用cin 输入
ide·vscode·编辑器
朴拙数科7 小时前
plaintext 流程图和Markdown 的 Mermaid格式流程图的区别要点
编辑器·vim·流程图
看到我,请让我去学习18 小时前
C语言快速入门-C语言基础知识
c语言·开发语言·c++·vscode
月巴月巴白勺合鸟月半1 天前
一个流程图的后续
流程图·健康医疗
还是鼠鼠1 天前
Node.js 路由 - 初识 Express 中的路由
前端·vscode·前端框架·npm·node.js·express