用 mermaid 在文章里画图

有些东西用文字讲很绕，画一张图最快。生成器现在支持 mermaid：把代码块的围栏语言标成 mermaid，里面照常写图表定义，页面加载时会自动渲染成矢量图。

下面拿三种常用图各演示一个，顺便当语法示例。

流程图

时序图

状态图

实现上的几个取舍

• 只在有图表的页面加载脚本。mermaid 压缩后 3.4MB，放在列表页和标签页上纯属浪费，所以解析阶段就记下「这篇有没有图」，没有的页面一个字节都不下发。
• 库跟站点一起发布，不走公共 CDN。内网和离线环境照样能显示，也不把读者的访问记录交给第三方。
• 主题跟随系统。深色模式用暗色主题，浅色模式用默认主题——否则深色页面上会突然出现一块白底流程图。
• 没有 JavaScript 时优雅降级。脚本没跑起来的话，看到的是图表源码而不是一片空白。

图比卡片宽的时候会等比缩到容器内，手机上不会被撑破。