在博客园markdown中使用mermaid

本文主要是介绍在博客园markdown中使用mermaid，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

博客后台 -> 设置 -> 页首HTML代码.

添加以下代码:

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

之后就可以愉快的使用mermaid画图了.

例如:

<div class="mermaid">
gantt
	title Gantt Demo
	dateFormat YYYY-MM-DD

	section A
	Start: d1, 2014-01-01, 21d

	section B
	Up: d2, after d1, 31d

	section C
	Down: d3, after d2, 11d

        section D
        Complete: d4, after d3, 16d
</div>

结果如下

备注: 在写作过程中博客园实时预览md不会渲染mermaid, 博文发布以后页面会正常显示.

这篇关于在博客园markdown中使用mermaid的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！