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 插件可能需要禁用重新启用才能正常渲染图片

文档参考

© Licensed under CC BY-NC-SA 4.0

想想看吧,已经有一百万只猴子坐在一百万台打字机旁,可Usenet就是比不上莎士比。—— Blair Houghton

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!