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

相关推荐
生信碱移13 小时前
Vscode 连接 ipynb 选择内核无法自动显示 conda 环境对应的 python
服务器·人工智能·经验分享·vscode·python
爱就是恒久忍耐13 小时前
VSCode里clangd如何配置跳转
ide·vscode·编辑器
SmartManWind13 小时前
vscode中claude-code插件wsl中开启自动模式
ide·vscode·编辑器·claude code
Watink Cpper15 小时前
VSCode通过ChatGPT5.5登陆codex:sign-in could not be complete 问题解决方案
ide·vscode·编辑器·codex·gpt5.5
项目管理者1 天前
项目计划制定新手实战指南
甘特图·敏捷流程
小庞在加油1 天前
从qmake到CMake+VSCode:Qt项目现代化迁移与AI提效实战指南
vscode·qt·ai·ai工具
utf8mb4安全女神1 天前
HTML网页【vscode】【Linux】
ide·vscode·编辑器
S-码农2 天前
vscode 通过 SSH 远程控制 Ubuntu
vscode·ubuntu·ssh
A.说学逗唱的Coke2 天前
【大模型专题】AI Copilot 完整实践指南:VSCode + GitHub Copilot Agent 模式全攻略
人工智能·vscode·copilot