给 Nikola 博客添加 mermaid 支持
还是给博客集成了 mermaid 1 图表功能,尽管目前用的很少……与 mathjax 一样,使用的时候给文章添加 mermaid 标签,然后在文章中给描述文本指定 mermaid class 即可。就像这样:
.. class:: mermaid graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[Car]
渲染结果:
graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[Car]
Markdown 文档写作应该也可以用。整个 mermaid 功能的集成只需在博客模板里添加 4 行:
{% if "mermaid" in post.tags %} <script type="text/javascript" src="/assets/js/mermaid.min.js"></script> <script>mermaid.initialize({startOnLoad: true, theme: 'forest'});</script> {% endif %}
使用 if 条件判断是为了仅在必要时才加载 mermaid js 文件,因为其即使压缩后也有 825 KB 的体积,可能会拖慢页面打开速度。mathjax 的情况与此类似,使用频率较低,但据说其完整加载要达到 200 MB 以上。
序列图:
sequenceDiagram participant Alice participant Bob Alice->John: Hello John, how are you? Note right of John: Rational thoughts <br/>prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good!
甘特图:
gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d
警告
很奇怪序列图的 loop 语法不工作,但是使用 "raw" 指令却可以显示……有空再看看。
文章链接:https://macplay.github.io/posts/gei-nikola-bo-ke-tian-jia-mermaid-zhi-chi/
发布/更新于:
版权声明:如无特别说明,本站文章均遵循 CC BY-NC-SA 4.0 协议,转载请注明作者及出处。