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

相关推荐
捷瑞电子工坊14 小时前
VSCode的配置和一些报错问题
vscode·ubuntu·c/c++·编译报错·开发环境配置·初学者教程·json配置
刘天远15 小时前
企业 Agent 需求怎么写:数据结构、流程图与 Python 校验
数据结构·人工智能·python·流程图
孙小l懒_keep_update1 天前
【VSCODE中的Codex 打不开(页面空白,一直 Loading)】
vscode
面包狗AI4S1 天前
Codex/ChatGPT 反复 Reconnecting(正在重新连接) 5/5 的最简修复方法
人工智能·vscode·chatgpt
与自己和解7411 天前
使用ssh实现 VScode 直连 ubuntu
vscode·ubuntu·ssh
Highcharts.js2 天前
甘特图纵向任务、横向时间显示图表可视化开发|Highcharts甘特图示例
开发语言·前端·javascript·可视化·甘特图·数据可视化·highcharts
捷瑞电子工坊2 天前
Ubuntu 下安装 VSCode 和 gcc 的简单步骤
vscode·ubuntu·代码编辑器·安装教程·gcc·deb·snap
sunoo-2292 天前
【网络编程 + 数据库】select 与 epoll 核心区别详解 + SQLite 入门到 C 接口全攻略
linux·网络·数据库·vscode·学习·sqlite
2501_915106322 天前
第一次开发 iPhone App,可能碰到的问题,解决办法
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
一只鹿鹿鹿2 天前
SCM流程图参考(PPT文件)
大数据·数据库·web安全·系统安全·流程图