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

相关推荐
daols8815 小时前
vue 甘特图 vxe-gantt 实现双进度条:计划 vs 实际,支持多级子任务拆分
vue.js·甘特图·vxe-table·vxe-gantt
星云_byto2 天前
五分钟从零配置好VSCode + Claude Code + DeepSeek V4 Pro
ide·vscode·编辑器·cursor·codex·claude code·deepseekv4
你家人养牛2 天前
OOC Relation Plugin:C 语言面向对象 开发的高效辅助工具
c语言·vscode
林熙蕾LXL2 天前
VSCode调试
ide·vscode·编辑器
菜地里的小菜鸟3 天前
vscode接入claudecode
vscode·claude code·vscode接入claudecode
π同学3 天前
ESP-IDF+vscode开发ESP32第十七讲——USB设备栈
vscode·esp32·usb
逍遥德3 天前
前端工程化-01:前端工程化技术栈
前端·javascript·vue.js·vscode
项目管理者3 天前
PMP 专业项目管理软件核心应用场景指南
人工智能·甘特图·敏捷流程
爱就是恒久忍耐20 天前
VSCode里如何比较2个branch
ide·vscode·编辑器
意法半导体STM3221 天前
【官方原创】如何为STM32CubeMX2配置Visual Studio Code配置方案
vscode·stm32·单片机·嵌入式硬件·策略模式·stm32cubemx·嵌入式开发