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>
目录
相关文章
|
6月前
|
网络协议 Java
【工具】Mermaid + 大模型画流程图
最近看面试文章关于TCP三次握手和四次挥手的文章,时常会看到有类似的图去描述这样的过程。当然觉得这样的图还是蛮规范的,属于流程图的一种,是否有工具可以自动生成呢?但没有细想,昨天刷V2EX看到也有老哥发出了这样的问题。于是顺着评论区大佬的回答,我GET到了一个工具Mermaid 这里三次握手的图取自小林coding的文章
423 0
162Echarts - 桑基图(Sankey Diagram)
162Echarts - 桑基图(Sankey Diagram)
78 0
|
1月前
Pixi入门第二章:绘制各种图形
这篇文章是Pixi.js入门系列的第二章,重点在于如何使用Pixi.js绘制各种基本图形,如矩形、圆角矩形、圆形和椭圆,并提供了具体的代码示例。
37 0
Pixi入门第二章:绘制各种图形
|
3月前
|
uml
markdown之mermaid
markdown之mermaid
|
3月前
Typora——如何画流程图 | mermaid-js
Typora——如何画流程图 | mermaid-js
74 0
|
6月前
|
数据可视化 IDE Java
PlanUML和Mermaid哪个好?
PlanUML和Mermaid哪个好?
608 0
|
6月前
|
设计模式 数据可视化 程序员
不会画uml?推荐使用代码画图的工具PlantUml
不会画uml?推荐使用代码画图的工具PlantUml
598 1
62Echarts - 饼图(Nightingale's Rose Diagram)
62Echarts - 饼图(Nightingale's Rose Diagram)
39 0
159Echarts - 桑基图(Sankey Diagram)
159Echarts - 桑基图(Sankey Diagram)
127 0
|
数据可视化 JavaScript 前端开发
【Mermaid】画图工具使用笔记
【Mermaid】画图工具使用笔记
216 0