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

相关推荐
晋人在秦 老K9 小时前
入梦工具箱怎么检测硬件?3步完成CPU-Z跑分测试 硬件检测总出错?图吧工具箱免费功能实测 draw.io 部署指南:私有化流程图服务搭建教程
测试工具·流程图·工具·draw.io
zzywxc7871 天前
AI在金融、医疗、教育、制造业等领域的落地案例(含代码、流程图、Prompt示例与图表)
人工智能·spring·机器学习·金融·数据挖掘·prompt·流程图
战南诚1 天前
前端开发vscode插件 - live server
ide·vscode·编辑器
墨抒颖 msy.plus1 天前
[特殊字符] 从零到一:打造你的VSCode圈复杂度分析插件
ide·vscode·编辑器·插件·cursor
北冥有鱼被烹2 天前
【微知】vscode如何开启markdown的review模式?
ide·vscode·编辑器
携欢2 天前
CodeQL(Mac)安装与测试(Visual Studio)简明指南
ide·vscode·macos
Android小码家2 天前
Vscode + docker + qt 网络监听小工具
vscode·qt·docker
中国胖子风清扬2 天前
Rust 序列化技术全解析:从基础到实战
开发语言·c++·spring boot·vscode·后端·中间件·rust
susu10830189112 天前
如何选择文件夹然后用vscode直接打开
ide·vscode·编辑器
熊猫钓鱼>_>2 天前
在VSCode中更新或安装最新版的npx和uv工具
ide·vscode·uv