博客后台 -> 设置 -> 页首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>
结果如下
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备注: 在写作过程中博客园实时预览md不会渲染mermaid, 博文发布以后页面会正常显示.