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

相关推荐
Joyce_JTR14 小时前
【vscode】vscode上plantuml安装和使用
ide·vscode·编辑器
Theliars16 小时前
Ubuntu 上使用 VSCode 调试 C++ (CMake 项目) 指南
c++·vscode·ubuntu·cmake
香香爱编程18 小时前
Electron里的electron-window-state 使用
前端·javascript·vue.js·vscode·electron·前端框架
Hy行者勇哥1 天前
VSCode 插件开发实战:从零打造「文件模板快建」工具,吃透扩展生态核心技术
ide·vscode·编辑器
月起星九1 天前
vscode中claude code插件代理地址设置
ide·vscode·编辑器
myourdream21 天前
获取VSCE_TOKEN用于发布Visual Studio Code扩展
ide·vscode·编辑器
祎直向前2 天前
vscode实现ssh远程连接
ide·vscode·ssh
培林将军2 天前
Visual Studio Code 之C/C++开发编译环境搭建
c语言·c++·vscode
电子_咸鱼2 天前
高阶数据结构——并查集
数据结构·c++·vscode·b树·python·算法·线性回归
Crazy Struggle2 天前
WPF 如何支撑一个灵活的流程图编辑器?
.net·wpf·流程图