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

相关推荐
Robot_Nav14 小时前
AI 编程助手 Skill 完全指南:VS Code · Trae CN · Claude Code
人工智能·vscode·skill·trae·claude code
longxibo16 小时前
【Flowable 7.2 源码深度解析与实战-前言】
java·后端·流程图
longxibo17 小时前
【第1章 环境搭建与项目结构解析】
java·后端·流程图
生而为虫18 小时前
在VScode中使用Claude Code agent并配置模型(仅mac电脑实际操作,windows电脑未实际操作如有问题可留言)
windows·vscode·macos
20YC编程社区1 天前
一分钟学会绘制Mermaid流程图
流程图·markdown·mermaid流程图
SKY -dada2 天前
Understand 使用教程
开发语言·c#·流程图·软件构建·敏捷流程·代码复审·源代码管理
千码君20162 天前
flutter: 分享一下基于trae cn 构建的过程
java·vscode·flutter·kotlin·trae
我才是一卓2 天前
2026 Python 入门教程,结合 vscode 和 miniforge/miniconda
开发语言·vscode·python
fox_lht2 天前
onPaint函数流程图
java·eclipse·流程图
lzl20402 天前
VSCode中Codex CLI登录卡在‘Sign in with ChatGPT‘屏幕
ide·vscode·chatgpt·codex