mermaid

简介: mermaid

首先在 body 中引入 mermaid.js 文件。

<!-- mermaid支持 -->
<script src="https://cdn.9xing.cn/mermaid/8.13.4/mermaid.min.js"></script>点击复制复制失败已复制


注意

mermaid.js 文件的引入要放在配置脚本之前


配置:

<script>
    var mermaidNum = 0;
    mermaid.initialize({
        startOnLoad: false
    });
    window.$docsify = {
        markdown: {
            renderer: {
                code: function(code, lang) {
                    if (lang === 'mermaid') {
                        return '<div class="mermaid">' + mermaid.render('mermaid-svg-' + mermaidNum++, code) + '</div>';
                    }
                    return this.origin.code.apply(this, arguments);
                }
            }
        },
    }
</script>
目录
相关文章
|
5月前
|
网络协议 Java
【工具】Mermaid + 大模型画流程图
最近看面试文章关于TCP三次握手和四次挥手的文章,时常会看到有类似的图去描述这样的过程。当然觉得这样的图还是蛮规范的,属于流程图的一种,是否有工具可以自动生成呢?但没有细想,昨天刷V2EX看到也有老哥发出了这样的问题。于是顺着评论区大佬的回答,我GET到了一个工具Mermaid 这里三次握手的图取自小林coding的文章
340 0
|
12月前
162Echarts - 桑基图(Sankey Diagram)
162Echarts - 桑基图(Sankey Diagram)
63 0
|
2月前
|
uml
markdown之mermaid
markdown之mermaid
|
2月前
Typora——如何画流程图 | mermaid-js
Typora——如何画流程图 | mermaid-js
52 0
|
5月前
|
数据可视化 IDE Java
PlanUML和Mermaid哪个好?
PlanUML和Mermaid哪个好?
400 0
|
5月前
|
传感器 算法 搜索推荐
stylus使用方法
stylus使用方法
40 0
Echarts富文本rich的使用实例代码
Echarts富文本rich的使用实例代码
81 0
|
5月前
|
API
Ant Design(antd)的JSX风格表格的一些使用
Ant Design(antd)的JSX风格表格的一些使用
183 0
|
11月前
|
JSON 前端开发 JavaScript
HighChart使用总结
HighChart使用总结
50 0
|
12月前
159Echarts - 桑基图(Sankey Diagram)
159Echarts - 桑基图(Sankey Diagram)
119 0