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

相关推荐
火车叨位去19499 小时前
用Java实现rpc的逻辑和流程图和核心技术与难点分析
java·rpc·流程图
要加油哦~13 小时前
工具 | 解决 VSCode 中的 Delete CR 问题
ide·vscode·编辑器
taoismimortal1 天前
vscode目录,右键菜单加入用VSCode打开文件和文件夹(快速解决)(含删除)(脚本)
ide·vscode·编辑器
猫咪的白手套1 天前
解决VSCode中“#include错误,请更新includePath“问题
ide·vscode·编辑器
数据爬坡ing1 天前
软件工程之可行性研究:从理论到实践的全面解析
大数据·流程图·软件工程·可用性测试
Watermelo6171 天前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化
天安彩1 天前
mac下 vscode 运行 c++无法弹出窗口
c++·vscode·macos·clang
白日与明月1 天前
Hive-vscode-snippets
hive·hadoop·vscode
橘子味的茶二2 天前
vsCode如何远程服务器不需要每次输入密码
服务器·ide·vscode
William.csj2 天前
VSCode——python选择解释器消失的解决办法
vscode·编辑器