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

相关推荐
landian00412 小时前
vscode对于txt格式文件使用tab缩进为3个空格
ide·vscode·编辑器
q***046313 小时前
[golang][MAC]Go环境搭建+VsCode配置
vscode·macos·golang
ZhongruiRao13 小时前
vscode windows免密登录Linux服务器教程 解决设置后仍需要输入密码的问题
linux·服务器·vscode
阿阿阿阿里郎13 小时前
Vscode+STM32CubeMX+Cmake联合开发教
ide·vscode·编辑器
77wpa14 小时前
VS Code(Visual Studio Code)开发调试 C/C++ 工程配置
c++·vscode
vortex514 小时前
为什么我把VSCode换成了Code-Server
ide·vscode·编辑器
ZeroNews内网穿透15 小时前
公网访问本地搭建开源在线流程图工具Draw.io
服务器·数据库·网络协议·安全·http·流程图·draw.io
khatung17 小时前
借助Electron打通平台与用户通知(macOS系统)
前端·javascript·vscode·react.js·macos·electron·前端框架
K***658917 小时前
vscode配置django环境并创建django项目(全图文操作)
vscode·django·sqlite
学技术的大胜嗷17 小时前
如何在 VSCode 中高效开发和调试 C++ 程序:面向用过 Visual Studio 的小白
c++·vscode·visual studio