Markdown 中使用 mermaid画图

在vscode中安装扩展

在 VSCode 中，安装2个扩展

• Markdown Preview Enhanced
• Mermaid Markdown Syntax Highlighting

示例

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

代码

  sequenceDiagram
  A-->B: Works!

效果：

代码：

  graph TB

    id1(圆角矩形)--普通线-->id2[矩形];
    subgraph 子图
    id2==粗线==>id3{菱形}
    id3-.虚线.->id4>右向旗帜]
    id3--无箭头---id5((圆形))
    end

效果：

代码:

pie
    title 产品X中的关键成分
    "钙" : 10.5
    "钾" : 24.5
    "镁" : 30.0
    "铁" : 35.0

效果：

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

文档参考

• 英文文档
• mermaid中文文档
• Markdown 进阶 - Mermaid 绘图

D:/98blog_yh/markdownfiles/工具/网站维护/markdown/mermaid画图.md

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