Markdown 中使用 mermaid画图

在 vscode 中安装扩展

在 VSCode 中,安装 2 个扩展

  • Markdown Preview Enhanced
  • Mermaid Markdown Syntax Highlighting

示例

代码语法,参考 Mermaid Preview, 类似其他编程语言,用 ```mermaid 引用画图的内容(如下代码中 mermaid 反引号之前加了一个空格才能作为代码正常显示出来):

代码

  sequenceDiagram
  A-->B: Works!

效果:

sequenceDiagram
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

注:typecho 的 MarkdownParse 插件可能需要禁用重新启用才能正常渲染图片

文档参考


评论(没有评论)