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

相关推荐
青椒*^_^*凤爪爪1 小时前
Vscode下调试STM32N6系列单片机的方法
vscode·单片机·stm32n6·stm32n647
程途拾光1582 小时前
一键生成幼儿园安全疏散平面图设计美观合规又省心
论文阅读·安全·平面·毕业设计·流程图·课程设计·论文笔记
chenhdowue3 小时前
vue3甘特图 vxe-gantt 行内显示子任务,拆分任务展示同时可拖拽调整任务日期
vue.js·甘特图·vxe-gantt
Yuer20254 小时前
EDCA OS 介入虚拟货币案件的标准流程图
流程图·edca os·可控ai
风流 少年4 小时前
Markdown之Mermaid流程图
流程图
量子炒饭大师13 小时前
【一天一个计算机知识】—— VScode 极速搭建:打造你的全能代码武器库
ide·vscode·编辑器
程序员贵哥13 小时前
彻底还原VSCode:Windows下完全重置VS Code配置的方法
vscode
石国13 小时前
windows10 win10 pyside6 vscode 安装与配置
vscode·pyside6·windows10
-嘟囔着拯救世界-13 小时前
【保姆级教程】Win11 下从零部署 Claude Code:本地环境配置 + VSCode 可视化界面全流程指南
人工智能·vscode·ai·编辑器·html5·ai编程·claude code
qq_4037425513 小时前
Ubuntu 24.04 安装 LaTeX + VSCode 环境指南
vscode·其他