给Markdown编辑器加了一个Mermaid支持(
侧边栏壁纸
  • 累计撰写 17 篇文章
  • 累计收到 22 条评论

给Markdown编辑器加了一个Mermaid支持(

拾雨
2024-03-09 / 0 评论 / 131 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2024年05月16日,已超过344天没有更新,若内容或图片失效,请留言反馈。

Mermaid

Mermaid 是一个基于JavaScript的图表工具,可以将Markdown语法的内容渲染成流程图等
然而之前我的博客的编辑器是不支持这个的,所以昨天折腾了一番加入了这个功能(

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

例如上面的代码可以被渲染成下面的流图

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

加入

首先需要在页面中引入JS文件,可以通过Script标签的形式(

<script type="module">
     import mermaid from 'https://npm.elemecdn.com/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
</script>

这里我使用的是国内的CDN,加载速度会快一些,当然也可以用JsDeliver的CDNhttps://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs

引入后会将页面中class=mermaid的元素内容自动渲染成流图,目前已知标签内必须是纯文本,不能有<br/>等,换行标记\n可以有

  sequenceDiagram
      Alice->>Bob: Hello Bob, how are you ?
      Bob->>Alice: Fine, thank you. And you?
      create participant Carl
      Alice->>Carl: Hi Carl
      create actor D as Donald
      Carl->>D: Hi
1

评论 (0)

取消