在 vscode 中安装扩展
在 VSCode 中，安装 2 个扩展
- Markdown Preview Enhanced
- Mermaid Markdown Syntax Highlighting
示例
代码语法，参考 Mermaid Preview, 类似其他编程语言，用 ```mermaid 引用画图的内容（如下代码中 mermaid 反引号之前加了一个空格才能作为代码正常显示出来）：
代码
sequenceDiagram
A-->B: Works!
效果：
sequenceDiagram
A-->B: Works!
A-->B: Works!
代码：
graph TB
id1(圆角矩形）-- 普通线 -->id2[矩形];
subgraph 子图
id2== 粗线 ==>id3{菱形}
id3-. 虚线。->id4> 右向旗帜 ]
id3-- 无箭头 ---id5((圆形）)
end
效果：
graph TB
id1(圆角矩形）-- 普通线 -->id2[矩形];
subgraph 子图
id2== 粗线 ==>id3{菱形}
id3-. 虚线。->id4> 右向旗帜 ]
id3-- 无箭头 ---id5((圆形）)
end
代码：
pie
title 产品 X 中的关键成分
" 钙 " : 10.5
" 钾 " : 24.5
" 镁 " : 30.0
" 铁 " : 35.0
效果：
pie
title 产品 X 中的关键成分
"钙" : 10.5
"钾" : 24.5
"镁" : 30.0
"铁" : 35.0
title 产品 X 中的关键成分
"钙" : 10.5
"钾" : 24.5
"镁" : 30.0
"铁" : 35.0
注：typecho 的 MarkdownParse 插件可能需要禁用重新启用才能正常渲染图片
文档参考
