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

相关推荐
dajun1811234561 天前
跨部门工作流泳道图在线绘制工具 PC
大数据·数据库·人工智能·信息可视化·架构·流程图
叶庭云1 天前
一文理解在 VSCode 中成功使用 Claude Code 插件
vscode·插件·api key·vibe coding·claude code·base url·coding agent
zhaqonianzhu2 天前
【vsc】cpptools占用内存过大
vscode
智慧地球(AI·Earth)2 天前
Codex配置问题解析:wire_api格式不匹配导致的“Reconnecting...”循环
开发语言·人工智能·vscode·codex·claude code
markvivv2 天前
在 Kylin Linux Advanced Server for Kunpeng V10 上构建 VSCode 1.106
linux·vscode·kylin
zhangfeng11332 天前
Kiro python环境的设置 中文语言包设置,通用vscode ,因为kiro是vscode基础上做的
开发语言·vscode·python
微醺的老虎2 天前
【工具】vscode格式化json文件
ide·vscode·编辑器
乔宕一2 天前
vscode 设置每次调试 powershell 脚本都使用临时的 powershell 终端
ide·vscode·编辑器
唐装鼠2 天前
linux vscode解压版 AI账号无法登陆问题(浏览器无法打开vscode)
linux·运维·vscode
gravity_w2 天前
vscode配置SSH远程服务器
服务器·经验分享·vscode·ssh